How to Deploy React app using Nginx and PM2

Learn how to deploy React app using Nginx and PM2. Our Nginx Support team is here to help you with your questions and concerns.

How to Deploy React app using Nginx and PM2

Building and deploying a React app can be a rewarding experience. Today, we are going to take a look at how to start with DigitalOcean’s NodeJS One-Click app, secure the server, install dependencies, and configure Nginx to host our React app. In fact, with these steps, we will be able to deploy our application in no time.

1. First, we have to create a server with DigitalOcean’s NodeJS One-Click app.
2. Then, it is time to log in to the server and install the necessary dependencies. We can do this with these commands:

   sudo apt-get install nginx
   sudo npm i -g create-react-app react-scripts@latest pm2@latest
   Copy Code
3. After that, we have to navigate to the directory where we want to create our React app and run this command:

   create-react-app my-appCopy Code

   
   After the application is ready to be deployed, head to its directory and run this command to build the production-ready version:
   

   sudo npm run buildCopy Code
4. Now we will use PM2 as an application manager. We have to start our application in the background with the following command:

   pm2 start my-app/node_modules/react-scripts/scripts/start.js --name "my-app"Copy Code
5. Now, it is time to configure Nginx to expose our React app to the internet. This involves creating a new site configuration file in `/etc/nginx/sites-available/`.
6. Then, add the following lines to the file we created in the previous step:

   server {
   listen 80;
   server_name my-app.com;
   server_name your.server.ip.goes.here;
   root /root/my-app.com;
   index index.html;
   access_log /var/log/nginx/my-app.com.access.log;
   error_log /var/log/nginx/my-app.com.error.log;
   location / {
   try_files $uri /index.html =404;
   }
   }
   Copy Code
7. Next, we must create a symbolic link in the `sites-enabled` directory to activate the site:

   cd /etc/nginx/sites-enabled
   ln -s ../sites-available/my-app.com
   Copy Code
8. After that, we have to validate the Nginx configuration file for errors by running:

   nginx -tCopy Code
9. Now, we have to restart Nginx.
10. Then, head to the server’s IP address on the local computer, and our React app will now be hosted and accessible to the world.

[Need assistance with a different issue? Our team is available 24/7.]

Conclusion

In brief, our Support Techs demonstrated how to deploy React app using Nginx and PM2.