Learn how to Install React.js on Linux Ubuntu 22.04 LTS

Learn how to Install React.js on Linux Ubuntu 22.04 LTS.

Introduction

React is a popular JavaScript library for building user interfaces. It is an open-source project maintained by Facebook and a broad community of developers. One of the significant advantages of React is its lightweight nature, which enables faster loading of applications. React can be seamlessly integrated into different projects, making it a preferred choice for diverse applications. If you are interested in developing interactive user interfaces for single-page applications, then React can be the best option for you. This tutorial will guide you on how to install React.js on Linux Ubuntu 22.04 LTS.

Requirements

The following is a list of items needed to complete the installation successfully:
1) An SSH client such as Putty
2) A server with atleast 4GB RAM, a dual core processor and 50GB of free disk space
3) Linux Ubuntu Server 22.04 LTS
4) A stable internet connection
5) A basic understanding of Linux commands

Overview

The following is an overview of the steps covered in this tutorial:
1) Download and install Node.JS
2) Create a simple React app.
3) Create a systemd configuration file.
4) Configure Apache as the reverse proxy server for the React app
5) Access the React web interface.

Step 1: Download and install Node.JS

To begin with, you’ll need to install the required dependencies by executing this command:

apt-get install -y ca-certificates curl gnupg

After that, you can download the GPG key for Node.js by entering:

mkdir -p /etc/apt/keyrings
curl -fsSL https://deb.nodesource.com/gpgkey/nodesource-repo.gpg.key | gpg --dearmor -o /etc/apt/keyrings/nodesource.gpg

Once done, add the NodeSource repository to the APT source list by running:

echo "deb [signed-by=/etc/apt/keyrings/nodesource.gpg] https://deb.nodesource.com/node_18.x nodistro main" | tee /etc/apt/sources.list.d/nodesource.list

After that, refresh the repository index and install Node.js by executing:

apt update
apt-get install -y nodejs

Finally, you can check the Node.js version by executing the following command:

node -v

The output should be:

v18.18.2

Step 2: Create a simple React app

Use the NPM command to install create-react app.

npm install -g my-first-react-app

Once it’s installed, create a new project for your application.

create-react-app my-new-react-app

To ensure that everything is working as expected, use the following command to check all the files of your project.

ls my-new-react-app/

This will output:

node_modules package.json package-lock.json public README.md src

Step 3: Create a systemd configuration file

The next step is to generate a systemd service file that will help to manage the React application. You can use a text editor like nano to create the file in the /lib/systemd/system directory. Once you have opened the file, add the following configuration:

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

After saving and closing the file, you should reload the systemd daemon by running the following command:

systemctl daemon-reload

Now you can start and enable the React service by running the following commands:

systemctl start reactjs
systemctl enable reactjs

To verify the React service’s status, simply run the following command:

systemctl status reactjs

You will see an output similar to this:

reactjs.service
 Loaded: loaded (/lib/systemd/system/reactjs.service; static)
 Active: active (running) since Monday 2024-01-29 10:53:00 CAT; 5s ago

This will confirm that the React service is active and running.

Step 4: Configure Apache as the reverse proxy server for the React app

Install Apache web server by running the given command:

apt install apache2 -y

After the installation, the next step is to create an Apache virtual host configuration file that can be done by typing the given command in the terminal:

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

Once the file is open, you can add the necessary configuration as mentioned below:

< virtualhost *:80="">
 ServerName react.yourdomain.com
 ProxyRequests off
 ProxyPass / http://127.0.0.1:3000/
 ProxyPassReverse / http://127.0.0.1:3000/
< /virtualhost>

Once the configuration is added, save and close the file. To activate the Apache virtual host and other required modules, you may use the following commands:

a2ensite reactjs.conf
a2enmod proxy
a2enmod proxy_http

Finally, to apply the changes, you may reload the Apache service by using the given command:

systemctl reload apache2

Step 5: Access the React web interface

Launch your preferred web browser and enter the following URL http://react.yourdomain.com to access the React web interface. The React web UI will be displayed on your screen upon successful access.

Conclusion

In conclusion, React is an excellent choice for building interactive and lightweight user interfaces for single-page applications. In this tutorial, we have gone over the step-by-step process of installing React.js on Linux Ubuntu 22.04 LTS. We have covered the requirements, overview, and the necessary steps to create a simple React app, configure the systemd file, and use Apache as a reverse proxy server. By following these steps, you can successfully install and run React on your Linux Ubuntu server.