DEV Community

Cover image for Deploy ReactJS Production Build with PM2
Taufiq Abdullah
Taufiq Abdullah

Posted on

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
Enter fullscreen mode Exit fullscreen mode

4. Run PM2 Command

this is the pm2 command to serve

pm2 serve <path> <port>
Enter fullscreen mode Exit fullscreen mode

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

pm2 serve myReactApp/ 3000 --name "my-react-app" --spa
Enter fullscreen mode Exit fullscreen mode
  • 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
Enter fullscreen mode Exit fullscreen mode

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

pm2 <start/stop/delete> <process id/process name>
Enter fullscreen mode Exit fullscreen mode

example :

pm2 stop my-react-app
Enter fullscreen mode Exit fullscreen mode

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

pm2 monit
Enter fullscreen mode Exit fullscreen mode

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 ;)

Discussion (5)

Collapse
earthboundmisfit profile image
Muzammil • Edited

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

Collapse
navizdev profile image
Juan Silupu Maza • Edited

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

Collapse
manuelhpineda_87 profile image
Manuel Pineda

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

Collapse
taufiqtab profile image
Taufiq Abdullah Author

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

Collapse
sergioortegac profile image
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. :)