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 (distfor Vue CLI). -
ignore: Skips config and hidden files. -
rewrites: Routes all URLs toindex.htmlfor 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
- In Firebase Console, go to Project settings > Service accounts.
- Click Generate new private key to download a JSON file (e.g.,
your-project-id-firebase-adminsdk-xyz.json). - 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
- Go to your GitHub repo:
https://github.com/your-org/your-repo. - Navigate to Settings > Secrets and variables > Actions > New repository secret.
- Name it
FIREBASE_SERVICE_ACCOUNT_YOUR_PROJECT_ID(e.g.,FIREBASE_SERVICE_ACCOUNT_FINAGLE_PMS_TEST). - 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 buildlocally to debug. -
404 on routes? Verify
rewritesinfirebase.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
Udara Dananjaya | Sciencx (2025-10-27T05:07:08+00:00) Effortless Vue.js Deployment with Firebase Hosting and GitHub Actions (No firebase-tools). Retrieved from https://www.scien.cx/2025/10/27/effortless-vue-js-deployment-with-firebase-hosting-and-github-actions-no-firebase-tools/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.