Bitbucket Pipelines for your Angular 6 apps

3
The default build definition from the Bitbucket pipelines uses one of the official Node.js Docker images on Docker Hub. If you are building Angular apps with the CLI, these images will not work for you. We need a little bit more than the node.js 6.9.4 (at the time of this writing), so let’s make a small list:

  • node.js > 8.9
  • a browser like Chrome or Firefox to run our “ng test” (Karma tests)
  • a JDK or JRE if we want to run a SonarQube scanner

With this list we could craft our own docker image, but there is an image on Docker Hub that provides exactly that (and a bit more): atlassianlabs/docker-node-jdk-chrome-firefox! So let’s see how we set this up in Bitbucket Pipelines.

Enable pipelines

Pipelines is the automated build feature within Bitbucket. Enabling this feature (from the repository “Settings” menu, generates a bitbucket-pipelines.yml file in the root of the repo. Let’s start with running the correct image by replacing the default one:

image: atlassianlabs/docker-node-jdk-chrome-firefox
pipelines:
  default:
    - step:
      caches:
        - node
      script:
        - npm install
        - npm test

Succes: after this simple change, our Angular app builds!

1

It could be, that our “npm test” build step never finishes. This typically happens if the command that is executed keeps the browser open, as is the default behaviour of an Angular CLI generated app.

To avoid this behaviour, we update our package.json file and tell “ng test” to skip watching for changes: “test”: “ng test –watch=false –code-coverage=true”,

Bonus: Add SonarQube

This image also has Java 8 (OpenJDK JRE & JDK 8) installed, so enabling SonarQube is not that hard. First we add the scanner to our Angular project:

npm install sonarqube-scanner --save-dev

And we add our sonar-project.properties file with the correct values:

sonar.host.url=https://sonarcloud.io
sonar.login=xxxxyyyyzzzzz
sonar.organization=xxxxyyyyzzzzz
sonar.projectKey=ng-cover-demo-bb
sonar.projectName=ng-cover-demo-bb
sonar.projectVersion=1.0
sonar.sourceEncoding=UTF-8
sonar.sources=src
sonar.exclusions=**/node_modules/**,**/*.spec.ts
sonar.tests=src
sonar.test.inclusions=**/*.spec.ts
sonar.typescript.lcov.reportPaths=coverage/lcov.info

And an updated package.json that enables code coverage and includes a script for the execution of the scanner:

  "scripts": {
    "test": "ng test --watch=false --code-coverage=true",
    "sonar": "sonar-scanner"

And finally the build yml file:

image: atlassianlabs/docker-node-jdk-chrome-firefox
pipelines:
  default:
    - step:
      caches:
        - node
      script:
        - npm install
        - npm test
        - npm run sonar

If we now run our pipeline our SonarQube step is included!

2

/Y.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s