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",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "node server.js",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "postinstall": "ng build --aot --prod"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "5.1.0",
    "@angular/cli": "^1.6.4",
    "@angular/common": "5.0.3",
    "@angular/compiler": "5.0.3",
    "@angular/compiler-cli": "5.0.3",
    "@angular/core": "5.0.3",
    "@angular/forms": "5.0.3",
    "@angular/http": "5.0.3",
    "@angular/platform-browser": "5.0.3",
    "@angular/platform-browser-dynamic": "5.0.3",
    "@angular/router": "5.0.3",
    "@ng-bootstrap/ng-bootstrap": "1.0.0-beta.5",
    "@ngx-translate/core": "8.0.0",
    "@types/jquery": "3.2.16",
    "angular2-image-upload": "^1.0.0-rc.0",
    "bootstrap": "4.0.0-beta.2",
    "core-js": "2.4.1",
    "express": "^4.16.2",
    "jquery": "3.2.1",
    "jquery-slimscroll": "1.3.8",
    "ngx-toastr": "8.0.0",
    "ngx-uploader": "4.2.1",
    "pace-js": "1.0.2",
    "popper.js": "1.13.0",
    "rxjs": "5.5.0",
    "sticky-kit": "1.1.3",
    "typescript": "~2.4.2",
    "zone.js": "0.8.4"
  },
  "devDependencies": {
    "@angular/language-service": "5.0.3",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "~3.2.0",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~3.2.0",
    "tslint": "~5.7.0"
  },
  "engines": {
    "node": "8.9.4",
    "npm": "5.6.0"
  }
}

I created a server.js with these contents in it.

constexpress=require('express');
constapp=expres();
constpath=require('path');
 
app.us(express.static(__dirname+'/dist'));
 
app.listen(process.env.PORT||8080);
 
 
//PathLocationStradegy
app.get('/'function(req,res) {
  res.sendFile(path.join(__dirname+'/dist/index.html'));
});
 
console.log('Console Listening');

Then, I run these commands

heroku auth:login
Email : johndoe@outlook.com
Password : #########
heroku create iproject-demo
heroku git:remote iproject-demo
git status
git add -A
git push heroku master

Debug

I tried running this

⚡️ web heroku ps

Free dyno hours quota remaining this month: 998h 46m (99%)
For more information on dyno sleeping and how to upgrade, see:
https://devcenter.heroku.com/articles/dyno-sleeping

=== web (Free): npm start (1)
web.1: crashed 2018/01/27 14:18:58 -0500 (~ 1m ago)

Result

everything looks good.

Heroku Log show Build Success.

-----> Node.js app detected
-----> Creating runtime environment
       
       NPM_CONFIG_LOGLEVEL=error
       NPM_CONFIG_PRODUCTION=true
       NODE_VERBOSE=false
       NODE_ENV=production
       NODE_MODULES_CACHE=true
-----> Installing binaries
       engines.node (package.json):  unspecified
       engines.npm (package.json):   unspecified (use default)
       
       Resolving node version 8.x...
       Downloading and installing node 8.9.4...
       Using default npm version: 5.6.0
-----> Restoring cache
       Skipping cache restore (not-found)
-----> Building dependencies
       Installing node modules (package.json)
       added 26 packages in 5.46s
-----> Caching build
       Clearing previous node cache
       Saving 2 cacheDirectories (default):
       - node_modules
       - bower_components (nothing to cache)
-----> Build succeeded!
-----> Discovering process types
       Procfile declares types     -> (none)
       Default types for buildpack -> web
-----> Compressing...
       Done: 34.4M
-----> Launching...
       Released v3
       https://iproject-demo.herokuapp.com/ deployed to Heroku

But when I go to the app:

https://iproject-demo.herokuapp.com/

I see this

How can I debug this further?

Angular is an SPA, and so after you run `ng build` you need to have express redirect all http calls back to index.html so angular can take over — Mike Tung, Jan 27 '18 at 19:20
All right, so how do I fix that ? I attached my server.js already. — code-8, Jan 27 '18 at 19:21
@MikaS, can you please suggest the correct one ? I'm new to this deployment. I followed this video : https://www.youtube.com/watch?v=0bOJjAUXjhI According to him, it works fine. I don't what elses to do, and who to trust. — code-8, Jan 27 '18 at 19:24
I also follow this link : https://stackoverflow.com/a/41171601/4480164 — code-8, Jan 27 '18 at 19:26

score 15 · Answer 1 · answered Jan 30 '18 at 02:26

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

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

You should be good to go.

score 3 · Answer 2 · answered Feb 06 '18 at 09:38

3

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.

answered Feb 06 '18 at 09:38

Fernando Ania

368
1
6
20

score 2 · Answer 3 · answered Jan 27 '18 at 19:26

2

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.

answered Jan 27 '18 at 19:26

Mike Tung

4,735
1
17
24

I will updated my `server.js` with your suggestion, and `now` how do redeploy my entire application ? `git push heroku master` ? – code-8 Jan 27 '18 at 19:29
Another question, should I remove my `app.get(...)` line ? and replace with your ? – code-8 Jan 27 '18 at 19:29
replace yours with mine, also make sure you use `ng build` to make the dist folder and point to it. You shouldn't have to run ng serve at all – Mike Tung Jan 27 '18 at 19:57
I don't I use `ng serve` at all. I think the logs is caches. I removed it since I don't want to confuse you guys. – code-8 Jan 27 '18 at 20:51
I expect it to run `node server.js` as I add in my `package.json` – code-8 Jan 27 '18 at 20:52
read the docs, once you fix that and run as I told you, it'll work – Mike Tung Jan 27 '18 at 21:27
I read the docs, I tried `heroku logs` I saw old logs. I don't what else to do any more. – code-8 Jan 27 '18 at 21:38
I followed this like : https://medium.com/@hellotunmbi/how-to-deploy-angular-application-to-heroku-1d56e09c5147 Which I see why you got your suggestions from ? – code-8 Jan 27 '18 at 21:38
sorry I don't know heroku stuff, but from what I've said once you got heroku working the rest should fall in place – Mike Tung Jan 27 '18 at 21:39
Ok. I followed everything in that list, and I am not sure, I still get 500 – code-8 Jan 27 '18 at 21:41
It's ok, let others answer. – code-8 Jan 27 '18 at 21:41

Fuad · Answer 4 · 2018-01-27T19:32:54.700

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.

edited Jan 27 '18 at 19:32

answered Jan 27 '18 at 19:27

Fuad

76
4

Have you shared the complete build log, cause I don't see your install script running during build process. Try rebuilding your project. – Fuad Jan 27 '18 at 20:06
How do I rebuild ? `ng build --prod --aot` ? – code-8 Jan 27 '18 at 20:50
Where should I do the rebuild ? local ? – code-8 Jan 27 '18 at 20:50
I think my `heroku logs` show old logs. I asked a separate question for that here : https://stackoverflow.com/q/48480640/4480164 – code-8 Jan 27 '18 at 21:17
Do you have any other suggestion for me ? – code-8 Jan 27 '18 at 21:17
contact heroku support or ask a heroku question? As for getting your angular app to work I think I've done my part, please select best answer and best of luck with heroku – Mike Tung Jan 27 '18 at 21:42
@ihue To rebuild on heroku you need to push an empty build. `$ git commit --allow-empty -m "Trigger notification"` `$ git push heroku master` – Fuad Jan 30 '18 at 16:48

score 1 · Answer 5 · answered Jan 28 '18 at 15:55

1

You will face memory exceed issue if you are gonna build prod on heroku. So free type won’t work.

So try to build in local and serve your dist files using express.

Use same command in PROC file

Heroku local or Heroku local web : verify your changes in local

answered Jan 28 '18 at 15:55

Mrugank Dhimmar

202
3
14

Thanks, let me try to do that. – code-8 Jan 29 '18 at 13:24

score 1 · Answer 6 · answered Feb 06 '18 at 14:41

In answer how to debug further. Run your app, then straight away login to Heroku, go to your app, then in the 'More' dropdown, click 'View Logs'. Should help you out!

I believe there is a way to view the live logs through the terminal too so you can see exactly what is failing.

score 1 · Answer 7 · answered Feb 20 '18 at 01:36

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.

score 1 · Answer 8 · answered Apr 16 '18 at 12:01

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

Deploy Angular 5 + Nodejs Express app to Heroku

Debug

Result

8 Answers8

Linked