In this post I’ll describe how you can setup continuous integration for an angular 2 app that is hosted on github with Travis-CI, Coveralls and Sauce Labs. After that you have a nearly complete pipeline for your agile project. I am using roamlrs as an example project.
To get started you need to create a GitHub repository that you have initialized with ng init from the Angular CLI project. How to do this is described on the Angular CLI website so I leave it up to you following they’re instructions.
The first thing we want to do is running our builds at Travis-CI after every commit to the master branch. To achieve this we need to create a .travis.yml file in our repository and connect our GitHub account with Travis-CI.
Connect your GitHub account with your Travis-CI account is very easy. Navigate to Travis-CI and sign in with your GutHub-Account. After that you need to give Travis-CI read access to your GitHub repositories and just need to activate the repositories for which you want to setup automatic builds.
The next step is to configure how Travis-CI should build your code and run your unit tests. This is done by the .travis.yml file. The generated project uses Chrome to run our test so we need to install Chrome before we run our tests. You’ll find a detailed description how to do that in this blog post. Because Chrome needs a newer ubuntu version than Travis-CI provides by default we need to configure trusty as the runtime environment.
Our complete .travis.yml is:
language: node_js
sudo: true
dist: trusty
node_js:
- '5.6.0'
branches:
only:
- master
before_install:
- export CHROME_BIN=/usr/bin/google-chrome
- export DISPLAY=:99.0
- sh -e /etc/init.d/xvfb start
- sudo apt-get update
- sudo apt-get install -y libappindicator1 fonts-liberation
- wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
- sudo dpkg -i google-chrome*.deb
If we commit and push our changes to our master branch Travis-CI should grab our sources from GitHub and start building and testing our app. But we’ll see that the build never stops. The reason is that in the package.json of our project the script test runs ng test. This command will wait for any changes in our sources to rerun the test. A perfect solution for our local test but really a bad one for our Travis-CI build. To solve this we need to change the command from ng test to ng test --watch false. Commit, push and we are done.
The first step is done. One last thing: let visitors of our GitHub project know that our build passes. Usually the build-badge is included in our readme.md file:
[![CI Status]
(http://img.shields.io/travis/roamlrs/roamlrs.svg?style=flat)]
(https://travis-ci.org/roamlrs/roamlrs)