Deploy Angular 5 + Nodejs Express app to Heroku

Question

I have an Angular 5 App.

This is what I have in my package.json

{
  "name": "web",
  "version": "0.0.0&         


        

Answer 1

Correct your code in Server.js

const express = require('express');
const app = express();
const path = require('path');

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

app.listen(process.env.PORT||8080);


//Path Location Strategy
app.get('/', function(req, res) {
  res.sendFile(path.join(__dirname+'/dist/index.html'));
});

console.log('Console Listening'); 

For future reference -

try running logs command before hitting the URL.

$ heroku logs

Then check the logs for further details.

Answer 2

Usually when this error happens to me I have problems with node dependencies. Try to remove the node_modules folder, and the dist folder. From there spin everything up again, this mimics how heroku will build your project.

Answer 3

I suggest for more simplicity, if you want to deploy the backend on heroku as api and the he front end on github and activate cross origin resource sharing on browsing computer, I am actually building such app, that is my plan otherwise if you get any good news of this way your are doing update me

Answer 4

In your server.js you need to redirect your http call to the index.

app.route('/*', function(req,res) {
  res.redirect(__dirname + '/dist/index.html')
})

In the above it'll redirect any call to your index.html.

Answer 5

Try adding @angular-devkit/build-optimizer as a package in the package.json file.

"dependencies": {
    "@angular-devkit/build-optimizer": "^0.4.0",
    ...
}

This allows the post-install flag --aot to run. For some reason this package isn't built in anymore.

Answer 6

Here's how I make my Angular app to deploy and work on Heroku:

1. Your server.js should look something like this: https://hastebin.com/zavehahide.js
2. In your package.json, move @angular/cli and @angular/compiler-cli from devDependencies to dependencies
3. Also in your package.json, add postinstall: ng build --prod and start: node server.js to scripts

You should be good to go.