v2 dev, reverse proxy, & different origins

[qw-in]

Ok, so we have a reverse proxy in development that terminates TLS (https://my-remix.dev). However, from node, the remix dev server is only available on localhost (http://localhost:3001).

It is a little bit tricky with the available knobs (port & REMIX_DEV_ORIGIN) to connect this up (without going the custom server route).

---

What worked on v1 is to set a remix dev port (3001). For example:

• Browser will connect to remix via https://my-remix.dev:3001 (the host is inferred here)
• Node will connect to remix via http://localhost:3001

This no longer works in v2 as the socket is ws://my-remix.dev:3001 (not wss://). I'm not sure if that should be considered a bug though - not a common configuration I'm sure 😛

If anyone has a simple solution would appreciate it, thanks!

[kiliman]

The actual Remix dev server is at http://localhost:3001, so when Remix sets up the WebSocket URL, it looks at the protocol of that URL and determines whether to use ws or wss.

By default REMIX_DEV_ORIGIN is set to the localhost. Have tried setting it to https://my-remix.dev:3001? Then <LiveReload> will get the correct protocol.

function remixLiveReloadConnect(config) {
  let REMIX_DEV_ORIGIN = ${JSON.stringify(process.env.REMIX_DEV_ORIGIN)};
  let protocol =
    REMIX_DEV_ORIGIN ? new URL(REMIX_DEV_ORIGIN).protocol.replace(/^http/, "ws") :
    location.protocol === "https:" ? "wss:" : "ws:"; // remove in v2?
  let hostname = REMIX_DEV_ORIGIN ? new URL(REMIX_DEV_ORIGIN).hostname : location.hostname;
  let url = new URL(protocol + "//" + hostname + "/socket");

  url.port =
    ${port} ||
    (REMIX_DEV_ORIGIN ? new URL(REMIX_DEV_ORIGIN).port : 8002);

[qw-in]

The actual Remix dev server is at http://localhost:3001, so when Remix sets up the WebSocket URL, it looks at the protocol of that URL and determines whether to use ws or wss

I think the bit I found slightly unintuitive here was when I only set dev.port. <LiveReload> would attempt to connect to ws://my-remix*. Felt like it picked up the host, but not the protocol if you know what I mean?

Have tried setting it to https://my-remix.dev:3001? Then will get the correct protocol.

Yep, you're 100% correct. What I was observing in that case (apologies if I get the details wrong, from memory here) is that the "ready" ping from the node dev server (remix-serve iirc) would attempt to hit https://my-remix* as well and fail

[kblcuk]

@qw-in did you manage to solve this somehow?
Stumbled upon the same issue with running remix on gitpod, and right now we simply have a custom LiveReload component that basically mimics what original LiveReload does, but also hi-jacking socket path. But of course would be nice to not do that :)

[qw-in]

@kblcuk I ended up with a custom dev-server. Patching LiveReload sounds like a way better idea though honestly! 😄