How To Install ReactJS on Ubuntu 22.04 LTS

In this tutorial, we will show you how to install ReactJS on Ubuntu 22.04 LTS. For those of you who didn’t know, React (also known as React.js or ReactJS) is an open-source JavaScript front-end library for creating web frontend and UI components. Many developers are using it because of its flexibility, integrity, and its feature to bring Html directly into JS.

This article assumes you have at least basic knowledge of Linux, know how to use the shell, and most importantly, you host your site on your own VPS. The installation is quite simple and assumes you are running in the root account, if not you may need to add ‘sudo‘ to the commands to get root privileges. I will show you the step-by-step installation of ReactJS on Ubuntu 22.04 (Jammy Jellyfish). You can follow the same instructions for Ubuntu 22.04 and any other Debian-based distribution like Linux Mint, Elementary OS, Pop!_OS, and more as well.

Prerequisites

• A server running one of the following operating systems: Ubuntu 22.04, 20.04, and any other Debian-based distribution like Linux Mint.
• It’s recommended that you use a fresh OS install to prevent any potential issues.
• SSH access to the server (or just open Terminal if you’re on a desktop).
• Stable internet connection for package retrieval.
• A non-root sudo user or access to the root user. We recommend acting as a non-root sudo user, however, as you can harm your system if you’re not careful when acting as the root.

Install ReactJS on Ubuntu 22.04 LTS Jammy Jellyfish

Step 1. First, make sure that all your system packages are up-to-date by running the following apt commands in the terminal.

sudo apt update
sudo apt upgrade
sudo apt install wget apt-transport-https gnupg2 software-properties-common

Step 2. Installing Node.Js.

Now run the following command to download and execute the NodeSource installation script:

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

After that, install the Node.js to your system using the following command below:

sudo apt install nodejs

Finally, check the currently active version of Node.js:

node -v
npm -v

Step 3. Installing ReactJS on Ubuntu 22.04.

Now we set up all of the settings and tools required for creating a react application:

sudo npm install -g create-react-app

Verify the installed version of create-react-app with the following command:

create-react-app --version

Step 4. Create Your First React Application.

You can create a ReactJS application with the following command:

sudo create-react-app myreactapp

Output:

Success! Created myreactapp at /home/react/myreactapp
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 myreactapp
  npm start

After you have created your application switch to that project and run npm start to start the application:

cd myreactapp
npm start

Output:

Compiled successfully!

You can now view myreactapp in the browser.

Local: http://localhost:3000
On Your Network: http://192.168.77.20:3000

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

Step 5. Create a Systemd Service.

Now we create a systemd service for your React app. So you can manage your app easily using the systemctl command:

sudo nano /lib/systemd/system/react.service

Add the following file:

[Unit]
After=network.target

[Service]
Type=simple
User=root
WorkingDirectory=/home/react/myreactapp
ExecStart=/usr/bin/npm start
Restart=on-failure

[Install]
WantedBy=multi-user.target

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

sudo systemctl daemon-reload
sudo systemctl start react
sudo systemctl enable react

Step 6. Accessing ReactJS Web Interface.

Once successfully installed, open your web browser and access the ReactJS Web UI using the URL http://your-IP-address:3000. You will be redirected to the following page:

Congratulations! You have successfully installed ReactJS. Thanks for using this tutorial for installing ReactJS on Ubuntu 22.04 LTS Jammy Jellyfish system. For additional help or useful information, we recommend you check the official ReactJS website.