Atlantic.Net Blog

How to Install React.js on Ubuntu 20.04

Hitesh Jethva
by Atlantic.Net (273 posts) under Dedicated Server Hosting
0 Comments

React is an open-source JavaScript library used for building interactive user interfaces for web and mobile applications. It uses a virtual browser to act as an agent between a developer and a real browser. React was created and is maintained by Facebook, but is now used by many companies around the world. React consists of compiled HTML, CSS, and JavaScript files and is often used as a frontend for more complex applications.

In this tutorial, we will show you how to deploy React.js on Ubuntu 20.04.

 

Prerequisites

  • A fresh Ubuntu 20.04 VPS on the Atlantic.net Cloud Platform
  • A valid domain name pointed to your server IP
  • A root password configured on your server

Step 1 – Create Atlantic.Net Cloud Server

First, log in to your Atlantic.Net Cloud Server.  Create a new server, choosing Ubuntu 20.04 as the operating system with at least 1GB RAM. Connect to your Cloud Server via SSH and log in using the credentials highlighted at the top of the page.

Once you are logged in to your Ubuntu 20.04 server, run the following command to update your base system with the latest available packages.

apt-get update -y

Step 2 – Install Node.js

React App is a JavaScript library, so Node.js must be installed in your server. By default, the latest version of Node.js is not available in the Ubuntu standard repository, so you will need to install it from NodeSource.

First, install the required dependencies with the following command:

apt-get install curl gnupg2 -y

Once all the dependencies are installed, add the Node.js repository with the following command:

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

Once the repository is added, install Node.js with the following command:

apt-get install nodejs -y

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

npm install [email protected] -g

You can now verify the installed version of Node.js with the following command:

node -v

You should get the following output:

v14.15.1

Step 3 – Create a New React.js App

First, you will need to install the create-react-app tool to create a new project in React. You can install it using the following command:

npm install -g create-react-app

You should get the following output:

/usr/bin/create-react-app -> /usr/lib/node_modules/create-react-app/index.js
+ [email protected]
added 67 packages from 25 contributors in 3.605s

Next, create a new project with the following command:

create-react-app awesome-project

You should see the following output:

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

Happy hacking!

Once your project is created, change the directory to your project and start the application with the following command:

cd awesome-project
npm start

You should get the following output:

Compiled successfully!

You can now view awesome-project in the browser.

http://localhost:3000

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

Press CTRL+C to stop the application.

Step 4 – Create a Systemd Service File for React App

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

nano /lib/systemd/system/react.service

Add the following lines:

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

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

systemctl daemon-reload

Next, start the React service and enable it to start at system reboot:

systemctl start react
systemctl enable react

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

systemctl status react

You should get the following output:

  • react.service
Loaded: loaded (/lib/systemd/system/react.service; static; vendor preset: enabled)
Active: active (running) since Sun 2020-12-06 10:11:04 UTC; 5s ago
Main PID: 18556 (node)
Tasks: 30 (limit: 4691)
Memory: 170.0M
CGroup: /system.slice/react.service
├─18556 npm
├─18583 sh -c react-scripts start "--port=3000"
├─18584 node /root/awesome-project/node_modules/.bin/react-scripts start --port=3000
└─18591 /usr/bin/node /root/awesome-project/node_modules/react-scripts/scripts/start.js --
port=3000

Dec 06 10:11:04 ubuntu2004 systemd[1]: Started react.service.
Dec 06 10:11:04 ubuntu2004 npm[18556]: > [email protected] start /root/awesome-project
Dec 06 10:11:04 ubuntu2004 npm[18556]: > react-scripts start "--port=3000"
Dec 06 10:11:07 ubuntu2004 npm[18591]: ℹ 「wds」: Project is running at http://0.0.0.0:3000/
Dec 06 10:11:07 ubuntu2004 npm[18591]: ℹ 「wds」: webpack output is served from
Dec 06 10:11:07 ubuntu2004 npm[18591]: ℹ 「wds」: Content not from webpack is served from 
/root/awesome-project/public
Dec 06 10:11:07 ubuntu2004 npm[18591]: ℹ 「wds」: 404s will fallback to /
Dec 06 10:11:07 ubuntu2004 npm[18591]: Starting the development server...

Step 5 – Configure Nginx as a Reverse Proxy

At this point, your React App is started and listening on port 3000. Next, you will need to configure Nginx as a reverse proxy to access the React App through port 80.

First, install the Nginx web server with the following command:

apt-get install nginx -y

Once installed, create a new Nginx virtual host configuration file:

nano /etc/nginx/conf.d/react.conf

Add the following lines:

upstream react_backend {
server localhost:3000;
}

server {
listen 80;
server_name react.example.com;

location / {
proxy_pass http://react_backend/;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_set_header Host $http_host;

proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forward-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forward-Proto http;
proxy_set_header X-Nginx-Proxy true;

proxy_redirect off;
}
}

Save and close the file then restart the Nginx service to apply the changes:

systemctl restart nginx

Step 6 – Access React.js Web UI

Now, open your web browser and access the React App using the URL http://react.example.com. You should see your React Application in the following screen:

Conclusion

Congratulations! You have successfully installed and deployed React App with Nginx as a reverse proxy on Ubuntu 20.04. You can now start exploring React App for more features. Try out React.js on dedicated server hosting from Atlantic.Net!

Get A Free To Use Cloud VPS

Free Tier Includes:
G3.2GB Cloud VPS Free to Use for One Year
50 GB of Block Storage Free to Use for One Year
50 GB of Snapshots Free to Use for One Year


Looking for a Hosting Solution?

We Provide Cloud, Dedicated, & Colocation.

  • Seven Global Data Center Locations.
  • Flexible Private, Public, & Hybrid Hosting.
  • 24x7x365 Security, Support, & Monitoring.
Contact Us Now! Med Tech Award FTC
SOC Audit HIPAA Audit HITECH Audit

Recent Posts

Get started with 12 months of free cloud VPS hosting

Free Tier includes:
G3.2GB Cloud VPS Server Free to Use for One Year
50 GB of Block Storage Free to Use for One Year
50 GB of Snapshots Free to Use for One Year


New York, NY

100 Delawanna Ave, Suite 1

Clifton, NJ 07014

United States

San Francisco, CA

2820 Northwestern Pkwy,

Santa Clara, CA 95051

United States

Dallas, TX

2323 Bryan Street,

Dallas, Texas 75201

United States

Ashburn, VA

1807 Michael Faraday Ct,

Reston, VA 20190

United States

Orlando, FL

440 W Kennedy Blvd, Suite 3

Orlando, FL 32810

United States

Toronto, Canada

20 Pullman Ct, Scarborough,

Ontario M1X 1E4

Canada

London, UK

14 Liverpool Road, Slough,

Berkshire SL1 4QZ

United Kingdom

Resources