How to install React.js on Ubuntu 24.04

How to Install React.js on Ubuntu 24.04

by

This tutorial will show you how to install React.js on Ubuntu 24.04 OS.

React.js is a free and open-source Javascript library for building user interfaces based on components. React.js is written in Javascript, and with this software, we can develop single pages and mobile applications and render only specific parts of the pages that have changed. In this blog post, we will install NodeJS and NPM, which are required for the React.js application.

Installing React.js on Ubuntu 24.04 is straightforward and may take up to 10 minutes. Let’s get started!

Prerequisites to Install React.js on Ubuntu 24.04

Step 1. Update the system

Every fresh installation of Ubuntu 24.04 requires the packages to be updated to the latest versions available. To do that, execute the following command:

sudo apt update -y && sudo apt upgrade -y

Step 2. Install NodeJS

NodeJS is very important for every Javascript application. To install the NodeJS version, follow the steps below:

sudo apt install nodejs -y

After successful installation, you can check the NodeJS version by executing the command below:

node -v

You will get output similar to this:

root@host:~# node -v
v18.19.1

Step 3. Install NPM

Next, we will install the NPM package manager. To install it, execute the command below:

sudo apt install npm -y

After the installation, check the version:

npm -v

You should get output similar to this:

root@host:~# npm -v
9.2.0

Step 4. Install React.js

Before we install React.js, we need to install the package for creating React.js applications:

npm install -g create-react-app

After installation, check the installed version:

create-react-app --version

You should get the following output:

root@host:~# create-react-app --version
5.0.1

We can finally create the React.js project with the command below:

create-react-app rhtest

Once executed, the installation process will start:

root@host:~# create-react-app rhtest

Creating a new React app in /root/rhtest.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...

You should allow some time for the installation to complete. There will be output similar to this:

Success! Created rhtest at /root/rhtest
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 rhtest
  npm start

Happy hacking!

As you can see, there are commands to start the React.js server, but we will use another method in the next step.

Step 5. Create React.js service

Creating a systemd service file will help us to easily manage our React.js application with a couple of commands, which will be explained in the next paragraphs. Let’s first create the service file:

touch /lib/systemd/system/reactjs.service

Open the file with your favorite editor and paste the following lines of code:

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

Save the file, close it, and reload the daemon with the command below:

systemctl daemon-reload

Once done, start and enable the React.js service:

sudo systemctl start reactjs && sudo systemctl enable reactjs

To check the status of the React.js service:

sudo systemctl status reactjs

You should receive output similar to this:

root@host:~/rhtest# sudo systemctl status reactjs
● reactjs.service
     Loaded: loaded (/usr/lib/systemd/system/reactjs.service; static)
     Active: active (running) since Sun 2024-03-17 18:33:12 CDT; 3s ago
   Main PID: 127933 (npm start --por)
      Tasks: 37 (limit: 4624)
     Memory: 108.0M (peak: 108.4M)
        CPU: 3.862s
     CGroup: /system.slice/reactjs.service
             ├─127933 "npm start --port=3000"
             ├─127949 sh -c "react-scripts start --port=3000"
             ├─127950 node /root/rhtest/node_modules/.bin/react-scripts start --port=3000
             └─127961 /usr/bin/node /root/rhtest/node_modules/react-scripts/scripts/start.js --port=3000

Mar 17 18:33:12 host.test.vps systemd[1]: Started reactjs.service.
Mar 17 18:33:13 host.test.vps npm[127933]: > [email protected] start
Mar 17 18:33:13 host.test.vps npm[127933]: > react-scripts start --port=3000

Now, you can access your React.js on port 3000 at the URL: http://YourServerIPAddress:3000.

Learn how to install react.js on Ubuntu 24.04

Congratulations! You successfully learned how to install React.js on Ubuntu 24.04

Of course you do not have to install it on your own. All you have to do is sign up for one of our NVMe VPS plans and submit a support ticket. Our admins are available 24/7 and will help you with any aspect of installing React.js.

If you liked this post on how to install React.js on Ubuntu 24.04, please share it with your friends on social networks or simply leave a reply below. Thanks.

Leave a Comment