At IT Wonders, we have been using Laravel for nearly 3 years from now and we can't say enough how much we love this PHP framework. It's beautiful, clean and you can literally see smile on our developers when they are coding on it. Laravel is great for debugging, easy to create database migration and it let you model your data using Eloquent. We will spare the great features of Laravel for another post, as for this post, we will share how to use the hot reload with Webpack 3.4 in Laravel.

Hot Reload is a relatively new development technique that get popular since year 2016. Hot reload allows the web page keep its existing state while the server inject the new version of Javascript or CSS that you just edited at the runtime. Once the browser detected the new version of files, it will perform the update without losing the state of your app. Before Hot Reload, we have the Live Reload, which does the some thing as Hot Reload except that it loses the state of your app as Live Reload has to refresh the entire web page.  Hot Reload is great time saving for development and improve the productivity of the development process.

Hot Reload is provided out of the box by Laravel 5 via Laravel-mix. To use hot reload, you just have to run it using npm run hot or yarn run hot.

That's it! You can now start edit your Vue.js javascript file and see your changes shown on your browser.

Hot Reload still relatively new in Laravel and we ran into a few issue when using it. So we would like to capture it here in case it helps some of you who faced the same problem.

Issue 1: Wrong path to chunk Js file

We are using split coding of Webpack to asynchronously load the needed script during the runtime in order to reduce the initial Javascript file size. Then, we run into the issue of wrong filepath of the webpack Javascript chunk file when running it with yarn run hot.

When you check your source you will find that there is a missing leading "/" before the js file. User will encountered error like above when they are not in the root of your URL since the browser will not be able to find the needed Javascript file under current path. For example, if your URL is, when the user browses to, it will not find 9.js under folder /products/9.js as the file 9.js is located at the root public folder.


We need to override the default "output" of Laravel mix config. You can add following to webpack.mix.js.

let options = mix.options({})
let hmr = options.config.hmr

    output: {
        publicPath: hmr ? (http + '://localhost:8080/') : '/'

Quick tip to write "portable" Javascript import path Besides output option, the "resolve" option is another webpack config that you can consider setting it, as this will now enable you to import Javascript file with import path relative to the value you have specified in the config. You can configure this again in the webpack.mix.js file

    resolve: {
        modules: [
            path.join(__dirname, "node_modules"),
            path.join(__dirname, 'resources', 'assets', 'js'),
    output: {
        publicPath: hmr ? (http + '://localhost:8080/') : '/'

Let us give you an example to understand how to use the resolve config further. In above, we have specified that the import path could be resolved from "node_modules" and "resources/assets/js", relative from current project root directory.

After setting it, you can now write import the Javascript file like this import Nav from 'components/Nav.vue'

During compilation, webpack will load the Javascript file from /resources/assets/js/components/Nav.vue or /node_modules/Nav/. 

This is a lot better than using dot "." in the import path like this import Nav from './resource/asset/js/components/Nav.vue'. We find that using this it let us relocate the Nav.vue file to another directory without having to change the import code.

Issue 2: mix used wrong host URL

We specify the following in the master.blade.php file.

<link rel="stylesheet" type="text/css" href="{{ mix('css/app.css') }}">

Then we run npm run prod and found that the rendered HTML file become

<link rel="stylesheet" type="text/css" href="//localhost:8080/css/app.css">

We checked the source code of vendor/laravel/framework/src/Illuminate/Foundation/helpers.php and found the following

    function mix($path, $manifestDirectory = '')

        if (file_exists(public_path($manifestDirectory.'/hot'))) {
            return new HtmlString("//localhost:8080{$path}");

The issue was we ran the npm run prod while npm run hot still active ran on another terminal. npm run hot will create a file "hot" in the public folder. This will make laravel to think that we are still running under hot module reload mode and serve it from localhost:8080 instead.

Removing the "hot" file resolved this problem.

Issue 3: npm run hot do not recompile when file get changed

This issue happens on Ubuntu OS machine. One of the fix is to increase the limit of how many files to be watched by  by the OS. To do so, simply run following command:

echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p

If after trying above the file still do not get recompiled upon change, then you can try run yarn run watch-poll . This command will watch the changes of the file and do the recompilation. However you need to do manual refresh on the browser to see the new change.


Hot reload is one of the most awesome thing to have for front end web development. It definitely worth the time to find out how to use it today if you still haven't tried it.

Alright, that's all for this post. We hope you have learned something from it. Do drop us a comment and share with us your thought about this post. Thanks!

Note: Version of tools we used for above: Laravel: 5.5.* Laravel-mix: 1.4.2 Webpack: ^3.4.0

Posted in Laravel, PHP, Vue.js, Webpack on Sep 25, 2017

0 Comment

Leave a Comment

Your Email address will not be published. Required fields are marked *