ReactJS is an open-source Javascript front-end library for building user interfaces based on components. It is used for developing single pages, mobile applications, or server-rendered applications.
In this blog post, we will install ReactJS ad set up a reverse proxy so that you can access it via the domain name.
Installing ReactJS on Ubuntu 22.04 is a straightforward process that may take up to 15 minutes. Let’s get started!
Table of Contents
Prerequisites
- A server with Ubuntu 22.04 as OS
- An NVMe VPS with a minimum of 2GB of RAM
- User privileges: root or non-root user with sudo privileges
Step 1. Update the System
Before we start with the installation, we need to update the system packages to the latest versions available.
sudo apt-get update -y && sudo apt-get upgrade -y
Step 2. Install NodeJS
NodeJS is an open-source, cross-platform Javascript runtime environment required for the ReactJS application. To install NodeJS execute the following commands:
curl -sL https://deb.nodesource.com/setup_18.x -o nodesource_setup.sh sudo bash nodesource_setup.sh sudo apt-get install -y nodejs
After installation, check the installed Node version:
node -v
You should get the following output:
root@host:~# node -v v18.16.1
Automatically with this installation, the system will install an NPM. NPM is a package manager for Javascript programming. To check the installed NPM version, execute the following command:
npm -v
You should get the following output:
root@host:~# npm -v 9.5.1
To update NPM to the latest version available, execute the following command:
npm install npm@latest -g
Now, the latest NPM version should be:
root@host:~# npm -v 9.7.2
Step 3. Install ReactJS and Create an Application
We need to install the ReactJS package necessary for creating ReactJS projects. To do this, execute the following command:
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
To create the ReactJS application, run the following command:
create-react-app rosehosting-project
Once created, you should receive output similar to this:
root@host:~# create-react-app rosehosting-project
Creating a new React app in /root/rosehosting-project.
Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...
.
.
.
Success! Created rosehosting-project at /root/rosehosting-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 rosehosting-project
npm start
Happy hacking!
Step 4. Create ReactJS Service File
To create a systemd service file, execute the following command:
touch /lib/systemd/system/reactjs.service
Open the file and paste the following lines of code:
[Service] Type=simple User=root Restart=on-failure WorkingDirectory=/root/rosehosting-project ExecStart=npm start -- --port=3000
Save the file, close it and reload the daemon:
systemctl daemon-reload
Start and enable the ReactJS service:
sudo systemctl start reactjs && sudo systemctl enable reactjs
Check the status of the service:
sudo systemctl status reactjs
You should get the following output:
root@host:~# sudo systemctl status reactjs
● reactjs.service
Loaded: loaded (/lib/systemd/system/reactjs.service; static)
Active: active (running) since Fri 2023-06-30 16:36:40 CDT; 1min 40s ago
Main PID: 45760 (npm start --por)
Tasks: 30 (limit: 4557)
Memory: 369.2M
CPU: 42.580s
CGroup: /system.slice/reactjs.service
├─45760 "npm start --port=3000" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" ""
├─45799 sh -c "react-scripts start --port=3000"
├─45800 node /root/rosehosting-project/node_modules/.bin/react-scripts start --port=3000
└─45807 /usr/bin/node /root/rosehosting-project/node_modules/react-scripts/scripts/start.js --port=3000
Step 5. Install Apache Web server
To install the Apache Web server execute the following command:
sudo apt install apache2
Once installed, start and enable the service.
sudo systemctl enable apache2 && sudo systemctl start apache2
Check if the service is up and running:
sudo systemctl status apache2
You should receive the following output:
root@host:~# sudo systemctl status apache2
● apache2.service - The Apache HTTP Server
Loaded: loaded (/lib/systemd/system/apache2.service; enabled; vendor preset: enabled)
Active: active (running) since Fri 2023-06-30 16:37:11 CDT; 5min ago
Docs: https://httpd.apache.org/docs/2.4/
Process: 45850 ExecStart=/usr/sbin/apachectl start (code=exited, status=0/SUCCESS)
Main PID: 45854 (apache2)
Tasks: 6 (limit: 4557)
Memory: 17.0M
CPU: 358ms
CGroup: /system.slice/apache2.service
Step 6. Create Apache Virtual Host File and Set Up Reverse Proxy
Create the file:
touch /etc/apache2/sites-available/reactjs.conf
Open the file and paste the following lines of code:
<VirtualHost *:80> ServerName yourdomain.com ProxyRequests off ProxyPass / http://127.0.0.1:3000/ ProxyPassReverse / http://127.0.0.1:3000/ </VirtualHost>
Save the file, close it and enable the website
a2ensite reactjs.conf a2enmod proxy a2enmod proxy_http
Check the Apache syntax:
apachectl -t
You should receive the following output:
root@vps:~# apachectl -t Syntax OK
If the syntax is OK, restartd the Apache service.
systemctl reload apache2
Once the Apache service is restarted, you can access ReactJS at http://yourdomain.com
That was all. You successfully installed and configured ReactJS on Ubuntu 22.04 with Apache as a reverse proxy.
If you do not want to configure it on your own, sign up for one of our NVMe VPS plans and submit a support ticket. Our admins are available 24/7 and will start work on your request immediately. Always trust our epic support.
If you liked this post on how to install ReactJS on Ubuntu 22.04, please share it with your friends on social networks or simply leave a reply below. Thanks.