ExpressJS, AngularJS, and pretty URLs

We added a new web interface to a set of internal developer APIs so our developers would no longer have to manage unruly postman collections and I kept running into problems where the catch-all express route was catching too much or other routes were no longer behaving correctly.
If you’re having problems with

$locationprovider.html5mode(true)

Here are all the steps I took to resolve our issues:

  1. Add a base tag of <base href=”/”> to your angular index file.
  2. Make sure all of your static routes are defined first in your express app.
  3. After all of your app’s routes, make sure your catch all route is absolutely last
    app.all('/*', function(req, res, next) {
      res.sendfile('index.html', { root: 'myWebRoot' });
    });
  4. That’s it.

I kept running into so many issues and they all boiled down to the static routes not being defined absolutely first. Hopefully with this post you don’t have to make the same mistake.