Introduction to Continuous Integration & Continuous Deployment

In this article I’m gonna give you a brief introduction about continuous integration and continuous deployment. I’m pretty sure that you must have heard those two terms(CI & CD). But sometimes you might not know exactly what CI & CD is. So here I’m gonna give you that brief introduction.

When we are developing applications first we need to build the application. Sometimes we may need to run unit tests before making the build to make sure that they are passing. Likewise there could be several other tasks that need to be done after a developer pushes a new commit to the version controlled repository. After every commit a new build of the application should be created.After building the application now it’s ready to be deployed to a hosting platform(Github Pages, Firebase or any custom platform).

Continuous Integration (CI) is a development practice that requires developers to integrate code into a shared repository several times a day. Each check-in is then verified by an automated build, allowing teams to detect problems early.

By integrating regularly, you can detect errors quickly, and locate them more easily.

As mentioned early those tasks(running unit tests, creating the build, deploying the application, etc.) become crucial when several developers work and commit their work to a shared repository. A commit made by a developer with a change in the code should be integrated with the base code and should reflect in the deployed instance without wasting time of the developer. That’s where continuous integration and continuous deployment comes in.

In this article I will be creating a simple Angular web application using Angular CLI. I will use TravisCI as our continuous integration platform Heroku will be used as the hosting platform.

As a prerequisite install NodeJS on your computer as well as Angular CLI

---

Get Started

First we will create a new Angular Web application using Angular CLI.

$ ng new ci-cd-travis-angular

To run the application

$ cd ci-cd-travis-angular
$ ng serve

To see your application go to localhost:4200 .

Now we need to create a git repository for this project on GitHub. For that do as following.

git init
git add .
git commit -m "first commit"
git remote add origin https://github.com/yasirunilan/CI_CD_Angular_Travis_project
git push -u origin master

Now your project is on GitHub.

After creating the project to connect with Firebase from our computer using CLI, we need to install firebase-tools.

npm install -g firebase-tools

After that go to the project folder and open up a terminal and connect to firebase.

cd ci-cd-travis-angular
firebase login

You would be prompted to login to firebase if you have not already logged in. Then after that run the command.

firebase init

You will see something like this in the terminal. Select ‘Hosting’ as the required feature from Firebase. Then hit enter. Then you will be asked following questions. Answer as following.

1. What do you want to use as your public directory?

For this type ‘dist’ and hit enter. After you build the app all the compiled code will be in this folder.

2. Configure as a single-page app?

Answer as ‘Yes’. This will rewrite all urls to /index.html.

Now the hosting service is ready. Let’s do the production build and deploy it to the Firebase.

ng build --prod
firebase deploy

You will see something like this in the terminal. To see the application navigate to the provided URL.

Integrating with TravisCI

TravisCI is one of major continuous integration platforms. It can be used easily with GitHub hosted projects. In this article I will sync my project with Travis and to build the project at every time I make a push to the remote repository or when a pull request is made.

Log in to TravisCI and sync the account. Then select the project from the list of projects. Then click on the settings icon near the project name to do some changes in settings.

As you can See I have enabled ‘Build Branch Updates’ and ‘Build Pull Request Updates’. This will trigger a project build whenever I push changes or a pull request is made.

As we are using Firebase we will add an environment variable for it. For that in the terminal run the following command.

firebase login:ci

It will show something like this in the terminal. Copy the token value and add it in travis like the following.

Now what we need is a travis configuration file. For that we need to create a .travis.yml file in the project root. Without this file builds will not taken place(we have turned on Build only if .travis.yml is present).

.travis.yml file would be something like this.

You can have a good understanding about travis build commands from these documents.

Now as we have added the travis file. We will add those files and commit it.

git add .
git commit -m "added travis file"
git push origin master

Now if you go to travis you will see your project is building. After sometime if no errors occur. The changes will be deployed to the firebase.

Now every time you make changes to your code and push it to the GitHub repository, all the changes will also be deployed and will reflect on the deployed application.

This article is just a brief introduction on how to set up continuous integration and continuous deployment in your projects. Hope this helped you!!

Thanks for reading!! :)