Deployment to Heroku Error: Cannot find module '/app/server.js'

Question

I'm deploying an Angular 6 application created with the angular-cli to Heroku. The build completes successfully, however, when I go to the deployed application, I get a blank page.

After running the Heroku logs, it appears the error/crash happens upon starting up the node server instance. "Cannot find module '/app/server/js". The server.js file lives under the src directory so I don't know why this is happening.

from the logs:

Here is the package.json, I removed the node and npm engines to run the default versions from the heroku build:

{
  "name": "blog-app",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "node server.js",
    "build": "ng build --prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "postinstall": "ng build --prod"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^6.0.0",
    "@angular/cdk": "^6.0.0",
    "@angular/cli": "~6.0.0",
    "@angular/common": "^6.0.0",
    "@angular/compiler": "^6.0.0",
    "@angular/compiler-cli": "^6.0.0",
    "@angular/core": "^6.0.0",
    "@angular/forms": "^6.0.0",
    "@angular/http": "^6.0.0",
    "@angular/material": "^6.0.1",
    "@angular/platform-browser": "^6.0.0",
    "@angular/platform-browser-dynamic": "^6.0.0",
    "@angular/router": "^6.0.0",
    "@ng-bootstrap/ng-bootstrap": "^2.0.0",
    "@ngrx/effects": "^5.2.0",
    "@ngrx/store": "^5.2.0",
    "angularfire2": "^5.0.0-rc.8.1-next",
    "bootstrap": "^3.3.7",
    "core-js": "^2.5.4",
    "express": "^4.16.3",
    "firebase": "^5.0.2",
    "ngx-quill": "^3.1.0",
    "rxjs": "^6.0.0",
    "rxjs-compat": "^6.1.0",
    "typescript": "~2.7.2",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.6.0",
    "@angular/language-service": "^6.0.0",
    "@types/jasmine": "~2.8.6",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.2.1",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~1.7.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~1.4.2",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.3.0",
    "ts-node": "~5.0.1",
    "tslint": "~5.9.1"
  }
}

And the server.js:

import express from "express";
const app = express();

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

app.all('*', (req, res) => {
  res.status(200).sendFile(__dirname + '/dist/index.html');
});

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

File tree:

Any idea on what the problem could be?

EDIT: I added a Procfile at src/Procfile:

web: node src/server.js

After adding this file, the app still crashes with the following output in the Heroku logs:

Answer 1

Create a Procfile with following content

web: node src/server.js

The Procfile is always a simple text file that is named Procfile exactly. For example, Procfile.txt is not valid.

The Procfile must live in your app’s root directory. It does not function if placed anywhere else.

Heroku app dynos executes the commands of Procfile

Read more about Procfile here https://devcenter.heroku.com/articles/procfile