DEV Community

Udara Dananjaya
Udara Dananjaya

Posted on

Automating Deployment of Your Vue.js App to Firebase Hosting with GitHub Actions

#github #vue #cicd #tutorial

In the fast-paced world of web development, efficiency is key. As a developer working on a Process management system (PMS) for a industrial application, I needed a reliable way to deploy updates seamlessly. Manually deploying changes to production can be error-prone and time-consuming. That's where continuous integration and deployment (CI/CD) comes in. By integrating Firebase Hosting with GitHub Actions, I set up an automated pipeline that builds and deploys my Vue.js app on every pull request and merge. This ensures previews for reviews and live updates without lifting a finger.

In this article, I'll walk you through the exact steps I followed to achieve this setup. We'll cover installing tools, authenticating with Firebase and GitHub, initializing the project, and configuring workflows. By the end, you'll have a fully automated deployment process for your own static web app.

Prerequisites

Before diving in, ensure you have:

  • Node.js and npm installed on your machine.
  • A GitHub account with a repository for your project (mine was a Vue.js-based PMS, but this works for any static site generator).
  • A Firebase project set up in the Firebase Console.
  • Your app built with a command like npm run build that outputs to a dist folder (common for Vue CLI projects).

If your project isn't already in a Git repository, initialize one with git init and push it to GitHub.

Step 1: Install Firebase Tools

Firebase CLI is the command-line interface that makes interacting with Firebase projects straightforward. Open your terminal in the project root directory (e.g., your deployment folder) and run:

npm install firebase-tools
Enter fullscreen mode Exit fullscreen mode

This command installs the Firebase tools globally or locally. You'll see output like:

npm warn deprecated node-domexception@1.0.0: Use your platform's native DOMException instead
added 745 packages in 39s
81 packages are looking for funding
run `npm fund` for details
Enter fullscreen mode Exit fullscreen mode

The deprecation warning is harmless—it's just advising on a minor dependency. Once installed, you're ready to authenticate.

Step 2: Authenticate with Firebase

Firebase requires authentication to manage projects. First, check your current login status:

npx firebase login
Enter fullscreen mode Exit fullscreen mode

If you're already logged in (as I was initially), it will confirm that. To switch accounts or start fresh, log out:

npx firebase logout
Enter fullscreen mode Exit fullscreen mode 
+ Logged out from [your-previous-account]
Enter fullscreen mode Exit fullscreen mode

Now, log in again:

npx firebase login
Enter fullscreen mode Exit fullscreen mode

You'll encounter a few prompts during login:

  • Enable Gemini in Firebase features? This is an optional AI-powered feature for Firebase. I selected Yes to explore it, but choose based on your needs. Learn more about Gemini in Firebase.
  • Allow Firebase to collect CLI and Emulator Suite usage and error reporting information? This helps improve the tools. I selected Yes, in line with Google's privacy policy. You can always change this later by logging out and in again.

The CLI will open a browser for OAuth authentication. Visit the provided URL (something like https://accounts.google.com/o/oauth2/auth?...), sign in, and authorize. Success looks like:

Waiting for authentication...
+ Success! Logged in as [your-account]
Enter fullscreen mode Exit fullscreen mode

Step 3: Initialize Firebase in Your Project

With authentication complete, initialize Firebase Hosting in your project directory:

npx firebase init
Enter fullscreen mode Exit fullscreen mode

You'll see the Firebase ASCII art banner, followed by:

You're about to initialize a Firebase project in this directory: [your-project-path]
√ Are you ready to proceed? Yes
Enter fullscreen mode Exit fullscreen mode

Select features using spacebar and Enter. For Hosting:

√ Which Firebase features do you want to set up for this directory?
Press Space to select features, then Enter to confirm your choices.
◉ Hosting: Set up deployments for static web apps
Enter fullscreen mode Exit fullscreen mode

Project Setup

Associate your directory with a Firebase project:

=== Project Setup

First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add,

√ Please select an option: Use an existing project
√ Select a default Firebase project for this directory: [your-project-name] ([project-id])
Enter fullscreen mode Exit fullscreen mode

I chose an existing test project for safety.

Hosting Setup

Configure the public directory—the folder containing your built assets:

=== Hosting Setup

Your public directory is the folder (relative to your project directory) that will contain Hosting assets to be uploaded with firebase deploy.
If you have a build process for your assets, use your build's output directory.

√ What do you want to use as your public directory? dist
Enter fullscreen mode Exit fullscreen mode

For a single-page app (SPA) like Vue.js, rewrite all URLs to index.html to handle routing:

√ Configure as a single-page app (rewrite all urls to /index.html)? Yes
Enter fullscreen mode Exit fullscreen mode

This generates a firebase.json file with:

{
  "hosting": {
    "public": "dist",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}
Enter fullscreen mode Exit fullscreen mode

Step 4: Set Up Automatic Builds and Deploys with GitHub

The magic of CI/CD happens here. Firebase CLI can automate this with GitHub Actions.

√ Set up automatic builds and deploys with GitHub? Yes
Enter fullscreen mode Exit fullscreen mode

If your project isn't a Git repo yet:

+ Didn't detect a .git folder. Assuming [your-path] is the project root.
Enter fullscreen mode Exit fullscreen mode

Authorize GitHub:

+ Authorizing with GitHub to upload your service account to a GitHub repository's secrets store.
Visit this URL on this device to log in: [github-oauth-url]
Waiting for authentication...
+ Success! Logged into GitHub as [your-github-username]
Enter fullscreen mode Exit fullscreen mode

Specify your repository:

√ For which GitHub repository would you like to set up a GitHub workflow? (format: user/repository) [your-org/your-repo]
Enter fullscreen mode Exit fullscreen mode

Firebase creates a service account with Hosting admin permissions and uploads it as a GitHub secret (FIREBASE_SERVICE_ACCOUNT_[PROJECT-ID]). Manage secrets at https://github.com/[user/repo]/settings/secrets.

Configure the build:

√ Set up the workflow to run a build script before every deploy? Yes
√ What script should be run before every deploy? npm run build
Enter fullscreen mode Exit fullscreen mode

For live deploys:

+ Created workflow file [path]/.github/workflows/firebase-hosting-pull-request.yml
√ Set up automatic deployment to your site's live channel when a PR is merged? Yes
√ What is the name of the GitHub branch associated with your site's live channel? master
+ Created workflow file [path]/.github/workflows/firebase-hosting-merge.yml
Enter fullscreen mode Exit fullscreen mode

The CLI also writes:

  • firebase.json and .firebaserc for config.
  • Updates .gitignore to exclude Firebase files.
  • Notes on revoking authorizations if needed.

Finally:

+ Firebase initialization complete!
Enter fullscreen mode Exit fullscreen mode

Step 5: Push and Test the Workflows

Commit and push the new .github/workflows files to your repo:

git add .
git commit -m "Add Firebase Hosting CI/CD workflows"
git push origin master
Enter fullscreen mode Exit fullscreen mode

Create a pull request from a feature branch. Head to your repo's Actions tab—you'll see "Deploy to Firebase Hosting on PR" running. It:

  1. Checks out code.
  2. Sets up Node.js.
  3. Runs npm install and npm run build.
  4. Deploys to a preview URL.

Merge the PR, and "Deploy to Firebase Hosting on merge" triggers a production deploy.

Workflow Files Breakdown

The generated YAML files are straightforward. Here's a peek at firebase-hosting-merge.yml:

name: Deploy to Firebase Hosting on merge
'on':
  push:
    branches:
      - master
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 }}'
          channelId: live
          projectId: your-project-id
Enter fullscreen mode Exit fullscreen mode

The PR workflow is similar but deploys to a preview channel.

Troubleshooting Tips

  • No Git detected? Initialize Git first.
  • Auth issues? Run firebase logout and re-login.
  • Build fails? Ensure npm run build works locally and outputs to dist.
  • Secrets missing? Verify in GitHub Settings > Secrets and variables > Actions.
  • Vue-specific: If using Vue CLI, confirm your vue.config.js handles any Firebase env vars.

Why This Setup Rocks

This pipeline saved me hours on my PMS project. Previews catch issues early, and live deploys happen instantly on merge. Firebase Hosting is free for small projects, scales effortlessly, and includes global CDN + SSL. Pair it with GitHub Actions for zero-cost CI/CD.

Ready to automate? Follow these steps, and watch your deployments fly. If you hit snags, drop a comment below—what's your go-to deployment tool?

Originally published on October 15, 2025. Built with Vue.js and Firebase love.

Top comments (0)