Support live reload behind HTTPS reverse proxy #4373

charlesvdv · 2022-10-16T15:40:14Z

charlesvdv
Oct 16, 2022

I'm currently building a small project using auth0 as an identity provider. For auth0 to work locally, the dev server must be served as HTTPS (source.
As recommended by auth0, I set a caddy server to act as a reverse proxy:

# reverse proxy https://localhost to http://localhost:3000
caddy reverse-proxy --to :3000

This setup breaks the live reload functionality from remix. Since the website is served as HTTPS, the <LiveReload /> component tries to connect using the wss protocol. The remix dev server is listening with the ws protocol. Here is the relevant sources from the remix source code:

  function remixLiveReloadConnect(config) {
    let protocol = location.protocol === "https:" ? "wss:" : "ws:";
    let host = location.hostname;
    let socketPath = protocol + "//" + host + ":" + ${String(
      port
    )} + "/socket";

What would you think about adding an environment variable REMIX_DEV_SERVER_WS_PROTOCOL (same convention as REMIX_DEV_SERVER_WS_PORT) to force the protocol to ws?
The use-case might be a bit weird but it would help me a lot to solve it in a elegant manner.

Thanks a lot!

edit: if the idea is accepted, I can do the PR implementing this

iwebroot · 2022-10-28T10:29:53Z

iwebroot
Oct 28, 2022

Hello,

After having encountered the same problem, I took inspiration from @kiliman on issue #2859 because it is not possible to force the ws protocol.

So, to get the websocket to work in https and wss, some changes will need to be made.

Step 1

Set devServerPort to any port except 443 and 80 in remix.config.js file
Configure PORT for development in the .env file (Exemple*: PORT=12345)

2nd step

Create a components folder in the app directory
Create a LiveReload.jsx (I use Javascript) file in the components directory

Step 3

Edit the app/root.jsx file

Remove default LiveReload
Add import LiveReload from '~/components/LiveReload'
Save
Result:

import {
  Links,
  Meta,
  Outlet,
  Scripts,
  ScrollRestoration,
} from "@remix-run/react";
import LiveReload from '~/components/LiveReload'

export const meta = () => ({
  charset: "utf-8",
  title: "New Remix App",
  viewport: "width=device-width,initial-scale=1",
});

export default function App() {
  return (
    <html lang="en">
      <head>
        <Meta />
        <Links />
      </head>
      <body>
        <Outlet />
        <ScrollRestoration />
        <Scripts />
        <LiveReload />
      </body>
    </html>
  );
}

Step 4

Add these lines of code in the file app/components/LiveReload.jsx

export default function LiveReload({
    port = Number(process.env.REMIX_DEV_SERVER_WS_PORT || 8002),
    nonce = undefined
}) {
    let js = String.raw;
    return (
        <script
            nonce={nonce}
            suppressHydrationWarning
            dangerouslySetInnerHTML = {{
            __html: js`
                function remixLiveReloadConnect(config) {
                    let protocol = location.protocol === "https:" ? "wss:" : "ws:";
                    let host = location.hostname;

                    /** 
                      * If the protocole used is HTTPS, WSS use port 443 or 
                      * if the protocole used is HTTP, WS will use the value of devServerPort
                    **/

                    let port = protocol === "wss:" ? "443" : ${String(port)};

                    let socketPath = protocol + "//" + host + ":" + port + "/socket";
  
                    let ws = new WebSocket(socketPath);
                    ws.onmessage = (message) => {
                        let event = JSON.parse(message.data);
                        if (event.type === "LOG") {
                            console.log(event.message);
                        }
                        if (event.type === "RELOAD") {
                            console.log("💿 Reloading window ...");
                            window.location.reload();
                        }
                    };
                    ws.onopen = () => {
                        if (config && typeof config.onOpen === "function") {
                            config.onOpen();
                        }
                    };
                    ws.onclose = (error) => {
                        console.log("Remix dev asset server web socket closed. Reconnecting...");
                        setTimeout(() => remixLiveReloadConnect({
                            onOpen: () => window.location.reload(),
                          }), 1000);
                    };
                    ws.onerror = (error) => {
                        console.log("Remix dev asset server web socket error:");
                        console.error(error);
                    };
                  }
                  remixLiveReloadConnect();
                `,
            }}
        />
    );
};

Step 5

Configure the reverse proxy. In my case I use Nginx.

[...]
upstream dev-remix {
	server IP:DEV_PORT; ## Value of PORT in .env file 
}

upstream dev-socket {
	server IP:PORT_SOCKET; ## Port devServerPort
}

server {
	listen              443 ssl http2;
	listen              [::]:443 ssl http2;
	
	server_name dev.domain.tld;
	
       # Make sure your certificates are valid (Use mkcert to generate certificate for local development)
        
	ssl_certificate /path/certificate/certificat.pem;
	ssl_certificate_key /path/certificate/certificat-key.pem;
	
	proxy_read_timeout 300;
	proxy_connect_timeout 300;
	proxy_send_timeout 300;

	location / {
		proxy_set_header        Host $host;
		proxy_set_header        X-Real-IP $remote_addr;
		proxy_set_header	Upgrade $http_upgrade;
	        proxy_set_header	Connection 'upgrade';
		proxy_pass		http://dev-remix;
	}
	location /socket {
		proxy_pass		http://dev-socket/socket;
		proxy_set_header        Host $host;
		proxy_http_version	1.1;
		proxy_set_header	Upgrade $http_upgrade;
		proxy_set_header	Connection "upgrade";
	}
	
	access_log /var/log/nginx/dev.domain.tld-access.log main;
	error_log /var/log/nginx/dev.domain.tld-error.log warn;
}
[...]

Step 6

Run remix dev : npm run dev
Restart Nginx : /etc/init.d/nginx restart

Enjoy !

Thank you.

1 reply

fouteox Apr 27, 2023

Thank you very much, after several hours of research, this answer allowed me to provide LiveReload on a development server via https.

toddheslin · 2023-04-21T03:39:41Z

toddheslin
Apr 21, 2023

If you're using Caddy instead of nginx, you simply need:

snipbot.localhost {
	reverse_proxy localhost:3000
	handle /socket {
		reverse_proxy localhost:8002
	}
}

Where 'snipbot' is just the name of my local service. The app and dev server are working fine on: https://snipbot.localhost

1 reply

toddheslin Apr 28, 2023

Oh just one final point for those going down this line - the code as it stands doesn't actually stop it from running in production. This blew up my sentry transactions in a few days.

I changed this in two ways:

In root.tsx

Replace

<LiveReload />

With

{'window' in globalThis ? null : <LiveReload />}

I changed livereload.tsx to livereload.server.tsx as I really only need it to spit out the script tag on SSR.

Add this to the top of livereload.server.tsx:

// return nothing when not in development
  if (process.env.NODE_ENV !== 'development') return null

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Support live reload behind HTTPS reverse proxy #4373

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 2 comments 2 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Support live reload behind HTTPS reverse proxy #4373

Uh oh!

Uh oh!

charlesvdv Oct 16, 2022

Replies: 2 comments · 2 replies

Uh oh!

Uh oh!

iwebroot Oct 28, 2022

Step 1

2nd step

Step 3

Step 4

Step 5

Step 6

Uh oh!

fouteox Apr 27, 2023

Uh oh!

toddheslin Apr 21, 2023

Uh oh!

toddheslin Apr 28, 2023

charlesvdv
Oct 16, 2022

Replies: 2 comments 2 replies

iwebroot
Oct 28, 2022

toddheslin
Apr 21, 2023