How to Install React.js with Nginx on Arch Linux

React is a free and open-source JavaScript library used for creating a web front-end. Its declarative, efficient, and flexible library allows you to compose complex UIs from small and isolated pieces. It is developed by Facebook and maintained by Meta and a community of individual developers and companies. You can use React.js with server-side, client, and other frameworks.

This post will explain how to install React.js with Nginx on Arch Linux.

Step 1 – Configure Repository

By default, the default repository is outdated in Arch Linux, so you will need to modify the default mirror list. You can do it by editing the mirror list configuration file:

nano  /etc/pacman.d/mirrorlist

Remove all lines and add the following lines:

## Score: 0.7, United States
Server = http://mirror.us.leaseweb.net/archlinux/$repo/os/$arch
## Score: 0.8, United States
Server = http://lug.mtu.edu/archlinux/$repo/os/$arch
Server = http://mirror.nl.leaseweb.net/archlinux/$repo/os/$arch
## Score: 0.9, United Kingdom
Server = http://mirror.bytemark.co.uk/archlinux/$repo/os/$arch
## Score: 1.5, United Kingdom
Server = http://mirrors.manchester.m247.com/arch-linux/$repo/os/$arch
Server = http://archlinux.dcc.fc.up.pt/$repo/os/$arch
## Score: 6.6, United States
Server = http://mirror.cs.pitt.edu/archlinux/$repo/os/$arch
## Score: 6.7, United States
Server = http://mirrors.acm.wpi.edu/archlinux/$repo/os/$arch
## Score: 6.8, United States
Server = http://ftp.osuosl.org/pub/archlinux/$repo/os/$arch
## Score: 7.1, India
Server = http://mirror.cse.iitk.ac.in/archlinux/$repo/os/$arch
## Score: 10.1, United States
Server = http://mirrors.xmission.com/archlinux/$repo/os/$arch

Save and close the file, then update all the package indexes with the following command:

pacman -Syu

Step 2 – Install Nodejs and NPM

First, you will need to install the Nodejs and NPM on your server. You can install both packages using the following command.

pacman -S nodejs npm

After the installation, you can verify Nodejs with the following command.

node --version

Step 3 – Install create-react-app

Next, you will need to install the create-react-app package on your server. You can install it using NPM:

npm install -g create-react-app

After the installation, you can verify the installation using the following command.

create-react-app --version

Step 4 – Create a React App

Next, you will need to install all tools needed to run React app. First, create a new React app using the create-react-app command.

create-react-app web-app

Once the application is created, you should see the following output.

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

Happy hacking!

Step 5 – Start React App

Next, navigate to the web-app directory and start the React app using the following command.

cd web-app
npm start

You should see the following output.

Compiled successfully!

You can now view web-app in the browser.

  http://localhost:3000

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

webpack compiled successfully

Press the CTRL+C to stop the application.

Step 6 – Create a Systemd Service File for React App

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

nano /lib/systemd/system/react.service

Add the following code:

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

Save and close the file, then reload the daemon to apply the changes.

systemctl daemon-reload

Next, start and enable the React service using the following command.

systemctl start react
systemctl enable react

You can check the service status with the following command.

systemctl status react

You should see the following output.

● react.service
     Loaded: loaded (/usr/lib/systemd/system/react.service; static)
     Active: active (running) since Fri 2023-02-24 09:03:41 UTC; 5s ago
   Main PID: 74477 (npm start --por)
      Tasks: 29 (limit: 4700)
     Memory: 167.2M
     CGroup: /system.slice/react.service
             ├─74477 "npm start --port=3000"
             ├─74488 node /root/web-app/node_modules/.bin/react-scripts start --port=3000
             └─74495 /usr/bin/node /root/web-app/node_modules/react-scripts/scripts/start.js --port=3000

Feb 24 09:03:41 archlinux systemd[1]: Started react.service.
Feb 24 09:03:42 archlinux npm[74477]: > [email protected] start
Feb 24 09:03:42 archlinux npm[74477]: > react-scripts start --port=3000

Step 7 – Configure Ngonx for React App

By default, React app listens on the local host, so you will need to configure Nginx as a reverse proxy to access the React app from the remote machine.

First, install the Nginx package with the following command.

pacman -S nginx-mainline

Next, start and enable the Nginx service using the following command.

systemctl start nginx
systemctl enable nginx

Next, create a directory to store Nginx virtual host.

mkdir /etc/nginx/sites-enabled

Next, create an Nginx virtual host configuration file.

nano /etc/nginx/sites-enabled/react.conf

Add the following configuration.

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 edit the Nginx main configuration file.

nano /etc/nginx/nginx.conf

Add the following lines after the line http {:

server_names_hash_bucket_size 64;
include sites-enabled/*;

Save the file, then verify the Nginx configuration.

nginx -t

Output.

nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful

Next, restart the Nginx service to implement the changes.

systemctl restart nginx

Step 8 – Access React App

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

Conclusion

In this tutorial, we showed you how to install React JS application on Arch Linux. We also configured Nginx as a reverse proxy for React app. Try to install React.js on dedicated hosting from Atlantic.Net!