If you’re looking to streamline your CI/CD pipeline for your Firebase-hosted applications, then integrating Firebase Hosting with GitHub Actions is a brilliant choice. This setup creates a seamless preview channel for every Pull Request (PR) in your GitHub repository, enabling reviewers to see changes in real-time. In this article, we will guide you through the setup process, usage, and some troubleshooting tips.

Getting Started

To begin, you’ll need to have your Firebase project set up. If you’re new to Firebase Hosting, here’s how you can initialize it:

• Run the command: firebase init hosting

If you’ve already set up Hosting, focus on the GitHub Action configuration by running:

• Run the command: firebase init hosting:github

Creating the Deployment Workflows

To harness the full power of Firebase Hosting GitHub Action, you’ll need to create two workflow files in your repository.

1. Deploy to a New Preview Channel for Every PR

Create or update the workflow file located at .github/workflows/deploy-preview.yml with the following content:

name: Deploy to Preview Channel
on: pull_request:
jobs:
  build_and_preview:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: ${{ secrets.GITHUB_TOKEN }}
          firebaseServiceAccount: ${{ secrets.FIREBASE_SERVICE_ACCOUNT }}
          expires: 30d
          projectId: your-Firebase-project-ID

2. Deploy to Your Live Channel on Merge

Next, set up the workflow for deploying to the live channel by creating or updating the file at .github/workflows/deploy-prod.yml with this content:

name: Deploy to Live Channel
on: push:
  branches:
    - main
jobs:
  deploy_live_website:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          firebaseServiceAccount: ${{ secrets.FIREBASE_SERVICE_ACCOUNT }}
          projectId: your-Firebase-project-ID
          channelId: live

Understanding the Code: An Analogy

Think of your Firebase Hosting setup like a stage performance. The workflows are the scripts that dictate how the actors (your code) behave. When a Pull Request is made (like a new script being introduced), the audience (reviewers) need to see a preview of the performance (the preview channel). Using GitHub Actions, whenever changes are made, the tools build and rehearse the play (preview build), ensuring every reviewer can witness the latest act seamlessly. When everyone gives the thumbs up and the PR is merged, it’s like the performance going live for everyone to enjoy!

Options You Have

When setting up your workflows, several options can fine-tune the deployment process for your needs:

• firebaseServiceAccount: A required string for your service account.
• repoToken: Automatically set to allow comments on PRs.
• expires: Time duration for the active preview channel.
• projectId: Your Firebase project ID.
• channelId: Leave blank for auto-generated channels.
• target: Specific site targeting if using multiple sites.
• entryPoint: The directory containing your configuration file.
• firebaseToolsVersion: Specify the version of firebase-tools you want to use.
• disableComment: Disable comments in the PR with the preview URL.

Troubleshooting Tips

If you face challenges during the setup or deployment process, here are some troubleshooting strategies:

• Ensure your Firebase CLI and GitHub Actions are set up correctly.
• Recheck your service account JSON key and ensure it’s stored as an encrypted secret.
• Review the syntax and indentation in your workflow files; YAML is sensitive to these!
• Verify if your project ID and secrets are correctly configured.

For more insights, updates, or to collaborate on AI development projects, stay connected with fxis.ai.

Conclusion

Deploying your Firebase apps and managing your review processes with GitHub Actions can significantly improve workflow efficiency. With this guide, you can create a streamlined setup that gives instant access to preview URLs, making reviews easier and quicker than ever.

At fxis.ai, we believe that such advancements are crucial for the future of AI, as they enable more comprehensive and effective solutions. Our team is continually exploring new methodologies to push the envelope in artificial intelligence, ensuring that our clients benefit from the latest technological innovations.