Enabling HOT MODULE REPLACEMENT (HMR )Laravel 5.5 + VueJs +MIX(webpack)— Fire up development

I am coding in laravel 5.5 with VueJs for simple SAP application. I ran npm run watch but i m lazy about to reload browser. In Webpack i already achieved HMR , I was tried in here as well but it needs some tweeks. I did it as per following texts stated.

Hot Module Replacement

Hot Module Replacement (or HMR) is one of the most useful features offered by webpack. It allows all kinds of modules to be updated at runtime without the need for a full refresh.

In laravel we have MIX a built in bundler based webpack.

Using MIX I would like achieve hot reload in laravel application to deal with Vuejs files.

As per Document in Git Repo https://github.com/JeffreyWay/laravel-mix/blob/master/docs/hot-module-replacement.md i did the follwoing setups . Its so simple

1. Do npm install — to install dependencies in laravel 5 project
2. Make sure 8080 port is opened , not occupied by any other program.
3. Add this script tag <script src=”{{ mix(‘js/app.js’) }}”></script> to the blade templating file.
4. run npm run hot to run the bundler in hot reload mode

You should see in the browser console about HMR’s boot

HMR initiated successfully

Now you can edit your js/vue/css .. files which in sitting in /resources/assets/ . you can able to see the reflection in browser , without hard reload .

HMR working fine

❤ Happy Coding ❤

Thanks #webpack #mix #laravel