You can follow the steps below to enable live reload of a Laravel project using Laravel Mix and BrowserSync.
Important
You need to have Node.js installed on your machine to use Laravel Mix. If you don't have Node.js installed, you can download it from here.
Steps to enable live reload of a Laravel project using Laravel Mix and BrowserSync:
Step 1: Install Laravel Mix
npm install --save-dev laravel-mix
Step 2: Create a webpack.mix.cjs
file in the root directory of your Laravel project and add the following code to it:
const mix =require('laravel-mix')
mix.browserSync('127.0.0.1:8000');
Step 3: Open the package.json
file in the root directory of your Laravel project and add the following code to it:
"scripts": {
"watch": "mix watch"
}
Step 4: Install BrowserSync
npm install browser-sync browser-sync-webpack-plugin@^2.3.0 --save-dev --legacy-peer-deps
Step 5: First serve your Laravel project using the following command:
php artisan serve
Step 6: Then run the following command to enable live reload:
npm run watch
Now, whenever you make any changes to your Laravel project, the changes will be automatically reflected in the browser.