Nginx redirect all requests to index.html

Nginx redirect all requests to index.html

Nginx: How to send all requests to a single page client side app like as Vue, React or Angular

To get rid of the hash, we can use the router's history mode, which leverages the history.pushState API to achieve URL navigation without a page reload:

When using history mode, the URL will look "normal," e.g. Beautiful!

Here comes a problem, though: Since our app is a single page client side app like as Vue, React or Angular, without a proper server configuration, the users will get a 404 error if they access directly in their browser. Now that's ugly.

Not to worry: To fix the issue, all you need to do is add a simple catch-all fallback route to your server. If the URL doesn't match any static assets, it should serve the same index.html page that your app lives in. Beautiful, again!

See the configuration below. Very simple.

server {

    listen 80;
    listen [::]:80;
    root /var/www/;

    location / {
         try_files $uri $uri/ /index.html;


Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

NGINX Announces Eight Solutions that Let Developers Run Safely with Scissors

We announce eight solutions that unleash developer speed without sacrificing the control infrastructure teams require. Get the details on NGINX Controller, App Protect, Ingress Controller, Service Mesh, and Analytics Cloud Service; F5 DNS Cloud Services; and Red Hat integrations.

Securing Your Apps in Kubernetes with NGINX App Protect - NGINX

With NGINX Plus Ingress Controller for Kubernetes release 1.8.0, NGINX App Protect can be embedded in the Ingress Controller. This puts WAF protection closer to applications, which is crucial in modern app environments like Kubernetes. It also enables automation and reduces complexity and cost.

Basics of configuring NGINX

NGINX is a modern technology that is used for mainly for load-balancing but more different purposes. Even though it looks like a very complex technology, if you get to know the basics, it is very simple to work with NGINX. In my experience I also thought NGINX is a handful, but after learning the basics and moving on it was very simple and easy.

Nginx Commands - Every Developer Should Know

In this guide, we will go over the most important and frequently used Nginx commands, including starting, stopping, and restarting Nginx.

What is NGINX?

This article was originally published at