Build, test & deploy

Angular Raleigh Meetup

Hey, Am Udhay (OO-dhy)


  • Intro
  • Code, Unit test & Build
  • CD/CD - Pipeline
  • GitLab
  • GCloud - App Engine
  • Configure pipeline
  • Discussion (Q/A)



Build, test & deploy


Clone this repo -

If you want to begin with Skeleton app, and add your own piece of code to create Pounds to Kgs converter logic. 



Otherwise, working code here -

Unit test

ng test

Unit test your Angular code by running below command:

Before running that, make sure you have written Unit tests for Components, Pipes, Directives & Services.

ng test --code-coverage


// App runs in development mode, that works for debugging.
ng build 

// App doesn't run in dev mode
ng build --prod 

Build Angular code using below command, that generates artifacts to be deployed to Cloud. 

dist/ngpoundtokg - Artifacts generate under this folder.

CI/CD Pipeline

Continuous Integration (CI) is a development practice that requires developers to integrate code into a shared repository several times a day.

Continuous Delivery (CD) is the natural extension of Continuous Integration: an approach in which teams ensure that every change to the system is releasable, and that we can release any version at the push of a button.


  • Though GitHub is popular in hosting code repositories, it lacked the support for inbuilt pipeline support.
  • Recently it introduced GitHub actions to handle cloud native CI/CD operations.
  • GitLab is already a leader in providing cloud native continuous integration support.
  • Runner execution time - 2000 minutes / month
  • Private repositories

Free account

Google Cloud

  • Though Google Cloud Platform (GCP) is not a leader in Cloud world, their price is cheap and affordable.
  • Google App Engine - Used to deploy our static website.
  • $300 worth of service free for first year

Free account

GAE - Configuration

  • Create app.yaml under the project and add below YAML configuration.
runtime: python27
api_version: 1
threadsafe: true
- url: /
  static_files: dist/ngapp/index.html
  upload: dist/ngapp/index.html
- url: /
  static_dir: dist/ngapp

  - e2e/
  - node_modules/
  - src/
  - ^(.*/)?\..*$
  - ^(.*/)?.*\.json$
  - ^(.*/)?.*\.md$
  - ^(.*/)?.*\.yaml$

gcloud sdk uploads files per this YAML conf.

Pipeline Configuration

  • Create .gitlab-ci.yml under the project and add below YAML configuration.
  - build_angular
  - cloud_deploy
  - deploy

    - ./node_modules
 image: node:12-alpine
 stage: build_angular
  - npm install -g @angular/cli --silent
  - npm install --silent
  - ng build --prod --output-hashing none
    - dist/
 image: google/cloud-sdk:alpine
 stage: cloud_deploy
  - gcloud auth activate-service-account --key-file /tmp/$CI_PIPELINE_ID.json
  - gcloud --project $PROJECT_ID_PRODUCTION app deploy --verbosity=debug

GitLab orchestrates the pipeline execution based on this conf.

  • Create project in Google Cloud console.
  • Enable App engine by creating an application. Search for GAE in the search bar..
  • Create Service account under IAM and add below roles.

GCloud Configuration

  • Create Key and download it.
  • Add GCloud project ID and JSON key in GitLab > Settings > CI/CD > Variables



  • Goto Storage > Browser and edit bucket permissions for
  • Add below roles
  • Search for app engine Admin api and enable it for the project.
  • Search for cloud build and enable it for the project.

Push the code to GitLab, this will trigger pipeline and deploy the code to Google Cloud - App Engine.


ng Thanks!