Save your Bitbucket Pipeline minutes using Docker (Ionic project)

I’m not a Docker expert…but I’m going to show you how to Dockerize your Ionic project so you can save those precious Bitbucket Pipeline minutes for when it really matters.

What you will need:

• Bitbucket account
• Dockerhub account
• Ionic project with unit and end to end tests,
  if you don’t have one use this Ionic Project

For this article I’ll be using Ionic Project as a base, then modifying it as we go along.

Use PhantomJS for unit tests

1. Install PhantomJS

npm install --save-dev karma-phantomjs-launcher

2. Change browsers in karma.conf.js file

browsers: ['PhantomJS'],

3. Run unit tests

npm run test-ci

Create a e2e-ci npm script

1. Add the following scripts to package.json file.
   We just want to create an npm script to run our e2e tests on the Bitbucket Pipelines.

“e2e-ci”: “npm run e2e-update && npm run e2e-test-ci”,
“e2e-test-ci”: “protractor ./test-config/protractor.conf.ci.js”,

We are going to create the protractor.conf.ci.js file in the next step.

Create a protractor.conf.ci.js

We are creating this file to configure e2e test to run against a headless chrome browser.

1. Make a copy the protractor.conf.js file
2. Rename this to protractor.conf.ci.js
3. Modify the file to add chromeOptions as below

capabilities: {
 'browserName': 'chrome',
  chromeOptions: {
  args: [“ —-headless”, “ —-disable-gpu”, “no-sandbox”, “ —-disable-web-security”]
  }
},

Create a bitbucket.yml file

This is a file recognised by bitbucket to run your pipeline commands.

image: node:8.11.1
pipelines:
  default:
    - step:
       script:
        - git clean -fXd # clean start
        - npm ci #faster way to do npm install
        - npm -v
        - node -v
        - npm run test-ci # run unit tests
        - nohup ionic serve --no-interactive --no-browser --no-livereload & # serve application in background
- npm run e2e-ci # run e2e test

git clean -fXd
Will give us a fresh start. Learn more about git clean
f is force
X is to remove only files ignored by Git
d is to remove untracked directories in addition to untracked files

npm ci
Is a faster way to do an npm install. Learn more about npm ci. You can replace this with npm install to get started if you have trouble with this. see this blog post
npm -v and node-v
It’s just handy to see versions of npm and node in the pipeline, these are totally optional.
npm run test-ci
This script runs our unit tests. (This already existed from the Ionic Project)
nohup ionic serve --no-interactive --no-browser --no-livereload &
Serve the Ionic project in the background.
We need to serve the project in the background in order for the e2e test to work.
If you find a better way to do this, please comment.
npm run e2e-ci
Once our project is running in the background, run e2e tests.

Create a Dockerfile to build a docker image

You can probably guess that I’m no docker expert, so feel free to modify your own Dockerfile and put in the root folder.
(Yes I also think it’s strange just name a file Dockerfile).

FROM node:8.11.1
LABEL version="1.0.0"
LABEL maintainter="neil"
LABEL npm="6.1.0"
###########################
# Install
###########################
RUN npm install -g npm@6.1.0
RUN npm install -g ionic cordova
RUN apt-get update
RUN apt-get install vim nano -y
RUN apt-get install default-jre -y
RUN apt-get install libxss1 libappindicator1 libindicator7 -y
RUN apt-get install fonts-liberation libatk-bridge2.0-0 -y libgtk-3-0 lsb-release xdg-utils -y
RUN wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add -
RUN sh -c 'echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list'
RUN apt-get update
RUN apt-get install google-chrome-stable -y
RUN apt-get update
RUN node -v
RUN npm -v

1. Run docker build .
2. Get a cup of tea️ ☕️
3. You should see Successfully built <IdHere> 👏
4. Run docker image lsto see your docker image details
5. Login to docker using CLI docker login
6. Enter your credentials that you used to signup to Dockerhub
7. Tag your image docker image build -t <username>/<name>:latest .
   Usually I will do docker image build -t<username>/ionicbase:latest .
8. Push your image to DockerHub docker push <username>/ionicbase
9. Get another cup of tea ☕️

Use your (public) docker image in you Bitbucket Pipeline

Remember that bitbucket.yml file? Well instead of using a standard node image, we’ll replace with our own that we just created.

image: <username>/ionicbase

Create a docker container from your image

1. Create a docker container from your image

docker run -it \
--name="ionicbase" \
--volume=</path/to/your/project>:</app> \
--workdir="/app" \
--memory=2048m \
<username>/<name> /bin/bash

2. After this is done, you will be inside your docker container 👏

Run E2E tests like you would in the Bitbucket pipeline

Remember that bitbucket.yml file? Great, let’s run ionic serve in the background, then run our E2E tests.

nohup ionic serve --no-interactive --no-browser --no-livereload &
npm run e2e-ci

You should see the result after it has finished running the E2E test.

App
default screen
✓ should have a title saying Page One
Executed 1 of 1 spec SUCCESS in 1 sec.
[01:17:51] I/launcher - 0 instance(s) of WebDriver still running
[01:17:51] I/launcher - chrome #01 passed

11 . Exit the container…don’t worry we can get back into it later.

docker #root exit

Start and attach the docker container

1. View docker containers docker ps -a , grab the CONTAINER ID
2. Start and attach the container docker start <CONTAINER ID> && attach <CONTAINER ID>, then view files and folders withls command.
3. You should see your files and folders for your Ionic Project

docker start <CONTAINER ID> && attach <CONTAINER ID>
ls

That’s it!

If you want to check out the repo

I hope you enjoyed reading this as much as I did writing it.

If you like this article, please clap! Open to feedback and comments.