How to Install ReactJS with Nginx on Ubuntu 22.04

React.js is a free and open-source JavaScript framework developed by Facebook in 2011. It is used for building reusable UI components and helps users to create rich and engaging web apps fast and efficiently with minimal coding. With React, you can build an interactive web interface and compose complex UIs from small and isolated pieces. It uses Virtual DOM which makes the app fast. It provides a lot of features such as Virtual DOM, One-way Data Binding, Components, JSX, Conditional Statements, and many more.

In this tutorial, we will show you how to install React.js on Ubuntu 22.04.

Prerequisites

  • A server running Ubuntu 22.04.
  • Valid domain name pointed with your server IP.
  • A root password is configured on the server.

Getting Started

First, you will need to update your system packages to the latest version. You can update them using the following command:

apt-get update -y
apt-get upgrade -y

Once all the packages are up-to-date, run the following command to install other required dependencies:

apt-get install curl gnupg2 -y

Once all the dependencies are installed, you can proceed to the next step.

Install Node.js

Next, you will need to install Node.js on your server. By default, the latest version of Node.js is not available in the Ubuntu 22.04 standard repository. So you will need to install Node.js from the Node.js official repository.

First, add the Node.js repository with the following command:

curl -sL https://deb.nodesource.com/setup_18.x | bash -

Next, run the following command to install the Node.js to your system:

apt-get install nodejs -y

After installing Node.js, update the NPM to the latest version using the following command:

npm install npm@latest -g

You should get the following output:

removed 14 packages, changed 73 packages, and audited 223 packages in 3s

14 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

Next, verify the installed version of Node.js with the following command:

node -v

You should get the following output:

v18.12.1

Once you are finished, you can proceed to the next step.

Install Create React App Tool

Create React App is a CLI tool that helps users to save time for setup and configuration. You just need to run a single command and Create React App will set up all tools need to start your project.

You can install the Create React App tool using the following command:

npm install -g create-react-app

Once you are finished, you can proceed to the next step.

Create a Sample React Application

In this section, we will create a sample React app with Create React App tool.

First, change the directory to /opt and create your first project with the following command:

cd /opt
create-react-app reactapp

You should see the following output:

Success! Created reactapp at /opt/reactapp
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd reactapp
  npm start

Happy hacking!

Next, change the directory to your project directory and start your application with the following command:

cd /opt/reactapp
npm start

You should get the following output:

Compiled successfully!

You can now view reactapp in the browser.

  http://localhost:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

webpack compiled successfully

Press CTRL+C to stop the application. We will create a systemd service file to manage the React application.

Create a Systemd Service for React App

Next, you will need to create a systemd service for your React app. You can create it with the following command:

nano /lib/systemd/system/react.service

Add the following lines:

[Service]
Type=simple
User=root
Restart=on-failure
WorkingDirectory=/opt/reactapp
ExecStart=npm start -- --port=3000

Save and close the file then reload the systemd daemon with the following command:

systemctl daemon-reload

Next, start the React service and enable it to start at system reboot by running the following command:

systemctl start react
systemctl enable react

You can verify the status of the React service with the following command:

systemctl status react

You should get the following output:

? react.service
     Loaded: loaded (/lib/systemd/system/react.service; static)
     Active: active (running) since Sun 2022-11-20 11:18:50 UTC; 6s ago
   Main PID: 76129 (npm start --por)
      Tasks: 30 (limit: 2242)
     Memory: 250.9M
        CPU: 4.663s
     CGroup: /system.slice/react.service
             ??76129 "npm start --port=3000" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" ""
             ??76140 sh -c "react-scripts start --port=3000"
             ??76141 node /opt/reactapp/node_modules/.bin/react-scripts start --port=3000
             ??76148 /usr/bin/node /opt/reactapp/node_modules/react-scripts/scripts/start.js --port=3000

Nov 20 11:18:54 ubuntu2204 npm[76148]: (node:76148) [DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE] DeprecationWarning: 'onAfterSetupMiddl>
Nov 20 11:18:54 ubuntu2204 npm[76148]: (Use `node --trace-deprecation ...` to show where the warning was created)
Nov 20 11:18:54 ubuntu2204 npm[76148]: (node:76148) [DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUP_MIDDLEWARE] DeprecationWarning: 'onBeforeSetupMid>
Nov 20 11:18:54 ubuntu2204 npm[76148]: Starting the development server...
Nov 20 11:18:55 ubuntu2204 npm[76148]: Compiled successfully!
Nov 20 11:18:55 ubuntu2204 npm[76148]: You can now view reactapp in the browser.
Nov 20 11:18:55 ubuntu2204 npm[76148]:   http://localhost:3000
Nov 20 11:18:55 ubuntu2204 npm[76148]: Note that the development build is not optimized.
Nov 20 11:18:55 ubuntu2204 npm[76148]: To create a production build, use npm run build.
Nov 20 11:18:55 ubuntu2204 npm[76148]: webpack compiled successfully

Once you are finished, you can proceed to the next step.

Configure Nginx as a Reverse Proxy

It is a good idea to install and configure Nginx as a reverse proxy for React App. So you can access your app through port 80.

First, install the Nginx package using the following command:

apt-get install nginx -y

Once the Nginx is installed, create a new Nginx virtual host configuration file:

nano /etc/nginx/sites-available/reactjs.conf

Add the following lines:

upstream backend {
  server localhost:3000;
}

server {
    listen 80;
    server_name reactjs.example.com;

    location / {
        proxy_pass http://backend/;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $http_host;

        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forward-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forward-Proto http;
        proxy_set_header X-Nginx-Proxy true;

        proxy_redirect off;
    }
}

Save and close the file then enable the Nginx virtual host with the following command:

ln -s /etc/nginx/sites-available/reactjs.conf /etc/nginx/sites-enabled/

Next, verify the Nginx for any syntax error by running the following command:

nginx -t

You should get the following output:

nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful

Finally, restart the Nginx service to apply the changes:

systemctl restart nginx

You can also verify the Nginx service status with the following command:

systemctl status nginx

You should see the following output:

? nginx.service - A high performance web server and a reverse proxy server
     Loaded: loaded (/lib/systemd/system/nginx.service; enabled; vendor preset: enabled)
     Active: active (running) since Sun 2022-11-20 11:20:17 UTC; 6s ago
       Docs: man:nginx(8)
    Process: 76760 ExecStartPre=/usr/sbin/nginx -t -q -g daemon on; master_process on; (code=exited, status=0/SUCCESS)
    Process: 76762 ExecStart=/usr/sbin/nginx -g daemon on; master_process on; (code=exited, status=0/SUCCESS)
   Main PID: 76763 (nginx)
      Tasks: 2 (limit: 2242)
     Memory: 2.6M
        CPU: 32ms
     CGroup: /system.slice/nginx.service
             ??76763 "nginx: master process /usr/sbin/nginx -g daemon on; master_process on;"
             ??76764 "nginx: worker process" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" ""

Nov 20 11:20:17 ubuntu2204 systemd[1]: Starting A high performance web server and a reverse proxy server...
Nov 20 11:20:17 ubuntu2204 systemd[1]: Started A high performance web server and a reverse proxy server.

At this point, Nginx is installed and configured to serve React App. You can now proceed to the next step.

Secure React.js with Let's Encrypt

Next, you will need to install the Certbot client package to install and manage the Let's Encrypt SSL.

First, install the Certbot with the following command:

apt-get install python3-certbot-nginx -y

Once the installation is finished, run the following command to install the Let's Encrypt SSL on your website:

certbot --nginx -d reactjs.example.com

You will be asked to provide a valid email address and accept the term of service as shown below:

Saving debug log to /var/log/letsencrypt/letsencrypt.log
Plugins selected: Authenticator nginx, Installer nginx
Enter email address (used for urgent renewal and security notices) (Enter 'c' to
cancel): [email protected]

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Please read the Terms of Service at
https://letsencrypt.org/documents/LE-SA-v1.2-November-15-2017.pdf. You must
agree in order to register with the ACME server at
https://acme-v02.api.letsencrypt.org/directory
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
(A)gree/(C)ancel: A

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Would you be willing to share your email address with the Electronic Frontier
Foundation, a founding partner of the Let's Encrypt project and the non-profit
organization that develops Certbot? We'd like to send you email about our work
encrypting the web, EFF news, campaigns, and ways to support digital freedom.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
(Y)es/(N)o: Y
Obtaining a new certificate
Performing the following challenges:
http-01 challenge for reactjs.example.com
Waiting for verification...
Cleaning up challenges
Deploying Certificate to VirtualHost /etc/nginx/sites-enabled/fuel.conf

Next, choose whether or not to redirect HTTP traffic to HTTPS as shown below:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
1: No redirect - Make no further changes to the webserver configuration.
2: Redirect - Make all requests redirect to secure HTTPS access. Choose this for
new sites, or if you're confident your site works on HTTPS. You can undo this
change by editing your web server's configuration.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Select the appropriate number [1-2] then [enter] (press 'c' to cancel): 2

Type 2 and hit Enter to finish the installation. You should see the following output:

Redirecting all traffic on port 80 to ssl in /etc/nginx/sites-enabled/fuel.conf

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Congratulations! You have successfully enabled https://reactjs.example.com

You should test your configuration at:
https://www.ssllabs.com/ssltest/analyze.html?d=reactjs.example.com
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

IMPORTANT NOTES:
 - Congratulations! Your certificate and chain have been saved at:
   /etc/letsencrypt/live/reactjs.example.com/fullchain.pem
   Your key file has been saved at:
   /etc/letsencrypt/live/reactjs.example.com/privkey.pem
   Your cert will expire on 2023-02-20. To obtain a new or tweaked
   version of this certificate in the future, simply run certbot again
   with the "certonly" option. To non-interactively renew *all* of
   your certificates, run "certbot renew"
 - Your account credentials have been saved in your Certbot
   configuration directory at /etc/letsencrypt. You should make a
   secure backup of this folder now. This configuration directory will
   also contain certificates and private keys obtained by Certbot so
   making regular backups of this folder is ideal.
 - If you like Certbot, please consider supporting our work by:

   Donating to ISRG / Let's Encrypt:   https://letsencrypt.org/donate
   Donating to EFF:                    https://eff.org/donate-le

 - We were unable to subscribe you the EFF mailing list because your
   e-mail address appears to be invalid. You can try again later by
   visiting https://act.eff.org.

Now, your React.js web application is now secured with Let's Encrypt SSL. 

Access React App Web Interface

Now, open your web browser and type the URL https://reactjs.example.com. You will be redirected to the React.Js web interface on the following screen:

Conclusion

Congratulations! you have successfully installed and configured React.Js on Ubuntu 22.04 server. You can now start building your own React-based application and host it in the production environment. Feel free to ask me if you have any questions.

Share this page:

0 Comment(s)