This post was written back when GitHub actions used .workflow files rather than .yml files. I might get around to updating it some day, but for now this article is useless!

I recently got Beta access to one of GitHub's new features, Actions! 🎉

After building a few of my own workflows, Actions feels like a real game changer.

There are plenty of Continuous Integration (CI) tools which provide similar functionality, but having these features baked right into GitHub’s platform is huge. It reduces friction and makes it painless to integrate CI into your project. I’m excited to see what the Open Source community can build with this!

To kick off my own contributions, I want to share my workflow for deploying a web app to Firebase Hosting.

---

Since we all hate scrolling through an article for the code we need, here’s what we’re going to write!

workflow "Deploy to Firebase" {
  on = "push"
  resolves = ["Deploy"]
}

# Only run on `master` branch
action "Master" {
  uses = "actions/bin/filter@master"
  args = "branch master"
}

# `npm ci`
action "Install" {
  uses = "actions/npm@master"
  args = "ci"
  needs = ["Master"]
}

# `npm run build`
action "Build" {
  uses = "actions/npm@master"
  args = "run build"
  needs = ["Install"]
}

# `firebase deploy`
action "Deploy" {
  uses = "natemoo-re/action-firebase@master"
  args = "deploy"
  secrets = ["FIREBASE_TOKEN"]
  needs = ["Build"]
}

Getting Started

I’m going to assume you have access to GitHub Actions (currently in Beta) and have already set up Firebase Hosting.

Actions live in the .github directory in the root of your project, so create that if you don’t already have one.

For the actual deployment, we’ll use an action that wraps the Firebase CLI. It can be accessed by using natemoo-re/action-firebase@master.

Heading back to the .github directory, create a file named main.workflow. We need to add a workflow block to define our first workflow.

workflow "Deploy to Firebase" {
  on = "push"
  resolves = ["Deploy"]
}

Every time we push to GitHub, this workflow will run. You might notice that it resolves an action named Deploy. Since workflows are just chain of actions which depend on each other, it makes the most sense to work forwards, so Deploy will be the last action we write.

Next we’ll use the filter action to ensure we only run our Workflow when we’re on the master branch.

# Only run on `master` branch
action "Master" {
  uses = "actions/bin/filter@master"
  args = "branch master"
}

For the rest of our actions, we’ll rely on the actions/npm@master repository by specifying uses = "actions/npm@master" The args option of our action will be passed directly to the npm process, so args = "run build" is equivalent to running npm run build in your shell.

Just like on our local development environment, we’ll need Actions to install our project’s dependencies. NPM has an optimized command for doing so in CI environments, appropriately named npm ci.

action "Install" {
  uses = "actions/npm@master"
  args = "ci"
  needs = ["Master"]
}

By defining needs = ["Master"], GitHub ensures that action "Master" runs before action "Install".

With project dependencies installed, we can go ahead and build our web app. In my case, the build process is an NPM script named build, but your project may differ. The specifics here don’t really matter, as long as the end result is a web app ready to be deployed.

action "Build" {
  uses = "actions/npm@master"
  args = "run build"
  needs = ["Install"]
}

The final action, Deploy, is the one our workflow resolves.

Notice that the action has a secrets = ["FIREBASE_TOKEN"] field. We’ll set that up next.

action "Deploy" {
  uses = "natemoo-re/action-firebase@master"
  args = "deploy"
  secrets = ["FIREBASE_TOKEN"]
  needs = ["Build"]
}

With the workflow defined, commit all the changes to GitHub.

Secrets

Actions allow you to pass encrypted values through the secrets field. Since Config and Deploy require FIREBASE_TOKEN, generate a token for CI by running the following (assuming you’ve installed firebase-tools globally) and copying the result.

firebase login:ci

After opening GitHub, open the main.workflow file to see the Actions visual editor. Scroll down to Config, then press edit. Scroll down to secrets, then paste your token.

Voilà! Your project now automatically deploys itself to Firebase Hosting every time there is a push to the Master branch on GitHub.