title: Reverse proxy deployment of React apps
body: <p>I'm trying to deploy multiple containerised SPAs using a reverse proxy to handle routing to each. In the current setup, each container has a production build create-react-app served by an express app which essentially just consists of:</p>
  
  <pre><code>app.use(express.static(path.join(__dirname, '..', 'build')));
  
  app.use('/*', (req, res) =&gt; {
      res.sendFile(path.join(__dirname, '..', 'build', 'index.html'));
  });)
  </code></pre>
  
  <p>I've configured an nginx server with the following:</p>
  
  <pre><code>server {
      listen 8081;
      server_name example.domain.com;
      location /app1 {
          rewrite ^/(.*) /$1 break;
          proxy_ignore_client_abort on;
          proxy_pass http://localhost:3100;
          proxy_redirect http://localhost:3100 https://example.domain.com/app1;
          proxy_set_header  X-Real-IP  $remote_addr;
          proxy_set_header  X-Forwarded-For $proxy_add_x_forwarded_for;
          proxy_set_header  Host $http_host;
      }
  }
  </code></pre>
  
  <p>The proxying appears to work as when I navigate to <code>http://localhost:8081/app1</code> the <code>index.html</code> of the built React app loads but all of the bundled js files are 404. I have tried setting <code>"homepage": "/app1"</code> in the React app's <code>package.json</code> but this hasn't appeared to make any difference. It is still looking for the bundled js files at the server's root: <code>Request URL: http://localhost:8081/static/js/bundle.js</code></p>
  
  <p>I'm at a loose end as to what to try next, any help would be much appreciated.</p>
  
  <p>Best,</p>
  
  <p>P</p>