Integrate GitHub Actions to automatically deploy to Firebase Hosting

How to deploy live & preview channels via GitHub pull requests

6 min readAug 22, 2021

The Beginner Guide to GitHub Actions and Firebase Hosting

Last week I’ve shared how I deployed my static custom-built website to Firebase, then installed Google Tag Manager + Facebook Pixel to my web + seamlessly integrated it to Google Analytics 4. In this episode, I’ll share with you my personal experience on how I deployed live & preview channels via GitHub pull requests.

Objectives and Prerequisites

✅ Deploy simple static personal website to Firebase. Read my guide at here.

🚧 Setting up GitHub Actions with Firebase Hosting

🚧 Deploy live & preview channels via GitHub pull requests

🔶 What is GitHub Actions and Why?

🔶 Setting up GitHub Actions with Firebase Hosting
◻️ Step 1 — Deploy my website to Firebase Hosting
◻️ Step 2 — Integrate GitHub Actions to deploy to Firebase Hosting

🔶 Deploy live & preview channels via GitHub pull requests
◻️ My 12-Steps Workflow
◻️ Demo

🔶 Wrapping Up

🔶 Resources

🔶 What is GitHub Actions and Why?

“GitHub Actions makes it easy to automate all your software workflows. Build, test, and deploy your code right from GitHub.”

GitHub Actions is a feature inside GitHub that enables you to automate your workflows. Without GitHub Actions, for every new feature, my workflow is:

Checkout feature > Make changes > Push to git > Merge Request > Merge to main branch > Switch to main on local > git pull > firebase deploy

With GitHub Actions, my workflow is easier, faster with the last 3 steps eliminated. Deploy my static custom-built website is just a small project. Imagine in reality, some deployment can take a long time (think of hours) and automatic deployment greatly saves a big chunk of time and effort.

Every Github repository now supports Github’s actions. Just go to your Github repo and you’ll see the Actions tab.

🔶 Setting up GitHub Actions with Firebase Hosting

Step 1 — Deploy my website to Firebase Hosting

Before we jump right in, you need to do these 3 steps as prerequisites to automatically deploy website to Firebase Hosting with GitHub Actions. In my previous post, I covered these 3. See my guide here.

Deploy my website to Firebase Hosting
Create a GitHub repo with admin permissions for the repository.
Push to GitHub repo

Step 2 — Integrate GitHub Actions to deploy to Firebase Hosting

Open your terminal (I use iTerm2), login to Firebase by running this:

firebase login

Since previously I’ve ALREADY deployed my web to Firebase Hosting meaning I’ve already set up Hosting. Therefore at this step, I just need to set up the GitHub Action part of Hosting. In your terminal, go to your root folder, run this:

firebase init hosting:github

Next the command will prompt a few questions and it will take care setting up the GitHub Actions automatically. At this stage we need to set up and create the workflow.There are a few things we need to pay attention to.

=== Project Setup I choose using my existing project.

===Hosting: github Setup I highly recommend you to sign in to your GitHub account and Google Cloud Platform so that it automatically takes care this step. Then you’ll be prompt to the next following questions.

?For which GitHub repository would you like to set up a GitHub workflow? (format: user/repository): Key in your GitHub username and repo name in that format.

? Set up the workflow to run a build script before every deploy : Yes

? What script should be run before every deploy? npm ci && npm run build

? GitHub workflow file for PR previews exists. Overwrite? firebase-hosting-pull-request.yml No

? Set up automatic deployment to your site’s live channel when a PR is merged? Yes

? What is the name of the GitHub branch associated with your site’s live channel? main

? The GitHub workflow file for deploying to the live channel already exists. Overwrite? firebase-hosting-merge.yml No

Lastly if you see the following messages, congratulations you made

For the full command logs, please see below.

At this stage, you will see two .yml files created for the GitHub Actions workflows under your project folder .github/worklows

Go into each of these two .yml files, edit this run step under build_and_deploy job. Edit to run: echo “hello this is the test”

🔶 Deploy live & preview channels via GitHub pull requests

Yesterday after completing the configurations, I was struggling with figuring out all the steps to test it out. After trials and errors and with some help, I managed to nail it! Here is my 12-steps workflow to deploy the current state of your GitHub repo to your live channel when the PR is merged.

My 12-Steps Workflow

#12-Steps Workflow : Deploy the current state of your GitHub repo to your live channel when the PR is mergedSTART1. git status -> see remote has change or not? If branch is behind 'origin/main' -> go to step 2. If up to date -> skip step 2
2. git pull 
3. git checkout -b <your new branch name>
4. make your changes 
5. git status
6. git add <relevant files>
7. git commit -m "your-message"
8. git push -u origin <branch name>
9. create remote Merge Request(MR) / Pull Request(PR)
10. Make sure all Github Actions checks PASSED
11. Merge to main branch
12. git checkout mainEND

Demo

I created a dummy change by giving two extra empty lines, starting at line 3 in my index.html . To test out if this automatic deployment works, I don’t want my change to affect anything to the current web UI. Then I follow my 12-Steps workflow.

… Then at step 9. create remote Merge Request(MR) / Pull Request(PR), click Create pull request

Step 10. Make sure all Github Actions checks PASSED

Here you see github-actions bot has added a comment with a preview URL of the website.

Moving on to step 11, merge pull request to main branch to trigger production deployment. Click Merge pull request you see the green button above in my screenshot? This will trigger another workflow in GitHub Actions. To see this, navigate to Actions tab and monitor the build progress.

And lastly in your terminal, git checkout main to end the workflow. For a new change, repeat the 12-steps workflow starting from step 1.

🔶 Wrapping up

In this episode, I’ve covered how I configured and integrated GitHub Actions for automatic deployment of my website to Firebase Hosting. The prerequisite for this auto deploy is deploy to Firebase Hosting which you can find my step-by-step guide here. After that, I also walked you through my 12-Steps Workflow to create a pull request to preview the changes of my website before going live. In the meantime, you can also visit my personal website here.

Objectives and Prerequisites

✅ Deploy simple static personal website to Firebase. Read my guide at here.

✅ Setting up GitHub Actions with Firebase Hosting

✅ Deploy live & preview channels via GitHub pull requests