DEV Community

loading...
Cover image for Deploy ReactJS Production Build with PM2

Deploy ReactJS Production Build with PM2

taufiqtab profile image Taufiq Abdullah ・2 min read

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 (1)

pic
Editor guide
Collapse
navizdev profile image
Juan Silupu Maza • Edited

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