This content originally appeared on DEV Community and was authored by Udara Dananjaya
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 buildthat outputs to adistfolder (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
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
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
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
+ Logged out from [your-previous-account]
Now, log in again:
npx firebase login
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]
Step 3: Initialize Firebase in Your Project
With authentication complete, initialize Firebase Hosting in your project directory:
npx firebase init
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
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
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])
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
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
This generates a firebase.json file with:
{
"hosting": {
"public": "dist",
"ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
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
If your project isn't a Git repo yet:
+ Didn't detect a .git folder. Assuming [your-path] is the project root.
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]
Specify your repository:
√ For which GitHub repository would you like to set up a GitHub workflow? (format: user/repository) [your-org/your-repo]
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
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
The CLI also writes:
-
firebase.jsonand.firebasercfor config. - Updates
.gitignoreto exclude Firebase files. - Notes on revoking authorizations if needed.
Finally:
+ Firebase initialization complete!
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
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:
- Checks out code.
- Sets up Node.js.
- Runs
npm installandnpm run build. - 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
The PR workflow is similar but deploys to a preview channel.
Troubleshooting Tips
- No Git detected? Initialize Git first.
-
Auth issues? Run
firebase logoutand re-login. -
Build fails? Ensure
npm run buildworks locally and outputs todist. - Secrets missing? Verify in GitHub Settings > Secrets and variables > Actions.
-
Vue-specific: If using Vue CLI, confirm your
vue.config.jshandles 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.
This content originally appeared on DEV Community and was authored by Udara Dananjaya
Udara Dananjaya | Sciencx (2025-10-15T12:20:44+00:00) Automating Deployment of Your Vue.js App to Firebase Hosting with GitHub Actions. Retrieved from https://www.scien.cx/2025/10/15/automating-deployment-of-your-vue-js-app-to-firebase-hosting-with-github-actions/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.