Firebase Hosting is one of the fastest ways to publish a Vue.js frontend online. With a few commands, we can build our Vue app, upload the production files, get a secure HTTPS URL, and optionally connect a custom domain or GitHub Actions workflow for automatic deployment.
How to Deploy a Vue.js Project on Firebase Hosting: Step-by-Step Guide
Introduction
We have known that Vue.js is a popular JavaScript framework for building interactive web applications. Firebase Hosting is a production-grade hosting service from Google that can serve static websites and single-page applications through a secure, fast, globally distributed infrastructure.
If we build the Vue app using Vite or Vue CLI, the final production output is usually a folder named dist. Firebase Hosting takes that folder and publishes it online as a website.
In this guide, we will learn how to deploy a Vue.js project to Firebase Hosting, configure firebase.json, fix common route-refresh errors, test locally, add a custom domain, and automate deployment with GitHub Actions.
What We Will Learn
- How to prepare a Vue 3 or Vue CLI project for deployment.
- How to install and use Firebase CLI.
- How to initialize Firebase Hosting.
- How to configure
firebase.jsonfor Vue Router history mode. - How to deploy our app live with
firebase deploy. - How to test the site locally before deployment.
- How to connect a custom domain.
- How to set up GitHub Actions auto-deployment.
- How to fix common Firebase Hosting and Vue deployment errors.
Why Use Firebase Hosting for Vue.js?
Firebase Hosting is a good choice for Vue.js frontend apps because it is simple, fast, secure, and beginner-friendly.
| Firebase Hosting Feature | Why It Helps Vue Developers |
|---|---|
| One-command deployment | it can deploy the built Vue app using firebase deploy. |
| Global CDN | The static files can be served quickly to users in different locations. |
| HTTPS by default | The app gets secure HTTPS URLs automatically. |
| SPA rewrite support | Vue Router history mode can work correctly with a rewrite to index.html. |
| Preview channels | We can test changes before publishing to the live site. |
| GitHub Actions integration | We can automate preview and live deployments from GitHub. |
| Firebase ecosystem | We can later connect Firebase Auth, Firestore, Storage, and Cloud Functions. |
Before It Start: Requirements
Before deploying the Vue.js app, make sure we have the following installed or prepared.
| Requirement | Purpose |
|---|---|
| Google account | Needed to create and manage a Firebase project. |
| Firebase project | The Hosting site will be connected to this project. |
| Node.js and npm | Needed to install packages, run Vue, and use Firebase CLI. |
| Vue project | The frontend application we want to deploy. |
| Firebase CLI | Command-line tool used to initialize, test, and deploy Hosting. |
Check Node.js and npm
Step 1: Install Firebase CLI
Firebase CLI lets us log in, initialize Hosting, test locally, and deploy Vue project.
After installation, log in to Firebase:
Check that the CLI is working:
firebase is not recognized after installation, close PowerShell or Command Prompt and open it again. This refreshes the system PATH.
Step 2: Open Vue Project Folder
Open a terminal inside Vue project folder. The project may look like this:
For a Vue CLI project, the structure may look slightly different, but the deployment concept is the same: build the project and deploy the generated dist folder.
Step 3: Build the Vue Project
Run the production build command:
For most Vue 3 + Vite projects and Vue CLI projects, this creates a dist folder:
dist folder, not src folder. The src folder is development source code, while dist contains production-ready files.
Preview the Build Locally
For Vite projects, we can preview the production build before deploying:
This helps catch build issues before publishing online.
Step 4: Initialize Firebase Hosting
Run this command from the root of Vue project:
During setup, Firebase CLI will ask several questions. Use these beginner-friendly answers:
| Firebase CLI Question | Recommended Answer |
|---|---|
| What do we want to use as our public directory? | dist |
| Configure as a single-page app? | Yes, especially if we use Vue Router history mode. |
| Set up automatic builds and deploys with GitHub? | Choose No for now |
File dist/index.html already exists. Overwrite? |
No. Do not overwrite built Vue app. |
Firebase will create or update:
firebase.json— Hosting configuration..firebaserc— Firebase project alias configuration.
Step 5: Configure firebase.json for Vue Router
If the Vue app uses Vue Router with history mode, users may see a 404 error when refreshing a nested route such as /about or /dashboard. To fix this, Firebase Hosting should rewrite all routes to /index.html.
index.html first so Vue can decide which page component to show.
Optional: Add Better Caching for Vite Assets
Vite usually generates hashed files inside the assets folder. These files can be cached for a long time because their filenames change when the content changes.
index.html. The index file should update quickly when deploy a new version.
Step 6: Deploy to Firebase Hosting
After building the project and checking firebase.json, deploy Vue app:
Firebase will upload the files from dist and return live URLs similar to:
Open the URL in your browser. The Vue.js app should now be live.
Full Command Summary
Step 7: Test Locally with Firebase Emulator
We can test Firebase Hosting locally before deploying:
Or use:
Local testing helps check routing, images, CSS, and build output before publishing to production.
Step 8: Deploy to a Preview Channel
Preview channels let us publish a temporary version of site before pushing to the live channel. This is useful for testing design changes, pull requests, or client review.
Firebase will return a temporary preview URL. After reviewing the site, we can deploy to live:
Step 9: Connect a Custom Domain
Firebase Hosting can serve Vue app from a custom domain such as www.yourdomain.com.
Firebase Console → Build → Hosting → Add custom domain
Firebase will guide to verify domain ownership and add DNS records. After verification, Firebase can provide HTTPS for custom domain.
Step 10: Automate Deployment with GitHub Actions
If project is stored on GitHub, Firebase CLI can help create GitHub Actions workflows for preview and live deployment.
This can create workflows that:
- Deploy preview versions for pull requests.
- Deploy the live site when changes are merged into main branch.
Environment Variables in Vue Projects
Vue + Vite projects can use environment variables with the VITE_ prefix. For example:
In your Vue code:
For secret keys, use a backend service such as Firebase Functions, Cloud Run, or another secure server-side API.
Common Issues and Fixes
| Problem | Likely Cause | Fix |
|---|---|---|
firebase: command not found |
Firebase CLI is not installed or terminal PATH is not refreshed. | Run npm install -g firebase-tools, then reopen the terminal. |
| Still see Firebase default page | Firebase deployed the wrong folder or old files. | Run npm run build, set public to dist, and deploy again. |
| 404 error after refreshing a Vue route | Vue Router history mode needs SPA rewrite. | Add "rewrites": [{"source": "**", "destination": "/index.html"}]. |
| Blank page after deployment | Wrong build path, router base issue, or JavaScript error. | Check browser console, verify dist, and confirm router/base configuration. |
| Images missing after deployment | Wrong asset paths or files not included in the build. | Use correct imports or place static files in the public folder. |
| Deploy failed: permission denied | We are logged into the wrong Google account or lack project permission. | Run firebase logout, then firebase login, and check Firebase project access. |
| Wrong Firebase project deployed | The project alias in .firebaserc is wrong. |
Run firebase use --add or update the Firebase project alias. |
| Build fails before deployment | Dependency, Node version, or code error. | Run npm install, check Node version, and fix errors shown by npm run build. |
Firebase Hosting vs Firebase App Hosting
Firebase has more than one hosting-related product. For most Vue single-page applications, Firebase Hosting is the correct choice because Vue builds static files.
| Service | Best For |
|---|---|
| Firebase Hosting | Static sites and single-page applications such as Vue, React, Angular, and plain HTML/CSS/JS. |
| Firebase App Hosting | Full-stack web apps with server-side rendering or backend frameworks supported by App Hosting. |
| Cloud Functions / Cloud Run | Backend APIs, server-side logic, webhooks, and dynamic microservices. |
Best Practices for Vue + Firebase Hosting
| Best Practice | Why It Matters |
|---|---|
Always run npm run build before deployment. |
Firebase Hosting should receive production files, not development source code. |
Set the public directory to dist. |
This is the usual output folder for Vue and Vite builds. |
| Use SPA rewrites for Vue Router history mode. | Prevents 404 errors when refreshing nested routes. |
| Do not store secrets in frontend environment variables. | Frontend code is visible in the browser. |
| Compress images before adding them to app. | Improves loading speed and user experience. |
| Use preview channels for testing. | Reduces the risk of publishing broken changes to the live site. |
| Check mobile view after deployment. | Many users visit from mobile devices. |
| Connect a backend only when needed. | Keep the frontend simple and use Functions or Cloud Run for private server-side logic. |
Production Deployment Checklist
Before deploying Vue app to Firebase Hosting, review this checklist:
| Checklist Item | Status |
|---|---|
| Node.js and npm are installed and working. | |
| Firebase CLI is installed and logged in. | |
Vue app builds successfully with npm run build. |
|
dist folder exists after build. |
|
firebase.json public directory is set to dist. |
|
| SPA rewrite is added if using Vue Router history mode. | |
| No secret keys are included in frontend code. | |
| Images and assets are optimized. | |
| App has been tested locally or through preview channel. | |
| Final live URL has been tested on desktop and mobile. |
Deployment Flow Summary
Watch the Tutorial
You can also watch the hands-on video tutorial here:
Is Firebase Hosting free?
Firebase offers a no-cost Spark plan and a pay-as-you-go Blaze plan. Always check the current Firebase pricing page because limits and pricing can change over time.
Conclusion
Deploying a Vue.js project on Firebase Hosting is a practical and beginner-friendly way to publish frontend app online. The main steps are simple: build the Vue project, initialize Firebase Hosting, set the public folder to dist, add a rewrite rule for Vue Router if needed, and run firebase deploy --only hosting.
Once app is live, we can improve workflow by adding preview channels, custom domains, GitHub Actions, Firebase Functions, Firestore, Authentication, and performance optimization. Firebase Hosting is a strong option for static Vue apps, prototypes, portfolios, dashboards, and frontend projects connected to Firebase or other backend APIs.
Keywords: deploy Vue.js on Firebase Hosting, Vue Firebase Hosting tutorial, Vue 3 Firebase deploy, Vite Firebase Hosting, Firebase deploy Vue app, Vue Router Firebase 404 fix, Firebase Hosting custom domain, Firebase GitHub Actions, frontend deployment, Vue.js tutorial, Firebase CLI, web development
References
- Firebase Docs: Firebase Hosting
- Firebase Docs: Get started with Firebase Hosting
- Firebase Docs: Configure hosting behavior
- Firebase Docs: Test, preview, then deploy
- Firebase Docs: Deploy to live and preview channels via GitHub pull requests
- Firebase Docs: Connect a custom domain
- Firebase Docs: Firebase pricing plans
- Vue Docs: Quick Start
- Vite Docs: Getting Started
- Vue Router Docs
Comments
Post a Comment