How to Install React.js with Nginx on Fedora

React JS is a free and open-source JavaScript library used for building single-page applications, web frontends, and UI components. React is lightweight and makes your application faster to load. It has a helpful and interactive developer toolset that helps you to debug your application easily.

In this post, we will show you how to install React JS and configure Nginx as a reverse proxy on Fedora Linux.

Step 1 – Install Node.js

Before starting, you will need to install Node.js on your server. First, install all the Node.js dependencies using the following command.

dnf install -y gcc-c++ make

Then, add the Node source repo to get the latest Node.js version.

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

Next, install the Node.js package with the following command.

dnf install nodejs git

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

node -v

Output.
v18.19.0

Step 2 – Install React JS and Create an Application

First, you will need to install the create-react-app tool on your server. The create-react-app tool helps you create and deploy applications quickly.

You can install it via the NPM command as shown below:

npm install -g create-react-app

You can now verify the create-react-app version with the following command.

create-react-app --version

Output.

5.0.1

Now, run the following command to create your first application.

create-react-app my-app

You will see the following output.

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

Happy hacking!

Step 3 – Run the React JS Application

At this point, your React application is created on your server. Now, it’s time to run it.

First, navigate inside your app directory and run the following command to start your application.

cd my-app
npm start

You will see the following output.

Compiled successfully!

You can now view my-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

Now, open your web browser and access your React JS app using the URL http://your-server-ip:3000. You will see your application on the following screen.

Step 4 – Create a Systemd File for React JS

Next, you will need to create a system file to manage your application service via the command line.

You can create it using the following command.

nano /lib/systemd/system/react.service

Add the following code:

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

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

systemctl daemon-reload

Now, start and enable the React JS service.

systemctl start react
systemctl enable react

Step 5 – Configure Nginx as a Reverse Proxy

It is a good idea to set up Nginx as a reverse proxy for the React JS app.

First, install the Nginx package using the following command.

dnf install nginx

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

systemctl start nginx
systemctl enable nginx

Next, create an Nginx virtual server block.

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

Add the following configurations:

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;

Save and close the file, then restart the Nginx service to reload the changes.

systemctl restart nginx

You can now access your React JS application using the URL http://react.example.com.

Conclusion

Congratulations! You have successfully installed and deployed React JS on Fedora Linux. You can now start building your own single-page application using the React framework. You can now deploy a React JS application on dedicated server hosting from Atlantic.Net!