Setup Ci For Firebase Hosting Deployment

Automating your deployment process is essential for a smooth workflow, especially when working with Firebase Hosting. This guide will walk you through setting up Continuous Integration (CI) to ensure your changes are tested and deployed automatically.

Prerequisites

Before diving into the setup, ensure you have the following:

1. Firebase Account: You need a Firebase account with a project created. If you haven’t set this up yet, head over to the Firebase Console and create a new project.

2. Firebase CLI: Install the Firebase CLI globally on your machine. This tool is crucial for managing your Firebase projects from the command line. Use the following command:

   npm install -g firebase-tools

3. CI/CD Provider Account: Choose a CI/CD provider such as GitHub Actions, GitLab CI/CD, or Bitbucket Pipelines. This guide will include examples for these platforms.

Step 1: Set Up Firebase Hosting

Initialize Firebase in Your Project

Navigate to your project directory in the terminal and run:

firebase init hosting

During this setup process, you will be prompted to select your Firebase project and specify the public directory (commonly public). Ensure that your firebase.json file is configured correctly according to your hosting needs.

Configure Firebase Hosting

Make sure your firebase.json file contains the necessary configuration for your hosting setup. This file will define your site's hosting settings, such as rewrites, redirects, and the public directory.

Step 2: Configure Environment Variables

For the CI/CD process to securely deploy to Firebase, you need to set up some environment variables.

Create a Firebase Token

To allow your CI/CD pipeline to interact with Firebase, generate a Firebase token by running:

firebase login:ci

After logging in, this command will generate a token. Copy this token; you will need it to authenticate your deployments.

Add Environment Variables

You need to add the Firebase token as an environment variable in your CI/CD provider.

• For GitHub Actions:

  1. Go to your repository settings.
  2. Navigate to "Secrets and variables" > "Actions".
  3. Click on "New repository secret".
  4. Name it FIREBASE_TOKEN and paste the copied token.

• For GitLab CI/CD:

  1. Go to your project settings.
  2. Navigate to "CI / CD" > "Variables".
  3. Click on "Add Variable".
  4. Name it FIREBASE_TOKEN and paste the token.

• For Bitbucket Pipelines:

  1. Go to your repository settings.
  2. Navigate to "Repository settings" > "Pipeline" > "Environment Variables".
  3. Add FIREBASE_TOKEN and paste the token.

Step 3: Set Up CI/CD Pipeline

Example with GitHub Actions

Create a new workflow file in your repository at .github/workflows/firebase-hosting.yml:

name: Deploy to Firebase Hosting

on:
  push:
    branches:
      - main  # Adjust as needed for your default branch

jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout code
        uses: actions/checkout@v2

      - name: Set up Node.js
        uses: actions/setup-node@v2
        with:
          node-version: '14'  # Change to your preferred Node.js version

      - name: Install dependencies
        run: npm install

      - name: Build the project
        run: npm run build  # Adjust if your build command is different

      - name: Deploy to Firebase Hosting
        run: |
          npm install -g firebase-tools
          firebase deploy --token ${{ secrets.FIREBASE_TOKEN }}

Example with GitLab CI/CD

Create a file named .gitlab-ci.yml in your project root:

stages:
  - deploy

deploy:
  stage: deploy
  image: node:14  # Change to your preferred Node.js version
  script:
    - npm install
    - npm run build  # Adjust if your build command is different
    - npm install -g firebase-tools
    - firebase deploy --token $FIREBASE_TOKEN
  only:
    - main  # Adjust as needed

Example with Bitbucket Pipelines

Create a file named bitbucket-pipelines.yml:

image: node:14  # Change to your preferred Node.js version

pipelines:
  default:
    - step:
        name: Deploy to Firebase Hosting
        script:
          - npm install
          - npm run build  # Adjust if your build command is different
          - npm install -g firebase-tools
          - firebase deploy --token $FIREBASE_TOKEN

Step 4: Commit and Push Changes

Once you’ve set up your CI/CD configuration files, commit and push your changes to your repository. This action should trigger the CI/CD pipeline automatically based on your configuration.

Step 5: Monitor Your Deployment

After pushing your changes, you can monitor the deployment process through your CI/CD provider's interface. Look for any logs or error messages to troubleshoot any issues that may arise during the deployment process.

Conclusion

By following these steps, you’ve successfully automated your Firebase Hosting deployment process using Continuous Integration. Now, every time you push changes to your specified branch, the CI/CD pipeline will build and deploy your project automatically. This setup not only saves time but also ensures that your deployments are consistent and reliable.

Feel free to customize the configurations and scripts to fit the specific requirements of your project, and happy coding!