Posts Learn Snippets 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

3 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

Created by

PostSrc poster

PostSrc

Full stack developer mainly focusing on the front end side of the web. The main author of PostSrc and loves writing tutorial and guides online.