Hosting AngularJS App on heroku express server not working?

Question

I'm trying to run my angularJS app on heroku. I wrote this server to handle the requests:

var express = require('express');
var path = require('path');
var compress = require('compression');
var logfmt = require('logfmt');
var app = express();

app.use(logfmt.requestLogger());
app.use(compress());

app.use(express.static(__dirname + '/dist'));

app.all('*', function(req, res, next) {
    if(req.path.match(/\.(html|js|css|png|jpg|jpeg|gif|webp|svg)$/)) {
        return next();
    }

    res.sendFile('/dist/index.html');
});

var port = Number(process.env.PORT || 8080);
app.listen(port, function() {
    console.log("Listening on " + port);
});

If i run npm start in local development it works fine and I can navigate the app.

However when I try the same thing on heroku I get this:

Error: ENOENT, stat '/dist/index.html'

I also get some unhelpful logs from the heroku toolbelt all of which basically indicate 404 on the requests. I would be more than happy to post those logs here if anyone wants to read them. I'll hold off initially to avoid making this post look spammy.