How to configure NGINX for Angular and ReactJS

Configuring NGINX for React and Angular

Applications based on JavaScript frameworks, such as React and Angular, typically handle their own internal routing. However, the routing happens within the application and not at the web server. Since the routes are not visible to the web server they will not be served by the web server.

This tutorial will show you how to configure NGINX for your Angular or React applications.

 

Rewrite URLs with NGINX

NGINX can perform URL rewrites. By doing so we can foward all requests or a subset of requests to a specific file — usually index.html for JavaScript frameworks.

Using the try_files directive we can instruct NGINX to rewrite requests to be forwarded to a target file. The directive can be added in the server or location block of your NGINX configuration.

try_files $uri $uri/ /index.html?$args;

Where are the NGINX Configuration Files

If you are not a seasoned server administrator you may not know where NGINX stores its configurations. Fear not, for we will show you where it can be found on each major Linux distribution.

These are the locations of the default server configurations. NGINX supports hosting multiple sites and also splitting you configuration into several parts. Additional configuration files can be found in the /etc/nginx/conf.d directory.

Here the locations of the default configuration files.

Ubuntu 16.04+ / Debian 8+

/etc/nginx/conf.d/default.conf

CentOS 7 / Red Hat 7

/etc/nginx/nginx.conf

Rewriting All Requests

Use this method to catch all URIs and forward them to index.html.

location / {
     root   /usr/share/nginx/html;
     index  index.html;

     try_files $uri $uri/ /index.html?$args;
}

 

Forwarding Requests for Specific URI

You may only want a specific URI to handle routing.  Rather than catching all requests, we can narrow our rewrites to specific URI. The following example shows how to rewrite URLs for only requests that have a URI that starts with /profiles. This is useful if your Angular or React app is only used for this particular URI.

Another example is if you have multiple React or Angular applications being hosted by the same domain. By specifying a URI for each you can separate traffic.

location /profiles {
     root   /usr/share/nginx/html;
     index  index.html;

     try_files $uri $uri/ /index.html?$args;
}

Using Regex to filter URI Rewrites

Example Rewrite Rule for Default NGINX site

NGINX Example Configuration

The above examples only showed the directive used to create a rewrite. The following is for those who want a little more context.

server {
    listen       80;
    server_name  localhost;

    #charset koi8-r;
    #access_log  /var/log/nginx/host.access.log  main;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;

        try_files $uri $uri/ /index.html?$args;
    }

    #error_page  404              /404.html;

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }


}