LiveReload fails when using custom hostname and ssl

[JeffEmery]

What version of Remix are you using?

1.7.4

Steps to Reproduce

There is a repo here... https://github.com/JeffEmery/remix-ssl

Start with npx create-remix@latest -> Express Server

Create a custom Remix Run - Express Server server.js that uses https and hostname. e.g. https://remix.hostname.dev:3000

Copy dev-key.pem and dev-certificate.pem into an /ssl folder and reference them from the .env file

/* .env */
HOST=remix.hostname.dev
PORT=3030
HTTPS=true
SSL_CRT_FILE=./ssl/dev-certificate.pem
SSL_KEY_FILE=./ssl/dev-key.pem

Make the .env variables available in server.js

Use a self signed certificate for the custom domain

1. openssl req -newkey rsa:2048 -nodes -keyout dev-key.pem -x509 -days 365 -out dev-certificate.pem -config hostname.dev.cnf
2. openssl pkcs12 -inkey dev-key.pem -in dev-certificate.pem -export -out dev-certificate.p12

/* hostname.dev.cnf */
default_bits        = 2048
distinguished_name  = dn
x509_extensions     = san
req_extensions      = san
extensions          = san
prompt              = no
[ dn ]
countryName         = US
stateOrProvinceName = State
localityName        = City
organizationName    = Organization
organizationalUnitName  = Department
commonName          = Company
[ san ]
subjectAltName      = @alt_names
[ alt_names ]
DNS.1               = *.hostname.dev
DNS.2               = app.hostname.dev
DNS.3               = remix.hostname.dev

Use a hosts file to resolve to the localhost

/* hosts file */
127.0.0.1       remix.hostname.dev

Run npm run dev and have valid SSL certificate on https://remix.hostname.dev:3000

Expected Behavior

The LiveReload websocket server should start on the configured protocol (wss), hostname, and port so the client connects to the right location. e.g. wss://remix.hostname.dev:8002

OR

The websocket client should connect to ws://localhost:8002 and not use the hostname and wss protocol.

Actual Behavior

The LiveReload websocket only uses the configured port. The websocket server is not started with wss and the configured hostname.

The LiveReload component tries to connect to the configured protocol, hostname and port that doesn't match the server.

We could probably solve this by changing the client to always connect to the websocket server on ws://locahost:port since it's only a CLI development tool.

[JeffEmery]

There is a patch-package here that I'm using in the meantime. Would be happy to contribute if anyone would like to walk me through the process. (I'm very new to contributing and especially creating a proper test)

[pcattori]

Fixed by #6724 . See instructions for setting up local HTTPS.