How to install ReactJS with Nginx proxy on CentOS 8

React is a free and open source JavaScript library developed by Facebook. It is used to create web front ends and UI components. It is usually used to develop web applications or mobile applications. It allows developers to create reusable components that are independent of each other. It can be used with other libraries, including Axios, JQuery AJAX or the browser’s built-in window.fetch.

In this article, we will show you how to install React JS on CentOS 8.

prerequisites

• Server running CentOS 8.
• A valid domain name pointing to the server IP.
• The root password is configured on the server.

getting Started

Before you start, you need to update the system software package to the latest version. You can update them by running the following command:

dnf update -y

Once all packages are up to date, use the following command to install other required dependencies:

dnf install gcc-c++ make curl -y

Once you have completed the installation of the required dependencies, you can proceed to the next step.

Install NPM and Node.js

Next, you will need to install Node.js and NPM in the system. NPM, also known as package manager, is a command line tool used to interact with Javascript packages. By default, the latest versions of NPM and Node.js are not included in the CentOS default repository. Therefore, you will need to add the Node source repository to the system. You can add it with the following command:

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

After adding the repository, install Node.js and NPM using the following commands:

dnf install nodejs -y

After the installation is complete, verify the Node.js version by running the following command:

node -v

You should get the following output:

v14.16.0

You can also verify the NPM version by running the following command:

npm -v

You should get the following output:

6.14.11

At this point, NPM and Node.js have been installed in your system. You can now proceed to install Reactjs.

Install Reactjs

Before you start, you need to install create-react-app in your system. It is a command line utility for creating React Application.

You can use NPM to install as follows:

npm install -g create-react-app

After the installation is complete, use the following command to verify the installed version of create-react-app:

create-react-app --version

You should see the following output:

4.0.3

Next, use the following command to create your first Reactjs application:

create-react-app myapp

You should see the following output:

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

Next, change the directory to myapp and start the application with the following command:

cd myappnpm start

After successfully launching the application, you should get the following output:

Compiled successfully!

You can now view myapp in the browser.

  https://localhost:3000

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

Now, press CTRL + C to stop the application. You can now proceed to the next step.

Create a system service file for Reactjs

Next, it is a good idea to create a systematic service file to manage Reactjs services. You can create it with the following command:

nano /lib/systemd/system/react.service

Add the following line:

[Unit]
After=network.target

[Service]
Type=simple
User=root
WorkingDirectory=/root/myapp
ExecStart=/usr/bin/npm start
Restart=on-failure

[Install]
WantedBy=multi-user.target

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

systemctl daemon-reload

Next, start the Reactjs service and use the following command to enable it to start when the system restarts:

systemctl start reactsystemctl enable react

Next, use the following command to verify the status of the Reactjs application:

systemctl status react

You should get the following output:

? react.service
   Loaded: loaded (/usr/lib/systemd/system/react.service; disabled; vendor preset: disabled)
   Active: active (running) since Tue 2021-03-23 02:52:32 EDT; 6s ago
 Main PID: 2191 (node)
    Tasks: 29 (limit: 12524)
   Memory: 220.3M
   CGroup: /system.slice/react.service
           ??2191 npm
           ??2202 node /root/myapp/node_modules/.bin/react-scripts start
           ??2209 /usr/bin/node /root/myapp/node_modules/react-scripts/scripts/start.js

Mar 23 02:52:34 centos8 npm[2191]: ? ?wds?: Project is running at https://0.0.0.0:3000/
Mar 23 02:52:34 centos8 npm[2191]: ? ?wds?: webpack output is served from
Mar 23 02:52:34 centos8 npm[2191]: ? ?wds?: Content not from webpack is served from /root/myapp/public
Mar 23 02:52:34 centos8 npm[2191]: ? ?wds?: 404s will fallback to /
Mar 23 02:52:34 centos8 npm[2191]: Starting the development server...
Mar 23 02:52:37 centos8 npm[2191]: Compiled successfully!
Mar 23 02:52:37 centos8 npm[2191]: You can now view myapp in the browser.
Mar 23 02:52:37 centos8 npm[2191]:   https://localhost:3000
Mar 23 02:52:37 centos8 npm[2191]: Note that the development build is not optimized.
Mar 23 02:52:37 centos8 npm[2191]: To create a production build, use npm run build.

At this point, Reactjs has started and is listening on port 3000. You can verify it with the following command:

ss -antpl | grep 3000

You should get the following output:

LISTEN    0         128                0.0.0.0:3000             0.0.0.0:*        users:(("node",pid=2209,fd=18))                                                

Once completed, you can proceed to the next step.

Configure Nginx as a reverse proxy for React App

Next, you need to configure Nginx as a reverse proxy to access the React application on port 80. First, install the Nginx package using the following command:

dnf install nginx -y

Once Nginx is installed, use the following command to create a new Nginx virtual host configuration file:

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

Add the following line:

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

    location / {
        proxy_set_header   X-Forwarded-For $remote_addr;
        proxy_set_header   Host $http_host;
        proxy_pass         https://localhost:3000;
    }
}

Save and close the file when you are done, and then use the following command to verify whether there is a syntax error in Nginx:

nginx -t

You should get the following output:

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

Finally, start the Nginx service by running the following command and enable it to start when the system restarts:

systemctl start nginxsystemctl enable nginx

You can also verify the status of Nginx by running the following command:

systemctl status nginx

You should get the status of the React service in the following output:

? nginx.service - The nginx HTTP and reverse proxy server
   Loaded: loaded (/usr/lib/systemd/system/nginx.service; disabled; vendor preset: disabled)
   Active: active (running) since Tue 2021-03-23 02:57:48 EDT; 4s ago
  Process: 4079 ExecStart=/usr/sbin/nginx (code=exited, status=0/SUCCESS)
  Process: 4078 ExecStartPre=/usr/sbin/nginx -t (code=exited, status=0/SUCCESS)
  Process: 4076 ExecStartPre=/usr/bin/rm -f /run/nginx.pid (code=exited, status=0/SUCCESS)
 Main PID: 4081 (nginx)
    Tasks: 2 (limit: 12524)
   Memory: 4.0M
   CGroup: /system.slice/nginx.service
           ??4081 nginx: master process /usr/sbin/nginx
           ??4082 nginx: worker process

Mar 23 02:57:48 centos8 systemd[1]: Starting The nginx HTTP and reverse proxy server...
Mar 23 02:57:48 centos8 nginx[4078]: nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
Mar 23 02:57:48 centos8 nginx[4078]: nginx: configuration file /etc/nginx/nginx.conf test is successful
Mar 23 02:57:48 centos8 systemd[1]: nginx.service: Failed to parse PID from file /run/nginx.pid: Invalid argument
Mar 23 02:57:48 centos8 systemd[1]: Started The nginx HTTP and reverse proxy server.

Once completed, you can proceed to the next step.

Configure firewall

Next, you will need to allow ports 80 and 443 to pass through the firewall. You can allow them by running the following command:

firewall-cmd --permanent --add-port=80/tcpfirewall-cmd --permanent --add-port=443/tcp

Next, reload the firewall to apply the configuration changes:

firewall-cmd --reload

Once completed, you can proceed to the next step.

Access the Reactjs application

Now, open your web browser and use the URL to access the Reactjs application https://react.example.com. You should see the Reactjs page on the following screen:

in conclusion

Congratulations! You have successfully installed Reactjs on CentOS 8. You have also configured Nginx as a reverse proxy for Reactjs applications. You can now start developing Reactjs applications.