<-My Blog->

Laravel Mix provides a fluent API for defining Webpack build steps for your Laravel. We can also use this package for hot reloading.

You just need to install the dependencies by hitting.

npm install

After installing the dependencies you need to edit the webpack.mix.js.  just add this line at the end of the file.

mix.browserSync('127.0.0.1:8000');

Full code

const mix = require('laravel-mix'); 
/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css');
mix.browserSync('127.0.0.1:8000'); 

After that, you need to start Laravel development server by hitting the following command.

php artisan serve

After hitting you will see the following on the terminal.

Laravel development server started: <http://127.0.0.1:8000>

Finally, you need to run the following command for watching file changes.

npm run watch

If it runs successfully you will see the following output in the terminal.

 DONE  Compiled successfully in 1656ms                               12:06:07 AM

       Asset     Size   Chunks             Chunk Names
/css/app.css  0 bytes  /js/app  [emitted]  /js/app
  /js/app.js  594 KiB  /js/app  [emitted]  /js/app
[Browsersync] Proxying: http://127.0.0.1:8000
[Browsersync] Access URLs:
 --------------------------------------
       Local: http://localhost:3000
    External: http://192.168.1.103:3000
 --------------------------------------
          UI: http://localhost:3001
 UI External: http://localhost:3001
 --------------------------------------

so now you can use http://localhost:3000 during development. for every file change, it will auto-refresh your browser.