title: Serve Angular App and its API using Express
body: <p>I have an Express app set up with has this routing configuration:</p>
  
  <pre><code>app.use(express.static(path.join(__dirname, '../angular-app/dist')));
  app.use('/', 
    express.Router().get('/', function(req, res, next) {
      res.redirect('index.html');
    })
  );
  app.use('/v1', v1); // these are my API routes
  </code></pre>
  
  <p>If I launch this express app and navigate (in a browser) to its root, the Angular app comes up, but if I navigate to any of the routes <em>within</em> the Angular app, e.g. /mycomponent/ I get the 404 route rendering from Express.</p>
  
  <p>What I want to have happen is that any route that doesn't start with /v1 is delegated to the angular app, and otherwise my API is served. Is this not a sound way of thinking about how to deploy this pair of applications? </p>
  
  <p>To compound this, I have this hosted on an Apache server using a reverse proxy configuration. </p>
  
  <pre><code>   &lt;Location /myapp&gt;
        ProxyPass http://127.0.0.1:3000
        ProxyPassReverse http://1127.0.0.1:3000
     &lt;/Location&gt;
  </code></pre>
  
  <p>... and of course my angular app has <code>&lt;base href="/myapp/"/&gt;</code> in its index.html template to support this. So I'm wondering if the only way to do this "correctly" is to use the reverse proxy for the Express app and have it <em>only</em> serve the API routes, then use some kind of mod_rewrite configuration in Apache to host the Angular app directly from Apache. What do you think?</p>