Posts Learn Components Snippets Categories Tags Tools About

How to Set Up BrowserSync Live Reloading in Laravel 8

Learn how to set up Laravel BrowserSync to enable live reloading when developing front-end UI

Created on Jul 08, 2021


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

    .js('resources/js/app.js', 'public/js')
        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

If you like our tutorial, do make sure to support us by being our Patreon or buy us some coffee ☕️