Deploying to Firebase with GitHub Actions

This is a quick guide on how to get an un-hosted project, onto Firebase hosting using GitHub Actions which is updated on every merge. We’ll just be using the Firebase CLI, no fancy coding required!

A few assumptions before we begin:

• A repository on GitHub with a website ready to host (In my case, a fresh Angular App “ng new”)
• A Firebase account
• The latest Firebase cli installed and ready to go

So let’s get started

First up, head over to Firebase and create your new Project. Just follow the basic steps, add your project name, enable analytics if you want to.

Now let’s hop into our command window and setup the Firebase and GitHub stuff.

1. Get a command window open in your project directory.
2. Type the following command.

firebase init hosting:github

This will walk you through the process from start to finish

1. Follow the steps in the console, use the existing Firebase project you made earlier.

2. When prompted for the GitHub repository, type in the following “Username/Repository”, or in my case
   

OliBlade/MyFirebaseApp

1. You’ll also be asked to input the build directory of your site, and your build command, in my case “npm run build”

Once that’s all done

You’ll have seen in the output that this has created a service account in your Firebase project with permission to deploy Firebase Hosting. Also that service account’s JSON key has been uploaded to the GitHub repository as a GitHub Secret.

In your files you’ll notice a folder called “.github” with a couple of YAML files in the workflows folder. If you take a look at these you will see how they reference the newly created secret and configure the GitHub Action to deploy Firebase Hosting.

Commit and Push

It doesn’t really matter if you do this on a new branch or not, but you probably should. Navigate to your repository and click the Actions tab. You will see your action executing and building the project.

Notice step 4 deploys to FireBase, if you check out your new project in Firebase Console you will see a freshly deployed and hosted app.

This now updates your live FireBase hosted website with every merge into your main branch, and every PR in this GitHub repo will get its own preview URL!

Some extra reading

• This post was heavily based on this Firebase documentation, but I thought I’d do a little walkthrough
• GitHub Secrets
• GitHub Action
• GitHub Action to deploy to Firebase hosting