Deploying a React App with GitHub Actions and Firebase Hosting: A Beginner’s Guide

Introduction:

In this beginner-friendly tutorial, you’ll learn how to deploy your React app using GitHub Actions with Firebase Hosting. We’ll take you through each step, explaining in detail, so you can easily follow along and deploy your app with confidence.

Step 1: Set Up Your GitHub Repository

1. Create a new GitHub repository and clone it to your local machine.
2. Create a new React app in the cloned repository using the following command:

npm init react-app my-app

Step 2: Create a Firebase Project and Install Firebase Tools

1. Head to Firebase and create a new project for hosting your React app.
2. Ensure that you have Firebase Tools installed on your system by running:

npm install -g firebase-tools

Step 3: Obtain Firebase Authentication Token

1. Check if you are already logged into Firebase by using the command:

firebase login:list

2. If not logged into the desired account, log in using:

firebase logout
firebase login:ci

3. Follow the authentication process to obtain a Firebase token, which we’ll use later for deployment.

Step 4: Initialize Firebase and Configure Hosting

1. Initialize your Firebase project by running:

firebase init

2. Select “Hosting: Configure files for Firebase Hosting” and optionally set up GitHub Action deploys.

3. Answer a series of questions to configure hosting options for your app.

What do you want to use as your public directory? build 
Configure as a single-page app (rewrite all URLs to /index.html)? Y
Set up automatic builds and deploys with GitHub? N

Step 5: Setting Up GitHub Actions for Continuous Deployment

1. Create a .github directory at the root of your project.
2. Inside the .github directory, create a workflows directory.
3. In the workflows directory, create a file named main.yml and paste the following configuration:

name: Firebase Deployment
on:
  push:
    branches:
      - main
jobs:
  build:
    name: Build
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Repo
        uses: actions/checkout@v2.3.2
      - name: Install Dependencies
        run: npm install
      - name: Build
        env:
          CI: false
        run: npm run build
      - name: Archive Production Artifact
        uses: actions/upload-artifact@v2
        with:
          name: build
          path: build
  deploy:
    name: Deploy
    needs: build
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Repo
        uses: actions/checkout@v2.3.2
      - name: Download Artifact
        uses: actions/download-artifact@v2
        with:
          name: build
          path: build
      - name: Deploy to Firebase
        uses: w9jds/firebase-action@master
        with:
          args: deploy --only hosting
        env:
          FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}

Step 6: Add Firebase Token as a GitHub Secret

1. Go to your GitHub repository and click on “Settings.”
2. On the left side, click on “Secrets” and then “New repository secret.”
3. In the “Name” field, type FIREBASE_TOKEN, and in the "Value" field, paste the Firebase token obtained earlier.
4. Click “Add secret” to save it securely.

Step 7: Deploying Your React App

1. Push the changes to GitHub, and you’ll notice the automated deployment process triggering automatically.
2. Once the process is completed, go to your Firebase project’s Hosting section to find the URL of your deployed React app.
3. Anytime you make changes to your code and push them to GitHub, the deployment process will automatically trigger again.

Conclusion:

Congratulations! You’ve successfully deployed your React app using GitHub Actions with Firebase Hosting. Now you can share your app with the world and continue to make updates effortlessly.

Happy coding!

Youtube: https://www.youtube.com/@anishintech