February 28, 2016

Deploying apps from circleci 1.0 to Firebase hosting

September 2017 update: CircleCI 2.0’s config file format is different than what I describe here which is CircleCI’s 1.0 config format. The idea of getting a token from Firebase and using with CircleCI’s environment variables and config file still applies.

The command line page of the Firebase documentation doesn’t list all the commands available to you from the firebase-tools npm package. To see them all, install the tools with npm install -g firebase-tools and execute the command firebase in your terminal.

Usage: firebase [options] [command]


  Commands:

    data:get [options] <path>              fetch and print JSON data at the specified path
    data:push [options] <path> [infile]    add a new JSON object to a list of data in your Firebase
    data:set [options] <path> [infile]     store JSON data at the specified path via STDIN, arg, or file
    data:remove [options] <path>           remove data from your Firebase at the specified path
    data:update [options] <path> [infile]  update some of the keys for the defined path in your Firebase
    deploy [options]                       deploy hosting assets and rules for the current app
    deploy:hosting [options]               deploy hosting assets for the current app
    deploy:rules [options]                 deploy security rules for the current app
    disable:hosting [options]              stop serving web traffic to your Firebase Hosting site
    help [command]                         display help information
    init [options]                         set up a Firebase app in the current directory
    list                                   list the Firebases to which you have access
    login                                  log the CLI into Firebase
    login:ci                               generate an access token for use in non-interactive environments
    logout                                 log the CLI out of Firebase
    open [options] [panel]                 open Firebase Hosting URL in browser or jump to a dashboard panel
    prefs:token                            print the currently logged in user's access token
    serve [options]                        start a local server for your static assets

  Options:

    -h, --help         output usage information
    -V, --version      output the version number
    -j, --json         output JSON instead of text, also triggers non-interactive mode
    --token <token>    supply an auth token for this command
    --non-interactive  error out of the command instead of waiting for prompts
    --interactive      force interactive shell treatment even when not detected
    --debug            print verbose debug output and keep a debug log file

The interesting command here is:

login:ci                               generate an access token for use in non-interactive environments

Run firebase login:ci and follow the instructions to receive an access token like awelkfjw8efwpafh8phaua9 that you can use within circleci to deploy your app.

Inside circleci

Save the access token in circleci’s project settings as an environment variable with a name like FIREBASE_DEPLOY_TOKEN. Then configure circle.yml to use the environment variable inside the deploy step like this:

deployment:
  master:
    branch: master
    commands:
      - firebase deploy --token "$FIREBASE_DEPLOY_TOKEN" --non-interactive

When a build on the master branch succeeds, circleci will use that command to log into Firebase hosting on your behalf (via the access token) and upload the files configured in your firebase.json file.