Deploying Your Website to Firebase Hosting from GitHub

Deploying Your Website to Firebase Hosting from GitHub

Firebase Hosting provides a convenient platform for hosting web applications, and GitHub is a popular platform for version control and collaboration. Combining these two services allows you to easily deploy your website hosted on Firebase using source code from a GitHub repository. In this guide, we’ll walk through the steps to achieve this seamless deployment workflow.

Prerequisites

Before we get started, make sure you have the following prerequisites in place:

• A Firebase project set up on the Firebase Console.
• The Firebase CLI installed on your local development machine. You can install it using `npm install -g firebase-tools`.
• A GitHub repository containing your website’s source code.

Step 1: Initialize Firebase Hosting

First, you’ll need to initialize Firebase Hosting for your project:

firebase login

This command will prompt you to log in to Firebase using your Google account. Make sure to use the same Google account associated with your Firebase project.

Next, navigate to your project’s root directory and run the following command:

firebase init hosting

This command will guide you through the setup process, allowing you to select your Firebase project and configure your hosting settings.

Step 2: Connect GitHub Repository

In the Firebase project directory, open the firebase.json file. This file contains your project's configuration settings. Add the following configuration to specify the GitHub repository you want to deploy from:

"hosting": {
  // ... other hosting settings
  "github": {
    "repo": "github-username/repo-name",
    "branch": "main" // or specify your desired branch
  }
}

Replace "github-username/repo-name" with the actual GitHub username and repository name you want to use.

Step 3: Authenticate with Firebase

To authenticate with Firebase, you’ll need to generate a Firebase CI token:

firebase login:ci

This command will open a browser window, allowing you to authenticate your Firebase CLI with your Google account and generate a CI token. Keep this token handy, as you’ll need it in the next steps.

Step 4: Set Up GitHub Actions (Optional)

To automate the deployment process, you can set up a GitHub Actions workflow that deploys your website to Firebase Hosting whenever changes are pushed to your GitHub repository. Create a .github/workflows/firebase-hosting-deploy.yml file with the following content:

name: Deploy to Firebase Hosting

on:
  push:
    branches:
      - main # Change this to your desired branch

jobs:
  build:
    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'

      - name: Install Firebase CLI
        run: npm install -g firebase-tools

      - name: Authenticate with Firebase
        run: firebase login:ci
        env:
          FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}

      - name: Deploy to Firebase Hosting
        run: firebase deploy --only hosting

Make sure to add a secret named FIREBASE_TOKEN to your GitHub repository with the Firebase authentication token obtained in step 3.

Step 5: Push to GitHub

Commit and push your code to your GitHub repository to trigger the GitHub Actions workflow you set up (if applicable) or to deploy manually using the Firebase CLI.

Step 6: Deployment

Firebase will now deploy your website to Firebase Hosting using the code from your GitHub repository whenever changes are pushed to the specified branch. You can access your deployed site at the Firebase Hosting URL.

That’s it! You’ve successfully set up a seamless deployment workflow for your website hosted on Firebase Hosting using GitHub as your version control system. Happy coding!