Deploy to Firebase with Bitbucket Pipelines

As described in the VuePress + Firebase Hosting post, it is really easy to build and deploy a VuePress application to Firebase hosting. In summary, it comes down to two commands.

vuepress build
firebase deploy

However, it can be really annoying to run manually those commands each time we want to deploy to Firebase.

With Bitbucket Pipelines, it is very easy to automate that process.

From their website,

Bitbucket Pipelines & Deployments: Integrated CI/CD for Bitbucket Cloud that's trivial to set up, automating your code from test to production.

# bitbucket-pipelines.yml

The bitbucket-pipelines.yml is a YAML file that tells Bitbucket how the pipeline behaves when code is pushed to the repository.

Bitbucket provides many default templates base on various environment to get off the ground running quickly and easily.

Let's look at a basic Node.js configuration file.

image: node:6.9.4
pipelines:
  default:
    - step:
        script:
          - npm install

We'll go over each parts in that configuration.

# Image

For each pipeline build, Bitbucket uses a Docker image to define the build environment.

The image tag represent the base Docker image that the build will use as its environment. In the example, it's using an image with Node.js installed, version 6.9.4.

Bitbucket provides a list of default images for the various environments. Furthermore, the image can come from Docker Hub (by specifying <account>/<repository>:<tag>), or any other private image registry.

# Pipelines

The pipelines section is the main section. It describes all the possible builds, along with their branches, steps, trigger, etc.

# Default

The default tag represents the pipeline that will be triggered by any pushes to the code repository that aren't already defined by a branches, tags or bookmarks pipeline.

# Step

The step tag represents one of potentially many steps in the pipeline.

# Script

The script tag defines the script to run during that step. It could be any commands that exists in the context of the Docker image. In the example, it runs the node install command, npm install.

# Other Keywords

Bitbuckets Pipelines offers a rich and flexible configuration by defining many other keywords.

# VuePress and Firebase

# Pipeline Configuration

Here is the pipeline configuration that I personally use for this website

image: dspringuel/vuepress-firebase

pipelines:
  branches:
    master:
    - step:
        name: Build VuePress
        script:
          - vuepress build
        artifacts: 
          - .vuepress/dist/**
    - step:
        name: Deploy to Firebase Hosting
        script:
          - firebase deploy --token $FIREBASE_TOKEN
        trigger: manual
        deployment: production

There is only one pipeline definition. Only a push to the master branch will trigger a build. Naturally, there are two steps in the build.

The first one runs the vuepress build command. Note that the step also specify an artifacts tag. This tag defines some files that are output in the current step that must be available to the following steps. In this example, we want all the files from the output of VuePress build (i.e. .vuepress/dist/**) available for the deploy step.

The second step is to deploy to Firebase. It runs the firebase deploy command. This step use the trigger tag. It is set to manual, as I want to manually trigger that step in Bitbucket Cloud.

Generally, I want every push to master to be built (to catch any build errors that might have slipped through). However, since I push sometimes changes that doesn't relate to the website itself, I don't want to deploy it to Firebase everytime.

The last tag is deployment. It is set to production, which means that the step is a production deployment step. All the deployments are tracked also in Bitbucket Cloud. The other possible values are test and staging.

# Docker Image

In the previous configuration, I use a personal Docker image to base the build on. That Docker image is really simple. It uses a Node.js image as the base image and install globally vuepress and firebase-tools, so Bitbucket Pipeline can use those CLI during the build steps.

The Dockerfile looks something like this.

FROM node:8.12-alpine
RUN npm install -g vuepress
RUN npm install -g firebase-tools

I built the image and pushed it to a public Dockerhub Repository called dspringuel/vuepress-firebase.

# Firebase token and Pipelines environment variable

Last thing to notice about the pipeline configuration is the deploy step. Firebase require the user to authenticate before being able to deploy. Since this an automated environment, it is not easily possible to authenticate during the build.

However, Firebase thought about this, and provided a cool command especially for this effect.

firebase login:ci

This command ask the user to authenticate herself the same way firebase login does. The difference is that it outputs a token. Then, that token can be used as authentication when using Firebase commands.

The option --token <token> can be used in this case with the firebase deploy. Firebase know that the token is associated to one's account and authorize the deployment.

Since that gives access to one's Firebase account, this token is really sensitive. It shouldn't be shared with anyone, nor exposed in plain text in the pipeline configuration file.

Bitbucket Pipeline also thought about this and provide a way to inject environment variables to the pipeline builds. Those variables can be defined under the repository Settings > Pipelines > Environment variables page.

There, I create a variable called FIREBASE_TOKEN with the value as the token created by the firebase login:ci command. Bitbucket also gives the option to mask and encrypt the value for more security.

The variable is accessible by adding $ in front of the name, which gives the following in the deployment step.

firebase deploy --token $FIREBASE_TOKEN`

# Bitbucket Pipelines and Deployment pages

With Bitbucket Pipelines setup, there's not much to worry about when pushing code to the repository.

A build shows up in the Pipelines page. It also lists all the previous builds with their status, when it was started and how long it took to complete.

Also, when a build requires a manual step (like build #9 in the example), it shows a special icon to remind the user that the build is successful, but not completed.

The single build page shows all the steps and the output for each steps.

Finally, the deployment pages show all the deployments for each environments.

# References

• Bitbucket Pipeline Configuration
• Bitbucket Pipelines Docker images as build environments
• Bitbucket Deployments
• Docker Get Started Guide
• Firebase Tools

Damien Springuel

Software Developer

Saskatoon, SK, Canada

If you have any questions, comments, or feedback regarding this post, you can contact me at contact@damien-springuel.ca.