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.
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:
The documentation also covers additional features that let you customize how your content is hosted, including custom error pages, redirects, rewrites and headers.
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:
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.
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.
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.