October 21, 2021
How to install ReactJS on Ubuntu 20.04 LTS

How to Install ReactJS on Ubuntu 20.04 LTS

On this article we will learn how to install ReactJS (also known as React.js or React) and create a new application on it which is running on Ubuntu 20.04 LTS operating system.

Introduction

React (also known as React.js or ReactJS) is a free and open-source front-end JavaScript library for building interactive user interfaces for web and mobile applications. React or ReactJS was launched in 2011 and managed by Facebook and open-source developers community.React consists of compiled HTML, CSS, and JavaScript files and is often used as a frontend for more complex applications. The latest stable version of React is version 17.0.2 which was released on 22 March 2021. On this article we will learn how to install React/React.js/RactJS on Ubuntu 20.04 LTS operating system.

ReactJS installation on Ubuntu 20.04 LTS

There are several steps in reactjs installation on ubuntu 20.04 lts. that is :

  1. Prerequisites
  2. Install Node.js & NPM
  3. Install Create React App tools
  4. Create and Start New React Application
  5. Access ReactJS Web UI

A full explanation of the steps above will be described in the following sub-chapters.

1. Prerequisites

There are several prerequisites for installing ReactJS, namely:

  • A fresh Ubuntu 20.04 LTS operating system with enouht disk space
  • A user with sudo privilege or root access the system
  • Good internet connection for downloading required packages

Before starting ReactJS installation, we are advised to update our Ubuntu 20.04 TLS system. By updating our system, it will refresh the local list of available packages software to the newer. To update system repositories, we will use the command line : sudo apt update.

ramans@otodiginet:~$ sudo apt update
[sudo] password for ramans: 
Get:1 http://ppa.launchpad.net/ondrej/php/ubuntu focal InRelease [23.9 kB]                                         
Get:2 http://security.ubuntu.com/ubuntu focal-security InRelease [114 kB]                                          
Hit:3 http://us.archive.ubuntu.com/ubuntu focal InRelease                                                          
Get:4 http://ppa.launchpad.net/ondrej/php/ubuntu focal/main amd64 Packages [92.2 kB]                               
Get:6 http://us.archive.ubuntu.com/ubuntu focal-updates InRelease [114 kB]                                     
Get:7 http://security.ubuntu.com/ubuntu focal-security/main amd64 Packages [822 kB]                                
Get:8 http://ppa.launchpad.net/ondrej/php/ubuntu focal/main i386 Packages [33.7 kB]                                
Get:9 http://us.archive.ubuntu.com/ubuntu focal-backports InRelease [101 kB]               

2. Install Node.js and NPM

2.1 Adding Node.js Repository

The next step is to install Node.js and NPM. By default, the latest version of Node.js is not available in the Ubuntu 20.04 standard repository, then we need to install Node.js from the Node.js official repository. By using curl command line, we will add Node.js repository. The command line : curl -sL https://deb.nodesource.com/setup_14.x | bash -

ramans@otodiginet:~$ curl -sL https://deb.nodesource.com/setup_14.x | sudo bash -
[sudo] password for ramans: 

## Installing the NodeSource Node.js 14.x repo...


## Populating apt-get cache...

+ apt-get update
Hit:1 http://ppa.launchpad.net/ondrej/php/ubuntu focal InRelease                                                                
Get:2 http://security.ubuntu.com/ubuntu focal-security InRelease [114 kB]                                                       
Hit:3 http://us.archive.ubuntu.com/ubuntu focal InRelease                                                
Get:4 http://us.archive.ubuntu.com/ubuntu focal-updates InRelease [114 kB]                                  
Get:6 http://security.ubuntu.com/ubuntu focal-security/main amd64 Packages [828 kB]                                   
Get:7 http://us.archive.ubuntu.com/ubuntu focal-backports InRelease [101 kB]           
Get:8 http://us.archive.ubuntu.com/ubuntu focal-updates/main amd64 Packages [1,170 kB]  
Hit:5 https://packages.gitlab.com/gitlab/gitlab-ce/ubuntu focal InRelease               
Get:9 http://security.ubuntu.com/ubuntu focal-security/main i386 Packages [275 kB]                                              
Get:10 http://security.ubuntu.com/ubuntu focal-security/main Translation-en [161 kB]                                            
Get:11 http://us.archive.ubuntu.com/ubuntu focal-updates/universe amd64 Packages [851 kB]                                       
Get:12 http://security.ubuntu.com/ubuntu focal-security/restricted amd64 Packages [374 kB]                                      
Get:13 http://security.ubuntu.com/ubuntu focal-security/restricted Translation-en [53.6 kB]                                     
Fetched 4,040 kB in 13s (299 kB/s)                                                                                              
Reading package lists... Done

## Confirming "focal" is supported...

+ curl -sLf -o /dev/null 'https://deb.nodesource.com/node_14.x/dists/focal/Release'

## Adding the NodeSource signing key to your keyring...

+ curl -s https://deb.nodesource.com/gpgkey/nodesource.gpg.key | gpg --dearmor | tee /usr/share/keyrings/nodesource.gpg >/dev/null

## Creating apt sources list file for the NodeSource Node.js 14.x repo...

+ echo 'deb [signed-by=/usr/share/keyrings/nodesource.gpg] https://deb.nodesource.com/node_14.x focal main' > /etc/apt/sources.list.d/nodesource.list
+ echo 'deb-src [signed-by=/usr/share/keyrings/nodesource.gpg] https://deb.nodesource.com/node_14.x focal main' >> /etc/apt/sources.list.d/nodesource.list

## Running `apt-get update` for you...

+ apt-get update
Get:1 https://deb.nodesource.com/node_14.x focal InRelease [4,583 B]
Hit:2 http://ppa.launchpad.net/ondrej/php/ubuntu focal InRelease                                                                
Get:3 https://deb.nodesource.com/node_14.x focal/main amd64 Packages [769 B]                                                    
Hit:4 http://security.ubuntu.com/ubuntu focal-security InRelease                                                                
Hit:5 http://us.archive.ubuntu.com/ubuntu focal InRelease                                                                     
Hit:6 http://us.archive.ubuntu.com/ubuntu focal-updates InRelease                                       
Get:8 http://us.archive.ubuntu.com/ubuntu focal-backports InRelease [101 kB]
Hit:7 https://packages.gitlab.com/gitlab/gitlab-ce/ubuntu focal InRelease                       
Fetched 106 kB in 3s (36.3 kB/s)
Reading package lists... Done

## Run `sudo apt-get install -y nodejs` to install Node.js 14.x and npm
## You may also need development tools to build native addons:
     sudo apt-get install gcc g++ make
## To install the Yarn package manager, run:
     curl -sL https://dl.yarnpkg.com/debian/pubkey.gpg | gpg --dearmor | sudo tee /usr/share/keyrings/yarnkey.gpg >/dev/null
     echo "deb [signed-by=/usr/share/keyrings/yarnkey.gpg] https://dl.yarnpkg.com/debian stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
     sudo apt-get update && sudo apt-get install yarn
Adding the latest version of Node.js Repository
Adding Node.js Repository

2.2 Installing Node.js

The next step is to install Node.js package by submitting command line : sudo apt-get install -y nodejs.

ramans@otodiginet:~$ sudo apt-get install -y nodejs
Reading package lists... Done
Building dependency tree       
Reading state information... Done
The following NEW packages will be installed:
  nodejs
0 upgraded, 1 newly installed, 0 to remove and 384 not upgraded.
Need to get 25.0 MB of archives.
After this operation, 121 MB of additional disk space will be used.
Get:1 https://deb.nodesource.com/node_14.x focal/main amd64 nodejs amd64 14.17.5-deb-1nodesource1 [25.0 MB]
Fetched 25.0 MB in 20s (1,244 kB/s)                                                                                             
Selecting previously unselected package nodejs.
(Reading database ... 274035 files and directories currently installed.)
Preparing to unpack .../nodejs_14.17.5-deb-1nodesource1_amd64.deb ...
Unpacking nodejs (14.17.5-deb-1nodesource1) ...
Setting up nodejs (14.17.5-deb-1nodesource1) ...
Processing triggers for man-db (2.9.1-1) ...
Install Node.js version 14
Install Node.js

2.3 Update npm

we are advised to use the latest version of npm to prevent vulnerability. By defualt, when we install Node.js version 14, npm has also been included with version 6.14. At this stage we will update npm with the command line:.sudo npm install npm@latest -g.

ramans@otodiginet:~$ sudo npm install npm@latest -g
[sudo] password for ramans: 
/usr/bin/npm -> /usr/lib/node_modules/npm/bin/npm-cli.js
/usr/bin/npx -> /usr/lib/node_modules/npm/bin/npx-cli.js
+ npm@7.21.0
added 67 packages from 26 contributors, removed 246 packages and updated 189 packages in 27.599s
ramans@otodiginet:~$ npm -v
7.21.0

Until this step, we have Node.js version 14.17.5 and npm version 7.21.0.

ramans@otodiginet:~$ node -v
v14.17.5
ramans@otodiginet:~$ npm -v
7.21.0
Node.js version and npm version
Node.js version and npm version

3. Install Create A New React Application Tools

When we create a project, we are required to make good configuration settings so as to facilitate project creation. Create React App is a tool that help us to save our time for preparing and setting up all tools to start a project. For this purpose we will install Create React App tools by submitting command line : sudo npm -g install create-react-app.

ramans@otodiginet:~$ sudo npm -g install create-react-app
npm WARN deprecated tar@2.2.2: This version of tar is no longer supported, and will not receive security updates. Please upgrade asap.

changed 67 packages, and audited 68 packages in 13s

4 packages are looking for funding
  run `npm fund` for details

2 high severity vulnerabilities

Some issues need review, and may require choosing
a different dependency.

Run `npm audit` for details.

We can find out the version of the react create app tool by typing create-react-app --version.

ramans@otodiginet:~$ create-react-app --version
4.0.3

4. Create New React Application

After all are set, then we will create the first React Application on the system. For this purpose we will crate a project named it as otodiginet-app1. For this purpose we will submit the series of command line, as shown below :

  • create-react-app otodiginet-app1
  • cd otodiginet-app1
  • npm start
ramans@otodiginet:~$ create-react-app otodiginet-app1

Creating a new React app in /home/ramans/otodiginet-app1.

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


added 1921 packages, and audited 1922 packages in 4m

147 packages are looking for funding
  run `npm fund` for details

10 moderate severity vulnerabilities

To address all issues, run:
  npm audit fix
Create React App with name otodiginet-app1
Create React App with name otodiginet-app1

At the end we will be promted :

Success! Created otodiginet-app1 at /home/ramans/otodiginet-app1
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 otodiginet-app1
  npm start

Happy hacking!

Then we will log in to otodiginet-app1 directory and submt the command line npm start, to starting up the ReacJS application.

ramans@otodiginet:~$ cd otodiginet-app1
ramans@otodiginet:~/otodiginet-app1$ npm start
Compiled successfully!

You can now view otodiginet-app1 in the browser.

  Local:            http://localhost:3001
  On Your Network:  http://192.168.19.128:3001

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

5. Access ReactJS Web UI

By default ReactJS will use port 3000 to run an application, unfortunately on my test bed server, the port 3000 has been used by another application. Then the RactJS will use port 3001.

ReactJS web interface is running on port 3001
ReactJS Web interface is running on port 3001

Conclusion

So far, we have shown you how to install ReactJS on Ubuntu 20.04 LTS system. I hope this article can be useful for readers who need useful information about ReactJS installation and creating a new application on it. For more information and tutorials about ReactJS can be found on React official website.

Share this article via :

Leave a Reply

Your email address will not be published. Required fields are marked *