Disable BrowserSync Notification


#1

How do you disable the browsersync notification in Sage? Doing it the default way seems to have no effect. Unless I’m putting it in the wrong place.


#2

This should get rid of the Browsersync one, but the Webpack (HMR) one will still show up.

In resources/assets/build/webpack.config.watch.js:

    new BrowserSyncPlugin({
      target,
      open: config.open,
      proxyUrl: config.proxyUrl,
      watch: config.watch,
      delay: 500,
+    advanced: {
+      browserSync: {
+        notify: false,
+      },
+    },
    }),

The “default way” isn’t the correct way for Sage since it is using @QWp6t’s browsersync-webpack-plugin. Here’s how the options are set:


#3

Ah so there’s no way to remove all the notifications in the corner?


#4

I thought I remember being able to do it, however, now that I’ve looked into it again, I don’t think I did.

The “Rebuilding…” notification is that only thing you can’t get rid of since it’s hardcoded into the plugin:

If you’re okay with just that and you want to disable the Webpack HMR notification, you can add the follow to advanced:

webpackHotMiddleware: { log: false },

Otherwise, :woman_shrugging:.

You could create an issue for the plugin except I’m not sure if it will really be a priority since Sage is looking to switch to a Laravel Mix workflow.


#5

If it’s the positioning that’s your issue I usually write some CSS targeting the notification to move it to the bottom right.

Top right is pesky when developing a mobile menu…