Parcel: 🙋 Allow to define a specific port for HMRServer

[real34]

I am trying to use Parcel inside a docker container and could not make HMR work with the hardcoded port: 0 value, since the Websocket server selects a random available port every time.

https://github.com/parcel-bundler/parcel/blob/333c3aa5d20f98a5f3c52635751032d12854c13c/src/HMRServer.js#L7

Hardcoding a port value here and exposing it through Docker allows to make HMR work, but it would mean adding a configuration.

What I would need is to find a way to expose the ws port used on the host machine, or find a better way to connect to the socket from the client.

Would you agree to add a new option similar to the current -p for the server port? What name would you recommend?

If that sound good to you, I could try to do a PR for this (inspired by #278 for instance)

[davidnagli]

I’m trying to understand why you would need to specify the ws port for the HMRServer if the HMR client handles everything itself anyway. What kind of issue do you get when you use the default port?

[mbrobbel]

When running multi-container docker applications with docker-compose, you explicitly expose specific ports to other services (https://docs.docker.com/compose/compose-file/#expose) and to the host (https://docs.docker.com/compose/compose-file/#ports).
In order to make sure that the clients are able to connect to a HMRServer running in a docker container, one would have to expose all ports for that container, which is considered bad practice.

[Fluidbyte]

I have the same problem with docker (I build and test all my apps in containers). Additionally if I wanted to serve my WIP I would have to open a massive range of ports on my firewall, whereas if I could set this I could explicitly define a single port.

[Fluidbyte]

^ PR for review

[devongovett]

Closing. Should be fixed by #450.

[thedull]

Hi guys, any plans to release soon? I'm in desperate need of this feature.

[brandon93s]

@thedull - Should be a release next week.

[marcklei]

If anyone else is looking for this option. It's implemented with the following args -h, --hmr-port <port>

[moonlight16]

Trying to get parcel-bundler working inside a docker container.

I'm getting this error when starting parcel with specifying a hmr port:

> [email protected] start /usr/src/app
> parcel index.html --hmr-port 1234

Server running at http://localhost:1234 
⠋ Building...events.js:183
      throw er; // Unhandled 'error' event
      ^

Error: listen EADDRINUSE :::1234
    at Server.setupListenHandle [as _listen2] (net.js:1360:14)
    at listenInCluster (net.js:1401:12)
    at Server.listen (net.js:1485:7)
    at Promise (/usr/src/app/node_modules/parcel-bundler/src/HMRServer.js:31:19)
    at new Promise (<anonymous>)
    at HMRServer.start (/usr/src/app/node_modules/parcel-bundler/src/HMRServer.js:11:11)
    at Bundler.start (/usr/src/app/node_modules/parcel-bundler/src/Bundler.js:379:45)
    at <anonymous>
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: `parcel index.html --hmr-port 1234`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2018-10-16T09_00_38_959Z-debug.log

[ScottyFillups]

@moonlight16 That's because the default port (ie. the port for serving the built files) for Parcel is port 1234. Choosing another port for HMR like 3000 should work.

[aaslun]

I'm running a setup with wodby/docker4wordpress. I'm using a self signed certificate to serve my local development environment over HTTPS with Traefik and now I'm attempting to start building a theme with Parcel.js.

Everything works except the HMR feature and I cannot figure out how to map the ports for the HMR service properly. Using the --hmr-port flag is only half of the solution.

How can i configure my docker container to open the port for the HMR service? And which container should I configure? I'm thinkning it is the Traefik container since it is the reverse proxy, but I've tried numerous attempts with no success. Also opening ports on Traefik and exposing other container's ports but to no avail.

Is the problem that the parcel watch task is started on my local machine, but the web server is serving the site from the docker container from which the client is trying to connect to it via WSS?
Could a solution be to log in to the Docker web server container, install npm and parcel there and run the watch task from inside the container? Then there would be a HRM service to actually respond on the machine for the client to connect to.

EDIT: I used the --hmr-host flag as well, trying to use localhost as host but it also failed.

[aaslun]

Okay, I managed to solve it and I thought I should share my solution if there's anyone else facing the same problems.

The solution was to use the --cert and --key parameters on the parcel watch command, directing the to the same self signed certificate files used by the Traefik container. So in my case the watch task was started like this:

parcel watch ./static/site.js --cert ../../../../ssl/traefik/certs/cert.pem --key ../../../../ssl/traefik/certs/key.pem

After that the HRM just worked.