Angular 5 – Continuous Integration with Gitlab

Hi Friends,

Hope you are all well. This is one of the most requested posts in this site. In this post we’ll see how to make use of gitlab CI to automatically deploy our app whenever we push in new code.

A screen cast  of this post:

First visit www.gitlab.com and create a new account. Once that is done click on new project button and enter the details as necessary.

screen1

Now simply scaffold out a new angular app using Angular cli and install firebase and angularfire 2 in it. (Even though we won’t be using angularfire2 in this post, we’ll be using it in the sequel of this post).

Now that it’s configured simply run ng build once. This will build out a dev build of our app in the dist directory.

Now install firebase-tools in your project locally using the below command.

Next, simply follow the hosting steps mentioned in the below video. Don’t actually host it onto firebase. Just follow the steps till configuring your project i.e., till 2:50 in the below video.

Okay. Now if you look into your project’s root directory you will have a file named firebaserc. Open that file and modify it as shown below.

I usually use two different firebase apps, one for development and the other for production. It depends on your workflow.

Now create a new file in your root directory called .gitlab-ci.yml file. In this file we’ll be adding the configurations of the deployment process. Open this file and add the below code.

This is pretty much self-explanatory. Here I just have one job (stage). In that stage it will simply deploy. If you notice there are three scripts, one for installing all the dependencies and two other commands for running scripts in package.json file.

Each and every job you want to run inside your CI environment is termed as a stage. Now here in this file, I have written only one stage that is to do the deployment right..? Usually, there are three stages, one to install all the dependencies, one to run all the tests and one to deploy.

Open up package.json and add the below scripts

Wait, what’s that.. a $FIREBASE_DEPLOY_KEY ? We haven’t yet created that right.. Let’s do that now

just open your terminal and give the below command.

This will login into your firebase account in a browser and once that’s done simply look into the terminal and you will see a key like the one shown below.

1/aPE****VoQREf1EpKU****4gOYWIgNFts****JbEGIY

Copy this and in your gitlab project go to settings (last on the left) and choose CI/CD. In that click expand on the Secret variables and add it as shown below.

screen4

Great now we have the key right ? Now we need to create an environment.

From the menu on the left side in Gitlab choose CI/CD and choose environments. Add a new environment called development as shown below.

screen2

Note that the name of this environment and the one you specified on firebaserc file should be the same. (Get the external url from your firebase app (under hosting)).

Now you have everything ready for deployment.

Simply push the code and that’s it. Click on jobs and you will see that your push has started a new job.

If everything goes fine you will see a badge called passed as shown below.

screen5

Click on the badge to see the logs.

Now visit the external URL and you would see our app deployed.

You could also see that our deployment shows up in the history in firebase hosting page.

This is a very basic way of automating our deployment process using a CI tool. We could also set it up to run our tests for us before deployment every time. We’ll see all that in the forthcoming posts.

Hope this helped you guys. If you found this helpful kindly share it with someone and help them too.

Thanks for reading. Peace.. :)

 

Liked it? Take a second to support admin on Patreon!