Heroku / React / Docusaurus - Error R10 (Boot timeout) -> Web process failed to bind to $PORT wit-CodePudding

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.

CodePudding user response：

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.