Cannot change the HMR port easily for multiple projects running simultaneously

[krehak]

• 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.

[stale]

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.

[mklein994]

I'm running into problems with this. When I try to pass in an HMR port, it gives an error:

$ npx mix watch --hot --hmr-port 8081
error: unknown option: '--hmr-port'

I think it's missing from /bin/cli.js.

---

Environment

• Laravel Mix Version: 6.0.0-beta.17
• Node Version v14.15.1
• NPM Version 6.14.8
• OS: Arch Linux (uname -srmo: Linux 5.9.14-arch1-1 x86_64 GNU/Linux)

[thecrypticace]

Try npx mix watch --hot -- --hmr-port 8081 with Mix v6

[mklein994]

When I try that, I still get an error:

$ npx mix watch --hot -- --hmr-port 8081
[webpack-cli] Unknown argument: --hmr-port
[webpack-cli] Unknown argument: 8081

This is with webpack@5.10.2. Same thing happens with npx webpack serve --hmr-port 8081.

It doesn't appear to be a valid option:

$ npx webpack serve -h
Usage: webpack [options] [command]

Options:
  --bonjour                 
  --live-reload             
  --no-live-reload          negates live-reload
  --client-progress         
  --hot-only                
  --setup-exit-signals       (default: true)
  --no-setup-exit-signals   negates setup-exit-signals
  --stdin                   
  --open [value]            
  --use-local-ip            
  --open-page <value>       
  --client-logging <value>  
  --https                   
  --http2                   
  --static [value]          
  --no-static               negates static
  --history-api-fallback    
  --compress                
  --port <value>            
  --public <value>          
  --host <value>            
  --firewall <value>        
  -h, --help                display help for command

Commands:
  init|c                    Initialize a new webpack configuration
  migrate|m                 Migrate a configuration to a new version
  loader|l                  Scaffold a loader repository
  plugin|p                  Scaffold a plugin repository
  info|i                    Outputs information about your system and
                            dependencies
  serve|s                   Run the webpack Dev Server

[KevinBatdorf]

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

[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
    }
})

[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