Build, test & deploy
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1255386/images/6995410/angular.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1255386/images/6995411/profile_pic.jpg)
Angular Raleigh Meetup
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1255386/images/6995412/Twitter_Social_Icon_Circle_Color.png)
Hey, Am Udhay (OO-dhy)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1255386/images/6995433/angular_solidBlack__1_.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1255386/images/7169183/icon_cloud_192pt_clr.png)
Agenda
- Intro
- Code, Unit test & Build
- CD/CD - Pipeline
- GitLab
- GCloud - App Engine
- Configure pipeline
- Discussion (Q/A)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1255386/images/6995412/Twitter_Social_Icon_Circle_Color.png)
Build, test & deploy
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1255386/images/6995412/Twitter_Social_Icon_Circle_Color.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1255386/images/6995410/angular.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1255386/images/7169160/gitlab-logo-gray-stacked-rgb.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1255386/images/7169183/icon_cloud_192pt_clr.png)
Code
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1255386/images/6995412/Twitter_Social_Icon_Circle_Color.png)
Clone this repo - https://github.com/askudhay/pounds-to-kg-skeleton
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 - https://gitlab.com/udhayg/pounds-to-kg
Unit test
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1255386/images/6995412/Twitter_Social_Icon_Circle_Color.png)
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
Build
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1255386/images/6995412/Twitter_Social_Icon_Circle_Color.png)
// 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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1255386/images/6995412/Twitter_Social_Icon_Circle_Color.png)
Continuous Integration (CI) is a development practice that requires developers to integrate code into a shared repository several times a day.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1255386/images/7169873/pasted-from-clipboard.png)
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.
GitLab
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1255386/images/6995412/Twitter_Social_Icon_Circle_Color.png)
- 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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1255386/images/6995412/Twitter_Social_Icon_Circle_Color.png)
- 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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1255386/images/6995412/Twitter_Social_Icon_Circle_Color.png)
- Create app.yaml under the project and add below YAML configuration.
runtime: python27
api_version: 1
threadsafe: true
handlers:
- url: /
static_files: dist/ngapp/index.html
upload: dist/ngapp/index.html
- url: /
static_dir: dist/ngapp
skip_files:
- e2e/
- node_modules/
- src/
- ^(.*/)?\..*$
- ^(.*/)?.*\.json$
- ^(.*/)?.*\.md$
- ^(.*/)?.*\.yaml$
- ^LICENSE
gcloud sdk uploads files per this YAML conf.
Pipeline Configuration
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1255386/images/6995412/Twitter_Social_Icon_Circle_Color.png)
- Create .gitlab-ci.yml under the project and add below YAML configuration.
stages:
- build_angular
- cloud_deploy
- deploy
cache:
paths:
- ./node_modules
generate_artifact:
image: node:12-alpine
stage: build_angular
script:
- npm install -g @angular/cli --silent
- npm install --silent
- ng build --prod --output-hashing none
artifacts:
paths:
- dist/
gcloud_deploy:
image: google/cloud-sdk:alpine
stage: cloud_deploy
script:
- echo $DEPLOY_KEY_FILE_PRODUCTION > /tmp/$CI_PIPELINE_ID.json
- 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.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1255386/images/6995412/Twitter_Social_Icon_Circle_Color.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1255386/images/7169911/pasted-from-clipboard.png)
- 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.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1255386/images/7169912/pasted-from-clipboard.png)
GCloud Configuration
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1255386/images/6995412/Twitter_Social_Icon_Circle_Color.png)
- Create Key and download it.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1255386/images/7169914/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1255386/images/6995412/Twitter_Social_Icon_Circle_Color.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1255386/images/7169925/pasted-from-clipboard.png)
- Add GCloud project ID and JSON key in GitLab > Settings > CI/CD > Variables
DEPLOY_KEY_FILE_PRODUCTION
PROJECT_ID_PRODUCTION
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1255386/images/6995412/Twitter_Social_Icon_Circle_Color.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1255386/images/7170072/pasted-from-clipboard.png)
- Goto Storage > Browser and edit bucket permissions for staging.XXXXXX.appspot.com.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1255386/images/6995412/Twitter_Social_Icon_Circle_Color.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1255386/images/7170075/pasted-from-clipboard.png)
- Add below roles
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1255386/images/6995412/Twitter_Social_Icon_Circle_Color.png)
- Search for app engine Admin api and enable it for the project.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1255386/images/7170082/pasted-from-clipboard.png)
- Search for cloud build and enable it for the project.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1255386/images/7170083/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1255386/images/6995412/Twitter_Social_Icon_Circle_Color.png)
Push the code to GitLab, this will trigger pipeline and deploy the code to Google Cloud - App Engine.
Demo
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1255386/images/6995412/Twitter_Social_Icon_Circle_Color.png)
![](https://media3.giphy.com/media/acJ6UbGLUB2De/giphy.gif)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1255386/images/6995412/Twitter_Social_Icon_Circle_Color.png)