title: React & nginx routing to subdirectory
body: <p>Just started with using React. I have an app created with <code>create-react-app</code> which should be running on a <code>sub-directory</code> while making API calls to a different path.</p>
  
  <p><strong>React App:</strong> </p>
  
  <p>location on server: <code>/var/www/myapp/build</code></p>
  
  <p>endpoint: <code>https://foo.example.com/analytics</code></p>
  
  <p><strong>Data API endpoint:</strong> <code>https://foo.example.com/api/data</code></p>
  
  <p><strong>Nginx setup</strong></p>
  
  <pre><code>    location /analytics {
             root /var/www/myapp/build;
             try_files $uri /index.html;
      }
  </code></pre>
  
  <p>When setting <code>"homepage":"https://foo.example.com/analytics"</code> in the client's <code>package.json</code>, all the resource paths seem to be correct (i.e. <code>https://foo.example.com/analytics/static/...</code>), but when checking networking no request to <code>.../api/data</code> shows up in my browser's networking inspector and the app doesn't properly spawn. </p>
  
  <p>Using absolute paths in the <code>App's API call</code> (<code>fetch('https://foo.example.com/api/data')</code> instead of <code>fetch('/api/data')</code>) doesn't seem to help, either. </p>
  
  <p>When instead I set <code>"homepage":"."</code> in <code>package.json</code> and also change the Nginx config to serve the react build directory on server root, the app works. </p>
  
  <pre><code>server {
          root /var/www/myapp/build;
  }
  </code></pre>
  
  <p>However, in this case, the app is also available under <code>https://foo.example.com</code>, which is something I don't want. </p>
  
  <p>I strongly suspect this has to do with routing, but couldn't figure out how to fix it. So any help would be much appreciated!</p>
  
  <p><strong>--- Edit / Solution ---</strong></p>
  
  <p>I doubt it's the most straight forward solution, but the following setup works for me:</p>
  
  <p><strong>React App</strong></p>
  
  <p>In <code>package.json</code>, set <code>"homepage":"./analytics"</code> before running <code>npm run build</code></p>
  
  <p><strong>Nginx config:</strong></p>
  
  <pre><code>    location =  /analytics {
  
              root /var/www/myapp/build;
              try_files /index.html =404;
      }
  
      location ~ ^/analytics(.*) {
  
              root /var/www/myapp/build;
              try_files $1 $1/ /index.html =404;
      }
  </code></pre>
  
  <p>My understanding is that the initial setup using <code>try_files $uri</code> was looking for files in the root directory <code>/var/www/myapp/build</code> for the full uri rather than only the path that follows <code>/analytics</code>. E.g. when requesting <code>../analytics/css/styles.css</code> it would check if a file (or directory) is available under <code>/var/www/mayapp/build/analytics/css/styles.css</code> which doesn't exist, so it kept serving the <code>index.html</code> as fallback. Hence the regex workaround. </p>
  
  <p>Feedback to improve this solution still very welcome, though. </p>