title: How can I use "ng serve" with multiple apps hosted through an nginx reverse proxy?
body: <p>My employer has a number of Angular 2+ apps that are under active development.  These apps are hosted behind an nginx reverse proxy. For example, during development, one app might be reachable at:</p>
  
  <pre><code>https://localhost/my-app-1
  </code></pre>
  
  <p>while another might be found at:</p>
  
  <pre><code>https://localhost/my-app-2
  </code></pre>
  
  <p>To accomplish this proxying behavior, I configure each Angular app to use a different port when hosted using <code>ng serve</code>:</p>
  
  <pre><code>// in angular.json
  {
      "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
      "projects": {
          "my-project": {
              "architect": {
                  "serve": {
                      "options": {
  
                          // each app gets its own port
                          "port": 4201
  
                      }
                  }
              }
          }
      }
  }
  </code></pre>
  
  <p>Then, I use nginx to proxy traffic to the appropriate port using this nginx configuration:</p>
  
  <pre><code># proxy my-app-1 requests
  location ^~ /my-app-1/ {
  
      proxy_pass http://127.0.0.1:4201/;
  
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection 'upgrade';
      proxy_set_header Host $host;
  
      proxy_http_version 1.1;
      proxy_cache_bypass $http_upgrade;
  }
  
  # proxy my-app-2 requests
  location ^~ /my-app-1/ {
  
      proxy_pass http://127.0.0.1:4202/;
  
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection 'upgrade';
      proxy_set_header Host $host;
  
      proxy_http_version 1.1;
      proxy_cache_bypass $http_upgrade;
  }
  
  # proxy ng serve live reload traffic
  location ^~ /sockjs-node/ {
  
      # Notice that the port is hardcoded
      # in this proxy configuration
      proxy_pass http://127.0.0.1:4201;
  
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection 'upgrade';
      proxy_set_header Host $host;
  
      proxy_http_version 1.1;
      proxy_cache_bypass $http_upgrade;
  }
  </code></pre>
  
  <p>This works, with one caveat - the <code>/sockjs-node/</code> traffic is only routed to <strong>one</strong> of the two apps (in this example, the one hosted at port 4201).  Because of this, the live reload feature only works with one app at a time.</p>
  
  <p>Here's my question: is there a way to configure nginx or the Angular development server to allow me to use live reload for <strong>all</strong> of my apps when using <code>ng serve</code> through an nginx proxy? For example, I'd like to have two instances of <code>ng serve</code> running simultaneously - one for <code>https://localhost/my-app-1</code> and one for <code>https://localhost/my-app-2</code> - and have live reload work for both apps.</p>
  
  <p>I've tried conditionally routing the traffic based on the HTTP Referer header (the <code>$http_referer</code> variable in nginx), but not all of the live reload traffic includes this header.</p>
  
  <p>I'm using version 6 of Angular and the Angular CLI.</p>