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!