Firebase Hosting for Static Apps — Deploy React, Vue, and Next.js Affordably • Meteora Web Agency

Got a React app ready but struggling with servers, DNS, or SSL certificates? At Meteora Web, we see talented developers wasting hours on hosting setup. Firebase Hosting solves it in minutes with predictable costs and a global CDN. This guide shows you how to deploy static React, Vue, and Next.js apps with real examples and zero fluff.

How does Firebase Hosting work for static apps?

Firebase Hosting is a Google Cloud service for serving static content and single-page apps (SPAs). You upload your files (HTML, JS, CSS, images) and Firebase serves them via a CDN with over 150 edge nodes. SSL certificates are free and automatic. You can connect custom domains, set redirects, and even run serverless functions for dynamic parts.

We use it for many projects: fast setup, tight integration with Firestore, Authentication, and Storage, and transparent billing.

How is it different from traditional hosting?

Traditional hosting (Apache/Nginx on VPS) requires server configuration, maintenance, updates. Firebase Hosting abstracts all that. You pay only for storage and bandwidth, and the platform scales automatically.

What are the concrete benefits over other solutions?

We compared Firebase Hosting with Netlify, Vercel, and AWS S3+CloudFront. Here's what we found:

Predictable costs: Generous free tier (10 GB storage, 360 MB/day download). Extra usage is pennies per GB.
Native integration: If you already use Firebase for backend, hosting fits seamlessly.
Automatic SSL: No need to buy or renew certificates.
Instant rollback: Every deploy is versioned. Revert with one click.
Branch previews: With GitHub Actions you can get preview URLs per pull request.

How to deploy a React app on Firebase Hosting?

1. Install Firebase CLI

npm install -g firebase-tools

2. Authenticate and init

firebase login
firebase init hosting

Choose your project, set the public directory (e.g., build for CRA, dist for Vite), answer Yes to SPA redirect, and No to overwrite existing files. This creates a firebase.json like:

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

3. Build and deploy

npm run build
firebase deploy --only hosting

Your app is live at https://your-project.web.app.

What about Vue or Next.js static?

Same process, different output folders.

Vue (Vite)

Build output is dist. Set "public": "dist" in firebase.json.

Next.js static export

Run next build && next export. Output is out. Note: no SSR or API routes. Perfect for blogs or portfolios.

{
  "hosting": {
    "public": "out",
    "ignore": ["firebase.json", "/.*", "/node_modules/**"],
    "rewrites": []
  }
}

How to set up a custom domain and SSL?

In Firebase Console → Hosting → Add custom domain. Firebase gives you a TXT record for verification, then an A/CNAME record. SSL is automatic via Let's Encrypt. If using Cloudflare, set DNS only (no proxy) to avoid SSL conflicts.

What are the limitations?

No native SSR – use Cloud Functions for dynamic content.
Free tier bandwidth cap – 360 MB/day. Upgrade to Blaze for more.
Limited custom headers – manageable but not as flexible as a server.
No WebSocket support at hosting level.

How to optimize performance?

Set cache headers in firebase.json. Example:

{
  "headers": [
    {"source": "/*.@(js|css)", "headers": [{"key": "Cache-Control", "value": "public, max-age=31536000, immutable"}]},
    {"source": "/*.@(jpg|png|svg)", "headers": [{"key": "Cache-Control", "value": "public, max-age=7776000"}]}
  ]
}

Use build tools that already minify and compress files.

How to automate with GitHub Actions?

name: Deploy to Firebase Hosting
on: push branches: [main]
jobs:
  build_deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4 with: node-version: 20
      - run: npm ci
      - run: npm run build
      - uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: '${{ secrets.GITHUB_TOKEN }}'
          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT }}'
          channelId: live
          projectId: your-project-id

Store the Firebase service account JSON as a repository secret.

What does it cost?

The Spark free tier handles small to medium traffic. Blaze (pay-as-you-go) costs ~$0.12/GB extra bandwidth. No fixed monthly fees. Start with Spark, upgrade when you outgrow it.