Setting up Bitbucket Pipelines with proper caching of NPM and Cypress

Bitbucket Pipelines & Deployments is integrated CI/CD for Bitbucket Cloud that’s trivial to set up, automating your code from test to production (at least that’s what the official site says). However, setting up your pipelines with right commands and right caching in order to be as fast as possible requires some time. In this article, I am going to show how it can be done.

TL;DR

If you came here just to see the configuration without explanation here it is:

Configuration

Image

In this configuration, we are using the docker image node:10.8.0. If you want to use a different one, one can choose one from here.

Options section

This section is completely optional and you can skip this part. I am using this part to set the maximum length of the pipeline. Without this time to time something bad can happen and your pipeline can run forever.

Pipelines section

Pipelines section is the main section where you specify each step. We have two steps. In the first, we are installing packages, running tests and building the application. We are using NPM CI — new command in NPM that has been created especially for this use case (you can read more here). In the second step, we are running the E2E tests using Cypress. Cypress requires us to use a different image so we need to create a special step for that.

Cache definitions

Using a cache can help us to save a lot of build minutes. We are caching two folders — $HOME/.npm & $HOME/.cache/Cypress. The first one is boosting NPM CI command and the second one is holding the Cypress binary.

Summary

Bitbucket Pipelines is a great tool for CI/CD. This feature is paid based on the number of build minutes so I suggest you using NPM CI and have a look at the cache section in order to save your time and money :)