basic Angular app works locally not working on heroku - getting H10 crashing error

Question

I'm trying to deploy a simple Angular app (the basic app that is created with 'ng new' with no changes).

I have followed the steps in this article to create a backend server for heroku to deploy: https://medium.com/@hellotunmbi/how-to-deploy-angular-application-to-heroku-1d56e09c5147

The change I made so the steps worked for me are using "postinstall": "ng build --aot --prod" instead of what is in the article

this is how my server.js looks:

//Install express server
const express = require('express');
const path = require('path');

const app = express();

// Serve only the static files form the dist directory
app.use(express.static(__dirname + './dist/expense-app'));

// Start the app by listening on the default Heroku port
app.listen(process.env.PORT || 8080);

app.get('/*', function(req,res) {

res.sendFile(path.join(__dirname+'./dist/expense-app/index.html'));
});

and this is my package.json:

{
  "name": "expense-app",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "postinstall": "ng build --aot --prod"
  },
  "private": true,
  "dependencies": {
    "@angular/cli": "~7.1.0",
    "@angular/compiler-cli": "~7.1.0",
    "@angular/animations": "~7.1.0",
    "@angular/common": "~7.1.0",
    "@angular/compiler": "~7.1.0",
    "@angular/core": "~7.1.0",
    "@angular/forms": "~7.1.0",
    "@angular/platform-browser": "~7.1.0",
    "@angular/platform-browser-dynamic": "~7.1.0",
    "@angular/router": "~7.1.0",
    "core-js": "^2.5.4",
    "express": "^4.16.4",
    "path": "^0.12.7",
    "rxjs": "~6.3.3",
    "tslib": "^1.9.0",
    "zone.js": "~0.8.26",
    "typescript": "~3.1.6"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.11.0",
    "@angular/language-service": "~7.1.0",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.5.0",
    "enhanced-resolve": "^3.3.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~3.1.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0"
  },
  "engines": {
    "node": "8.12.0",
    "npm": "5.5.1"
  }
}

And the files folder looks like: files folder

I'm using heroku git cli to deploy my app and after I push my changes my app crashes with H10 Error and this is how my log looks:

2018-12-03T09:23:22.576448+00:00 heroku[web.1]: Starting process with command `npm start`
2018-12-03T09:23:24.979505+00:00 app[web.1]: 
2018-12-03T09:23:24.979527+00:00 app[web.1]: > expense-app@0.0.0 start /app
2018-12-03T09:23:24.979529+00:00 app[web.1]: > ng serve
2018-12-03T09:23:24.979530+00:00 app[web.1]: 
2018-12-03T09:23:28.123272+00:00 app[web.1]: ** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
2018-12-03T09:23:42.374445+00:00 app[web.1]: 
2018-12-03T09:23:42.374461+00:00 app[web.1]: Date: 2018-12-03T09:23:42.373Z
2018-12-03T09:23:42.374462+00:00 app[web.1]: Hash: f147f29ee3d971c171a1
2018-12-03T09:23:42.374463+00:00 app[web.1]: Time: 14035ms
2018-12-03T09:23:42.374468+00:00 app[web.1]: chunk {main} main.js, main.js.map (main) 9.73 kB [initial] [rendered]
2018-12-03T09:23:42.374470+00:00 app[web.1]: chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 223 kB [initial] [rendered]
2018-12-03T09:23:42.374471+00:00 app[web.1]: chunk {runtime} runtime.js, runtime.js.map (runtime) 6.08 kB [entry] [rendered]
2018-12-03T09:23:42.374473+00:00 app[web.1]: chunk {styles} styles.js, styles.js.map (styles) 16.3 kB [initial] [rendered]
2018-12-03T09:23:42.374478+00:00 app[web.1]: chunk {vendor} vendor.js, vendor.js.map (vendor) 3.43 MB [initial] [rendered]
2018-12-03T09:23:42.394912+00:00 app[web.1]: [34mℹ[39m [90m｢wdm｣[39m: Compiled successfully.
2018-12-03T09:24:23.225141+00:00 heroku[web.1]: Error R10 (Boot timeout) -> Web process failed to bind to $PORT within 60 seconds of launch
2018-12-03T09:24:23.225262+00:00 heroku[web.1]: Stopping process with SIGKILL
2018-12-03T09:24:23.328427+00:00 heroku[web.1]: Process exited with status 137
2018-12-03T09:25:06.336905+00:00 heroku[router]: at=error code=H20 desc="App boot timeout" method=GET path="/" host=***.herokuapp.com request_id=fc5a5d9c-bd39-40f1-b48d-0dd1ec85c776 fwd="194.90.186.65" dyno= connect= service= status=503 bytes= protocol=https
2018-12-03T09:25:41.641532+00:00 heroku[web.1]: State changed from starting to down
2018-12-03T09:26:19.346754+00:00 heroku[router]: at=error code=H20 desc="App boot timeout" method=GET path="/" host=***.herokuapp.com request_id=85badbc2-f4e5-487b-a977-2a088660d875 fwd="194.90.186.65" dyno= connect= service= status=503 bytes= protocol=https
2018-12-03T09:26:22.145485+00:00 heroku[router]: at=error code=H20 desc="App boot timeout" method=GET path="/" host=***.herokuapp.com request_id=d777f0ab-1f1f-4989-86a3-d58b7e98c304 fwd="194.90.186.65" dyno= connect= service= status=503 bytes= protocol=https
2018-12-03T09:26:49.673005+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=***.herokuapp.com request_id=3a0d7059-1462-448c-9f07-43c1f19f6a30 fwd="194.90.186.65" dyno= connect= service= status=503 bytes= protocol=https
2018-12-03T09:26:50.180438+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=***.herokuapp.com request_id=9c61691d-d5ca-4746-a021-b2077cbba5d1 fwd="194.90.186.65" dyno= connect= service= status=503 bytes= protocol=https

And when I go to my heroku app domain I get the heroku 'Application Error' page heroku application error

Am I missing anything here? it supposed to be very simple but I can't get it to work for me

Let me know if you need any more information

Thanks, Oren

Answer 1

Try to remove those lines, see if the app runs without them:

app.get('/*', function(req,res) {
    res.sendFile(path.join(__dirname+'./dist/expense-app/index.html'));
});

This line already set your index.html as default

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

Also make sure in your package.json your have this line under 'scripts':

"start": "node server.js",
"postinstall": "ng build --aot -prod"