Cannot change the HMR port easily for multiple projects running simultaneously

• Laravel Mix Version: 4.1.4 (npm list --depth=0)
• Node Version (node -v): 11.15.0
• NPM Version (npm -v): 6.7.0
• OS: macOS Catalina (10.15.2)

Description:

I think that HMR is not working as it should. If you run the script npm run hot without providing a port argument, it will bind 8080 port. It is good for a single project. A lot of times I have 3-5 projects at once, so laravel-mix is not good enough for my work, yet. I’m currently using my own gulp+webpack combination, but I think it would be much better to use something popular like laravel-mix, so let’s see what’s my problem.

Steps To Reproduce:

1. Start multiple laravel projects at once
2. The first project can be run with php artisan serve and npm run hot
3. The second project can be run with php artisan serve, now he detects, that the port 8000 is occupied, os it bind 8001 - so far so good
4. Now you want to run HMR in the second project, but npm run hot won’t work, because it just “die” when the port 8080 is occupied
5. Ok then, run npm run hot -- --port=8081, hooray - it works!
6. Hold on! Webpack output is still served from port 8080! And here we go.
7. Open server URLs in the browser and now you see - both have the same assets!

Here is the screenshot:

I have created 2 same laravel projects from scratch with a simple change in the app.scss - I have changed their body’s background to see the effect:

When I look into the browser I see both projects having the same background:

The reason is simple - both projects’ webpack are served from the same host.

The solution is also theoretically simple, just add this into the webpack.mix.js file:

mix.options({
        hmrOptions: {
            host: 'localhost',
            port: '8081'
        },
    })...

Now I re-run the script for test2 project and it seems to be working well, even both projects now have different backgrounds!

But this is not a good solution.

Why? Well, because you are changing a JS file, which is also in the project’s repository and used by other coworkers. We can change a port for every project we create, but it’s still a solution just for a single team. If you want to work on something your own/private or even for a different team, a random HMR port can be set in both teams for different projects, and it will cause a problem. Maybe it’s not a common problem, but when this will occur, there will be no fix.

What is a good solution then?

Option 1: make it possible to change HMR port in run command, for example: npm run hot -- --port=8081 --hmr-port=8081, since every developer is running this command separately, so there is no change for other developers.

Option 2: check for the occupied port, if it is occupied, then add +1 and so on, until there is a free port, which will add developers much better UX when running HMR. Artisan’s serve is a good example.

Thank you if you will look at it and sorry for a long text, hope it is clear enough.

[krehak]

@tominal you can actually run something like npx mix watch --hot -- --port 8081 --hmr-port 8101, just look at the code here: src/config.js#L15

[tominal]

For what its worth, this worked for me: npx mix watch --hot -- --port 8081

Running this on different ports with two projects simultaneously ends up with one of them refreshing constantly.

I would still love to find a solution to this as it could completely remove the daily task(s) of messing with windows when switching projects.

---

Edit

Found the solution for my situation.

mix.options({
    hmrOptions: {
        host: "localhost",
        port: 8584
    }
})