Posts Learn Components new Snippets new Categories Tags 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

32 views

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 [email protected]^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
new

If you like our tutorial, do make sure to support us with some coffee. We need the juice to write the content during the night 🤙🏻