How to deploy Vue app to Firebase
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Firebase Hosting provides fast, secure hosting for Vue applications with automatic SSL, global CDN, and zero configuration deployment. As the creator of CoreUI with 12 years of Vue.js development experience, I’ve deployed hundreds of Vue applications to Firebase, serving millions of users worldwide with instant deployments and built-in rollback capabilities.
The fastest approach uses Firebase CLI for automatic deployment from your project directory.
Install Firebase CLI
npm install -g firebase-tools
# Login to Firebase
firebase login
Initialize Firebase Project
# Navigate to your Vue project
cd my-vue-app
# Initialize Firebase
firebase init
# Select:
# - Hosting: Configure files for Firebase Hosting
# - Use existing project or create new one
# - Public directory: dist
# - Configure as SPA: Yes
# - Set up automatic builds: No (we'll build manually)
# - Overwrite index.html: No
Configure firebase.json
{
"hosting": {
"public": "dist",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
],
"headers": [
{
"source": "**/*.@(jpg|jpeg|gif|png|svg|webp)",
"headers": [
{
"key": "Cache-Control",
"value": "max-age=31536000"
}
]
},
{
"source": "**/*.@(js|css)",
"headers": [
{
"key": "Cache-Control",
"value": "max-age=31536000"
}
]
}
]
}
}
Build and Deploy
# Build production bundle
npm run build
# Deploy to Firebase
firebase deploy
# Output:
# ✔ Deploy complete!
# Hosting URL: https://your-project.web.app
Deploy to Specific Site
# List sites
firebase hosting:sites:list
# Deploy to specific site
firebase deploy --only hosting:my-site
Environment Variables
Create .env.production:
VITE_API_URL=https://api.example.com
VITE_FIREBASE_API_KEY=your-api-key
VITE_FIREBASE_AUTH_DOMAIN=your-app.firebaseapp.com
Access in Vue:
// src/firebase.js
import { initializeApp } from 'firebase/app'
const firebaseConfig = {
apiKey: import.meta.env.VITE_FIREBASE_API_KEY,
authDomain: import.meta.env.VITE_FIREBASE_AUTH_DOMAIN,
projectId: 'your-project-id',
storageBucket: 'your-project.appspot.com',
messagingSenderId: '123456789',
appId: '1:123456789:web:abcdef'
}
export const app = initializeApp(firebaseConfig)
Custom Domain
# Add custom domain
firebase hosting:sites:create your-domain-com
# Configure DNS:
# Add these records to your DNS provider:
# A @ 151.101.1.195
# A @ 151.101.65.195
# TXT @ firebase-verification-code
# Connect domain
firebase hosting:sites:connect your-domain.com
Or in Firebase Console:
- Go to Hosting
- Click “Add custom domain”
- Follow DNS configuration steps
Preview Channels
# Create preview deployment
firebase hosting:channel:deploy preview
# Output:
# ✔ Preview URL: https://your-project--preview-abc123.web.app
# Deploy specific branch
firebase hosting:channel:deploy staging --expires 7d
GitHub Actions Deployment
Create .github/workflows/firebase-hosting.yml:
name: Deploy to Firebase Hosting
on:
push:
branches:
- main
jobs:
build_and_deploy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- name: Install dependencies
run: npm ci
- name: Build
run: npm run build
- name: Deploy to Firebase
uses: FirebaseExtended/action-hosting-deploy@v0
with:
repoToken: '${{ secrets.GITHUB_TOKEN }}'
firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT }}'
channelId: live
projectId: your-project-id
Get service account:
firebase init hosting:github
Rollback Deployment
# List deployment history
firebase hosting:releases:list
# Rollback to previous version
firebase hosting:rollback
Or in Firebase Console:
- Go to Hosting → Release history
- Click “…” on previous release
- Select “Rollback”
Multi-Site Hosting
Update firebase.json:
{
"hosting": [
{
"target": "app",
"public": "dist",
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
},
{
"target": "admin",
"public": "admin-dist",
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
]
}
Deploy:
firebase deploy --only hosting:app
firebase deploy --only hosting:admin
Add Firebase Functions
# Initialize Functions
firebase init functions
# Install dependencies
cd functions
npm install
Create API function:
// functions/index.js
const functions = require('firebase-functions')
const express = require('express')
const app = express()
app.get('/api/users', (req, res) => {
res.json([
{ id: 1, name: 'John' },
{ id: 2, name: 'Jane' }
])
})
exports.api = functions.https.onRequest(app)
Update firebase.json:
{
"hosting": {
"public": "dist",
"rewrites": [
{
"source": "/api/**",
"function": "api"
},
{
"source": "**",
"destination": "/index.html"
}
]
}
}
Deploy:
firebase deploy --only functions,hosting
Best Practice Note
This is how we deploy CoreUI Vue templates to Firebase for global distribution with automatic SSL. Firebase Hosting provides instant deployments with rollback capabilities, making it perfect for production Vue applications. Always configure proper SPA routing rewrites, set cache headers for static assets, use preview channels for testing, and integrate with GitHub Actions for continuous deployment.
For production applications, consider using CoreUI’s Vue Admin Template which includes Firebase deployment configurations.
Related Articles
For other deployment options, check out how to deploy Vue app to Vercel and how to deploy Vue app to Netlify.
