How to use automatic reloading on file change by using Laravel - mix? There is a commonly use feature to monitor files for your changes and automatically show them in the browser. In Laravel mix you can do it in one line.

All you need to do is to update your webpack.mix.js file to and add .browserSync('http://your-url') where your-url will most likely be your localhost, correct port you can  get after running php artisan serve:

                    mix.ts('resources/js/app.ts', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        //
    ]).version().browserSync('http://127.0.0.1:8002')

After this we can run: 

                    npm run watch

 

But wait, it does not work yet, this is what we got:

                    > mix watch

        Additional dependencies must be installed. This will only take a moment.
 
        Running: npm install browser-sync browser-sync-webpack-plugin@^2.3.0 --save-dev --legacy-peer-deps

So, let's do it - we have to install browser-sync and  browser-sync-webpack-plugin:

                    npm install browser-sync browser-sync-webpack-plugin@^2.3.0 --save-dev --legacy-peer-deps

after installation is over, let's try again:

                    npm run watch

and 💥 - it works!