Bitbucket Pipelines for your Angular 6 apps

Door Yuri Burger In SharePoint

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.

Meer informatie

Yuri Burger - VX Company

Yuri Burger

Principal Consultant

+31 6 11 75 16 83 Stuur Yuri een e-mail

Reacties

Er zijn nog geen reacties op dit bericht.

Plaats een reactie

Dit veld is verplicht.

Vul een geldig e-mailadres in.

Dit veld is verplicht.