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 for creating web frontend and UI components. It is often used for developing Web Applications or Mobile Apps. 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 built-in window.fetch.

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

Prerequisites

A server running CentOS 8.
A valid domain name pointed with your server IP.
A root password is configured on the server.

Getting Started

Before starting, you will need to update your system packages to the latest version. You can update them by running the following command:

dnf update -y

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

dnf install gcc-c++ make curl -y

Once you are finished installing 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 your system. NPM also called package manager is a command-line tool used for interacting with Javascript packages. By default, the latest version of NPM and Node.js is not included in the CentOS default repository. So you will need to add the Node source repository to your system. You can add it with the following command:

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

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

dnf install nodejs -y

Once the installation is completed, 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 are installed in your system. You can now proceed to install Reactjs.

Install Reactjs

Before starting, you will need to install create-react-app in your system. It is a command-line utility used to create a React Application.

You can install it using the NPM as shown below:

npm install -g create-react-app

Once installed, verify the installed version of create-react-app using the following command:

create-react-app --version

You should see the following output:

4.0.3

Next, create your first Reactjs app with the following command:

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 myapp
npm start

Once the application has been started successfully, you should get the following output:

Compiled successfully!

You can now view myapp in the browser.

  http://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 Systemd Service File for Reactjs

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

nano /lib/systemd/system/react.service

Add the following lines:

[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 with the following command:

systemctl daemon-reload

Next, start the Reactjs service and enable it to start at system reboot with the following command:

systemctl start react
systemctl enable react

Next, verify the status of the Reactjs app with the following command:

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 http://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]:   http://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 is started and 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 you are finished, you can proceed to the next step.

Configure Nginx as a Reverse Proxy For React App

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

dnf install nginx -y

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

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

Add the following lines:

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         http://localhost:3000;
    }
}

Save and close the file when you are finished then verify the Nginx for any syntax error with the following command:

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 and enable it to start at system reboot by running the following command:

systemctl start nginx
systemctl enable nginx

You can also verify the status of the 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 you are finished, you can proceed to the next step.

Configure Firewall

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

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

Next, reload the firewall to apply the configuration changes:

firewall-cmd --reload

Once you are finished, you can proceed to the next step.

Access Reactjs Application

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

Conclusion

Congratulations! you have successfully installed Reactjs on CentOS 8. You have also configured Nginx as a reverse proxy for the Reactjs app. You can now start developing your Reactjs application.

Log in or Sign up

How to install ReactJS with Nginx proxy on CentOS 8

On this page

Prerequisites

Getting Started

Install NPM and Node.js

Install Reactjs

Create a Systemd Service File for Reactjs

Configure Nginx as a Reverse Proxy For React App

Configure Firewall

Access Reactjs Application

Conclusion

0 Comment(s)