React is an open-source JavaScript front-end library developed by Facebook and a large community of developers. It is lightweight, which makes your application faster to load. React can be integrated into various projects, which makes it a preferred choice for diverse applications. If you are looking to design interactive user interfaces for single-page applications, then React is the best option for you.

In This Article

Step 1 – Install Node.js

First, install the necessary dependencies using the following command.

apt-get install -y ca-certificates curl gnupg

Next, download the Node.js GPG key.

mkdir -p /etc/apt/keyrings
curl -fsSL https://deb.nodesource.com/gpgkey/nodesource-repo.gpg.key | gpg --dearmor -o /etc/apt/keyrings/nodesource.gpg

Next, add the NodeSource repo to the APT source list.

echo "deb [signed-by=/etc/apt/keyrings/nodesource.gpg] https://deb.nodesource.com/node_18.x nodistro main" | tee /etc/apt/sources.list.d/nodesource.list

Then, update the repository index and install Node.js with the following command.

apt update
apt-get install -y nodejs

Next, verify the Node.js version using the following command.

node -v

Output.

v18.18.2

Step 2 – Create a React App

First, install the create-react app using the NPM command.

npm install -g create-react-app

Next, create a new project for your application.

create-react-app test-project

You can verify all files of your project using the following command.

ls test-project/

Output.

node_modules  package.json  package-lock.json  public  README.md  src

Step 3 – Create a Systemd Service File

Next, create a systemd service file to manage React application.

nano /lib/systemd/system/reactjs.service

Add the following configuration.

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

Save and close the file, then reload the systemd daemon.

systemctl daemon-reload

Next, start and enable the React service.

systemctl start reactjs
systemctl enable reactjs

You can now verify the React service status using the following command.

systemctl status reactjs

Output.

● reactjs.service
     Loaded: loaded (/lib/systemd/system/reactjs.service; static)
     Active: active (running) since Sun 2023-10-29 02:39:00 UTC; 5s ago
   Main PID: 32759 (npm start --por)
      Tasks: 32 (limit: 2242)
     Memory: 156.5M
        CPU: 4.912s
     CGroup: /system.slice/reactjs.service
             ├─32759 "npm start --port=3000" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" ""
             ├─32835 sh -c "react-scripts start --port=3000"
             ├─32836 node /root/test-project/node_modules/.bin/react-scripts start --port=3000
             ├─32843 /usr/bin/node /root/test-project/node_modules/react-scripts/scripts/start.js --port=3000
             ├─32856 /bin/sh /root/test-project/node_modules/open/xdg-open http://localhost:3000
             └─32866 /bin/sh /root/test-project/node_modules/open/xdg-open http://localhost:3000

Oct 29 02:39:00 linux systemd[1]: Started reactjs.service.

Step 4 – Configure Apache as a Reverse Proxy

First, install the Apache package with the following command.

apt install apache2 -y

Next, create an Apache virtual host configuration file.

nano /etc/apache2/sites-available/reactjs.conf

Add the following configuration.

<VirtualHost *:80>
  ServerName react.example.com
  ProxyRequests off 
  ProxyPass / http://127.0.0.1:3000/ 
  ProxyPassReverse / http://127.0.0.1:3000/ 
</VirtualHost>

Save and close the file, then activate the Apache virtual host and other required modules using the following commands.

a2ensite reactjs.conf
a2enmod proxy
a2enmod proxy_http

Finally, reload the Apache service to apply the changes.

systemctl reload apache2

Step 5 – Access React Web UI

Now, open your web browser and access the React web interface using the URL http://react.example.com. You will see the React web UI on the following screen.

react dashboard

Conclusion

Congratulations! You have successfully installed React.js on Ubuntu 22.04. You can now start creating your React application and deploy it to the production server. Build your React application and deploy it on dedicated server hosting from Atlantic.Net!