Deploy ReactJS Production Build with PM2

Hello, This is my very first Post in Dev.to and i want to share about how to deploy ReactJS Production Build using VPS with PM2

Server Environment :

OS : Ubuntu 18.04.4 LTS
NodeJS : 10.19.0
NPM : 6.14.2

1. Build it

Make sure you build it (using yarn build / npm run build)

2. Upload build file to VPS

in this step, you can upload to your vps, in my case i put it in /var/www/myReactApp

3. Install PM2

you need pm2 to serve the apps, by using this command in terminal

sudo npm install pm2 -g

4. Run PM2 Command

this is the pm2 command to serve

pm2 serve <path> <port>

now we need to put our project in the command by calling

pm2 serve myReactApp/ 3000 --name "my-react-app" --spa

• myReactApp/ : folder of the app
• 3000 : the port for serve
• "my-react-app" : name for PM2 Process, will visible in "pm2 list"
• --spa : parameter for Single Page Application, redirect to root URL

5. Apps Running

now your apps Running on the port :3000, we can open browser and access to yourdomain.com:3000 or by using your-ip:3000.

we also can setup the apache sites-enabled to hide the port from url by using ProxyPreserveHost and ProxyPass

6. Monitoring Running Apps with PM2

we can see all of our pm2 process by calling this command

pm2 list

we can start, stop or delete process from list by using

pm2 <start/stop/delete> <process id/process name>

example :

pm2 stop my-react-app

and we can view pm2 dashboard for monitoring all running process by using

pm2 monit

now our apps deployed :D
i hope this article is useful, and i'm so sorry if there is a mistake and my poor english.

Have a Nice Day ;)

Comments

[Muzammil]

This is equivalent to running the application, only thing is we use pm2 to run it. Is there a way to deploy the build file of the react application using pm2 ? This way would have browser compatibility issues if I'm not wrong.

In order to deploy the react build file:-
Step 1:

npm run build

Step 2:

pm2 serve build/ 3000 --name "react-build" --spa

The "react-build" is just an alias name for the pm2 process. "--spa" is optional as well. "build/" is the folder in which the build files are stored

[Juan Silupu Maza]

it necessarily has to be on that route /var/www/myReactApp?

[Manuel Pineda]

I have ran a NodeJs app using pm2 and I have it on another directory but I use nginx as a proxy.

[Taufiq Abdullah]

you can put it outside the /var/www....
as long as the app start with the spesific port (example : 3000) then you can make ProxyReverse with Apache or Nginx

[Tim Bogdanov]

why is it serving it on 0.0.0.0? shouldn't it serve it on 127.0.0.1?

[Anurag Deep]

check .env file, and update HOST from 0.0.0.0 to 127.0.0.1, i.e.
HOST=127.0.0.1
PORT=1337

[Sergio Ortega Castillo]

Thanks a lot! I followed the steps, build app, serve with pm2, upload to my server and redirect using a reverse proxy, and all perfect. :)

[Flavio Cezar]

hi, can i run pm2 serve with https ?