title: Why is my nginx routing my react app static files to my index.html
body: <p>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:</p>
  <pre><code>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;
     }
  }
  
  </code></pre>
  <p>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.</p>
  <pre><code>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;
          }
  }
  
  </code></pre>
  <p>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:</p>
  <p><a href="https://i.stack.imgur.com/ggWDh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ggWDh.png" alt="enter image description here" /></a></p>
  <p>And here's the folder structure on the server:</p>
  <p><a href="https://i.stack.imgur.com/pzhQy.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pzhQy.png" alt="enter image description here" /></a></p>
  <p>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?</p>
  <p>Before anyone asks, yes, I did restart nginx.</p>