How to Deploy a Vue.js Web App with Firebase Hosting (Step-by-Step Guide)

In this guide, I’ll walk you through deploying a Vue.js frontend to Firebase Hosting, turning it into a live, publicly accessible website.

---

📦 1. Create a Firebase Project

1. Go to the Firebase Console.
2. Click Add project (e.g., dart-entity-generator).
3. Enable the Hosting feature:
   - From the left menu, go to Build > Hosting
   - Click Get Started

🛠️ 2. Install Firebase CLI

Install the Firebase CLI globally using npm:

npm install -g firebase-tools

Check the version to verify installation:

firebase --version

🔐 3. Log in and Link Your Project

firebase login

A browser will open—sign in with your Google account.

Then, move into your Vue project’s root directory and initialize Firebase Hosting:

firebase init hosting

⚠️ Tip: Be sure to run this from your project root directory, or firebase.json might be created in the wrong location 😅

⚙️ 4. Configure Hosting Options

Answer the prompts like this:

Question	Answer
What do you want to use as your public directory?	dist
Configure as a single-page app (rewrite all URLs to /index.html)?	Yes
Set up automatic builds and deploys with GitHub?	No (or Yes if you prefer GitHub integration)

This process will generate two files: firebase.json and .firebaserc

🧱 5. Build Your Vue App

npm run build

This will create a dist/ folder containing all the static files to be deployed.

🚀 6. Deploy to Firebase Hosting

firebase deploy

After successful deployment, you’ll see a URL like this:

Hosting URL: https://your-project-id.web.app

🛡️ 7. Fix CORS Issues (If Backend API is Used)

If your frontend makes requests to a backend server (e.g., Spring Boot), make sure to allow Firebase domain in your CORS configuration:

config.allowedOrigins = listOf(
    "http://localhost:5173", // local dev
    "https://your-project-id.web.app", // Firebase hosting
    "https://your-custom-domain.com" // optional
)

✅ Final Thoughts

Now your Vue app is live and accessible to the world!

• Firebase Hosting provides free HTTPS
• Built-in CDN and caching
• SSL support

It’s a lightweight, fast, and secure solution for deploying static web apps.

💡 Lessons Learned

• Always run firebase init from the correct directory.
• CORS errors can occur when frontend and backend run on different domains.
• Firebase Hosting is a powerful and beginner-friendly tool for frontend deployments.

If you found this post helpful, feel free to leave a comment or share it! 🚀