What is Nginx?

NGINX is open source software for web serving, reverse proxying, caching, load balancing, media streaming, and more.

It started out as a web server designed for maximum performance and stability. In addition to its HTTP server capabilities, NGINX can also function as a proxy server for email (IMAP, POP3, and SMTP) and a reverse proxy and load balancer for HTTP, TCP, and UDP servers.

In this article I'm going to show you how you can serve a static app like react using nginx.

Let's get started 🚀

1. Install Nginx (Ubuntu)

sudo apt update
sudo apt install nginx

2. Deploy your react app

Clone your react app

git clone https://github.com/<your username>/<your react app repo>.git

Install packages

sudo yarn install

Build the app

sudo yarn build

3. Create an Nginx configuration file

cd /etc/nginx/sites-available

sudo nano react.conf

Paste this codes

server {
    listen 80;
    server_name your_IP_or_Domain;
    root /home/username/path_to_your_react_app/build;
    index index.html index.htm;
    location / {
        try_files $uri/index.html=404;
}

Create an nginx virtual host file.
we are going to do this by creating symlink to our config file for nginx to recognize it

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

Now that we are done with our configurations, let's test it.
To test if the configurations have no errors we run the command below.

sudo nginx -t

if successful, you should see this in your terminal 🦾

let's test our static app.

this restart our nginx service

sudo service nginx restart

Then open your browser and visit your_ip or domain as used in
our config file.

You should see the app running ✨

Some helpful resources

• Installing nginx on ubuntu

• About nginx
  

can check the article here as well