How to install ReactJS with Nginx proxy on CentOS 8
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. 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 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 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 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 http://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 http://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.