Heroku / React / Docusaurus - Error R10 (Boot timeout) -> Web process failed to bind to $PORT within 60 seconds of launch

When deploying a fairly vanilla docusaurus (React package) to Heroku, I cannot seem to build it and access it...

I get these errors:

2022-07-04T07:57:45.906918+00:00 app[web.1]: ✔ Client: Compiled successfully in 235.87ms
2022-07-04T07:57:45.909887+00:00 app[web.1]: client (webpack 5.72.0) compiled successfully
2022-07-04T07:58:32.529800+00:00 heroku[web.1]: Error R10 (Boot timeout) -> Web process failed to bind to $PORT within 60 seconds of launch
2022-07-04T07:58:32.569851+00:00 heroku[web.1]: Stopping process with SIGKILL
2022-07-04T07:58:32.590954+00:00 app[web.1]: Error waiting for process to terminate: No child processes
2022-07-04T07:58:32.775949+00:00 heroku[web.1]: Process exited with status 22
2022-07-04T07:58:32.816768+00:00 heroku[web.1]: State changed from starting to crashed

I have looked into this, most of the time people say that there is a binding error with Heroku ports. I don't really know what that means to be honest, but in any case, I don't understand because this is a frontend app and does not (AFAIK) involve Node js. It's a simple web app, not sure why it can't just compile...as such there is nowhere for me to specify a port anyway with a React app as far as I know.

Solution

Assuming you have a vanilla-ish Docusaurus project, you can host it on Heroku by including the following in your Procfile. You may also need to set the buildpack to be heroku/nodejs, but Heroku should auto-discover the project type for you.

web: npm run serve -- -p $PORT

Why this Works

npm run serve runs docusaurus serve "under the hood" which starts a small Node process that serves the static files under the build directory. I assume Heroku is already correctly building your Docusaurus site - which it should since the nodejs buildpack runs npm run build by default if present.

This altogether will serve your project correctly so Heroku's routing can correctly bind to it. The -p $PORT specifies that we want to run the Docusaurus server at the port denoted by Heroku, and the -- is an npm argument separator where anything after the -- is passed along to the underlying command being run.