DEV Community

AMANI Eric
AMANI Eric

Posted on

Serve a static app with nginx

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


Enter fullscreen mode Exit fullscreen mode

2. Deploy your react app

Clone your react app



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


Enter fullscreen mode Exit fullscreen mode

Install packages



sudo yarn install


Enter fullscreen mode Exit fullscreen mode

Build the app



sudo yarn build


Enter fullscreen mode Exit fullscreen mode

3. Create an Nginx configuration file



cd /etc/nginx/sites-available


Enter fullscreen mode Exit fullscreen mode


sudo nano react.conf


Enter fullscreen mode Exit fullscreen mode

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;
}


Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

if successful, you should see this in your terminal 🦾

Image description

let's test our static app.

this restart our nginx service



sudo service nginx restart


Enter fullscreen mode Exit fullscreen mode

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

can check the article here as well

Top comments (0)