Installing ReactJS on Ubuntu 20.04

ReactJS is a popular, open-source JavaScript library used to construct reusable UI components. Developed by Facebook in 2011, it facilitates the creation of dynamic web apps quickly and efficiently with minimal coding. ReactJS simplifies the integration of interactive elements on your website and ensures speed by leveraging the Virtual DOM. The library offers several powerful features such as Virtual DOM, One-way Data Binding, Components, JSX, Conditional Statements, and more.

In this tutorial, we’ll guide you through installing Create React App and hosting a ReactJS application using the Nginx web server on Ubuntu 20.04.

Prerequisites

  • A server running Ubuntu 20.04 with a minimum of 2 GB of RAM.
  • A valid domain name pointed to your server’s IP address. We’ll use reactjs.example.com in this example.
  • Root password configured on the server.

Getting Started

Before we begin, it’s advisable to update your system packages to the latest versions. Execute the following command:

apt-get update -y

After updating, install the necessary dependencies with the command below:

apt-get install curl gnupg2 -y

Once the dependencies are in place, proceed to the Node.js installation.

Install Node.js

Node.js is required on your server; however, the latest version isn’t available by default in Ubuntu’s repositories. Instead, you need to install it from the official Node.js repository. Begin by adding the repository:

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

Then, install Node.js with this command:

apt-get install nodejs -y

Update NPM to the latest version using:

npm install npm@latest -g

To confirm Node.js installation, verify its version:

node -v

You should see an output similar to:

v14.15.3

Install Create React App Tool

Create React App simplifies the setup and configuration of React projects. Install it globally using:

npm install -g create-react-app

Create Your First React App

Let’s create a new React app. Navigate to the /opt directory and initialize your project:

cd /opt
create-react-app reactproject

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

cd /opt/reactproject
npm start

Press CTRL+C to stop the app when needed.

Create a Startup File for React App

To automatically start the React app after system reboots, create a systemd service file:

nano /lib/systemd/system/react.service

Add the following configuration:

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

Configure Nginx for React App

Install Nginx to act as a reverse proxy, allowing the app to be accessed via port 80:

apt-get install nginx -y

Create an Nginx virtual host configuration:

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

Add the following configuration:

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

Access React App Web Interface

Open your browser and visit http://reactjs.example.com. You should see the ReactJS interface:

Conclusion

Congratulations! You’ve successfully installed and configured ReactJS on your Ubuntu 20.04 server. You’re now equipped to deploy your own React application in a production environment.

FAQ

  • Can I use a different version of Node.js?
    You can install different versions of Node.js by replacing the script URL with a different version setup in the command:

    https://deb.nodesource.com/setup_X.x

    .

  • What if Nginx is not working?
    Check the Nginx configuration files for errors using

    nginx -t

    and verify Nginx status with

    systemctl status nginx

    .

  • Can I develop multiple React apps on the same server?
    Yes, you can host multiple React apps by configuring separate systemd services and Nginx configurations for each app, using different ports or server names.