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 : [email protected]
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
– Mike Tung, Commented Jan 27, 2018 at 19:20
All right, so how do I fix that ? I attached my server.js already. — code-8
– code-8, Commented Jan 27, 2018 at 19:21
@MikaS, can you please suggest the correct one ? I'm new to this deployment. I followed this video : youtube.com/watch?v=0bOJjAUXjhI According to him, it works fine. I don't what elses to do, and who to trust. — code-8
– code-8, Commented Jan 27, 2018 at 19:24

Chau Tran · Accepted Answer · 2018-01-30 02:26:08Z

15

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.

answered Jan 30, 2018 at 2:26

Chau Tran

5,1481 gold badge26 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Fernando Ania · Accepted Answer · 2018-02-06 09:38:42Z

3

+25

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 6, 2018 at 9:38

Fernando Ania

3771 gold badge8 silver badges21 bronze badges

Comments

Mike Tung · Accepted Answer · 2018-01-27 19:26:15Z

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, 2018 at 19:26

Mike Tung

4,8411 gold badge19 silver badges25 bronze badges

11 Comments

code-8 Over a year ago

I will updated my server.js with your suggestion, and now how do redeploy my entire application ? git push heroku master ?

code-8 Over a year ago

Another question, should I remove my app.get(...) line ? and replace with your ?

Mike Tung Over a year ago

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

code-8 Over a year ago

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 Over a year ago

I expect it to run node server.js as I add in my package.json

|

Fuad · Accepted Answer · 2018-01-27 19:32:54Z

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, 2018 at 19:32

answered Jan 27, 2018 at 19:27

Fuad

764 bronze badges

7 Comments

Fuad Over a year ago

Have you shared the complete build log, cause I don't see your install script running during build process. Try rebuilding your project.

code-8 Over a year ago

How do I rebuild ? ng build --prod --aot ?

code-8 Over a year ago

Where should I do the rebuild ? local ?

code-8 Over a year ago

I think my heroku logs show old logs. I asked a separate question for that here : stackoverflow.com/q/48480640/4480164

code-8 Over a year ago

Do you have any other suggestion for me ?

|

Mrugank Dhimmar · Accepted Answer · 2018-01-28 15:55:57Z

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, 2018 at 15:55

Mrugank Dhimmar

2023 silver badges14 bronze badges

1 Comment

code-8 Over a year ago

Thanks, let me try to do that.

Si-N · Accepted Answer · 2018-02-06 14:41:15Z

1

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.

answered Feb 6, 2018 at 14:41

Si-N

1,5151 gold badge13 silver badges29 bronze badges

Comments

Lauren · Accepted Answer · 2018-02-20 01:36:29Z

1

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.

answered Feb 20, 2018 at 1:36

Lauren

838 bronze badges

Comments

Daouda · Accepted Answer · 2018-04-16 12:01:52Z

1

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

answered Apr 16, 2018 at 12:01

Daouda

1119 bronze badges

Collectives™ on Stack Overflow

Deploy Angular 5 + Nodejs Express app to Heroku

Debug

Result

8 Answers 8

Comments

Comments

11 Comments

7 Comments

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Debug

Result

8 Answers 8

Comments

Comments

11 Comments

7 Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related