Parcel: Ability to use HMR with https:// ngrok tunnel

[dobesv]

🙋 feature request?

🤔 Expected Behavior

I'd like to be able to use parcel watch behind an ngrok tunnel using https://

😯 Current Behavior

Currently I can't quite configure things right with the HMR websocket to go through ngrok.

The problems:

• ngrok terminates wss://, but only on port 443
• ngrok can connect a port of your choice using a TCP tunnel - but without TLS termination
• parcel watch cannot listen on port 443
• HMR doesn't support a different port to connect to vs the port to listen on
• HMR cannot connect to an insecure ws:// port from https:// site

💁 Possible Solution

I think the ideal solution would be to have the client connect to the standard port while the server listens on a non-standard port on the other end of the proxy.

Perhaps a different client-side port could be indicated as part of the hmr-hostname, e.g.:

parcel watch index.html --hmr-hostname my-hmr-host.ngrok.io:443 --hmr-port 29754

Or the port pair could be part of the port spec:

parcel watch index.html --hmr-hostname my-hmr-host.ngrok.io --hmr-port 443:29754

Or the use of an absolute URL could indicate that the client should use the default port (or whatever port is in the URL):

parcel watch index.html --hmr-hostname wss://my-hmr-host.ngrok.io/ --hmr-port 443:29754

🔦 Context

My application uses some services that need to "call back" into it for authentication purposes so I must access it via a publically accessible ngrok tunnel. Unfortunately the way things are now I can't benefit from hot module reloading because it cannot be configured to work through this tunnel.

[DeMoorJasper]

You could use something like this as the bug appears to be port and wss related?
parcel watch index.html --hmr-hostname my-hmr-host.ngrok.io --hmr-port 29754 --https
This should turn the ws into wss and run on port 29754 and hostname would be ngrok

[dobesv]

@DeMoorJasper

$ npx parcel watch app/roovy/static/html/index.html --hmr-port 23693 --hmr-hostname dobesv-hmr.ngrok.io --no-autoinstall --https

  error: unknown option `--https'

This might work if the --https option is added to watch, I'm not sure. I'd have to see whether I can still approve the use of a self-signed certificate. Maybe if I open that HMR URL directly in a tab first I can tell Chrome to allow access and it will apply to the other tabs trying to open the wss:// connection.

[dobesv]

On the other hand, if I hand-edit the parcel source code not to add a port number on the client side it works perfectly through ngrok's TLS termination.

[mischnic]

Can this be closed now with the https flag added to watch?

[DeMoorJasper]

I'll close this as the PR should solve this

[dobesv]

Sorry for the late follow up. I confirm that I was able to get this working using the --https flag with parcel watch. I did have to setup a "mini certificate authority" and add it to my browser since Chrome won't prompt for the self-signed cert and silently reject the wss:// connection otherwise.

Here's a simple script that can help create the necessary certs. You have to import the CA cert into your browser as a CA authority.

https://gist.github.com/dobesv/474644248022d65be8ffd36e637fcda1

[PabloRosales]

Just in case someone finds this from Google searching for a solution to HRM with ngrok, my solution was to create a Reserved TCP Addresses on ngrok and in the configuration (where 24232 is the port configured with parcel cli and 1.tcp.ngrok.io:24232 is the reserved tcp address ngrok gave me):

authtoken: your token
tunnels:
client-frontend:
addr: 24232
proto: tcp
remote_addr: 1.tcp.ngrok.io:24232

and with parcel: parcel src/index.html --hmr-hostname 1.tcp.ngrok.io --hmr-port 24232 --https

I also had to add an exception on Firefox for the certificate.

[domenkozar]

That does work, but it's inconvenient.

HMR could be improved by separating configuration what frontend does and what the server does.

Something like:

--hmr-port 28000 --hmr-browser-port 443 --hmr-hostname mytunnel.eu.ngrok.io

That would allow using plain HTTPS ngrok tunnel with valid certificate for HMR.

(for backwards compatibility, missing --hmr-browser-port could be implied by --hmr-port)

[domenkozar]

@DeMoorJasper would that be considered acceptable PR?