How to Host React App with NGINX

Photo by Burst on Unsplash

In this blog post, I will show you how to deploy a React Static App using Nginx. Since all files in SPAs are static files, Nginx is an ideal web server for serving these static files.

Feeling lazy? Follow the tutorial on Youtube:

Deploy React App

Github Repo: https://github.com/enricop89/react-app-expressjs-nginx

Project Overview

Firstly, let’s create a sample React App using create-react-app boilerplate. The command npx create-react-app my-app-nginx will create a basic app for that.

If you want to see the app running, run npm start. The app will show the default view of the Create React App boilerplate.

The next step is to install react-router-domso we can add routes on our React App. We will copy the basic app to show how routes work:

import React from "react";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";

export default function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/users">Users</Link>
            </li>
          </ul>
        </nav>

        {/* A <Switch> looks through its children <Route>s and
            renders the first one that matches the current URL. */}
        <Switch>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/users">
            <Users />
          </Route>
          <Route path="/">
            <Home />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

function Home() {
  return <h2>Home</h2>;
}

function About() {
  return <h2>About</h2>;
}

function Users() {
  return <h2>Users</h2>;
}

At this point, we can navigate to /users, /aboutand /home path.

Install NGINX on a Virtual Server

In this example, I installed NGINX on an AWS EC2 Instance. If you want to follow the process, please go to https://youtu.be/tGYNYPKTyno?t=302

Then, let’s assume you cloned your project into the EC2 instance and create the build folder using the npm run build command. Again, you can find the step by step procedure on the Youtube video. Let’s focus on the Nginx configuration.

The build folder has been copied into the /app-deploy/build folder. Now we need to tell NGINX to serve the content of this folder whenever it receives a request on the root path. The NGINX configuration is the following:

server {
  listen 80;
  listen [::]:80;
  root /home/ubuntu/app-deploy/build;
  location / {
    try_files $uri /index.html;  
  }
}

The location block specifies the “/” prefix compared with the URI from the request. For matching requests, the URI will be added to the path specified in the root directive, that is, to /home/ubuntu/app-deploy/build, to form the path to the requested file on the local file system. If the file is not found, NGINX will fall back to the /index.html file. The try_files is needed because when we navigate to the defined routes, for example /about.html , NGINX will look for an about.html file in the build folder which doesn’t exist as the React App is Single Page Application. So, by sending back the index.html file, the React App can show the requested route, in this case /about .

Conclusion

In this blog post, we have seen how to use NGINX to host a static React App. The key points to understand are how the location and try files directory works on NGINX.

Let me know what you think in the comments. Follow me on Twitter and Youtube for more!