Laravel sail BrowserSync

Hope it helps! it's working with me

mix
  .js("resources/js/app.js", "public/js")
  .sass("resources/sass/app.scss", "public/css")
  .browserSync({
    proxy: 'localhost', // your domain test
    port: 32816 // your port
  });

On a fresh laravel project I can't even add mix.browserSync('localhost'); to my webpack file without getting error messages when I run sail npm run dev. I just get unable to resolve dependency tree errors.

Here are the errors in case others are interested:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! Found: [email protected]
npm ERR! node_modules/webpack
npm ERR!   peer webpack@">=2" from [email protected]
npm ERR!   node_modules/babel-loader
npm ERR!     babel-loader@"^8.0.4" from [email protected]
npm ERR!     node_modules/laravel-mix
npm ERR!       dev laravel-mix@"^5.0.1" from the root project
npm ERR!   peer webpack@"^3.0.0 || ^4.0.0" from [email protected]
npm ERR!   node_modules/extract-text-webpack-plugin
npm ERR!     extract-text-webpack-plugin@"v4.0.0-beta.0" from [email protected]
npm ERR!     node_modules/laravel-mix
npm ERR!       dev laravel-mix@"^5.0.1" from the root project
npm ERR!   4 more (file-loader, friendly-errors-webpack-plugin, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer webpack@"^4.0.0" from [email protected]
npm ERR! node_modules/css-loader
npm ERR!   css-loader@"^1.0.1" from [email protected]
npm ERR!   node_modules/laravel-mix
npm ERR!     dev laravel-mix@"^5.0.1" from the root project
npm ERR!   peer css-loader@"*" from [email protected]
npm ERR!   node_modules/vue-loader
npm ERR!     vue-loader@"^15.4.2" from [email protected]
npm ERR!     node_modules/laravel-mix
npm ERR!       dev laravel-mix@"^5.0.1" from the root project

I initially ran npm inside the terminal (WSL2/Ubuntu). For installation npm install works just fine. But npm run watch always resulted in an "Unhandled error event", "Error: listen ENOTSUP: operation not supported on socket".

I am working with Windows 10, Docker (WSL2 in an Ubuntu environment).

After searching I finally managed to get browserSync properly working with following config:

.browserSync({
	host: '127.0.0.1',
	proxy: 'localhost',
	open: false,
	files: [
            'app/**/*.php',
            'resources/views/**/*.php',
            'packages/mixdinternet/frontend/src/**/*.php',
            'public/js/**/*.js',
            'public/css/**/*.css'
	],
	watchOptions: {
            usePolling: true,
            interval: 500
}
});

Install Node & NPM (Windows version). Reboot, open Windows PowerShell and make sure you can access npm -v and node -v in your project path. There you can run: npm run watch

Make sure your docker-project is up in the WSL2 terminal and over there run: sail up

Then open your browser, go to http://localhost:3000 and you're all set to go!

If you happen to have errors in PowerShell in the process, just delete the /node_modules folder completely. Reinstall it with npm install inside PowerShell instead and then try again. When the folder structure was downloaded earlier inside another environment (e.g. linux) and you use e.g. PowerShell now, I noticed that's commonly a cause. Reinstalling fixes the issue.

Following these steps should get it working:

• Add browsersync to your mix config

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        require('tailwindcss'),
    ])
    .browserSync('localhost');

• Open the docker-compose.yml in the root of your project, under the laravel.test service you want to add the port 3000 (this is the default port for browsersync). Your ports config should look like this:

ports:
  - '${APP_PORT:-80}:80'
  - 3000:3000

• Run laravel mix inside your container: sail npm run watch

Following these steps you should now be able to visit localhost:3000 and be able to see your app. Changing stuff should trigger the reload.