1. Introduction

In this tutorial, you will learn how to automate your Firebase Hosting deployments using Continuous Integration/Continuous Deployment (CI/CD) pipelines. The goal is to set up a pipeline that automatically builds and deploys your app to Firebase Hosting whenever you push to your repository.

By the end of this tutorial, you will be able to:

• Understand the basics of CI/CD
• Set up a CI/CD pipeline for Firebase Hosting
• Automate the building and deployment of your Firebase web application

Prerequisites
- Basic understanding of Git and Github
- A Firebase project and familiarity with Firebase Hosting
- A Github account
- Basic knowledge of Node.js and npm

2. Step-by-Step Guide

2.1 Setting up the Firebase Project

1. Create a new project in the Firebase console.
2. Navigate to the "Hosting" section and follow the instructions to install Firebase CLI and initialize Firebase Hosting in your project.

2.2 Setting up the CI/CD Pipeline

We'll be using Github Actions for this tutorial:

1. In your Github repository, create a new file in the .github/workflows directory. You can name it firebase-hosting.yml.
2. In this file, write the workflow definition for the CI/CD pipeline.

3. Code Examples

Here's an example of a workflow definition:

name: Deploy to Firebase Hosting
on: 
  push: 
    branches: 
      - master

jobs:
  build_and_deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Repo
        uses: actions/checkout@v2

      - name: Install Dependencies
        run: npm ci

      - name: Build
        run: npm run build

      - name: Deploy to Firebase
        uses: w9jds/firebase-action@master
        with:
          args: deploy --only hosting
        env:
          FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}

This file does the following:

• It specifies that the workflow should run whenever code is pushed to the master branch.
• It specifies that the job should run on the latest version of Ubuntu.
• It checks out your repository using the checkout action.
• It installs all project dependencies with npm ci.
• It builds your project with npm run build.
• It deploys your project to Firebase Hosting.

The FIREBASE_TOKEN is a secret stored in your repository settings. You can generate it by running firebase login:ci in your terminal and copying the output token.

4. Summary

You've learned how to automate your Firebase Hosting deployments using CI/CD pipelines. You've set up a pipeline that automatically builds and deploys your app to Firebase Hosting whenever you push to your repository.

Next Steps

You can improve your workflow by adding testing and linting before the build step.

Additional Resources

• Github Actions Documentation
• Firebase Hosting Documentation

5. Practice Exercises

1. Modify the pipeline to run on a different branch.
2. Add a step to run tests before building the project.
3. Add a step to lint your code before testing.

Solutions and Explanations

1. In the workflow file, change the on.push.branches value to your chosen branch name.
2. Add a new step before the build step. Use run: npm test to run tests.
3. Add a new step before the test step. Use run: npm run lint to lint your code.

Tips for Further Practice

Try to automate other parts of your workflow, such as database migrations or cloud function deployments.