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 ;)
Top comments (8)
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
it necessarily has to be on that route /var/www/myReactApp?
I have ran a NodeJs app using pm2 and I have it on another directory but I use nginx as a proxy.
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
why is it serving it on 0.0.0.0? shouldn't it serve it on 127.0.0.1?
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
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. :)
hi, can i run pm2 serve with https ?