Heroku and Angular routing

3
votes

I am working on an Angular front end site built with the Yoeman Angular package. The project is being hosted in Heroku using the Node.js build pack.

Heroku builds the project without errors, it runs Gulp and Bower to install dependencies. After the startup scripts have been executed and the project compiled, the index page loads with no problem but any other page that is not the homepage (like the login page for example) will fall into a “Cannot GET /login” message.

This seems to be a common problem as I have read many posts on how to resolve the Angular routing on Heroku. These are all the actions that I have taken without any success at the moment:

  1. Creating a Node.js web server in Express (I have tried many flavours of this script)

    var gzippo = require('gzippo'); var express = require('express'); var morgan = require('morgan'); var app = express();

    app.use(morgan('dev')); app.use(gzippo.staticGzip("" + __dirname + "/dist")); app.use('/bower_components', express.static(__dirname + '/bower_components')); app.listen(process.env.PORT || 5000);

  2. Commenting the dist folder in .gitignore for Heroku to work with it. The dist folder gets push into Git.

  3. Creating the env variables NODE_ENV: true, NODE_PATH: true, NPM_CONFIG_PRODUCTION: false

The site runs perfectly locally when running the dist files as stand-alone on an Apache server or with the Node.js script above.

I would appreciate any comments that would help me resolve this issue on Heroku and Angular. Thanks in advance.

1
angularjsnode.jsheroku

1 Answers

2
votes

I guess after all this time you were already able to fix this (or you moved on to something else).

In any case, and for anyone running into similar issues, I created a public repo with an Angular2 + Express app that's already configured for deployment on Heroku.

https://github.com/pabloruiz55/Angular-Express-Heroku

I can't fully answer this question as I'm missing info like what errors you are running into, but hopefully, taking a look at my starter project anyone can figure it out.