██FR█████ █INTELL███████████

Effortless Vue.js Deployment with Firebase Hosting and GitHub Actions (No firebase-tools)


This content originally appeared on DEV Community and was authored by Udara Dananjaya

Effortless Vue.js Deployment with Firebase Hosting and GitHub Actions

Deploying a web app shouldn’t feel like wrestling a bear. For my financial project management system (PMS) built with Vue.js, I wanted a fast, automated deployment pipeline using Firebase Hosting and GitHub Actions—without the firebase-tools npm package. This approach keeps things lightweight, skips extra dependencies, and gives you full control. Whether you’re deploying a Vue.js app or any static site (React, Angular, Svelte, you name it), this guide will get you a seamless CI/CD setup.

TL;DR

Set up automated deployments to Firebase Hosting using GitHub Actions, no firebase-tools required. Manually configure Firebase, create a single GitHub Actions workflow, and use a service account for preview and live deploys. Perfect for fast, cost-free pipelines.

Why This Setup?

Firebase Hosting offers a global CDN, free SSL, and a generous free tier (10GB storage, 360MB/day transfer). GitHub Actions provides 2,000 free CI/CD minutes/month for public repos. Together, they deliver instant previews on pull requests and live deploys on merge—all without installing extra npm packages.

Prerequisites

  • Node.js and npm (for npm run build).
  • A GitHub repo with a static site (e.g., Vue.js outputting to dist).
  • A Firebase project (Firebase Console).
  • A Firebase service account JSON key.
  • A local Git repo synced with GitHub.

Step 1: Configure Firebase Hosting Manually

No Firebase CLI? No problem. We’ll set up Hosting with two simple files.

Create firebase.json

In your project root, add firebase.json:

{
  "hosting": {
    "public": "dist",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}
  • public: Points to your build output (dist for Vue CLI).
  • ignore: Skips config and hidden files.
  • rewrites: Routes all URLs to index.html for single-page apps.

Create .firebaserc

Link your project to Firebase:

{
  "projects": {
    "default": "your-project-id"
  }
}

Find your project ID in Firebase Console > Project settings > General (e.g., finagle-pms-test).

Update .gitignore

Add:

.firebase/
.firebaserc
node_modules/

This keeps sensitive files out of GitHub.

Get a Service Account Key

  1. In Firebase Console, go to Project settings > Service accounts.
  2. Click Generate new private key to download a JSON file (e.g., your-project-id-firebase-adminsdk-xyz.json).
  3. Store it securely—you’ll need it for GitHub Actions.

Step 2: Test Your Build

Run:

npm run build

Check that it generates a dist folder with index.html and assets. This is your app’s static output, ready for Firebase Hosting.

Step 3: Set Up GitHub Actions CI/CD

We’ll use a single workflow to handle both pull request previews and live deploys.

Add Service Account to GitHub Secrets

  1. Go to your GitHub repo: https://github.com/your-org/your-repo.
  2. Navigate to Settings > Secrets and variables > Actions > New repository secret.
  3. Name it FIREBASE_SERVICE_ACCOUNT_YOUR_PROJECT_ID (e.g., FIREBASE_SERVICE_ACCOUNT_FINAGLE_PMS_TEST).
  4. Paste the service account JSON content.

Create Workflow

In .github/workflows/firebase-hosting.yml, add:

name: Deploy to Firebase Hosting

on:
  push:
    branches:
      - main
  pull_request:
    branches:
      - main

permissions:
  checks: write
  contents: read
  pull-requests: write

jobs:
  build_and_deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'npm'
      - run: npm ci
      - run: npm run build
      - uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: '${{ secrets.GITHUB_TOKEN }}'
          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_YOUR_PROJECT_ID }}'
          projectId: your-project-id
          channelId: ${{ github.event_name == 'push' && 'live' || 'pr-${{ github.event.number }}' }}

Replace your-project-id with your Firebase project ID. This workflow:

  • Triggers on pushes to main (live deploy) or pull requests (preview).
  • Builds your app (npm run build).
  • Deploys to Firebase Hosting: live site for pushes, unique preview channels (e.g., pr-123) for PRs.

Note: Use Node.js 20 or adjust node-version to match your app’s requirements.

Step 4: Push and Test

Commit and push:

git add .
git commit -m "Add Firebase Hosting and GitHub Actions CI/CD"
git push origin main

Create a pull request to test the preview deploy. Check the Actions tab in GitHub for logs. Merge the PR to deploy live.

Step 5: Verify Deployment

  • Preview: Find the preview URL in the GitHub Actions logs (e.g., https://your-project-id--pr-123.web.app).
  • Live: Visit your live site (e.g., https://your-project-id.web.app) after merging.

Ensure all routes load correctly, handled by index.html.

Troubleshooting

  • Build fails? Run npm run build locally to debug.
  • 404 on routes? Verify rewrites in firebase.json.
  • Secret errors? Check the service account JSON in GitHub Secrets.
  • Permissions? Ensure the service account has Firebase Hosting Admin rights.
  • Environment variables? Add them to GitHub Secrets and reference in the workflow (e.g., env: VUE_APP_API_KEY: ${{ secrets.VUE_APP_API_KEY }}).

Why This Wins

This setup is lean, dependency-free, and cost-effective. Firebase’s free tier and GitHub Actions’ free minutes make it ideal for indie devs or small teams. Preview channels catch issues before they hit production, and live deploys are lightning-fast.

What’s your favorite deployment trick? Share your CI/CD setup in the comments!

Originally published on October 27, 2025. Built with Vue.js and Firebase Hosting.


This content originally appeared on DEV Community and was authored by Udara Dananjaya