CODEWITHSUNDEEP
reactjsnginx
Supperhero
Supperhero

Reputation: 1191

Why is my nginx routing my react app static files to my index.html

I want to host a demo app on a subroute of my domain. When I place the app in the root of the domain and use the following configuration, it works:

server {
   server_name domain.com www.domain.com;
   root /var/www/my-app/build;
   index index.html index.htm;
   location / {
       try_files $uri /index.html =404;
   }
}

But when i move it to a subroute using the following configuration, it correctly fetches the initial index.html but then routes the static file requests (for css, js, images...) to index.html as well.

server {
        listen 80;
        server_name domain.com www.domain.com;

        location / {
        }
        location /demo-apps/my-app{
                root /var/www/my-app/build;
                try_files $uri /index.html =404;
        }
}

And I don't understand why. Here's a screen capture of the request which succeeds but returns the index.html file instad of the js file:

enter image description here

And here's the folder structure on the server:

enter image description here

As I understand it, the request from the first screen capture should match the $uri condition in the second location block and return the corresponding js file but, clearly, I'm wrong. What do I need to change for this to work?

Before anyone asks, yes, I did restart nginx.

Upvotes: 1

Views: 2884

Answers (1)

Richard Smith
Richard Smith

Reputation: 49762

The path to the file is constructed by concatenating the value of root with the value of $uri. So a request for /demo-apps/my-app/css/foo.css will be looked for at /var/www/my-app/build/demo-apps/my-app/css/foo.css, which is the wrong place.

You can use alias instead (see this document), for example:

location /demo-apps/my-app {
    alias /var/www/my-app/build;
    try_files $uri /demo-apps/my-app/index.html;
}

However, using alias and try_files together can be problematic. See this long term issue.

Or use a regular expression location (see this dcoument) to extract the latter part of the URI, for example:

location ~ ^/demo-apps/my-app(/.*)?$ {
    root /var/www/my-app/build;
    try_files $1 /index.html =404;
}

Upvotes: 3

Related Questions