How to set up a CI/CD Pipeline for an Angular with Bitbucket and Codebuild

Table of Contents

Nowadays we need everything to be automated. So whenever we speak automation, the first impression is that everybody says about CI/CD. Now the Questions is What they are and How they work. I will just go through a little reference for the both of it for the people who are new to this Topic

CI i.e Continuous Integrations
It is a process for continuously building and testing software using an automated process.

CD i.e Continuous Deployment.
It is a process for automatically deploying new software updates to the production environment.

This article contains how to create an CI/CD pipeline using bitbucket and codebuild.

Prerequisites

Knowledge regarding git and aws services

Lets us begin

First we have to create a project in AWS codebuild. Assuming that you already have repo of Angular in the bitbucket

‌In Source, for Source provider, choose Bitbucket. And follow the instruction to complete integration for bitbucket.

In Primary source webhook events, select Rebuild every time a code change is pushed to this repository

Here in the above Image you can see that i have added 2 Events

First Event is for Pull request created and Updated from any feature branch to Development branch.

And second Event is for Push if any thing is pushed to development branch directly then it will update. You can add as many condition in which case do you want to run codebuild.

Moving towards to Environment section, as you can see i have selected Ubuntu with standard Runtime env using version 4

Moving to build spec, What's buildspec ?

it is file with set of instruction for performing task in the codebuild.

We need to create this file in the root directory of the project or you can write directly the commands under insert build command which is inside the buildspec menu . Before creating this file we will complete project setup in codebuild.

Suppose you want to store the outputs the from codebuild then we need to use Artifacts sections. As of now we are not storing any data.

And Last section is About the logs of the for codebuild process , by default cloudwatch logs are checked ,that's all you need to create a project in the codebuild.

Lets Create Buildspec.yml in the root of your project

version: 0.2

env:
  variables:
    CODEBUILD_SRC_DIR: "ci-cd-angular9"
phases:
  install:
    runtime-versions:
      nodejs: 10
    commands:
      - npm i
  pre_build:
    commands:
      - npm run lint
      - npm run start & npx wait-on http://localhost:4200
      - npx cypress run
  build:
    commands:
      - npm run build
  post_build:
    commands:
      # Clear S3 bucket.
      - aws s3 rm s3://trtblogangular9 --recursive
      - echo S3 bucket is cleared.
      # Copy dist folder to S3 bucket, As of Angular, builds are stored              inside an app folder in distribution and not at the root of the dist           folder
      - aws s3 cp dist/testingStars s3://trtblogangular9 --recursive --acl 	           public-read  
      - echo Build completed on `date`

What Actually Buildspec does here ?

In Summary the buildspec file takes runtime variable for codebuild source folder and runs npm i using NODE env as 10.
Once installing of node packages are done we run lint and E2E test cases for the code or for particular branch.
Once if the Lint or E2E test cases are failed then Build will not be uploaded nor the deployment
If the lint and E2E test cases ran successfully then it will proceed to make build and that is uploaded to s3 bucket
Additionally if your website is hosted using Cloudfront , we can a add commands for Creating a invalidations [Need provide access to Codebuild Service role with cloudfront full access or read ]

For E.g INVALIDATION_ID=$(aws cloudfront create-invalidation --distribution-id XXXXXXXX --invalidation-batch '{"Paths":{"Quantity":1,"Items":["/*"]},"CallerReference":"$CODEBUILD_RESOLVED_SOURCE_VERSION"}'| jq .Invalidation.Id -r)

And wait till the invalidation completes
aws cloudfront wait invalidation-completed --distribution-id XXXXXXXXX--id $INV_ID

So by implementing this CI/CD, all our changes of the Angular Application can directly go Live whenever we push the code on Bitbucket. Use the URL provided in S3 bucket's properties-> static website hosting to view the website we just deployed to AWS S3. or if you have setup clodufront for the same you can use cloudfront url.You can also clone the demo angular project for CI/CD here

If you face any issue while configuring this part, do let me know in the comment section below.

Third Rock Techkno is a leading IT services company. We are a top-ranked web, voice and mobile app development company with over 10 years of experience. Client success forms the core of our value system.

We have expertise in the latest technologies including angular, react native, iOs, Android and more. Third Rock Techkno has developed smart, scalable and innovative solutions for clients across a host of industries.

Our team of dedicated developers combine their knowledge and skills to develop and deliver web and mobile apps that boost business and increase output for our clients.