Laravel-mix: npm run hot on Homestead box. Assets not found.

[shealan]

• I created a new Laravel 5.4 project
• Updated my homestead yaml and added domain.dev to my hosts file. Provision box.

Open browser. Site works as expected on domain.dev.

Modified the homepage blade view to use <script src="{{ mix('js/app.js') }}"></script>
Ran npm run hot

I get

Project is running at http://localhost:8080/
webpack output is served from http://localhost:8080/
404s will fallback to /index.html
DONE  Compiled successfully in 5612ms

I see the hot file in the /public folder.

Refresh the browser. In the console I see:

GET http://localhost:8080/js/app.js 404 (Not Found)

[plakhin]

I've solved this by adding --output-public-path http://app.dev/ --host app.dev to hot script in package.json

I've also replaced
? new HtmlString("http://localhost:8080{$manifest[$path]}")
with
? new HtmlString(app('config')->get('app.url').":8080{$manifest[$path]}")
in helpers.

@JeffreyWay
First of all, thank you for your great work!
It would be nice to see something like this solution out of the box in future releases.

[RyanFDev]

@plakhin Your solution worked perfectly for me. I feel this should be a PR as the default in the config is localhost anyway.

[plakhin]

@RyanFDev Unfortunately I'm not sure that this is the best way and I don't know how not to hardcode app.dev in package.json so I'm not going to make a PR.
Also, please note that helpers.php will be overwritten after running composer update so you need to follow something like this instruction to overwrite mix() helper the right way.

I hope very much that @JeffreyWay will update mix() helper in Laravel and hot script in package.json to make HMR work out of the box in Homestead or other similar solutions.

[shealan]

Thanks for the input. That's certainly made progress as I am actually seeing a HMS message in my console. However, updates in my .vue code are not being displayed on save in the browser.

Do I need to open any ports or anything on the Homestead box?

[crabmusket]

@shealan try adding --watch-poll to your hot script in package.json. Regular FS watching doesn't seem to work in Vagrant, so I had to force it to poll.

And yes, you should probably open port 8080 if you haven't already in your Homestead.yaml.

EDIT: also, for those who want their mix helper to work properly, this is my app/helpers.php:

<?php

use Illuminate\Support\HtmlString;

function mix($path, $manifestDirectory = '')
{
        static $manifest;

        if (! starts_with($path, '/')) {
                $path = "/{$path}";
        }

        if ($manifestDirectory && ! starts_with($manifestDirectory, '/')) {
                $manifestDirectory = "/{$manifestDirectory}";
        }

        if (! $manifest) {
                if (! file_exists($manifestPath = public_path($manifestDirectory.'/mix-manifest.json'))) {
                        throw new Exception('The Mix manifest does not exist.');
                }

                $manifest = json_decode(file_get_contents($manifestPath), true);
        }

        if (file_exists(public_path($manifestDirectory.'/hot'))) {
                return new HtmlString(app('config')->get('app.url').":8080{$manifest[$path]}");
        }

        if (! array_key_exists($path, $manifest)) {
                throw new Exception(
                        "Unable to locate Mix file: {$path}. Please check your ".
                        'webpack.mix.js output paths and try again.'
                );
        }

        return new HtmlString($manifestDirectory.$manifest[$path]);
}

The biggest change was putting the if (! $manifest) check one block earlier, because otherwise $manifest was empty when constructing the HtmlString.

Now you can write <script src="{{mix('/js/app.js')}}"></script> and if you're running npm run hot it will correctly identify the right location to serve.

[SemyonL95]

@crabmusket, Hi, i made all like you described, but still have problem that hmr not replacing, it's reloading the page, and i got error that somehash.hot-update.json not found 404, how did you solve this problem?

[crabmusket]

SemyonL95 I think I have had that issue but I can't tell you exactly what resolved it. Make sure port 8080 is exposed in your homestead box, and run webpack like this: cross-env NODE_ENV=development webpack-dev-server --watch-poll --inline --hot --output-public-path http://yoursite.dev:8080/ --host yoursite.dev. Then visit just yoursite.dev.

[Gimcrack]

@crabmusket's suggestion fixed my issue. Additionally, I had to run npm run hot from the homestead box, not the host OS. Thanks.

[shorlbeck]

Thanks everyone -- the steps above helped me get npm run hot working on Homestead. However, like @SemyonL95 I have found that the entire app reloads whenever I make a change to my Vue components and then save, which seems to defeat the purpose (no 404 errors though). It does not hot-swap the component in place.

When I make a change and then save it, in the console I see [WDS] App updated. Recompiling... followed by [WDS] App hot update... and then it reloads the entire page/app. The only time it does not reload the page is if I save a Vue file _without_ changing it, in which case I get the same console messages but the page does not reload. Any thoughts on what could be triggering it?

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[trogne]

Any of this is not working anymore. Can someone provide a real solution ?

[jeremykenedy]

In packages.json I solved this by changing hot to the following:

"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js",