# Sage 10 - SASS & Browser Sync

**URL:** https://discourse.roots.io/t/sage-10-sass-browser-sync/23273
**Category:** sage
**Tags:** browsersync, bud
**Created:** 2022-06-01T09:57:30Z
**Posts:** 2

## Post 1 by @chrisgo — 2022-06-01T09:57:30Z

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;

**package.json**

```
"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"
  }
```

**bud.config.js**

```
/**
 * @typedef {import('@roots/bud').Bud} bud
 *
 * @param {bud} app
 */
const bs = require('browser-sync-webpack-plugin')
module.exports = async (app) => {
  app
    /**
     * Application entrypoints
     *
     * Paths are relative to your resources directory
     */
    .entry({
      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.
     */
    .assets('images')

    /**
     * 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.
     */
    .proxy('http://domain.com.test')

    /**
     * Development URL to be used in the browser.
     */
    .serve('http://0.0.0.0:3000')

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

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!

---

## Post 2 by @cim — 2022-06-01T10:26:20Z

Maybe have a look at this: [Lando + Bedrock + Bud/Sage Configuration - #13 by ben](https://discourse.roots.io/t/lando-bedrock-bud-sage-configuration/22740/13)