How to Set Up BrowserSync Live Reloading in Laravel 8

For a seamless front-end development in Laravel, you can make use of BrowserSync. BrowserSync can automatically monitor your files for changes, and inject your changes into the browser without requiring a manual refresh. You may enable support for this by calling the mix.browserSync() method.

1 - Install BrowserSync
Add BrowserSync using npm or yarn.

yarn add browser-sync browser-sync-webpack-plugin@^2.3.0 --dev

2 - Add BrowserSync in Laravel Mix
Define the configuration for BrowserSync and pass in the proxy URL of the project.

# webpack.mix.js

mix
    .js('resources/js/app.js', 'public/js')
    .browserSync({
        proxy: 'https://laravel-app.test'
    });

3 - Watch Assets for Changes
Now you can "run watch" command to monitor the assets for changes.

yarn watch

# or 
npm run watch