I have an Express app set up with has this routing configuration:
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
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 within the Angular app, e.g. /mycomponent/ I get the 404 route rendering from Express.
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?
To compound this, I have this hosted on an Apache server using a reverse proxy configuration.
<Location /myapp>
ProxyPass http://127.0.0.1:3000
ProxyPassReverse http://1127.0.0.1:3000
</Location>
... and of course my angular app has <base href="/myapp/"/> 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 only 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?