1.12 WebSocket connection to 'wss://.../socket' failed

[atsolberg]

What version of Remix are you using?

1.12

Are all your remix dependencies & dev-dependencies using the same version?

• Yes

Steps to Reproduce

I created a simple repository to produce the issue using 'just the basics' and 'express' options: https://github.com/atsolberg/remix-basic-express-with-ssl-v2-dev see README for details.

Starting with a basic remix app using express, I added self-signed certificate files, and in server.js used node's https createServer to create a server using the express app with the certificate https options.

• App expects to run on port 4242 instead of 3000 so start up with PORT=4242 npm run dev or change remix config appServerPort locally.
• Start chrome with some flags to ignore cert issues with self-signed certificates:

  /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --user-data-dir=/tmp/foo --ignore-certificate-errors --ignore-ssl-errors --unsafely-treat-insecure-origin-as-secure=https://localhost:4242
  

• Then visit https://localhost:4242

---

NOTE: I use localremix instead of localhost by adding 127.0.0.1 localremix to my etc/hosts file, and the self-signed certificate files in this repo were created referencing localremix as the common name (CN). You might want to use your own certificate files or you can use https://localremix:4242 by added 127.0.0.1 localremix to your etc/hosts file like I did. You can supply the directory path to your cert files using the CERT_DIR env var at startup: CERT_DIR=Users/bob/my-certs PORT=4242 npm run dev. server.js expects the cert file names to be key.pem and cert.pem.

---

Expected Behavior

• The client side live-reload web socket would connect over wss: protocal
• The future: { unstable_dev: { port } } option would force the client to connect on that port, it always seems to use a random port

Actual Behavior

• The client side live-reload web socket connect always fails
• Even withfuture: { unstable_dev: { port } } option set, always seems to use a random port.

Client Side Error

Chrome App Error

[72201:19971:0202/093415.517540:ERROR:ssl_client_socket_impl.cc(985)] handshake failed; returned -1, SSL error code 1, net_error -107

[atsolberg]

One update, running with the old dev server (and using remix watch instead of remix dev), I still see the same connection failed error. So issue might be inherent to both dev servers.

[pcattori]

Possible solution/workaround from a Remix discord community member:

I had to hack around it with my own LiveReload since I am using it in a Docker container. Basically I tell remix that my WS port is 8003 and set the LiveReload component port to 8004 so that it can connect to my Traefik load balancer to successfully terminate it.

[atsolberg]

Update
I retried using a valid certificate signed with a certificate authority using this AWESOME tool mkcert, just to make sure that using self-signed certificates was not the issue:

Unfortunately still seeing the ws connection failure, but at least I have non-sketchy certificates for my team now!

I was able to get the client side script to use port 8002 using the REMIX_DEV_SERVER_WS_PORT=8002 environment variable at startup: REMIX_DEV_SERVER_WS_PORT=8002 PORT=4242 npm run dev, but still seeing the connection failure, at least it's trying 8002 now.

I've specified 8002 as the ws port in the remix config and in the <LiveReload port={8002} /> component, but I can't tell what port the dev server is actually trying to use:

[atsolberg]

Update: It works!

Credit to Eladchen #2859 (comment) for the idea of using the remix app server to proxy websocket requests from the dev server to client.

Needed 3 things to make this work:

1. Edited the node_modules/@remix-run/react/dist/components.js <LiveReload /> component so that is always used the port prop if provided, allowing me to set it to the express https server port instead of the dev server port.

2. Added a websocket to the https express app to relay messages from the dev server to the client.

3. Edited node_modules/@remix-run/dev/dist/devServer2.js to allow me to set the protocol and host from new config properties so that appServerOrigin could be a valid url to my express https server.

After that I just needed to set an env var so that node would use mkcert as an additional certificate authority like browsers do: NODE_EXTRA_CA_CERTS

And then the requests from devServer2.js for the new asset manifest started working, and BAM!, working live-reload with express https server!

Repo in description has been updated.

[Mange]

I seem to be having the same issue on 1.15. None of the configuration options seem to be respected.

// remix.config.js
{
	unstable_dev: {
	  // ...
	  port: 8002,
	},
	devServerPort: 8002,
	// ...
}

<LiveReload port={8002} />

…and yet on every boot it will try a new random port and get a connection error, since my app server runs inside of a Docker container with limited port forwarding.

[pcattori]

Obsoleted by #6133