angular ci

Table of Contents

Angular CI
- Pipeline
- Adjustments
  - Pipeline Environment

Angular CI

The Angular client-side of My Thai Star is going to have some specific needs for the CI-CD Pipeline to perform mandatory operations.

Pipeline

The Pipeline for the Angular client-side is going to be called MyThaiStar_FRONT-END_BUILD. It is located in the PL instance, under the MTS folder (as previously explained). It is going to follow a process flow like this one:

Each of those steps are called stages in the Jenkins context.Let’s see what those steps mean in the context of the Angular application:

Declarative: Checkout SCM

Retrieves the project from the GitHub repository which it’s located. This step is not defined directly in our pipeline, but as it is loaded from the repository this step should always be done at the beginning.
Declarative: Tool Install

The Pipeline needs some Tools to perform some operations with the Angular project. These tool is a correct version of NodeJS (10.17.0 LTS) with Yarn installed as global package.
```
tools {
    nodejs "NodeJS 10.14.0"
}
```
Loading Custom Tools

The Pipeline also needs a browser in order to execute the tests, so in this step the chrome-stable will be loaded. We will use it in a headless mode.
```
tool chrome
```
Fresh Dependency Installation

The script $ yarn does a package installation. As we always clean the workspace after the pipeline, all packages must be installed in every execution.
Code Linting

This script executes a linting process of TypeScript. Rules can be defined in the tslint.json file of the project. It throws an exception whenever a file contains a non-compliant piece of code.
Execute Angular tests

The CI testing of the Angular client is different than the standard local testing (adapted to CI environments, as specified in the Adaptation section of document). This script just executes the following commands:
```
ng test --browsers ChromeHeadless --watch=false
```
Check dependencies

Before continue, we print the result of yarn audit. It shows the vulnerabilities in the dependencies. It do not process the response. The purpose is only to track the result of the command.
```
yarn audit
```
SonarQube code analysis

The script load and execute the tool sonar-scanner. This tool is loaded here because it’s not used in any other part of the pipeline. The sonar-scanner will take all code, upload it to SonarQube and wait until SonarQube send us a response with the quality of our code. If the code do not pass the quality gate, the pipeline will stop at this point.
Build Application

The building process of the Angular client would result in a folder called /dist in the main Angular’s directory. That folder is the one that is going to be served afterwards as an artifact. This process has also been adapted to some Deployment needs. This building script executes the following:
```
ng build --configuration=docker
```
Deliver application into Nexus

Once the scripts produce the Angular artifact (/dist folder), it’s time to package it and store into nexus.
Declarative: Post Actions

At the end, this step is always executed, even if a previous stage fail. We use this step to clean up the workspace for future executions
```
post {
    always {
        cleanWs()
    }
}
```

Adjustments

The Angular project Pipeline needed some "extra" features to complete all planned processes. Those features resulted in some additions to the project.

Pipeline Environment

In order to easily reuse the pipeline in other angular projects, all variables have been defined in the block environment. All variables have the default values that Production Line uses, so if you’re going to work in production line you won’t have to change anything. Example:

environment {
    // Script for build the application. Defined at package.json
    buildScript = 'build --configuration=docker'
    // Script for lint the application. Defined at package.json
    lintScript = 'lint'
    // Script for test the application. Defined at package.json
    testScript = 'test:ci'
    // Angular directory
    angularDir = 'angular'
    // SRC folder. It will be angularDir/srcDir
    srcDir = 'src'
    // Name of the custom tool for chrome stable
    chrome = 'Chrome-stable'

    // SonarQube
    // Name of the SonarQube tool
    sonarTool = 'SonarQube'
    // Name of the SonarQube environment
    sonarEnv = "SonarQube"

    // Nexus
    // Artifact groupId
    groupId = 'com.devonfw.mythaistar'
    // Nexus repository ID
    repositoryId= 'pl-nexus'
    // Nexus internal URL
    repositoryUrl = 'http://nexus3-core:8081/nexus3/repository/maven-snapshots'
    // Maven global settings configuration ID
    globalSettingsId = 'MavenSettings'
    // Maven tool id
    mavenInstallation = 'Maven3'
}

Description

build Script: script for build the application. It must be defined at package.json.

Example (package.json):

{
    "name": "mythaistar-restaurant",
    ...
    "scripts": {
        ...
        "build": "ng build",
        ...
    }
    ...
}

This will be used as follows:

sh """yarn ${buildScript}"""

lint Script: Script for lint the application. Defined at package.json

Example (package.json):

{
    "name": "mythaistar-restaurant",
    ...
    "scripts": {
        ...
        "lint": "ng lint",
        ...
    }
    ...
}

This will be used as follows:

sh """yarn ${lintScript}"""

test Script: Script for test the application. Defined at package.json

Example (package.json):

{
    "name": "mythaistar-restaurant",
    ...
    "scripts": {
        ...
        "test:ci": "npm run postinstall:web && ng test --browsers ChromeHeadless --watch=false",
        ...
    }
    ...
}

This will be used as follows:

sh """yarn ${testScript}"""

angular-Dir: Relative route to angular application. In My Thai Star this is the angular folder. The actual directory (.) is also allowed.
srcDir: Directory where you store the source code. For angular applications the default value is src
chrome: Since you need a browser to run your tests, we must provide one. This variable contains the name of the custom tool for google chrome.
sonar-Tool: Name of the SonarQube scanner installation.
sonar-Env: Name of the SonarQube environment. SonarQube is the default value for PL.
group-Id: Group id of the application. It will be used to storage the application in nexus3
repository-Id: Id of the nexus3 repository. It must be defined at maven global config file.
repository URL: The URL of the repository.
global Settings Id: The id of the global settings file.
maven Installation: The name of the maven tool.