Deploying an Angular App to Netlify using Netlify CLI and Gitlab CI

Hola folks! I planned on writing this article quite sometime ago, but eventually got caught up with some work. Finally here it is.

So basically, my focus in this article is the “CI” part. We will build a simple angular app, using a frontend framework(because that will help us focus more on the task at hand) and we’ll also take a peek on writing unit test cases. For those of you, who are totally new the concept of CI/CD, you can go through this amazing article at hackernoon, here.

Following are the steps we’ll follow in order to deploy an Angular App to netlify, using Gitlab CI.

1. Create an Angular App using Bulma CSS framework.
2. Write a simple unit test case for our app.
3. Download and install netlify-cli.
4. Use netlify-cli to create a new app and generate the Auth Token and Site ID for our app.
5. Configuring the netlify.toml file.
6. Setup a Gitlab project for our angular app, and add the environment variables.
7. Configuring the .gitlab-ci.yml file to trigger the pipeline in Gitlab, once we push our code.
8. Voila! We’re done. Our site is deployed to netlify and is now live!

Now let’s have a look at these steps in details:

1. Create an Angular App using the Bulma CSS framework.

I assume you are familiar with angular. It’s a frontend framework developed and maintained by Google. I won’t go into every bit of installing and configuring the angular-cli and everything, because those steps are pretty much straight forward and including them here will make this article unnecessarily verbose. Same applies for the Bulma CSS framework as well. I just chose some components to resemble a Blog for an imaginary company called Acme solutions. Feel free to go through the official docs and design an app using any framework/concept you like. My folder structure and the app design looked something like this.

2. Write a simple unit test case for our app.

Unit tests help us in maintain a track of the overall functionality of a single component. By component I don’t necessarily mean an Angular Component. We could write unit test for a service or even a function. In my app, I just wrote a unit test to verify whether a specific title is present in the component or not. My entire test file looked something like this.

Now that we have written a simple unit test, it’s time to test everything out. Run ng test in the terminal and we can check that all the test cases are passing, which is a good job!

FYI, Angular uses Jasmine framework to carry out all the unit and end-to-end tests. The unit tests are run using Karma, and the end-to-end tests are run using Protractor. Feel free to checkout the official documentation at angular.io.

3. Download and install the netlify-cli.

Go to your terminal and install netlify-cli using npm i -g netlify-cli

4. Use netlify-cli to create a new app and generate the Auth Token and Site ID for our app.

Before using the netlify-cli make sure you have an account on netlify.com and create a team(steps are pretty much straight-forward, similar to sites of heroku or digital ocean). Now run the following commands in the terminal:

Run netlify init --manual and follow these wizard steps:

1. Select: Create & configure new site
2. Give it a name (optional) (I’ll call it acmesolutions-dev)
3. Pick your team, if any and press Enter to finish.
4. This generates a SITE_ID

Now go the netlify site and under the user section, inside applications tab, generate a new access token. This token will be used as one of the environment variables in our CI environment.

5. Configuring the netlify.toml file.

Create a new file in your project root name netlify.toml. (By definition: TOML stands for Tom’s Obvious, Minimal Language. It is a data serialisation language designed to be a minimal configuration file format that’s easy to read due to obvious semantics. TOML is designed to map unambiguously to a hash table. TOML should be easy to parse into data structures in a wide variety of languages)

Add the following lines to the file.

[build]
  publish = "dist"

NOTE: Make sure the spacing and the double quotes are correctly placed, otherwise this would result in pipeline failures. Please note that, I refer the build folder here to be “dist”. But from Angular 8 onwards, when you run ng build in the root of your project, it builds your project inside the build/<projectname> folder. To change it to build directly into the dist folder, make sure you modify the angular.json file appropriately.

6. Setup a Gitlab project for our angular app, and add the environment variables.

Create a new gitlab project and connect to your project as a remote. Now inside this project under the settings tab, go to CI/CD and add the NETLIFY_AUTH_TOKEN and NETLIFY_SITE_ID with the values generated before.

7. Configuring the .gitlab-ci.yml file to trigger the pipeline in Gitlab, once we push our code.

Now we setup the .gitlab-ci.yml file in our project root. This is the file which is responsible for triggering the multi-stage builds when we push our code and subsequently deploy our site to netlify(if there are no build failures). The file looks something like this (If you want to explore more about gitlab-ci file, I would suggest you to go through the documentation here).

image: trion/ng-cli-karma

cache:
  paths:
    - node_modules/

stages:
  - setup
  - test
  - build
  - deploy

setup:
  stage: setup
  script:
    - npm ci
  only:
    - master

test:
  stage: test
  script:
    - ./node_modules/@angular/cli/bin/ng test --progress false --watch=false
  only:
    - master

build:
  stage: build
  script:
    - node_modules/@angular/cli/bin/ng build
  artifacts:
    paths:
      - dist
  only:
    - master

deploy:
  stage: deploy
  script:
    - npm i -g netlify-cli
    - netlify deploy --site $NETLIFY_SITE_ID --auth $NETLIFY_AUTH_TOKEN --prod
  dependencies:
    - build
  only:
    - master

Phew! We completed a lot of stuff. Now we are ready to push our code to gitlab. Commit your changes and push them to your remote repository. If everything is setup well, it will trigger the pipeline immediately. Since we have declared 4 stages in our gitlab-ci file, the pipeline should look something like this(while processing).

Now go to your site (<yoursitename>.netlify.app) to find it live. Mine’s shown below

Wohoo! We did it. Thanks to Gitlab-CI, our site is build, tested and deployed to netlify, in minutes! I hope you found this article helpful. Please give it some claps if you liked it.

Happy Coding!