In my previous articles, I showed you how to deploy your static website to Heroku. So in this article, I am showing you how to deploy a Angular App to Heroku for free.

What is Heroku is?

In my previous article, I have duscussed what is Heroku is? You can refer it to get clear idea about Heroku and how you configure Heroku in your local environment

Create new Angular project

First upon we need to Create a new angular project through Angular CLI. 
1
ng new heroku-deploy

After successfully creating your Angular project you need to navigate your app directory heroku-deploy” folder by typing the following command in the terminal:

1
cd heroku-deploy

Add express path

We need something to serve our files. Let’s go with express. We will also need “path” to setup our server. To add "express path" to our project, use following command: 
1
npm install --save express path

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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.

Configure package.json

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

Under scripts: section of your package.json file, put below code:

1
2
3
4
"scripts": {
    ...
    "postinstall": "ng build --aot --prod"
  }

Inside engines put your node and npm version in package.json like

1
2
3
4
"engines": {
  "node": "~12.14.1",
  "npm": "~6.14.4"
}

To know your node & npm version, you run below command in your terminal,

1
2
3
node -v

npm -v

After configuring your package.json file, it looks like:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
{
  "name": "heroku-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": "~8.2.14",
    "@angular/common": "~8.2.14",
    "@angular/compiler": "~8.2.14",
    "@angular/core": "~8.2.14",
    "@angular/forms": "~8.2.14",
    "@angular/platform-browser": "~8.2.14",
    "@angular/platform-browser-dynamic": "~8.2.14",
    "@angular/router": "~8.2.14",
    "express": "^4.17.1",
    "path": "^0.12.7",
    "rxjs": "~6.4.0",
    "tslib": "^1.10.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.803.19",
    "@angular/cli": "~8.3.19",
    "@angular/compiler-cli": "~8.2.14",
    "@angular/language-service": "~8.2.14",
    "@types/node": "~8.9.4",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "^5.0.0",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.5.3"
  },
  "engines": {
    "node": "~12.14.1",
    "npm": "~6.14.4"
  }
}

Deploy application

To push your app to Heroku, you should have the Heroku cli installed in your local machine. If not please follow the instruction given here. To deploy your application to Heroku, you should now folow below command in your terminal: 
1
2
3
4
5
6
7
8
9
git init

git add .

git commit -m "my first commit'

heroku create

git push heroku master

Now you have succefully deploy your Angular app to heroku and you can see the deploy link in your terminal. Open it up and you should see your site.

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