So I have a SPA that I built using Create-React-App. It works completely fine for local dev, and I wanted to deploy the built app using nginx.

I set up my Dockerfile and nginx.conf, and at first all seemed to run fine. But then, I noticed weirdest issue.

Most of the app is working fine, but when I try to access a nested URL directly (i.e. not by navigating to it through the app -> This works fine. Problem happens only when I access the URL directly, or refresh the page), there are errors in the console/network while fetching the built files. Say I'm accessing localhost:3000/app/potato, I see my browser is trying to access files from localhost:3000/app/static/js/2.ebff4827.chunk.js (instead of localhost:3000/static/js/2 .ebff4827.chunk.js)

Accessing localhost:3000/app works fine, but localhost:3000/app/ (with trailing /) has the same weird behaviour.

As a result, the browser fails to load the page...

Here's my nginx.conf (although I don't believe this to cause my error, as I set it up with a blank CRA and it worked fine https://github.com/piaverous/cra-nginx-demo):

server {
    listen       3000;
    server_name  localhost;
    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri /index.html;                 
    }
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}

Does anyone have any clue on what could be causing the issue ? I'm totally at a loss here