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.
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.