Getting started with Angular 6, GitLab CI/CD and Google App Engine 
Tags: devops, angular, gitlab, googleappengine
Published: 2018-10-16 09:51:21

---
title: Getting started with Angular 6, GitLab CI/CD and Google App Engine 
published: true
description: Deploy Angular app to google app engine using GitLab CI CD 
tags: devops,angular,gitlab,google app engine
---

This article will provide an initial setup to better understand and configure a continuous integration and delivery architecture (CI/CD). In a world where each tool overlaps the next, we want something simple, reliable, and easy to maintain. That’s why GitLab was chosen, as it provides a set of tools that would have to be externally added otherwise.

*This guide assumes none of the tools mentioned in the title were either installed or configured.*

## Angular 6

Let’s start by installing the Angular CLI globally. Check [https://nodejs.org/en/download/](https://nodejs.org/en/download/) if NodeJS and npm are not installed.

    $ npm install -g @angular/cli

Create a new Angular application

    $ ng new demo-app
    $ cd demo-app/

Angular will set up everything you need for your application, including initial test setup.

Run the following, to run the unit tests.

    $ ng test

And the following, for the end to end tests.

    $ ng e2e

To run a server.

    $ ng serve --open

When an application is created with the Angular CLI, a git repository is also created.

Let’s move to GitLab configuration.

## GitLab

Create an account at [https://about.gitlab.com/](https://about.gitlab.com/) and then a ***New Project***.

![](https://cdn-images-1.medium.com/max/2000/1*PhZ-aMYorUXQN0I68UHtew.png)

Once you’ve set up your empty repository, a list with several options regarding your local git configuration will show up.

Do not forget to set your **ssh keys**, check the following links for more information [https://docs.gitlab.com/ee/ssh/README.html](https://docs.gitlab.com/ee/ssh/README.html) and [https://docs.gitlab.com/ee/gitlab-basics/create-your-ssh-keys.html](https://docs.gitlab.com/ee/gitlab-basics/create-your-ssh-keys.html).

Let’s configure the previously created GitLab repository to be our **Angular application origin**.

    $ git remote add origin git@gitlab.com:<your_account>/demo-app.git

Push it.

    $ git push --set-upstream origin master

## Google App Engine

This is a serverless platform that allows you to build highly scalable applications. Create an account at [https://cloud.google.com/appengine/](https://cloud.google.com/appengine/).

Similarly to other services, Google Cloud asks for a credit card upon the creation of an account, and also, as other services do, they provide an amount of credit ($300) for you to explore the platform. The trial period lasts for one year, or until the provided credit is used up.

Create a new project. Below is our project’s definition.

![](https://cdn-images-1.medium.com/max/2000/1*8p7AaBdotPk2jOwbyH8abg.png)

Once the project is ready, a set of options similar to the ones below will be available.

![](https://cdn-images-1.medium.com/max/3360/1*a_Dx5QbzDuuN7qv1k-7LBQ.png)

Now we’re going to create an application. Click **Create Application and **choose a region for your app.

![](https://cdn-images-1.medium.com/max/2000/1*QEKJ3y3cck6MTZrFPVFeeA.png)

Define the **language** and the **environment**. The **language** will be **Node.js** and the **environment** will be **Standard**. To learn more about this topic check [https://cloud.google.com/appengine/docs/the-appengine-environments](https://cloud.google.com/appengine/docs/the-appengine-environments) .

![](https://cdn-images-1.medium.com/max/2000/1*3WXOW1cyhZFcXXKVEzXbfA.png)

Et voilà! We have created our application!

Before continuing, we want to make sure the deploys are working properly, so we’re going to deploy our **Angular Application,** using two different configurations, via command line.

First, we need to build our application.

    $ ng build --prod --aot

We also need to create an **app.yaml.** This is the deployment configuration for Google App Engine.

To learn a bit more about the available configuration options take a look at [https://cloud.google.com/appengine/docs/standard/python/config/appref](https://cloud.google.com/appengine/docs/standard/python/config/appref)

<iframe src="https://medium.com/media/8cb7699345a324ed8345d2afce3283a7" frameborder=0></iframe>

Second step, is to install the **Google** **Cloud SDK.** Follow the steps at [https://cloud.google.com/sdk/](https://cloud.google.com/sdk/) so that we can **deploy our application via command line**.

### gcloud deploy with user credentials

Run the following command to initialise and set a new configuration. Choose one that’s associated with your user.

    $ gcloud init

Once that’s set, run the command below to deploy and follow the instructions.

    $ gcloud app deploy

### gcloud deploy with service account

Navigate to **Google App Engine console**, go to **IAM & admin. **There we’ll find a list of users/members and their respective roles. Since we want to deploy our Angular application via GitLab’s CD, we need to add a **service account**.

* Go to Service Accounts menu.

![](https://cdn-images-1.medium.com/max/2000/1*nZvsM-UmM1WadjHA7MxmgA.png)

* Add a service account for GitLab.

![](https://cdn-images-1.medium.com/max/2000/1*eUdqVnYSciwcHdngF14TfA.png)

* Create a key for that account and save the json.

![](https://cdn-images-1.medium.com/max/2000/1*l63hV4mDEMnmKEIzzxhI7A.png)

![](https://cdn-images-1.medium.com/max/2000/1*aahbblNk8LW8eIXci-8bMA.png)

* Navigate to IAM where the members and their roles are listed, and add the following roles to the service account we’ve just created: **App Engine** **Admin**, **Cloud Build Editor** and **Storage Admin**. To better understand roles check [https://cloud.google.com/iam/docs/understanding-roles](https://cloud.google.com/iam/docs/understanding-roles) .

![](https://cdn-images-1.medium.com/max/3664/1*TNrbHjtWnwRVAuXTOJCKcA.png)

Now that we’ve set up our Google App Engine side of things, we can deploy our Angular application using the **Service Account**. Run the following commands, the first is to authenticate using the service account, and the second is to deploy the Angular application. The option “— project” is the **Project ID**.

    $ gcloud auth activate-service-account --key-file <service-acc-key.json>
    $ gcloud app deploy --project=elite-academy-217722

## Angular 6 + GitLab CI

Before activating the GitLab’s CI let’s change the way tests are run. If you recall, when you ran

    $ ng test

or

    $ ng e2e

A browser is opened and the test is performed. However, this is not supported by the GitLab’s CI. To overcome this we’re going to use a headless browser.

### Test with Headless browser via Puppeteer

Install puppeteer and it will also install headless Chromium.

    $ npm install puppeteer --save

Now we need to update **karma.conf.js** that is responsible for **ng test**.

<iframe src="https://medium.com/media/b5d9539cbe9c58002321944adac81fb5" frameborder=0></iframe>

And also **protractor.conf.js** responsible for **ng e2e**.

<iframe src="https://medium.com/media/487e69f681c8f11ed6b7a007acdc5817" frameborder=0></iframe>

To automatically activate GitLab’s CI we need to add a file with the jobs to run. In this particular case we’re going to run two jobs, one for each test command.

### CI jobs

Create a file with the name **.gitlab-ci.yml **at the root of demo-app, with the following content.

<iframe src="https://medium.com/media/c988a8ee1ac3f991ba207a6322cb8994" frameborder=0></iframe>

Let’s go through the above configuration:

* **image** : this defines the docker image that’s going to be run by GitLab’s runners. Our base is NodeJS, so this defines that we’re going to use the latest NodeJS image.

* **cache: **whenever a release is built, a cache is created. In this case, we’re caching node_modules.

* **before_script: **this option defines the operations that we must run before executing a job. The first line defines all the additional packages that are required by Chromium, and the second line installs all the saved NodeJS packages.

* **stages: **here we define job groups. All jobs within a group are run in parallel. **Stage test** runs first and, if it succeeds, **stage build** runs afterwords.

* **job 1:** is the job responsible for running the unit tests. The stage where it runs is defined and also the script that’s going to perform the test. The relative path towards the project must be set, otherwise the executable won’t be found.

* **job 2:** is the job responsible for the end-to-end tests. The configuration is very similar to the previous job.

* **release_job: **besides the already mentioned options, the release includes an artifact and a requirement tag. **Artifact** is the result of the angular build, in this case it is set for production and compiled with the ahead of time option for better performance. The requirement tag is **only**, and is set to **tags**. This configuration means that release_job is only available whenever a release is created.

Push all the previous updates to the repository and check GitLab’s **Pipeline** under **CI/CD**.

![](https://cdn-images-1.medium.com/max/4076/1*YNWsZjoPCgoiy31CNPP8Eg.png)

Click the icon on the left that says **passed**, to access the jobs.

![](https://cdn-images-1.medium.com/max/2000/1*q0oCWj45gQFTYu1eQ_XsrA.png)

### Release

Let’s create a release to check our release job. In GitLab, on the side menu under **Repository** you’ll find **Tags**.

![](https://cdn-images-1.medium.com/max/4060/1*0p0JJtz6noRv_qZGvF8mUA.png)

Our first release is created

![](https://cdn-images-1.medium.com/max/2000/1*574LOcpsYgFLQOCycMgk6g.png)

Let’s click the link within the git reference associated with the release, and then click the pipeline option. Our pipeline now has an additional step, **build**.

![](https://cdn-images-1.medium.com/max/2000/1*M3sV96VRqaHCc1HwsznS0A.png)

Under tags you have the option to download your newly built release. You can do so by choosing **Download ‘release_job’**.

![](https://cdn-images-1.medium.com/max/4052/1*r7i31s3m3jdILOkCnexPcA.png)

## Angular 6 + GitLab + Google App Engine

Now that everything is set, we are going to configure **Manual** deploys from **GitLab **to** Google App Engine**. It could be automatic whenever a release is built, but people make mistakes, so we’re going to set it to manual mode.

To do that, there are two things we need to do: configure environment variables and update .gitlab-ci.yml to run our deploy commands.

### Set environment variables in GitLab

Under the settings menu in our GitLab project we’ll find the **Variables** menu, click expand.

![](https://cdn-images-1.medium.com/max/3132/1*mJUnzWerg6vNahS-ZRcXuw.png)

Create two variables:

* **GAE_KEY_FILE**: copy the content of the json file associated with the **Google App Engine service account** and paste it in the value field.

* **GAE_PROJECT_ID**: the project id, in this case it’s value is **elite-academy-217722**

Save variables.

### .gitlab-ci.yml update

The main addition was the deploy stage, however some other changes were introduced regarding the job names and script execution.

<iframe src="https://medium.com/media/4486f79bfc03c94d697e302e9cb687a3" frameborder=0></iframe>

The **before_script** was moved inside each job, this means it will run for **job:test** and **job:e2e** but not for **deploy:production**.

Let’s go through the job **deploy:production**:

* **stage**: stage that’s associated with it, in this case **deploy**

* **environment**: this allows us to rollback if necessary. When a deploy is successful it will appear under **GitLab’s Operations > Environments**.

![](https://cdn-images-1.medium.com/max/3860/1*Ofi99QMOcfbGhDPgKgB3ig.png)

* **before_script**: only has the necessary scripts for deployment.

* **dependencies**: it will depend on the job **release:build**, meaning that the **artifact** that was created under the dependency will be available in this job. Also means that the build only runs once.

* **scripts**: scripts used for deployment. As you can see, they are the same as the ones we tested earlier with **service account**. Both service account key file and project ID are set in GitLab’s environment variables.

* **when**: set to **manual**, so that the deploy does not occur automatically.

* **only**: similarly to the build, this job is only available when a release/tag is created.

The next time we **create a release/tag**, we’ll have something new in our **pipeline**.

![](https://cdn-images-1.medium.com/max/2448/1*O84mXoZxo3JtZWwnkzmTAA.png)

Press ***play*** and the **Angular** application will be deployed to **Google App Engine** via **GitLab’s CD.**

That’s it! Hope you’ve found this guide helpful. Fell free to share your thoughts, problems or suggestions and don’t forget there’s always room for improvement!

Take it away!

*At [Runtime Revolution](http://www.runtime-revolution.com/) we take our craft seriously and always go the extra mile to deliver a reliable, maintainable, and testable product. Do you have a project to move forward or a product you’d like to launch? We would love to help you!*