Did You Know How Can You Use NGINX To Deploy Your React App?

Deploying A React App With Nginx On Ubuntu

In this blog, we will learn how to deploy a React app on Ubuntu using NGINX as a reverse proxy server.

We will start by updating the Ubuntu packages and installing Nginx, followed by creating a React build and configuring Nginx to serve it.

Step 1: Update Ubuntu Packages And Install Nginx

First, let’s update the Ubuntu packages by running the following command in the terminal:

sudo apt update

Once the packages are updated, we can install Nginx using the following command:

sudo apt install nginx

Step 2: Configure The Firewall To Allow HTTPS Traffic

We need to configure the firewall to allow HTTPS traffic to our Nginx server. To do that, we can run the following command to list the available firewall application profiles:

sudo ufw app list

We can allow HTTPS traffic by running the following command:

sudo ufw allow 'Nginx HTTPS'

Step 3: Create A React Build

To create a React build, we need to navigate to the root of the React project and run the following commands:

npm install 
npm run build

This will create a build directory containing the optimized production build of our React app.

Step 4: Configure Nginx To Serve The React App

Now that we have a React build, we can configure Nginx to serve it. First, let’s navigate to the sites-available directory by running the following command:

cd /etc/nginx/sites-available

Here, we will create a new configuration file for our domain by running the following command:

sudo nano /etc/nginx/sites-available/example.com

In this file, we need to add the following server block configuration:

server {
  listen 80;
  listen [::]:80;
  root /home/ubuntu/react-test/build;
  index index.html index.htm index.nginx-debian.html;
  server_name example.com www.example.com;
  location / {
  try_files $uri $uri/ =404;
  }
}

Here, we specify that Nginx should listen on port 80 and the IPv6 address for the specified domain. The root directory is set to the build directory of our React app. The index files are specified and the server name is set to our domain. The location block specifies that Nginx should try to serve the requested file, and if it doesn’t exist, return a 404 error.

Step 5: Enable The Site And Check For Syntax Errors

Now that we have created the configuration file, we need to enable it by creating a symbolic link in the sites-enabled directory. We can do this by running the following command:

sudo ln -s /etc/nginx/sites-available/example.com /etc/nginx/sites-enabled/

Next, we need to check for syntax errors in our Nginx configuration by running the following command:

sudo nginx -t

If there are no syntax errors, we can restart Nginx to apply the changes by running the following command:

sudo systemctl restart nginx

Congratulations! Your React App Is Now Deployed And Can Be Accessed By Visiting Your Domain In A Web Browser.