Nginx - config to route to single page app

Question

I'm using nginx with the deployment of my website on my local server.

The website is a single page create react app running on the server. I have a domain, www.test.com for example, and i want the single page app to be found on www.test.com/first-website. From reading online I'm supposed to use the rewrite directive.

This is my current config:

http {
        upstream sensory-showcase {
                server 127.0.0.1:5000;
        }

        server {
                listen 80;

                location /sensory-solution-for-firefighters {
                        rewrite ^/sensory-solution-for-firefighters $1 break;
                        proxy_pass http://sensory-showcase/;
                }
        }
}

events { }

From this the url resolves without an nginx 500 error however it just shows a blank white page. And i have to have a trailing /, eg www.test.com/first-website/ . Without the trailing / it errors.

I just note, when I didnt have the rewrite directive in, and left the location at just / the site loaded fine.

question from:https://stackoverflow.com/questions/65850526/nginx-config-to-route-to-single-page-app

Answer 1

Try this, it will fallback to the index.html of your single page app, which will do the routing:

       location /first-website {
            try_files $uri $uri.html $uri/ /first-website/index.html;
       }