Firebase

How to deploy Firebase Hosting using GitHub Actions?

Discover the easiest way to deploy Firebase Hosting with GitHub Actions. Follow this guide for step-by-step instructions to ensure smooth CI/CD integration.

Developer profile skeleton
a developer thinking

Overview

Deploying Firebase Hosting with GitHub Actions makes publishing your web app a breeze whenever there's a new push to your repo. This method taps into a Continuous Integration/Continuous Deployment (CI/CD) pipeline, courtesy of GitHub Actions. It ensures your site on Firebase stays current without needing anyone to manually intervene. By embedding Firebase CLI commands into GitHub's workflow YAML files, the deployment process gets streamlined, efficiency goes up, and you can pour more energy into actual development rather than repetitive deployment. This guide lays out the prerequisites, configuration steps, and some best practices to effortlessly mesh Firebase with GitHub Actions.

Get a Free No-Code Consultation
Meet with Will, CEO at Bootstrapped to get a Free No-Code Consultation
Book a Call
Will Hawkins
CEO at Bootstrapped

How to deploy Firebase Hosting using GitHub Actions?

Step 1: Set Up Firebase Project

  1. Head over to the Firebase Console.
  2. Click "Add Project" and just follow the steps to create a new Firebase project.
  3. Once your project is up, click on "Hosting" from the left sidebar and hit "Get Started".
  4. Follow the instructions to set up Firebase Hosting for your project.

Step 2: Install Firebase CLI

  1. Open your terminal.
  2. Install the Firebase CLI by running:
    ```bash
    npm install -g firebase-tools
    ```
  3. Log in to Firebase in your terminal:
    ```bash
    firebase login
    ```

Step 3: Initialize Firebase in Your Project

  1. Navigate to your project directory in your terminal.
  2. Initialize Firebase in your project:
    ```bash
    firebase init
    ```
  3. Follow the prompts to set up Firebase Hosting:
  • Select “Hosting” and press Enter.
  • Select the Firebase project you created earlier.
  • Choose your default public directory (like "dist" or "public").
  • Configure as a single-page app if necessary (most cases select "Yes").

Step 4: Push Your Code to GitHub

  1. Create a new repository on GitHub.
  2. Initialize a local Git repository if it doesn't already exist:
    ```bash
    git init
    ```
  3. Add the GitHub repository as a remote:
    ```bash
    git remote add origin
    ```
  4. Add all files and commit:
    ```bash
    git add .
    git commit -m "Initial commit"
    ```
  5. Push your code to GitHub:
    ```bash
    git push -u origin main
    ```

Step 5: Create GitHub Actions Workflow

  1. In your project directory, create a .github/workflows directory.

  2. Inside .github/workflows, create a file named firebase-hosting.yml.

  3. Add the following content to firebase-hosting.yml file:
    ```yaml
    name: Deploy to Firebase Hosting

    on:
    push:
    branches:
    - main
    jobs:
    build:
    runs-on: ubuntu-latest

    steps:

    • name: Checkout repository
      uses: actions/checkout@v2

    • name: Install Node.js
      uses: actions/setup-node@v2
      with:
      node-version: '14'

    • name: Install dependencies

      run: |
        npm install
    
    • name: Build project
      run: |
      npm run build

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

    ```

Step 6: Set Up Firebase Token Secret

  1. Retrieve a Firebase token:
    ```bash
    firebase login:ci
    ```
  2. Copy the generated token.
  3. Go to your GitHub repository, click on "Settings" > "Secrets and variables" > "Actions".
  4. Click "New repository secret".
  5. Enter FIREBASE_TOKEN as the name and paste your Firebase token as the value.
  6. Click "Add secret".

Step 7: Trigger the Workflow

  1. Make a change to your code or simply push to the main branch to trigger the workflow:
    ```bash
    git add .
    git commit -m "Deploy via GitHub Actions"
    git push origin main
    ```
  2. Go to the "Actions" tab in your GitHub repository to monitor the deployment progress.

By following these steps, Firebase Hosting will be automatically deployed using GitHub Actions whenever changes are pushed to the main branch.

Explore more Firebase tutorials

Complete Guide to Firebase: Tutorials, Tips, and Best Practices

Explore our Firebase tutorials directory - an essential resource for learning how to create, deploy and manage robust server-side applications with ease and efficiency.

Why are companies choosing Bootstrapped?

40-60%

Faster with no-code

Nocode tools allow us to develop and deploy your new application 40-60% faster than regular app development methods.

90 days

From idea to MVP

Save time, money, and energy with an optimized hiring process. Access a pool of experts who are sourced, vetted, and matched to meet your precise requirements.

1 283 apps

built by our developers

With the Bootstrapped platform, managing projects and developers has never been easier.

hero graphic

Our capabilities

Bootstrapped offers a comprehensive suite of capabilities tailored for startups. Our expertise spans web and mobile app development, utilizing the latest technologies to ensure high performance and scalability. The team excels in creating intuitive user interfaces and seamless user experiences. We employ agile methodologies for flexible and efficient project management, ensuring timely delivery and adaptability to changing requirements. Additionally, Bootstrapped provides continuous support and maintenance, helping startups grow and evolve their digital products. Our services are designed to be affordable and high-quality, making them an ideal partner for new ventures.

Engineered for you

1

Fast Development: Bootstrapped specializes in helping startup founders build web and mobile apps quickly, ensuring a fast go-to-market strategy.

2

Tailored Solutions: The company offers customized app development, adapting to specific business needs and goals, which ensures your app stands out in the competitive market.

3

Expert Team: With a team of experienced developers and designers, Bootstrapped ensures high-quality, reliable, and scalable app solutions.

4

Affordable Pricing: Ideal for startups, Bootstrapped offers cost-effective development services without compromising on quality.

5

Supportive Partnership: Beyond development, Bootstrapped provides ongoing support and consultation, fostering long-term success for your startup.

6

Agile Methodology: Utilizing agile development practices, Bootstrapped ensures flexibility, iterative progress, and swift adaptation to changes, enhancing project success.

Yes, if you can dream it, we can build it.