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.
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
Leave a reply