Nginx redirect all requests to index.html

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. http://oursite.com/user/id. 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 http://oursite.com/user/id 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;
    server_name morioh.com;
    root /var/www/morioh.com;
    
    location / {
         try_files $uri $uri/ /index.html;
    }
}

#nginx