Liam Moat

Firebase is a cloud platform from Google offering a number of great products giving you everything you need to build and grow your web and mobile apps. This post shows you how to take advantage of Hosting, which when combined with Bitbucket Pipelines can give you cost-effective hosting and CI/CD for your static website.

This post assumes that you already have a static website checked into Bitbucket. It doesn’t matter if you use Jekyll, Hexo, Hugo or just hand-written HTML. For the purpose of this post, I am using Jekyll and have it configured to output my public assets to the default _site directory.

Note: You shouldn’t need to check-in the _site directory to source control as we can use Pipelines to build the assets before deploying.

Setup

Follow the Quick Start guide for Firebase Hosting and in just a few short steps you will have deployed your static website from your local environment. I also turned on cleanUrls. My firebase.json file looks like this:

{
  "hosting": {
    "public": "_site",
    "cleanUrls": true
  }
}

The documentation also covers additional features that let you customize how your content is hosted, including custom error pages, redirects, rewrites and headers.

I was already using NPM, so to keep everything consistent I added firebase-tools to my devDependencies and included a couple of useful scripts.

{
  "name": "...",
  "scripts": {
    "build": "jekyll build",
    "serve": "jekyll serve --draft",
    "deploy": "firebase deploy --token $FIREBASE_TOKEN"
  },
  "devDependencies": {
    "firebase-tools": "^3.7.0"
  }
}

Pipelines

Before you can deploy from Pipelines, you will need to authenticate Firebase tools. To do this you will need to generate an authentication token and save it as an Environment Variable in Bitbucket. Locally, run firebase login:ci and follow the wizard - this will guide you through the login process and generate an authentication token. Copy the auth token and store it as an Environment Variable in Bitbucket called FIREBASE_TOKEN. Take a look at this article to see how.

Your pipeline container will be able to access your environment variable using $FIREBASE_TOKEN which as you can see, I have used in the deploy script in my package.json file:

firebase deploy --token $FIREBASE_TOKEN

Finally, you need to configure your pipeline. To run a build, you will need a valid bitbucket-pipelines.yml file with a branch-specific or default pipeline configuration in the root of your repository.

Bitbucket Pipelines runs pipelines using Docker containers. Becuase I am using Jekyll, I configured the build to use aerobatic/jekyll - a CI image for building Jekyll sites which comes pre-installed with Ruby, Jekyll and Node.

Note: For the purpose of following this guide, make sure the image you choose has Node installed.

You can start with a simple configuration for the default pipeline. This pipeline is run for all branches that don’t match any other pipeline configuration.

image: aerobatic/jekyll:latest
clone:
  depth: 1
pipelines:
  default:
    - step:
        script:
          - npm install
          - JEKYLL_ENV=production npm run build
          - npm run deploy

You might only want to deploy when the code is merged into your master branch. In which case, you can add specific build configurations for branches, tags, and bookmarks. In this example, all commits will trigger a build but only commits on the master branch will include a deployment.

image: aerobatic/jekyll:latest
clone:
  depth: 1
pipelines:
  default:
    - step:
        script:
          - npm install
          - JEKYLL_ENV=production npm run build
  branches:
    master:
      - step:
          script:
            - npm install
            - JEKYLL_ENV=production npm run build
            - npm run deploy

The more I use Bitbucket Pipelines the more it proves itself as a powerful feature rich CI/CD solution for your projects. I can’t recommend it enough. If you haven’t used it yet you can learn more here or you can explore more advance scenarios here.