Live reload not working with reverse proxy

Have you read the Contributing Guidelines on issues?

• I have read the Contributing Guidelines on issues.

Prerequisites

• I’m using the latest version of Docusaurus.
• I have tried the npm run clear or yarn clear command.
• I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
• I have tried creating a repro with https://new.docusaurus.io.
• I have read the console error message carefully (if applicable).

Description

When running Docusaurus behind a reverse proxy (Codespaces, code-server etc.), Docusaurus is likely being accessed under a different url than it is being exposed on. (eg. localhost:3000 --Docker & Reverse Proxy-> dev.mycodespace.io) In this scenario (Docusaurus needs to be run with --host 0.0.0.0), webpack uses the same options for the web socket server as for the dev server, and passes those on to the client: protocol=ws%3A&hostname=0.0.0.0&port=3000&pathname=%2Fws&logging=warn&reconnect=10 (https://github.com/webpack/webpack-dev-server/blob/master/lib/Server.js#L634). Luckily, 0.0.0.0 is replaced by self.location.hostname (https://github.com/webpack/webpack-dev-server/blob/master/client-src/utils/createSocketURL.js#L91), same goes for the protocol, but there is no way to correct the incorrect port, so there must be a way for the developer to specify this. This should be implemented here: https://github.com/facebook/docusaurus/blob/main/packages/docusaurus/src/commands/start.ts#L190

For those who are looking for a solution for the time being, this patch will make webpack hot reload connect to self.location.port.

diff --git a/node_modules/@docusaurus/core/lib/commands/start.js b/node_modules/@docusaurus/core/lib/commands/start.js
index 4fd663b..3678353 100644
--- a/node_modules/@docusaurus/core/lib/commands/start.js
+++ b/node_modules/@docusaurus/core/lib/commands/start.js
@@ -142,6 +142,9 @@ async function start(siteDirParam = '.', cliOptions = {}) {
                 warnings: false,
                 errors: true,
             },
+            webSocketURL: {
+                port: 0
+            }
         },
         headers: {
             'access-control-allow-origin': '*',

Reproducible demo

No response

Steps to reproduce

1. Run Docusaurus behind a reverse proxy (inside a Docker Container in this example)
2. Start dev mode pnpm start --host 0.0.0.0
3. Open console and see errors (also no live reload)

Expected behavior

Docusaurus should automatically refresh after changes to the source file.

Actual behavior

It does not.

Your environment

pnpm start --host 0.0.0.0 inside a Docker Container that rebinds :3000 -> :3007 hidden behind a reverse proxy that serves :3007 on dev.mycodespace.io

Self-service

• I’d be willing to fix this bug myself.

[jeengbe]

The snippet fixes the problem, since it tells HMR to use the same port that the website is currently running on. You should also consider always passing 0.0.0.0 as hostname, since that sets it to the current domain.

The following code snippets go together, and this is where the issue arises:

• https://github.com/facebook/docusaurus/blob/main/packages/docusaurus/src/commands/start.ts#L190 (This is where webpack dev server is initialized)
• https://github.com/webpack/webpack-dev-server/blob/master/lib/Server.js#L478 (Constructing data to pass to the client)
• https://github.com/webpack/webpack-dev-server/blob/49efdf87341d4e40106baae60670a4aabf3285fb/client-src/utils/createSocketURL.js#L75 (Parsing of the passed data)

Will provide a repo with steps to reproduce asap

[jeengbe]

I do very well understand that. Luckily, I had a similar configuration lying around and quickly managed to throw together a working sample repository. Note that you might have to wait a little for Docusaurus to finish building upon launching it. Locate to localhost, and open dev tools to see ws:// connections being made to localhost:3000

The patch fixes this issue as it, as outlined above with code references, makes hmr use the port the site is being accessed on.