Automating Firebase Deployment with GitHub Actions: A Complete Guide

Automating Firebase Deployment with GitHub Actions

The deployment automation has become an essential requirement. In this article, we’ll explore in detail how to set up a robust CI/CD pipeline using GitHub Actions to automatically deploy an application to Firebase Hosting.

This automation workflow consists of three main stages: build, test, and deployment. This architecture not only ensures code quality but also significantly simplifies the production deployment process. Whether you’re a beginner or an experienced developer, understanding this pipeline will help you optimize your deployment process.

Workflow Structure and Configuration

The workflow is triggered on every push to the master branch, ensuring effective continuous integration. Let’s examine the configuration file structure:

name: Firebase Deployment
on:
  push:
    branches:
      - master

This simple yet powerful configuration defines our pipeline trigger. The workflow is organized into three distinct jobs:

1. Build: Compilation and artifact preparation
2. Test: Automated test execution
3. Deploy: Deployment to Firebase Hosting

This separation into independent jobs offers several advantages:

• Clear isolation of responsibilities
• Ability to re-run only failed steps
• Better pipeline status visibility

Each job runs in the latest Ubuntu environment, ensuring optimal compatibility and stability.

The Build Process in Detail

The build job is the first crucial step in our pipeline. Let’s analyze each step:

jobs:
  build:
    name: Build
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Repo
        uses: actions/checkout@v3
      - name: Install Dependencies
        run: npm install --legacy-peer-deps --force
      - name: Build
        env:
          CI: false
        run: npm run build

Code Checkout

The checkout@v3 action retrieves the source code from the repository. This recent version of the action ensures optimal compatibility and improved performance.

Dependencies Installation

The npm install command is executed with two important flags:

• --legacy-peer-deps: Handles dependency conflicts
• --force: Forces installation in case of minor conflicts

Application Build

The build runs with CI: false to prevent interruptions due to warnings. The generated artifacts are then saved:

- name: Archive Production Artifact
        uses: actions/upload-artifact@v3
        with:
          name: build
          path: build

This step is crucial as it allows sharing the compiled files with the deployment job.

Tests and Validation

The test job serves as our second line of defense for ensuring code quality:

test:
    name: Test
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Repo
        uses: actions/checkout@v3
      - name: Install Dependencies for Testing
        run: npm install --legacy-peer-deps --force
      - name: Run Tests
        run: npm test

This straightforward configuration enables:

• Unit test execution
• Functionality validation
• Regression testing

Running tests in parallel with the build optimizes the total pipeline execution time. If tests fail, deployment is automatically blocked, ensuring that no faulty code reaches the production environment.

Deployment to Firebase

The deployment represents the final stage of our pipeline. This phase only executes if both build and test jobs have succeeded:

deploy:
    name: Deploy
    needs: [build, test]
    runs-on: ubuntu-latest

Authentication Setup

Security is paramount during deployment. The workflow uses a Google Cloud service key file:

- name: Create SA key file
        run: |
          echo '${{ secrets.GOOGLE_APPLICATION_CREDENTIALS }}' > ${{ github.workspace }}/sa-key.json

Artifact Recovery and Deployment

The process occurs in several steps:

1. Build artifact recovery
2. Firebase credentials configuration
3. Deployment to Firebase Hosting

- name: Deploy to Firebase
        uses: w9jds/firebase-action@master
        with:
          args: deploy --only hosting
        env:
          GOOGLE_APPLICATION_CREDENTIALS: ${{ github.workspace }}/sa-key.json

This configuration ensures a secure and reliable deployment of your application.

Best Practices and Tips

To get the most out of this GitHub Actions workflow for Firebase, here are some essential recommendations:

Security

Secrets Management

Always store credentials in GitHub secrets

Limit Firebase service account permissions

Implement regular key rotation

Project Configuration

Use .gitignore to exclude sensitive files

Verify Firebase security rules before each deployment

Performance Optimization

Cache npm dependencies to speed up builds

Use specific versions of GitHub actions

Limit the size of uploaded artifacts

Common Issues Resolution

Authentication Errors

Check service account permissions

Ensure secrets are properly configured

Build Failures

Use --legacy-peer-deps for dependency conflicts

Configure CI=false to handle warnings

Deployment Issues

Verify Firebase configuration

Ensure project is properly initialized

Complete GitHub Actions YAML for Firebase Hosting

name: Firebase Deployment

on:
  push:
    branches:
      - master

jobs:
  build:
    name: Build
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Repo
        uses: actions/checkout@v3

      - name: Install Dependencies
        run: npm install --legacy-peer-deps --force

      - name: Build
        env:
          CI: false
        run: npm run build

      - name: Archive Production Artifact
        uses: actions/upload-artifact@v3
        with:
          name: build
          path: build

  test:
    name: Test
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Repo
        uses: actions/checkout@v3

      - name: Install Dependencies for Testing
        run: npm install --legacy-peer-deps --force

      - name: Run Tests
        run: npm test

  deploy:
    name: Deploy
    needs: [build, test]
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Repo
        uses: actions/checkout@v3

      - name: Download Artifact
        uses: actions/download-artifact@v3
        with:
          name: build
          path: build

      - name: Create SA key file
        run: |
          echo '${{ secrets.GOOGLE_APPLICATION_CREDENTIALS }}' > ${{ github.workspace }}/sa-key.json

      - name: Deploy to Firebase
        uses: w9jds/firebase-action@master
        with:
          args: deploy --only hosting
        env:
          GOOGLE_APPLICATION_CREDENTIALS: ${{ github.workspace }}/sa-key.json

Following these best practices will help you optimize your deployment pipeline while maintaining high security standards.