Docusaurus chooses port 3000 even if it is busy

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

On macOS, consider the following script server.js:

const http = require("http");

const port = 3000;

const requestListener = function (req, res) {
    res.writeHead(200);
    res.end("My first server!");
};

const server = http.createServer(requestListener);

server.listen(port,  () => {
    console.log(`Server is running on http://localhost:${port}`);
});

Run it using node server.js. Then start a Docusaurus project (running on v2.1.0 in my case). The documentation server will start on port 3000, although it is busy. If you then open Docusaurus in Chrome:

it opens my server.

however, if I use curl, I get the docusaurus page!

If my server passes a host:

- server.listen(port,  () => {
+ server.listen(port, "localhost",  () => {

then Docusaurus will correctly identify that the port is busy and asks if I want to choose another port. Nonetheless I see it as a bug in Docusaurus or one of it’s dependencies.

Possible solution

Although used by less people, this logic for finding a free port works now in Remotion without bug reports coming in: https://github.com/remotion-dev/remotion/blob/main/packages/renderer/src/get-port.ts

I am happy to chat on Discord how to investigate it together!

Reproducible demo

No response

Steps to reproduce

As above

Expected behavior

Busy port detection kicks in and asks if a different port should be used

Actual behavior

Server gets started and a conflict is created

Your environment

• Docusaurus version used: v2.1.0
• Environment name and version (e.g. Chrome 89, Node.js 16.4): Node 16.7
• Operating system and version (e.g. Ubuntu 20.04.2 LTS): macOS

Self-service

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

[JonnyBurger]

Dug deper:

• Docusaurus uses detect-port@1.3.2 while Facebook uses detect-port-alt@1.1.6

detect-port-alt uses 4 steps to determine the port (see their comments): https://unpkg.com/detect-port-alt@1.1.6/lib/detect-port.js

detect-port uses only 3steps to determine the port, and the logic is significantly different: https://unpkg.com/detect-port@1.3.0/lib/detect-port.js

• Facebooks passes 0.0.0.0 as hostname parameter to detect-port-alt, while Docusaurus uses 127.0.0.1 as hostname parameter

I found that if Docusaurus switches to detect-port-alt, and uses 0.0.0.0 instead, it also detects the busy port like CRA. Only tested on macOS though.

[slorber]

Thanks 💯

If only someone could just create a shared package that works for everyone 😅 looks like CRA is using detect-port-alt now (published by Dan Abramov, no fork repo linked 😓 ). That probably was for a good reason.

Interesting related CRA issues:

• https://github.com/facebook/create-react-app/pull/2126 (led to forking)
• https://github.com/facebook/create-react-app/pull/2209 (@timer/detect-port introduction, before renaming it to detect-port-alt)
• https://github.com/facebook/create-react-app/issues/12417 (we should be able to run 2 Docusaurus with different hosts on same port?)