Michael Snower Michael Snower - 2 months ago 22
React JSX Question

How to specify a port number in a create-react-app based project in production?

I am deploying a website that will have a few react projects that were built with create-react-app. Each project will be on its own webpage: e.g.: mywebsite.com/project1, mywebsite.com/project. I am setting up an nginx reverse proxy on an Ubuntu server (which I understand how to configure), but I am not sure how to specify port numbers for each of my create-react-app projects so that each of them has a unique port. Can anyone shed light on how to do this? Thanks!

PS - I have seen threads such as this one - How to specify a port to run a create-react-app based project?, but I do not see how this solution can be applied in production.

Answer Source

The server you start with npm start command in create-react-app is webpack dev server. It only meant to use while development and you shouldn't use that in a production environment.

Instead, you can easily host a CRA app with a simple static file server which can easily configure with nginx without a reverse proxy or changing the port of dev server. You simply need run npm run build command and deploy content of build folder to the appropriate folder of your static file server. You can read more about this in the documentation of CRA.

Also, make sure that you specify the homepage in your package.json before building the project, since you are going to host your app in a relative path like mywebsite.com/project1. Because CRA assumes your app is hosted at the server root with default settings.

Hope this helps!