Sage 10 - SASS & Browser Sync

The last three projects I have used Sage + Bud. My experiences are a bit mixed, but I appreciate the effort put into this project. A function that I used a lot was Browsersync, I tried to add this myself but the project doesn’t run well whenever I add this feature.

I have the following setup;


  "devDependencies": {
    "@alpinejs/collapse": "^3.10.2",
    "@roots/bud": "5.8.7",
    "@roots/bud-postcss": "^5.8.7",
    "@roots/bud-sass": "^5.8.7",
    "@roots/bud-tailwindcss": "5.8.7",
    "@roots/sage": "5.8.7",
    "@tailwindcss/forms": "^0.5.2",
    "@tailwindcss/typography": "^0.5.2",
    "alpinejs": "^3.10.2",
    "browser-sync": "^2.27.10",
    "browser-sync-webpack-plugin": "^2.3.0",
    "flickity": "^3.0.0"


 * @typedef {import('@roots/bud').Bud} bud
 * @param {bud} app
const bs = require('browser-sync-webpack-plugin')
module.exports = async (app) => {
     * Application entrypoints
     * Paths are relative to your resources directory
      app: ['@scripts/app', '@styles/app'],
      editor: ['@scripts/editor', '@styles/editor'],

     * These files should be processed as part of the build
     * even if they are not explicitly imported in application assets.

     * These files will trigger a full page reload
     * when modified.
    .watch('resources/views/**/*', 'app/**/*')

     * Target URL to be proxied by the dev server.
     * This should be the URL you use to visit your local development server.

     * Development URL to be used in the browser.

    * Target URL to be proxied by the dev server.
    * This is your local dev server.
      name: 'browser-sync-webpack-plugin',
      make: () => new bs({proxy: ''}),

Is this the right way to add BrowserSync? Because whenever I add a new blade file to the partial folder the browser won’t auto refresh until I stop the current session and use yarn dev command again.

After some time I also get this error in my terminal;

[proxy] › ✖  [HPM] ECONNRESET: Error: socket hang up
    at connResetException (node:internal/errors:691:14)
    at Socket.socketOnEnd (node:_http_client:466:23)
    at Socket.emit (node:events:532:35)
    at endReadableNT (node:internal/streams/readable:1343:12)
    at processTicksAndRejections (node:internal/process/task_queues:83:21) {
  code: 'E

Thanks for any help!

Maybe have a look at this: Lando + Bedrock + Bud/Sage Configuration - #13 by ben