Bobcares

How to Deploy React app using Nginx and PM2

by | Jul 17, 2023

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.

How to Deploy React app using Nginx and PM2

  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.

PREVENT YOUR SERVER FROM CRASHING!

Never again lose customers to poor server speed! Let us help you.

Our server experts will monitor & maintain your server 24/7 so that it remains lightning fast and secure.

GET STARTED

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

Speed issues driving customers away?
We’ve got your back!