Not Sure How to Start and Deploy ReactJS App on Production Server with ExpressJS

Question

Locally, I use ExpressJS on port 3001 and then start my react app with npm start which runs the development server on port 3000. This allows me to route requests as a proxy from 3000 to 3001.

For production, I installed Ubuntu NodeJS 6.12.13 on 16.04 on a DigitalOcean Droplet and then installed Nginx and PM2.

In my Nginx default file I have set the following:

location / {
    proxy_pass http://localhost:3001;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    proxy_cache_bypass $http_upgrade;
}

I've moved over my Express and React setup and added the Express server to the PM2 startup. Nginx is being used as a reverse proxy server to use Express on port 3001. Here is the PM2 startup ( www is the name of the server file which runs Express).

When I load my domain, I receive the Express default page:

Now I'm not sure how to start the react app, because it doesn't seem logical to start it using npm start and keep the terminal open for a production server. I need to see my React app when I visit the domain instead of the Express message.

I've found articles which mention to use npm run build but they don't explain how to then run the React app. Sorry I'm new to this, but any help would be appreciated. Thank you.

Answer 1

You won't run the React app because there is no such a thing :) After building your app all your files bundled in a single Javascript file. You are using start for your React app in development for development purposes.

After doing:

npm run build

you will have a build directory in your app directory. Just copy all the files and directories from this build directory to your server where your Nginx's default directory points.

If you don't want to open your regular app codes in developer tools of browsers, delete build/static/js/some_file.js.map and build/static/css/some_file.css.map before uploading your files to server. Those are source map files which are for debugging purposes. If you include them, in developer tools everyone can see you files directly. Your code actually open to world, to anybody right now but with a bundled, uglified and minified way. If you include source map files, they will be opened as they are.

This is how you run a static app. Without a backend, means here without Express, just using a web server.

But, since your question involves Express I assume you are using a backend server. So, one method is copying all your project to your server again with all backend and frontend code as you are using in development. Build your React app. But this time instead of starting both an Express server and React development server, on your server you will only run Express. Express will be the one serving your frontend. You should have already configured this in your development and done some production tests.

So, if you don't use a backend server you don't need Express or any other thing apart from a single web server. If you use a backend server then you need something like Express to serve both your backend requests (like to API's) and your React app. In addition you will need something like PM2 to run Express and optionally Express to use proxies for different apps.