Hot reloading not working with laravel/sail [laravel 8]

• Laravel Mix Version: 5.0.9
• Node Version (node -v): v15.5.0
• NPM Version (npm -v): 7.3.0
• OS: Windows with Ubuntu 20.04 WSL2

Description:

Hot reloading is not working using laravel/sail.

Steps To Reproduce:

I have tried with sail npm run watch sail npm run hot and nothing seems to work.

Also when I run npm run hot it output this:

ℹ ｢wds｣: Project is running at http://localhost:8080/
ℹ ｢wds｣: webpack output is served from http://localhost:8080/
ℹ ｢wds｣: Content not from webpack is served from /var/www/html/public
ℹ ｢wds｣: 404s will fallback to /index.html

but clicking on http://localhost:8080/ actually opens http://localhost:14252/ which is so weird.

I also tried to add EXPOSE 8080 to the Dockerfile and 8080:8080 to the docker-compose.yml then I rebuilt the image and but still not working and I can’t see any side effect.

Any blade template I made changes on and save it, there is no autoreload on any browser. I have to activelly reload the page to check every change I made.

[jameshulse]

Hi @moracabanas, I have gotten one step closer to getting this working by:

• Adding a port binding from 8080:8080 to the docker docker-compose.yml as you mentioned (EXPOSE 8080 isn’t required)
• Adding the following config to webpack.mix.js:

mix.webpackConfig({
    devServer: {
        host: '0.0.0.0',
        port: 8080,
    },
});

Now when I run sail npm run hot I can see that it picks up changes as I make them, and my javascript is now loading the first time in the browser. But currently my browser isn’t picking up and replacing the new ‘hot’ javascript parts.

I will report back if I figure out how to solve this next issue.

Edit: sail npm run watch is a work around for me at the moment which works okay. Yet to figure out how to get HMR working though.

[alexpcoleman]

What finally, simply worked for me was the following:

1. Add the 8080 port binding to docker-compose.yml:

laravel.test:
        ...
        ports:
            - '${APP_PORT:-80}:80'
            - 8080:8080
        ...

1. Add the devServer setting to webpack.config.js:

module.exports = {
    ...
    devServer: {
        host: '0.0.0.0',
        port: 8080,
    },
};

Note that the hmrOptions stuff in webpack.mix.js isn’t necessary, because it already defaults to using localhost and 8080.