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

  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-app
    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 build

  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"

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

  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

  8. After that, we have to validate the Nginx configuration file for errors by running:

    nginx -t

  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 *

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

Privacy Preference Center

Necessary

Necessary cookies help make a website usable by enabling basic functions like page navigation and access to secure areas of the website. The website cannot function properly without these cookies.

PHPSESSID - Preserves user session state across page requests.

gdpr[consent_types] - Used to store user consents.

gdpr[allowed_cookies] - Used to store user allowed cookies.

PHPSESSID, gdpr[consent_types], gdpr[allowed_cookies]
PHPSESSID
WHMCSpKDlPzh2chML

Statistics

Statistic cookies help website owners to understand how visitors interact with websites by collecting and reporting information anonymously.

_ga - Preserves user session state across page requests.

_gat - Used by Google Analytics to throttle request rate

_gid - Registers a unique ID that is used to generate statistical data on how you use the website.

smartlookCookie - Used to collect user device and location information of the site visitors to improve the websites User Experience.

_ga, _gat, _gid
_ga, _gat, _gid
smartlookCookie
_clck, _clsk, CLID, ANONCHK, MR, MUID, SM

Marketing

Marketing cookies are used to track visitors across websites. The intention is to display ads that are relevant and engaging for the individual user and thereby more valuable for publishers and third party advertisers.

IDE - Used by Google DoubleClick to register and report the website user's actions after viewing or clicking one of the advertiser's ads with the purpose of measuring the efficacy of an ad and to present targeted ads to the user.

test_cookie - Used to check if the user's browser supports cookies.

1P_JAR - Google cookie. These cookies are used to collect website statistics and track conversion rates.

NID - Registers a unique ID that identifies a returning user's device. The ID is used for serving ads that are most relevant to the user.

DV - Google ad personalisation

_reb2bgeo - The visitor's geographical location

_reb2bloaded - Whether or not the script loaded for the visitor

_reb2bref - The referring URL for the visit

_reb2bsessionID - The visitor's RB2B session ID

_reb2buid - The visitor's RB2B user ID

IDE, test_cookie, 1P_JAR, NID, DV, NID
IDE, test_cookie
1P_JAR, NID, DV
NID
hblid
_reb2bgeo, _reb2bloaded, _reb2bref, _reb2bsessionID, _reb2buid

Security

These are essential site cookies, used by the google reCAPTCHA. These cookies use an unique identifier to verify if a visitor is human or a bot.

SID, APISID, HSID, NID, PREF
SID, APISID, HSID, NID, PREF