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.
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!