How to enable Live Reload of a Laravel Project Using Laravel Mix & BrowserSync

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.