How to Deploy Angular Application to Heroku

Author:

In this tutorial, we will learn how to create and deploy a new Angular 10 app to Heroku step by step.

Video

This tutorial explained in-detail in below YouTube video:

Steps

  1. Create Angular App
  2. Configure Angular App to Deploy Properly on Heroku
  3. Host source code of Angular App on GitHub
  4. Login to Heroku and create a new app in Heroku
  5. Connecting GitHub repository to Heroku app

1. Create Angular 10 App

Before creating an Angular app, make sure that you have installed Node and NPM on your machine.

Now, we need to check the Node and NPM versions. Open the terminal or Node command line then type these commands.


PS G:\angular\deployment> node -v
v12.18.2
PS G:\angular\deployment> npm -v
6.14.5

To install or update Angular 10 CLI, type this command in the terminal:

npm install -g @angular/cli

PS G:\angular\deployment> ng --version

    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 10.0.7
Node: 12.18.2
OS: win32 x64

Angular: 
... 
Ivy Workspace: 

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.1000.7
@angular-devkit/core         10.0.7
@angular-devkit/schematics   10.0.7
@schematics/angular          10.0.7
@schematics/update           0.1000.7
rxjs                         6.5.5

Let's create a new Angular 10 app using Angular CLI.

Let's use the below command to generate an Angular 10 application. We name this project as "angular-app-heroku".

ng new angular-app-heroku

Here is the output of the app:

PS G:\angular\deployment> ng new angular-app-heroku
? Would you like to add Angular routing? No
? Which stylesheet format would you like to use? CSS
CREATE angular-app-heroku/angular.json (3662 bytes)
CREATE angular-app-heroku/package.json (1270 bytes)     
CREATE angular-app-heroku/README.md (1034 bytes)        
CREATE angular-app-heroku/tsconfig.base.json (458 bytes)
CREATE angular-app-heroku/tsconfig.json (426 bytes)     
CREATE angular-app-heroku/tslint.json (3184 bytes)
CREATE angular-app-heroku/.editorconfig (274 bytes)
CREATE angular-app-heroku/.gitignore (631 bytes)
CREATE angular-app-heroku/.browserslistrc (853 bytes)
CREATE angular-app-heroku/karma.conf.js (1030 bytes)
CREATE angular-app-heroku/tsconfig.app.json (292 bytes)
CREATE angular-app-heroku/tsconfig.spec.json (338 bytes)
CREATE angular-app-heroku/src/favicon.ico (948 bytes)
CREATE angular-app-heroku/src/index.html (302 bytes)
CREATE angular-app-heroku/src/main.ts (372 bytes)
CREATE angular-app-heroku/src/polyfills.ts (2835 bytes)
CREATE angular-app-heroku/src/styles.css (80 bytes)
CREATE angular-app-heroku/src/test.ts (753 bytes)
CREATE angular-app-heroku/src/assets/.gitkeep (0 bytes)
CREATE angular-app-heroku/src/environments/environment.prod.ts (51 bytes)
CREATE angular-app-heroku/src/environments/environment.ts (662 bytes)
CREATE angular-app-heroku/src/app/app.module.ts (314 bytes)
CREATE angular-app-heroku/src/app/app.component.html (25725 bytes)
CREATE angular-app-heroku/src/app/app.component.spec.ts (978 bytes)
CREATE angular-app-heroku/src/app/app.component.ts (222 bytes)
CREATE angular-app-heroku/src/app/app.component.css (0 bytes)
CREATE angular-app-heroku/e2e/protractor.conf.js (869 bytes)
CREATE angular-app-heroku/e2e/tsconfig.json (299 bytes)
CREATE angular-app-heroku/e2e/src/app.e2e-spec.ts (651 bytes)
CREATE angular-app-heroku/e2e/src/app.po.ts (301 bytes)
√ Packages installed successfully.

Let's run the Angular app with the following command:

PS G:\angular\deployment> cd .\angular-app-heroku\
PS G:\angular\deployment\angular-app-heroku> ng serve

Open the browser and type URL - http://localhost:4200:


Now, we have successfully created an Angular application. In the next step, we will configure the Angular App to deploy properly on Heroku.

2. Configure Angular App to Deploy Properly on Heroku

Follow the below simple steps to configure the Angular App to deploy properly on Heroku. 

Step 1: Ensure you have the latest version of angular CLI and angular compiler cli:

npm install @angular/cli@latest @angular/compiler-cli --save-dev

Step 2: Copy below dependencies from devDependencies to dependencies:

    "@angular/cli": "^11.0.2",
    "@angular/compiler-cli": "^10.0.14",
    "typescript": "~3.9.5"

Step 3: Create heroku-postbuild script in package.json. Under “scripts”, add a “heroku-postbuild” command like so:

"heroku-postbuild": "ng build --prod"

Step 4: Add Node and NPM engines

  "engines": {
    "node": "12.18.2",
    "npm": "6.14.5"
  }

Step 5: Install Server to run your app

npm install express path --save

Step 6: Create a server.js file in the root of the application and paste the following code.

//Install express server
const express = require('express');
const path = require('path');

const app = express();

// Serve only the static files form the dist directory
app.use(express.static('./dist/angular-app-heroku'));

app.get('/*', (req, res) =>
    res.sendFile('index.html', {root: 'dist/angular-app-heroku/'}),
);

// Start the app by listening on the default Heroku port
app.listen(process.env.PORT || 8080);

Step 7: Change start command In package.json, change the “start” command to node server.js so it becomes:

"start": "node server.js"

Here is the complete package.json file for your reference:

{
  "name": "angular-app-heroku",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "node server.js",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "heroku-postbuild": "ng build --prod"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~10.0.11",
    "@angular/cli": "~10.0.7",
    "@angular/common": "~10.0.11",
    "@angular/compiler": "~10.0.11",
    "@angular/compiler-cli": "~10.0.11",
    "@angular/core": "~10.0.11",
    "@angular/forms": "~10.0.11",
    "@angular/platform-browser": "~10.0.11",
    "@angular/platform-browser-dynamic": "~10.0.11",
    "@angular/router": "~10.0.11",
    "express": "^4.17.1",
    "path": "^0.12.7",
    "rxjs": "~6.5.5",
    "tslib": "^2.0.0",
    "typescript": "~3.9.5",
    "zone.js": "~0.10.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1000.7",
    "@angular/cli": "~10.0.7",
    "@angular/compiler-cli": "~10.0.11",
    "@types/node": "^12.11.1",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.0.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~3.3.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~3.9.5"
  },
  "engines": {
    "node": "12.18.2",
    "npm": "6.14.5"
  }
}

3. Host source code of Angular App on GitHub

Here, we’ll be creating a fresh GitHub repository and pushing our app to it.

Login to your GitHub account and create a repository as "angular-app-heroku".

You can use Git to push source code of newly created Angular App to this GitHub repository using the following commands:

git remote add origin <new_github_repository_url>
git add .
git commit -m "initial commit"
git push -u origin master

Now our app is on GitHub.

4. Login to Heroku and create a new app in Heroku

Now it's time to login to Heroku to deploy our Angular app to Heroku cloud.

Go ahead and login to Heroku and create a new app like:

5. Connecting GitHub repository to Heroku app

In the Deploy menu, under the Deployment method, select GitHub. If you have not done this already, it will ask you to login to your GitHub account so it can connect to it. 

Enter the name of the GitHub repository and click Search. Once the repo is shown below, click Connect.

Under Automatic Deploys, select the main branch and click Enable Automatic Deploys.

Under Manual Deploys, select the main branch and click Deploy Branch. This is to push our fresh code to Heroku.

After successful deployment, you can access the deployed Angular app using the below URL in the browser: https://angular-app-demo-heroku.herokuapp.com


Comments

  1. Unknown13 February 2021 at 04:57

    Hi!
    Can i do that with proejct Spring boot and angular ?

    ReplyDelete

Post a Comment

Leave Comment