Lightrun
question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

LiveReload doesn't work when TLS is enabled

See original GitHub issue

What version of Remix are you using?

1.3.5

Steps to Reproduce

  1. Create a server with TLS keys

  2. Attach remix route handler to it

  3. Load site

  4. Error appears in console:

    WebSocket connection to 'wss://moxy.cow-augmented.ts.net:8002/socket' failed: An SSL error has occurred and a secure connection to the server cannot be made.

  5. Change files, observe that they are not reloaded live. (Server rebuilds, but the ws push doesn’t work.)

Expected Behavior

Expect that WebSocket.Server would be able to listen over https somehow.

Actual Behavior

WebSocket connection to ‘wss://moxy.cow-augmented.ts.net:8002/socket’ failed: An SSL error has occurred and a secure connection to the server cannot be made.

Tracked it down to this bit in ./node_modules/@remix-run/dev/cli/commands.js

  let wss = new WebSocket__default["default"].Server({
    port: config$1.devServerPort
  });

It appears that the only way for a ws server to speak tls is to attach to an existing server.

Something like this:

  const server = config.devServerCert && config.devServerKey ? https.createServer({
    cert: config.devServerCert,
    key: config.devServerKey,
  }) : http.createServer()
  server.listen(config.devServerPort)
  let wss = new WebSocket.Server({ server });

Issue Analytics

  • State:open
  • Created a year ago
  • Reactions:3
  • Comments:10

github_iconTop GitHub Comments

2reactions
tadeaspetakcommented, Aug 1, 2022

Being able to run a dev server on an https domain (localhost, lvh.me) would be wonderful 👌

0reactions
eladchencommented, Oct 13, 2022

Doesn’t seem like #4123 or #4107 will be merged anytime soon… so I solved it using the attached snippet.

The below connects to the web socket created when calling “remix watch” command, and spins up an additional web socket that uses an https server instance.

Once a message to the remix web socket is sent, it is then sent to the https one.

const { WebSocket } = require("ws");

const httpsServer = // ... [some code that spins up an https server with express]

if (NODE_ENV !== "production") {
    const connectToRemixSocket = (cb, attempts = 0) => {
        const remixSocket = new WebSocket(`ws://127.0.0.1:8002`);

        remixSocket.once("open", () => {
            console.log("Connected to remix dev socket");

            cb(null, remixSocket);
        });

        remixSocket.once("error", (error) => {
            if (attempts < 3) {
                setTimeout(() => {
                    connectToRemixSocket(cb, attempts += 1);
                }, 1000);
            }
            else {
                cb(error, null);
            }
        });
    };

    connectToRemixSocket((error, remixSocket) => {
        if (error) {
            throw error;
        }

        const customSocket = new WebSocket.Server({ server: httpsServer });

        remixSocket.on("message", (message) => {
            customSocket.clients.forEach((client) => {
                if (client.readyState === WebSocket.OPEN) {
                    client.send(message.toString());
                }
            });
        });
    });
}

NOTE: The above example is missing the https server portion. Just make sure to set the live reload component port to the same port as the https server.

app/root.tsx:

<body>
    ....
    {/* assuming the https server is listening on port 2001 */}
    <LiveReload port={2001} />
</body>
Read more comments on GitHub >

github_iconTop Results From Across the Web

Setting up Grunt to serve Livereload over SSL - Stack Overflow
My goal is to run livereload over httpS: port 9000. Maybe am I missing some part, like "run Grunt to make it load...
Read more >
Complete guide to livereload over ssl (https) using grunt watch
For livereload to work over https, you need to provide a path to both a private key file and a certificate. These can...
Read more >
Using Spring Boot Devtools with LiveReload - Rolf Engelhard
If reloading doesn't work, open your browser's devtools (ah—another one). Maybe it's just a resource, which couldn't be loaded. Or the ...
Read more >
Live Reloading Content during Development
For more info on enabling and disabling see below. Note also that the Web Server based live reload is not useful for REST...
Read more >
TLS (SSL) | Node.js v19.3.0 Documentation
When using ESM, if there is a chance that the code may be run on a build of Node.js where crypto support is...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found
Previous page

process not defined

Next page

Setting HOST environment variable with anything other than a legitimate host prevents the server from running