Firebase Hosting

Your app is built and connected to Firebase. Now let's put it on the internet! Firebase Hosting makes deployment surprisingly simple.

What is Firebase Hosting?

Firebase Hosting is a fast, secure web hosting service for your static and single-page applications. Key features:

• Free SSL certificate (HTTPS) — automatic
• Global CDN — Your app is served from servers worldwide
• Fast deployments — Usually under 30 seconds
• Preview channels — Test changes before going live
• One command to deploy — Seriously, it's just firebase deploy

Prerequisites

Make sure you have:

1. Firebase CLI installed (npm install -g firebase-tools)
2. Logged in (firebase login)
3. Firebase initialized in your project (firebase init)

If you skipped Hosting during firebase init, run it again and select Hosting.

Step 1: Build Your App

Before deploying, you need to build your app for production:

# Vite (React, Vue)
npm run build
# Output goes to: dist/

# Next.js
npm run build
# Output goes to: .next/ (or out/ for static export)

# Create React App
npm run build
# Output goes to: build/

Step 2: Configure firebase.json

The firebase.json file tells Firebase where your built files are and how to handle routing:

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

Key settings:

Why Rewrites Matter for Single-Page Apps

If your React app has routes like /about or /dashboard, those routes don't exist as actual files on the server. The rewrite rule sends all URLs to index.html, where React Router handles the routing.

Without this rewrite, visiting yourapp.com/about directly would show a 404 error.

What to ask your AI: "Configure firebase.json for my [Vite/Next.js/CRA] project with proper rewrites and caching headers."

Step 3: Deploy

firebase deploy --only hosting

Output:

✓  Deploy complete!

Hosting URL: https://my-app.web.app

That's it! Your app is live. You get two free domains:

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

The Full Deploy Workflow

# 1. Build
npm run build

# 2. Deploy
firebase deploy --only hosting

# Or combine them
npm run build && firebase deploy --only hosting

Pro tip: Add a deploy script to your package.json:

{
  "scripts": {
    "deploy": "npm run build && firebase deploy --only hosting"
  }
}

Now you can just run npm run deploy.

Preview Channels

Want to test a deployment without affecting your live site? Use preview channels:

# Create a temporary preview
firebase hosting:channel:deploy preview

# Output:
# ✓ Channel URL: https://my-app--preview-abc123.web.app

The preview URL is unique and temporary. Share it with others for review before deploying to production.

What to ask your AI: "Help me set up a preview deployment for testing before pushing to production."

Deploy History and Rollbacks

Every deployment is saved. If something goes wrong, you can rollback:

1. Go to Firebase Console → Hosting
2. See your deployment history
3. Click "Rollback" on any previous deployment

You can also see the history in the CLI:

firebase hosting:channel:list

Custom Domain

To use your own domain (e.g., www.myapp.com):

1. Go to Firebase Console → Hosting → "Add custom domain"
2. Enter your domain name
3. Firebase gives you DNS records to add
4. Add the records at your domain registrar (GoDaddy, Namecheap, Google Domains, etc.)
5. Wait for DNS propagation (can take up to 24–48 hours)
6. Firebase automatically provisions an SSL certificate

What to ask your AI: "I bought a domain from [registrar]. Walk me through connecting it to Firebase Hosting."

Deploying Multiple Services

If your project uses Firestore rules, Cloud Functions, and Hosting, you can deploy them separately or together:

# Deploy everything
firebase deploy

# Deploy only hosting
firebase deploy --only hosting

# Deploy only Firestore rules
firebase deploy --only firestore:rules

# Deploy only Cloud Functions
firebase deploy --only functions

# Deploy multiple specific services
firebase deploy --only hosting,firestore:rules

Caching and Performance Headers

Add caching headers to firebase.json for better performance:

{
  "hosting": {
    "public": "dist",
    "headers": [
      {
        "source": "**/*.@(jpg|jpeg|gif|png|svg|webp|ico)",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "max-age=31536000"
          }
        ]
      },
      {
        "source": "**/*.@(js|css)",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "max-age=31536000"
          }
        ]
      }
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

Deploy Checklist

Before deploying to production:

✅ Environment variables are set correctly
✅ Firestore security rules are NOT in test mode
✅ Build completes without errors
✅ App works locally (npm run preview)
✅ Firebase config points to the right project
✅ .env file is in .gitignore

What's Next?

Your app is deployed! The next tutorial covers Cloud Functions and Storage — running server-side code and handling file uploads.

What to ask your AI: "My app is deployed but [something isn't working]. Here's what I see: [describe issue]. Can you help me debug it?"

---

🌐 www.genai-mentor.ai