Skip to main content

How to Deploy a Vue.js Project on Firebase Hosting (Step-by-Step 2025 Guide)

By

Want to make your Vue.js web app live with just a few commands? In this tutorial, you’ll learn how to deploy a Vue 3 or Vue CLI project to Firebase Hosting—Google’s fast, secure, and globally distributed hosting service. We’ll cover everything from setup to troubleshooting, so even beginners can publish a Vue app on a custom HTTPS domain within minutes.

🎯 What You’ll Learn

  • Install and set up the Firebase CLI
  • Build your Vue.js project (Vite or Vue CLI)
  • Initialize Firebase Hosting
  • Deploy your project live
  • Fix common issues (404s, CLI errors, wrong folder, etc.)
  • Optional: Add custom domains & GitHub Actions for auto-deploy

🔥 Step 1: Prepare Your Environment

Before deploying, make sure you have these installed:

  • Node.js (version 18+ recommended)
  • npm (comes with Node)
  • Firebase CLI
npm install -g firebase-tools
firebase login

Once logged in, Firebase CLI will store your Google account credentials for future deployments.

💻 Step 2: Build Your Vue.js Project

If you’ve created your app with Vite (Vue 3 default):

npm run build

If you’re using Vue CLI (legacy projects):

npm run build

Both commands generate a dist/ folder containing production-ready static files.

🚀 Step 3: Initialize Firebase Hosting

In your Vue project root folder, run:

firebase init hosting

You’ll see interactive options:

  1. Select your Firebase project (or create a new one).
  2. Set the public directory to dist.
  3. Choose “Yes” when asked “Configure as a single-page app (rewrite all URLs to /index.html)?”

This creates two new files:

  • firebase.json — Hosting configuration
  • .firebaserc — Project alias reference

firebase.json Example

{
  "hosting": {
    "public": "dist",
    "ignore": ["**/.*", "**/node_modules/**"],
    "rewrites": [ { "source": "**", "destination": "/index.html" } ]
  }
}

This rewrite rule ensures Vue’s client-side routes don’t cause 404 errors when users refresh pages.

🌐 Step 4: Deploy to Firebase

firebase deploy

After a few seconds, you’ll get two live URLs like:

  • https://your-project.web.app
  • https://your-project.firebaseapp.com

Open your browser and visit your new website — your Vue app is live!

🔍 Step 5: Test Locally (Optional)

firebase emulators:start --only hosting

This command runs a local preview at http://localhost:5000 — helpful before pushing to production.

⚙️ Step 6: Add a Custom Domain (Optional)

In the Firebase console → Hosting → “Connect Custom Domain”, follow the guided steps to add DNS records. Within minutes, your app will be accessible at https://yourdomain.com.

🤖 Step 7: Automate Deployment (GitHub Actions)

If your code is on GitHub, you can enable automatic deployment each time you push to main:

firebase init hosting:github

This command adds a GitHub Actions workflow that deploys previews on pull requests and pushes production updates on merge.

🧩 Common Issues and Fixes

ProblemSolution
“firebase: command not found”Reinstall CLI: npm i -g firebase-tools and reopen your terminal.
Still see Firebase default pageCheck firebase.json → set public to dist and rebuild with npm run build.
404 error when refreshing routeMake sure rewrites → index.html exists.
Deploy failed: permission deniedRun firebase login again to refresh credentials.

📦 Full Command Summary

# Install Firebase CLI
npm install -g firebase-tools

# Login to Firebase
firebase login

# Build Vue project
npm run build

# Initialize Hosting
firebase init hosting

# Deploy Live
firebase deploy

🌟 Why Choose Firebase Hosting?

  • ✅ Free SSL certificate for your domain
  • ⚡ Global CDN for super-fast delivery
  • 🚀 One-command deployment
  • 💡 Built-in versioning and rollbacks
  • 🤝 Integration with Firestore, Functions, and Auth

For small projects or prototypes, Firebase Hosting is more than enough to serve a Vue or React app globally with zero server maintenance.

📚 FAQs

1. Can I host both frontend and backend on Firebase?

Yes! You can add firebase init functions to deploy a Node.js backend using Firebase Functions.

2. How much does Firebase Hosting cost?

Firebase Hosting has a generous free tier with 10 GB bandwidth and 1 GB storage. Beyond that, pricing is usage-based and still affordable.

3. Does it support custom domains and HTTPS?

Yes, Firebase provides free HTTPS certificates for custom domains automatically.

4. Can I use it with Vue Router (history mode)?

Absolutely. The rewrite rule in firebase.json ensures history-mode routes work perfectly.

🎬 Watch the Full YouTube Tutorial

🎥 Video Title: How to Deploy Vue.js App on Firebase Hosting (2025 Step-by-Step Guide)

Watch on YouTube @Lae’s TechBank for a live demonstration of all commands above.

🧠 Final Thoughts

Deploying a Vue.js project to Firebase is one of the fastest ways to get your application online with modern tools. It’s free, secure, and works perfectly with Vue 3 and Vite builds.

Once your app is live, explore more Firebase features such as Cloud Functions, Firestore, and Authentication to turn your frontend into a full-stack web app.

Happy coding! 💙

Read more for deploy your backend here: https://lltestweb.blogspot.com/2025/10/how-to-deploy-nodejs-backend-on.html

Watch Tutorial Here:

vue, vue3, firebase, firebase hosting, deploy vue project, web development, vue tutorial, vite, javascript, firebase deploy, google cloud

Labels:

Comments

Post a Comment