Using GitHub Actions to deploy an static site to Firebase

As I mentioned in a previous post, I'm now using GitHub Actions to deploy this blog into Firebase static web sites. Even when deploying to firebase it's not a hard tasks, I prefer to do it with a simple git push and ensure that everything will work as expected. In this post, I will share how to set up a GitHub Actions workflow to deploy an static site to Firebase.

Setting up everything

First, we need to set up Firebase. If you haven't already done so, go to the Firebase console and create a new project.

Once you have created a new project, you will need to install the Firebase CLI. You can do this by running the following command in your terminal:

npm install -g firebase-tools

After the Firebase CLI is installed, log in to your Firebase account by running the following command.

firebase login

Then, you need to set up Firebase Hosting. To do that just type the following and follow the steps which will automatically take care of setting up the GitHub Action.

firebase init hosting

This command configure your accounts by creating a service account in firebase with the necessary perfmisions to deploy to firebase hosting and also encrypts that service account's JSON key and configure a GitHub secret with it. Finally, it creates two GitHub workflows files. And just like that, you will have everything ready to start deploying every time you push to your repository.

The GitHub Actions

By running the previous steps, you will end up with a .github/workflows folder with two files. The firebase-hosting-merge.yaml is used when you merge to main and looks like the following.

name: Deploy to Firebase Hosting on merge
"on":
  push:
    branches:
      - main
jobs:
  build_and_deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - run: npm ci && npm run export
      - uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: "${{ secrets.GITHUB_TOKEN }}"
          firebaseServiceAccount: "${{ secrets.FIREBASE_SERVICE_ACCOUNT }}"
          channelId: live
          projectId: { your-project-id }

It have three steps, the repository checkout, then in my case, Iit runs run npm ci && npm run export to install all the dependencies and then execute the export npm script which builds the site and perform a few other scripts. Finally, it uses the FirebaseExtended/action-hosting-deploy@v0 action which will deploy the site to the live channel. Note that all the secrets were created by the firebase init hosting command.

Regarding the export script, I mentioned that it perform other tasks as well. The following is part of my package.json that shows the tasks that are being run.

"scripts": {
    "precopyimages": "tsc ./scripts/copy-imgs.ts --esModuleInterop",
    "copyimages": "node ./scripts/copy-imgs.js",
    "prebuild": "npm run copyimages",
    "build": "next build",
    "postbuild": "next-sitemap",
    "preexport": "npm run build",
    "export": "next export",
  },

You can see that I use the pre and post scripts to run other stuff, for example, before exporting, I'm running npm run build which runs npm run copyimages before running and next-sitemap after running. The copy images scripts it's a simple script that just copy the images from the posts folder to the public folder and next-sitemap as you can guess, creates a sitemap.xml.

Going back to the workflows, the other yaml file named firebase-hosting-pull-request.yaml is very similar but targets the pull request targeting your main branch and the only real difference is that it doesn't have the channelId: live configuration which means that it will create a preview site in firestore.

You can find more information on this GitHub action in the marketplace site.

Conclusion

In this tutorial, we have walked through the process of setting up a GitHub Actions workflow to deploy an static site to Firebase. GitHub Actions makes it easy to automate the deployment process, freeing up time for other tasks. With this knowledge, you can deploy your static sites to Firebase quickly and easily, ensuring that your site is always up-to-date. Not only that, but you can also have preview deployments which is a super powerfull tool to test everything.

Of course, this tutorial only scratches the surface of what is possible with GitHub Actions. You can use GitHub Actions to automate a wide variety of tasks, from running tests to deploying to multiple environments. With a little creativity, you can automate almost any task in your development workflow.

So why not give GitHub Actions a try? It may just save you hours of manual work and streamline your development process. Happy coding!