Setup a basic CI

Photo by Daniel McCullough on Unsplash

Introduction

This post takes place in a series aiming to show how to build an angular application from scratch.

We will see how to scaffold an enterprise-scale angular application with all the assets needed to easily develop and maintain it.

This post will show you how to setup a basic CI toolchain (test and lint your code) for your application on Gitlab.

Git Workflow

git checkout master
git pull
# Retrieve the last master version

git checkout -b develop
# Branch develop creation

Setup tests scripts

We will need to adapt our testing environment to work on the Gitlab CI environment.

Add the follwing lines to your package.json :

"scripts": {
    ...
    "ci:test": "ng test --browsers PhantomJS --watch=false",
    "ci:lint": "ng lint",
    ...
}

Add PhantomJs support :

npm install karma-phantomjs-launcher phantomjs core-js --save --save-exact

Update karma.conf.js :

plugins: [
    ...,
    require('karma-phantomjs-launcher')
],

Update polyfill.ts :

# Add core-js imports
import 'core-js/es/symbol';
import 'core-js/es/object';
import 'core-js/es/function';
import 'core-js/es/parse-int';
import 'core-js/es/parse-float';
import 'core-js/es/number';
import 'core-js/es/math';
import 'core-js/es/string';
import 'core-js/es/date';
import 'core-js/es/array';
import 'core-js/es/regexp';
import 'core-js/es/map';
import 'core-js/es/weak-map';
import 'core-js/es/set';

# Uncomment zone polyfills
(window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
(window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
(window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
(window as any).__Zone_enable_cross_context_check = true;

Update your tsconfig.json :

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "declaration": false,
    "module": "es2015",
    "moduleResolution": "node",
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "es2019",
      "dom",
      "esnext.asynciterable"
    ],
    "resolveJsonModule": true
  }
}

Write your CI configuration file

Create a file .gitlab-ci.yml with the following content :

image: node:latest

stages:
  - CodeQuality

test:
  stage: CodeQuality
  script: 
    - npm ci
    - npm run ci:test

lint:
  stage: CodeQuality
  script:
    - npm ci
    - npm run ci:lint

Each time someone commit on a branch, the CodeQuality stages above will be triggerred.

From the NPM documentation about npm ci:
This command is similar to npm install, except it’s meant to be used in automated environments such as test platforms, continuous integration, and deployment – or any situation where you want to make sure you’re doing a clean install of your dependencies. It can be significantly faster than a regular npm install by skipping certain user-oriented features. It is also more strict than a regular install, which can help catch errors or inconsistencies caused by the incrementally-installed local environments of most npm users.

Push your modifications

git add .gitlab-ci.yml package.json package-lock.json karma.conf.js src/polyfills.ts tsconfig.json
git commit -m "core(ci): Add gitlab CI file and scripts"
git push -u origin develop

Check your CI

For now, your CI will run

npm run ci:test

and

npm run ci:lint

You can now follow the state of your CI on Gitlab.
Go to CI/CD > Pipelines :

Click on the corresponding pipeline to show the stages details :