Every aspiring mobile app developer needs to know how to install ReactJS with Ngnix on Ubuntu 20.04 operating system. We’re here to help you figure it all out.
ReactJS is one of the most widely used among all JavaScript frameworks. It can be used for mobile and web application development and is available to the masses. In this article, we will talk about the installation instructions for ReactJS with nginx on Ubuntu.
We will start with a brief introduction to ReactJS and then discuss the installation.
Introduction to ReactJS
ReactJS is a free and open-source framework developed by Facebook for front-end application development. It can be used to easily create reusable components for rich and engaging web applications. Using ReactJS, you can create an interactive website by composing several components.
The following are the essential features of ReactJS:
- Using a virtual document object model (DOM), one can create a very fast web application
- It provides support for one-way data binding
- It uses JavaScript for XML (JSX) such that both hypertext markup language (HTML) and JavaScript can be written in the same code
Now, we will discuss the installation instructions for ReactJS. To complete this tutorial, certain prerequisites must be met. You should have an Ubuntu server, a valid domain name pointed to by an internet protocol (IP) address, and a root user account.
How to Install ReactJS with Nginx on Ubuntu 22.04
Now that you have a better understanding of ReactJS, follow the steps below to install it on Ubuntu 20.04.
Upgrade your system
The very first step is upgrading your system packages to the latest version. For this purpose, open the Terminal and type the following commands:
$apt-get update -y
$apt-get upgrade –y
Install dependencies
Now, install the dependencies required for ReactJS installation. Type the following command on the Terminal to install the dependencies:
$apt-get install curl gnupg2 –y
Install node.js
The next step is to install node.js on your server. For this purpose, first, add the repository using the following command:
$curl -sL https://deb.nodesource.com/setup_18.x | bash -
The install node.js with the following command:
$apt-get install nodejs -y
Update npm
Once the node.js is installed, update the npm to the latest version. To do this, type the following command on the Terminal:
$npm install npm@latest –g
It will take a while to upgrade the npm.
Verify node.js
After installing node.js and upgrading npm, you can verify if the node.js is properly installed. For this purpose, type the following command on your Terminal:
$node –v
The output should show the version of node.js installed on your computer.
Install create react App tool
Then, we will install the create react App tool. It is a command line interface (CLI) tool. It saves time for setup and configuration since a single command will suffice to create the react project. To install this tool, type the following command on your Terminal:
$npm install -g create-react-app
Creating a simple react application
Now, we will create a simple react application. First, move to the directory where you want to create the project. Type the following command to change the directory:
$cd /opt
Then, create the react project by typing the following command:
$create-react-app reactapp
You should be able to create the react project. The above command will create the project files on your computer.
Start react project
To start the project, move to the project folder via the following command typed on the Terminal:
$cd /opt/reactapp
Now, to start the project, type the following command:
$npm start
Finally, press “Ctrl + C” to stop the application, as we will create a systemd service file to run the project next.
Creating a systemd service for React App
We will create a systemd service. For this purpose, we will create a service file and then reload the systemd service. Follow the steps below to create a systemd service.
Edit the service file
Create a file react.service and open it in your favorite editor. For this purpose, type the following command:
$nano /lib/systemd/system/react.service
Now, add the following lines to your service file:
[Service]
Type=simple
User=root
Restart=on-failure
WorkingDirectory=/opt/reactapp
ExecStart=npm start -- --port=3000
Save the file and close the editor. Now, you should load the systemd daemon. For this purpose, type the following command:
$systemctl daemon-reload
Start react service
Now, we will start and enable react service. To start, type the following command on the Terminal:
$systemctl start react
Enable service
To enable the service to start on boot, type the following command on the Terminal:
$systemctl enable react
Now, verify the status of the react service by typing the following command:
$systemctl status react
You should see the status of the react service.
Configure Nginx as a reverse proxy
Now, we will install and configure Nginx as a reverse proxy for the react application. With this approach, you will be able to access react application on port 80. Follow the steps below to configure the Nginx service proxy.
Install Nginx
Install the nginx with the help of the following command:
$apt-get install nginx –y
Edit virtual host configuration file
Create a virtual host configuration file via the following command and edit it:
$nano /etc/nginx/sites-available/reactjs.conf
Add the following lines to the file:
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. We will then enable the nginx host.
Enable Nginx virtual host
Enable the Nginx host with the help of the following command:
$ln -s /etc/nginx/sites-available/reactjs.conf /etc/nginx/sites-enabled/
Next, verify the Nginx for any syntax error via the following command:
$nginx –t
Lastly, restart and verify the Nginx service with these commands:
$systemctl restart nginx
$systemctl status nginx
Secure ReactJS with Let’s encrypt
In addition to the previous steps, you should secure ReactJS with let’s encrypt. Type the following commands for this purpose:
$apt-get install python3-certbot-nginx –y
$certbot --nginx -d reactjs.example.com
Follow the steps, provide an email address and choose whether to redirect HTTP traffic to HTTPS or not.
And that’s it for the installation process. If you want, you can also access the react application on your browser here.
In this article, we have discussed the installation instructions for ReactJS with Nginx on Ubuntu. Detailed guidelines for installation and accessing the application have been provided.
If this guide helped you, please share it.
