Set Up Nginx as a Proxy for Our React Apps

What Are We Doing Here?

We’re setting up Nginx to serve multiple React apps on a server.

Why Use Nginx?

Nginx is like a smart traffic controller that helps direct users to the right website or app efficiently. It’s fast, lightweight, and good at handling multiple requests at once.

 

Let's set the Nginx proxy for our server.

Install Nginx:

sudo apt install -y nginx

 

Allow Nginx in Firewall

 sudo ufw status

 sudo ufw allow 'Nginx Full'

 

Configure Nginx for Our React Frontends Apps

 sudo nano /etc/nginx/sites-available/your_domain.com.conf

In my case:

My domain name is: ssb18.in, So

sudo nano /etc/nginx/sites-available/ssb18.in.conf

 

A nano editor is open,  copy and paste this code:

server {
    listen 80;
    server_name your_domain.com www.your_domain.com;

    location / {
        root /var/www/your_front_end_build_path/dist;
        try_files $uri /index.html;
    }
}

In my case, I will write:

server {  
    listen 80;
    server_name ssb18.in www.ssb18.in;

    location / {
        root /var/www/greentodo/frontend/dist;
        try_files $uri /index.html;
    }
}

After done changes, save and close the editor by using,
ctrl + x
then press y,
and hit enter.

 

Create symbolic links to enable the sites.

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

In my case, I will write:

sudo ln -s /etc/nginx/sites-available/ssb18.in.conf /etc/nginx/sites-enabled/

 

Now Test, the Nginx configuration for syntax errors.

sudo nginx -t

sudo systemctl restart nginx

 

All set, your website is now live. 
But, you need to set the Nginx proxy for a better experience.