How to install ReactJS on Ubuntu 20.04

ReactJS is a very powerful front-end open-source JavaScript library used for building the user interface and related components. It is maintained by Facebook and the community of developers. ReactJS can be used in the development of Web Applications or Mobile Apps.

In this tutorial, we will show you how to install ReactJS on your Ubuntu 20.04 server.

Prerequisites

• A Ubuntu 20.04 VPS with root access enabled or a user with Sudo privileges.
• 4 GB RAM (Minimum 2 GB)
• 10 GB Free Space

Step 1: Log in via SSH and Update your System

First, you will need to log in to your Ubuntu 20.04 server via SSH as the root user:

ssh root@IP_Address -p Port_number

You will need to replace ‘IP_Address’ and ‘Port_number’ with your server’s respective IP address and SSH port number. Additionally, replace ‘root’ with the sudo username if necessary.

You have to make sure that all Ubuntu OS packages installed on the server are up to date. Run the following commands to upgrade all installed packages on your server:

apt-get update
apt-get upgrade

Step 2. Install Nodejs and NPM

First, you need to install NodeJS since a ReactJS application can only run if NodeJS is installed on your server. Node.js is an open-source and cross-platform JavaScript runtime environment built on Chrome’s V8 JavaScript engine.

The simple and easiest way to install Node.js and npm is to install them from the Ubuntu default repository.

By default, the latest version of Node.js is not available in the Ubuntu 20.04 default repository. So you will need to add the Node.js official repository to your system.

Add the Node.js repository with the following command:

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

And install the Node.js from the added repositories running the following command:

sudo apt-get install nodejs

Once NodeJS has been installed, you can verify the installed version of Node.js with the following command:

node -v

You should get the following output:

v14.17.1

Once Node.js is installed, update the NPM to the latest version using the following command:

npm install npm@latest -g

You can now verify the npm version with the following command:

npm -v

You should get the following output:

7.19.0

Step 3. Install Create-React-App Tool

Now install the create-react-app tool using NPM. This tool helps to set all tools required to create a new project in React.

npm install -g create-react-app

Check the version with:

create-react-app --version

You should get the following output:

4.0.3

Step 4: Create your ReactJS Application

You can create your ReactJS application with the following command:

create-react-app my-project

Once the installation is finished, you should see the following output:

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

Happy hacking!

Once your project is created, change the directory to the ReactJS application:

cd my-project

Now you need to start your ReactJS application with the following command:

npm start

You should get the following output:

Compiled successfully!

You can now view my-project in the browser.

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

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

By default, the ReactJS application starts on port 3000.

Step 5: Create a Systemd Service File for ReactJS App

Next, you need to create a systemd service file to manage the ReactJS service. You can create it with the following command:

nano /lib/systemd/system/reactjs.service

Add the following lines:

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

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

systemctl daemon-reload

Next, start the ReactJS service and enable it to start at system reboot with the following command:

systemctl start reactjs
systemctl enable reactjs

You can verify the status of the ReactJS service with the following command:

systemctl status reactjs

You should get the following output:

● reactjs.service
Loaded: loaded (/lib/systemd/system/reactjs.service; static; vendor preset: enabled)
Active: active (running)
Main PID: 66390 (npm start --por)
Tasks: 30 (limit: 2248)
Memory: 188.7M
CGroup: /system.slice/reactjs.service
├─66390 npm start --port=3000
├─66401 sh -c react-scripts start "--port=3000"
├─66402 node /root/my-project/node_modules/.bin/react-scripts start --port=3000
└─66409 /usr/bin/node /root/my-project/node_modules/react-scripts/scripts/start.js --port=3000

Step 6: Access ReactJS Web UI

Now, open your web browser and type the URL http://your-server-ip-address. You should see your ReactJS Application on the following screen:

Congratulations! you have successfully installed the ReactJS App on Ubuntu 20.04.

---

Of course, you don’t have to install ReactJS on Ubuntu if you use one of our Managed hosting services, in which case you can simply ask our expert Linux admins to install this for you. They are available 24×7 and will take care of your request immediately.

PS. If you liked this post on how to install ReactJS on Ubuntu, please share it with your friends on the social networks using the buttons on the left or simply leave a reply below. Thanks.