Angular Devops CI/CD with Travis CI and Sonar Cloud

In this article, we will see how to build and test and Angular project with Travis CI and Sonar Cloud.

Setup the tests

Of course our project will be on github, since it’s an easy way to integrate with Travis CI. End to end tests will be launched with Cypress. Unit tests will run with karma, using a nice setup that is presented here by the fun Shai Reznik :

Basically, the setup is to use karma-jasmine-diff-reporter, karma-mocha-reporter and ChromeHeadless. The result is really nice and can run transparently both on you dev machine and on your CI.

reporters: ["jasmine-diff", "mocha"],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ["ChromeHeadless"],
singleRun: true,
restartOnFileChange: true

The result of this setup should look like that when you run your tests :

run ng test

We will need a few scripts including coverage report for the tests to later consume by Sonar. Code coverage option will generate a lcov.info file that will be used by sonar. Note that /coverage is not commited in github, Travis will generate the file for each run.

Now you setup your e2e tests with Cypress (if you want) and for that, check this very detailed article here :

How to get started with Cypress

Note that I like to use Cypress with Typescript syntax, and it’s quite easy to setup. I use this lib : https://github.com/bahmutov/add-typescript-to-cypress.

This npm script should do the trick (see next section for the details) :

// package.json
"cypress:ci": "ng build --prod && run-p --race start:ci cypress:run",

Setup Travis CI with Angular

It’s not very complicated to setup your project to run in Travis CI, basically, you need a .travis.yml file in the root folder of your repository.

In our npm scripts, we add 2 libs :

• http-server (option -c-1 with no cache)
• npm-run-all (reffered with run-p command) to run commands in parallel

This way we can run a build, and start the server and run the e2e tests on that app.

"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"buildgp": "ng build --prod --base-href https://aboudard.github.io/angular-cypress-travis/",
"test": "ng test --code-coverage",
"lint": "ng lint",
"cypress:open": "cypress open",
"cypress:local": "run-p start cypress:run",
"cypress:ci": "ng build --prod && run-p --race start:ci cypress:run",
"cypress:run": "cypress run",
"start:ci": "http-server ./dist/appv7 -a localhost -p 4200 -c-1"
},

Here are the actions wil will run in Travis :

• ng lint : check quality by Angular standards
• run cypress : e2e tests that implies an http-server running on the /dist folder of a local build
• unit tests with karma (or Jest) producing code coverage report
• sonar scanner (travis plugin)
• an Angular build for Github Pages deploy

This would be our Travis configuration file :

We go with node 10 for Angular 8+ and specify the version in global install.

Note here that there is no sonar cloud security token, we will handle it with settings both in sonar cloud account and in travis project settings.

Setup Sonar Cloud with Travis CI

As stated in the documentation, we need to add our project in Sonar Cloud and generate a private key. This key is generated with Travis CLI that runs with Ruby gems (been a long time for me on Ruby !). The tasks are :

• Generate a token in your sonarcloud : https://sonarcloud.io/account/security/
• Generate the private key with ruby gem using this token : https://docs.travis-ci.com/user/encryption-keys/#usage
• Configure sonarcloud addon in your travis.yml file
• Ignore the proper files and folders in order to have a relevant coverage indicator.

If you don’t want to encrypt your sonar cloud token with ruby, and if you don’t want to put the encrypted key in your travis.yml file, just follow this procedure : https://github.com/travis-ci/travis-ci/issues/10138. This will let you handle sonar cloud login with Travis with simply respecting the same name for both tokens : SONAR_CLOUD (or anything else relevant).

SONAR_TOKEN variable in Travis project settings

SONAR_TOKEN token variable generated in sonar could security settings of your account

Ignore Sonar files for a good coverage, using the settings described here (only you will not go to the settings of your project but alter the sonar configuration file) :

Narrowing the Focus

// sonar-project.properties
sonar.exclusions=src/**/*.spec.ts,cypress/**/*,e2e/**/*,src/environments/**/*,src/test.ts,src/main.ts,src/karma.conf.js

After the next push on your github, you should see a passing quality gate like that :

Sonar Cloud quality gate for Angular project built with Travis

Deploy your repo to Github Pages

This part is nice, and quite easy to handle. Here is the reference for the tasks : https://docs.travis-ci.com/user/deployment/pages/.

• Create a Token in your github settings page : https://github.com/settings/tokens
• Configure your Travis project to use this token : https://travis-ci.org/me/my-project/settings
• Put the deploy task in your travis.yml :

deploy:
  provider: pages
  skip_cleanup: true
  github_token: "$GITHUB_TOKEN"
  local_dir: dist/appv7
  on:
    branch: master

GITHUB_TOKEN variable to be used in the travis.yml

And now your app is successfully deployed on github pages :

Appv7