Skip to content

Live reload not working with reverse proxy #7912

@jeengbe

Description

@jeengbe

Have you 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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugAn error in the Docusaurus core causing instability or issues with its execution

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions