It’s so frustrating & time consuming to ship your code with every small change. Skip running your tests & build commands and easily automate your build workflow using CircleCI and host on Firebase with a simple setup.

Who likes to the monkey job of deploying? Let CircleCI do it.🐒

You will be surprised to know how easy and quickly you can host a website on Google’s Firebase and deploy continuously with CircleCI.

So, two things to know before looking at how you can achieve this -

Firebase Hosting

We need a reliable hosting service It is suitable for hosting production-grade web content for developers. You can quickly deploy web apps and serve both static and dynamic content to a global CDN with a single magic command — firebase deploy

CircleCI

We want a workflow trigger when we make a commit to our repo ie. build the project, run a couple of tests & deploy to firebase.

CircleCI offers you the infrastructure to automate your workflow from commit to deploy. You can express your workflows in a yaml configuration. You can define steps like build process, testing, linting & deployment. You have the flexibility to define advanced custom workflows as well.

Steps setup Firebase hosting Project

  1. Install firebase-tools globally — This will allow you to use firebase command globally, on your machine)
npm install -g firebase-tools

2. Install firebase-tools locally as a dev dependency — This will ensure when you install dependencies on the build server, you can execute the firebase command

npm install -D firebase-tools

3. Get authenticated to your firebase account (Sign up if you don't have one)

firebase login

Once you are logged in, we can now initialise our project:

firebase init

This will prompt you to select the services you would like to setup. Choose hosting and select the firebase project if you have already created.

Once you are done, you must have a firebase.json & .firebasesrc file added.

To do a manual deployment, all you need to do (As promised) 🧙‍♂️

.build/ firebase deploy

(Important — You should be in the build directory first, if you are packaging into /build location, just cd build and then execute the deploy command)

Steps setup CircleCI Project

  1. Create you account on CircleCI using your github/bitbucket account
  2. Select your project (You can sync from github & bitbucket)
  3. Click on Set Up Project
  4. Choose build environment — Linux
  5. In your project’s root folder, create a folder named .circleci and inside it, create a config.yml file. CircleCI requires that the config file be located here. Paste the below file and push these changes to your repo (If you are using create-react-app , you can safely copy the run & build commands, else use the commands which you have defined for your project)
  6. Click on Start Building
version: 2
jobs:
    build:
        docker:
            - image: circleci/node:10.16.0
        working_directory: ~/repo
        steps:
            - checkout
            # Download and cache dependencies
            - restore_cache:
                  keys:
                      - v1-dependencies-{{ checksum "package.json" }}
                      - v1-dependencies-
            - run:
                  name: Install Dependencies
                  command: npm install
            - save_cache:
                  key: v1-npm-deps-{{ checksum "package-lock.json" }}
                  paths:
                      - ./node_modules
            - run:
                  name: Build
                  command: npm build
            - run:
                  name: Firebase Deploy
                  command: ./node_modules/.bin/firebase deploy --token "$FIREBASE_TOKEN" --only hosting


(This config is all about has been explained at the end)

Thats’t it? NO.

This is the most important step. We have not given our CircleCI some sort of access to our firebase project. To do so we need to generate a Firebase token and add it to our CircleCI settings

Get the Firebase Token

  • Run firebase login:ci and get a token

You should have a similar view like this

Add it to your CircleCI Project

  • Go to your project’s settings by clicking the gear icon next to your project.
  • Got Build Settings > Environment Variables > Add Variable.
  • Enter FIREBASE_TOKEN in the name field, add the token we got from Firebase in the value field, then finally click Add Variable.

Now go to the Workflows section and hit Rerun Workflow

With this you should be able to deploy directly to firebase on each of your commit. Go go, deploy 🚀

Deconstructing the CircleCI config (Optional)

Let’s do a quick review of the config file.

  • First, the version key enables us to specifies that we are using CircleCI 2.0.
  • Next up, we specify the base Docker image where our code will be run. In this case is a container based on Node 10, which is the current version at the time of writing this. You can use a later version if one is available.
  • The working_directory option specifies the location where our code will be cloned.
  • Next is the restore_cache section, which instructs CircleCI to restore any previously installed dependencies. Here we’re using a checksum of the package-lock.json file to detect whether to install the dependencies afresh or to use the cache to restore previously downloaded packages.
  • The next step is installing the dependencies through the npm install command.
  • The save_cache section instructs CircleCI to save the dependencies after installing them.
  • We then run the npm run build command. This builds the production version of the site, which is ready to be deployed.
  • We run the firebase deploy command that deploys to Firebase Hosting. In this step, we need a Firebase token that allows us to deploy the app to our account. The command specifies that the token should be obtained from the FIREBASE_TOKEN environment variable.

Try it out with a project, it's quite simple, trust me. If you have some questions please feel free to tweet them at me.

Stay updated and have a great day! 🎉

(Originally published on Codeburst Medium)