Deploy Angular 7 App to Heroku

4
SHARES
10.3k
VIEWS

In this article, We’ll learn how you can deploy an Angular 7 application to Heroku. Heroku is a cloud platform as a service (PaaS). That means you do not have to worry about infrastructure; you just focus on your application. Here is how you deploy an Angular 7 application to Heroku.

Step 1

Create a new angular project through Angular CLI.

$ ng new angular-deploy

After successfully creating your Angular project go to the “angular-deploy” folder by typing the following command in the terminal:

$ cd angular-deploy

Step 2

We are going to need something to serve our files. Let’s go with express. We will also need “path” to setup our server.

$ npm install --save express path

Create a server file. In your main application directory create a file called server.js and add the following code:

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

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

// Send all requests to index.html
app.get('/*', function(req, res) {
  res.sendFile(path.join(__dirname + '/dist/MY_APP_NAME_HERE/index.html'));
});

// default Heroku PORT
app.listen(process.env.PORT || 3000);

Replace “MY_APP_NAME_HERE” to the name of your app.

Step 3

Open your package.json file and change the “start”: “ng serve” in the “scripts: ” {….} to “start”: “node server.js” this command will run the server.js file through the server.

And also put the following code in your package.json file under scripts:

  "scripts": {
    ...
    "postinstall": "ng build --aot --prod"
  }

Put inside in the engines your node version and npm version in your package.json file

"engines": {
  "node": "~8.15.1",
  "npm": "~6.4.1"
}

To know what version of node and npm you are using just type the following command in your terminal:

$ node -v
// v8.15.1
$ npm -v
// 6.4.1

Here’s what my package.json file looks like:

{
  "name": "angular-deploy",
  "version": "0.0.0",
  "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": "~7.2.0",
    "@angular/common": "~7.2.0",
    "@angular/compiler": "~7.2.0",
    "@angular/core": "~7.2.0",
    "@angular/forms": "~7.2.0",
    "@angular/platform-browser": "~7.2.0",
    "@angular/platform-browser-dynamic": "~7.2.0",
    "@angular/router": "~7.2.0",
    "core-js": "^2.5.4",
    "rxjs": "~6.3.3",
    "tslib": "^1.9.0",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.13.0",
    "@angular/cli": "~7.3.6",
    "@angular/compiler-cli": "~7.2.0",
    "@angular/language-service": "~7.2.0",
    "@types/node": "~8.9.4",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "~4.5.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.0.0",
    "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",
    "typescript": "~3.2.2"
  },
  "engines": {
    "node" : "~8.15.1",
    "npm" : "~6.4.1"
  }
}

Step 4 – Final Step

To push your app to Heroku, assuming you have the Heroku cli installed.
If not install from here: https://devcenter.heroku.com/articles/heroku-cli#download-and-install

$ heroku create
$ git add .
$ git commit -m "my first commit'
$ git push heroku master

Done. You should now see a deploy link. Open it up and you should see your site.

If you have any issues feel free to leave a message in the comments.

Best resources to learn Angular, Firebase and ionic 4

Muhammad Mubeen

Muhammad Mubeen

Mubeen is a full-stack web & mobile app developer who is very proficient in MEAN.js, Vue, Python, Ionic 4, Flutter, Firebase, ROR, and PHP. He has created multiple mobile and web applications. He is very passionate about sharing his knowledge.

Comments 12

  1. Frank says:

    Thank you so much for this tutorial. All other tutorials that I know can’t even deploy the baseline app correctly, probably because they are outdated. But this one worked wonderfully.

  2. waqar says:

    Thanks. its working.

  3. Vice says:

    Thanks a lot, worked like a charm (y)

  4. Victor Castro says:

    Excelente trabajo,mil gracias , donde puedo mirar esta documentacion ?

  5. Saturn says:

    Thanks brother.

  6. Jacob says:

    thank you for this tutorial, but i get 404 error when try to access to my app ? can you help me ?

  7. Shrey says:

    Thank you for this tutorial, I was trying to deploy angular app for 4 hour. After reading your tutorial, I was able to run my app within minutes. Thank you once again.

Leave a Reply

Your email address will not be published. Required fields are marked *

Trending