Skip to main content

Hosting a single page app with Nginx without 404 errors

 If you write a single-page app where the routing is handled on its own, it works perfectly on your local host with the dev server.

For an instance, if there is a route in your app for login such as "/login", if you try this in the localhost it will work without any issues. 

Single page app routing

If you host this with an Nginx server as a static web app, using the direct route in the URL will end up with 404.


Nginx 404
There is an easy fix for this updating the Nginx configurations. 
Nginx default static site configuration is located in "/etc/nginx/conf.d/default.conf". This may differ based on your installation and OS. However, the configurations are pretty much the same.

You can add the following line to the configuration 

try_files $uri $uri/ /index.html?q=$uri&$args;

This makes the Nginx look for files in the file path, and if found then serve it. Or else, route the request to the index.html. 

In our example, it will look for a file called login in the static directory, since we don't have such a file it will route the request to the index.html, then handle the routing after that is up to the single page app.

This allows the single-page app to load its actual static files such as images, CSS, and js. If there are no such files, it will route the request to the index.html.


location / {
    root /usr/share/nginx/html;
    try_files $uri $uri/ /index.html?q=$uri&$args;
    index index.html index.htm; }


Edit the configuration as above and reload the Nginx configuration as below.

sudo service nginx reload

Once this is done, the single-page app's routing should work even if you type in the URL and hit enter.

nginx static single-page routing



This solution is based on the Front Controller Pattern configuration for Nginx.

Comments

  1. Thank you! Such a quick solution. I thought I'd spend a while trying to figure out the fix.

    ReplyDelete

Post a Comment

Popular posts from this blog

Java, how to create a list with a single element

 I wanted to create a Java List with a single element. Yet, I wanted to add more elements later. So, I was looking for a couple of ways to do this. So far there are multiple elegant ways to create a list with a single element with a one-liner. Not so much for a modifiable list though. Here's what I gathered so far. Followings are a few ways of creating a list with strictly a single entry. Can't add more elements. 1. Collections.singletonList() This returns an immutable list that cannot be modified or add more elements. // An immutable list containing only the specified object. List<String> oneEntryList = Collections. singletonList ( "one" ) ; oneEntryList.add( "two" ) ; // throws UnsupportedOperationException 2.  Arrays.asList() This returns a fixed-size list consisting of the number of elements provided as arguments. The number of elements provided would be an array hence the size is fixed to the length of the array. // Returns a fixed-size list List...

How to fix SSLHandshakeException PKIX path building failed in Java

TL ; DR 1. Extract the public certificate of the website/API that you are trying to connect from your Java application. Steps are mentioned in this post 2. Use the Java keytool to install the extracted certificate into the "cacerts" file (Trust store) keytool -import -trustcacerts -alias <domain name> -file <public certificate>.cert -keystore /path_to_java_home/jre/lib/security/cacerts -storepass changeit 3. Restart your Java application Exception A typical exception stack trace would look like below. javax.net.ssl. SSLHandshakeException : sun.security.validator.ValidatorException: PKIX path building failed : sun.security.provider.certpath.SunCertPathBuilderException: unable to find valid certification path to requested target at sun.security.ssl.Alerts.getSSLException(Alerts.java:192) at sun.security.ssl.SSLSocketImpl.fatal(SSLSocketImpl.java:1959) at sun.security.ssl.Handshaker.fatalSE(Handshaker.java:302) at sun.security.ssl.Handshake...

Ubuntu DNS issue fix DNS_PROBE_FINISHED_BAD_CONFIG

Issue  I've been playing with a VPN and somehow it messed up my DNS resolution configurations. Chrome gives  DNS_PROBE_FINISHED_BAD_CONFIG  error and can't ping google. So it seemed to be an issue with the DNS. Of course, restarting didn't fix it. I tried DNS lookup which gave me below. To make sure this is somehting to do with my DNS confgis, I ran the same by providing the google DNS servers.  It works, which means my default DNS is not working for some reason. To make sure this, ran the below command. systemd-resolve --status Output has an entry for DNS Servers, which was  ::1 Fix 1. Edit the file /etc/systemd/resolved.conf. sudo vi /etc/systemd/resolved.conf 2. Add new DNS entries. I added 2 google DNS and the cloudflare DNS sever. [Resolve] DNS=8.8.8.8 8.8.4.4 1.1.1.1 3. Restart the systemd-resolved and check the configuration is persisted in /run/systemd/resolve/resolv.conf file. sudo service systemd-resolved restart cat /run/systemd/resolve/resolv.co...