NGINX and Angular SPA Redirect
Tags: angular, nginx
Published: 2022-11-27 04:44:23

---
title: NGINX and Angular SPA Redirect
published: true
description: This article describes how to redirect incoming requests to the home page when hosting an Angular app with NGINX
tags: #angular #nginx 
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2022-11-27 04:02 +0000
---

## Purpose
In this post, we will discuss how to configure NGINX when hosting an Angular application so that refreshing a page does not give you a 404 error.

## The Problem
SPA's (Single Page Applications) have changed the way we develop web applications in the last 8 - 10 years (though it is falling out of fashion lately per my [post](https://dev.to/paulmojicatech/evolution-of-web-development-3dp2)).  A SPA runs the entire application on the client (browser).  This makes an application much more responsive.  

However, one of the pitfalls is that routing also happens on the client.  This becomes an issue both with SEO (search engine optimization) as well as trying to refresh a route that is not the home route.  The problem is that the web server does not know the route because routing happens on the client.  So `foo.com/bar` is an unknown route to the web server.  The web server only know `foo.com` and it serves the index.html page when that requests comes in. The `/bar` piece is something that the client knows how to handle because there is javascript sent from the web server to the client that is knows how the routing should work.

## The Solution
There are several solutions to get around the routing issue.  One is to use MPA's (multi page applications).  Both Angular ([Angular Universal](https://angular.io/guide/universal), [Scully](https://scully.io/), and more recently released [Analog](https://analogjs.org/)) and React ([NextJs](https://nextjs.org/) and [Remix](https://remix.run/)) have meta-frameworks that provide a server side rendered solution.

The other solution, which is the one this article will discuss, is allowing NGINX handle the routing.

## NGINX Config
NGINX is a very fast reverse proxy that acts as a web server to host your web app.  It has several configuration files that decide how incoming requests to the web server should be handled.  

Below is a snippet of the configuration you can add that will serve the index.html file (which contains the SPA routing information) to all unknown incoming URLs.

```
server {
      listen 80;
      listen [::]:80;
      server_name localhost;
     
      location / {
            root /usr/share/nginx/html;
            index index.html;
            try_files $uri $uri/ /index.html =404;
      }
}
```

The important part of this code block is `try_files $uri $uri/ /index.html =404;`.  This tells NGINX if a URL comes in that it does not recognize, use the URI (Uniform Resource Identifier) and serve the index.html file. <b>Note: The `=404;` part should never be hit but it is common practice to add it as well.  This says if index.html is not found, serve the default 404 page.</b>

## Conclusion
This was a short article the shows how you can configure NGINX to workaround a limitation in SPAs where routing is broken because the web server does not know how to process routes be default.

If you would like to hear more about web development, please follow me on [Twitter](https://twitter.com/paulmojicatech), Mastodon(@paulmojicatech@hachyderm.io), or [LinkedIn](https://www.linkedin.com/in/paul-mojica-94696871/).

Happy Coding!