Deployment Guide

Deployment Guide

Deploy your Firebase React application to Firebase Hosting in minutes.

Quick Deploy

# 1. Build the app
npm run build

# 2. Login to Firebase (first time only)
firebase login

# 3. Deploy
firebase deploy

Your app will be live at: https://your-project-id.web.app

---

Detailed Deployment Steps

Step 1: Prepare for Deployment

1.1 Test Locally

npm run dev

Make sure everything works locally before deploying.

1.2 Run Linter

npm run lint

Fix any errors or warnings.

1.3 Build Production Version

npm run build

This creates an optimized build in the dist/ folder.

1.4 Preview Production Build

npm run preview

Test the production build locally at http://localhost:4173

Step 2: Firebase Authentication

2.1 Login to Firebase

firebase login

This opens your browser for Google authentication.

2.2 Verify Current Project

firebase projects:list

Check if your project is listed.

firebase use

Should show your project ID from .firebaserc.

Step 3: Deploy

Deploy Everything (First Time)

firebase deploy

This deploys:

• ✅ Hosting (your React app)
• ✅ Firestore rules
• ✅ Firestore indexes
• ✅ Storage rules

Deploy Only Hosting (Faster)

After the first deployment, for code-only updates:

npm run build
firebase deploy --only hosting

Deploy Only Rules

When you update security rules:

firebase deploy --only firestore,storage

Step 4: Verify Deployment

After successful deployment:

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/your-project-id
Hosting URL: https://your-project-id.web.app

Visit the Hosting URL to see your live app!

---

Deployment Workflows

Regular Updates Workflow

# 1. Make changes to your code
# 2. Test locally
npm run dev

# 3. Build
npm run build

# 4. Deploy hosting only
firebase deploy --only hosting

Security Rules Update Workflow

# 1. Update firestore.rules or storage.rules
# 2. Test rules in Firebase Console (optional)
# 3. Deploy rules only
firebase deploy --only firestore,storage

Full Update Workflow

# 1. Make all changes (code + rules)
# 2. Test locally
# 3. Build
npm run build

# 4. Deploy everything
firebase deploy

---

Custom Domain Setup

Step 1: Add Custom Domain

1. Go to Firebase Console → Hosting
2. Click "Add custom domain"
3. Enter your domain (e.g., myapp.com)
4. Click "Continue"

Step 2: Verify Domain Ownership

Firebase will provide a TXT record:

Type: TXT
Name: @
Value: firebase-domain-verification=xxxxxxxxxx

Add this to your domain registrar's DNS settings.

Step 3: Configure DNS

Add these A records to your domain:

Type: A
Name: @
Value: 151.101.1.195

Type: A
Name: @
Value: 151.101.65.195

For www subdomain, add CNAME:

Type: CNAME
Name: www
Value: your-project-id.web.app

Step 4: Wait for SSL Certificate

Firebase automatically provisions SSL. This takes up to 24 hours.

---

Environment-Specific Deployments

Multiple Environments

Create separate Firebase projects for development, staging, and production.

Setup

# Add projects
firebase use --add

# Select default (production)
firebase use --add
# Enter project ID and alias "production"

# Add staging
firebase use --add
# Enter staging project ID and alias "staging"

Update .firebaserc:

{
  "projects": {
    "default": "my-app-prod",
    "staging": "my-app-staging",
    "development": "my-app-dev"
  }
}

Deploy to Specific Environment

# Deploy to staging
firebase use staging
npm run build
firebase deploy

# Deploy to production
firebase use production
npm run build
firebase deploy

---

Rollback Deployment

Using Firebase Console

1. Go to Firebase Console → Hosting
2. Click "Release history" tab
3. Find the previous version
4. Click "⋮" → "Rollback"

Using Firebase CLI

firebase hosting:clone SOURCE_SITE_ID:SOURCE_CHANNEL TARGET_SITE_ID:live

---

CI/CD with GitHub Actions

Create .github/workflows/firebase-deploy.yml:

name: Deploy to Firebase

on:
  push:
    branches: [ main ]

jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v3

      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: 18

      - name: Install dependencies
        run: npm ci

      - name: Build
        run: npm run build
        env:
          VITE_FIREBASE_API_KEY: ${{ secrets.VITE_FIREBASE_API_KEY }}
          VITE_FIREBASE_AUTH_DOMAIN: ${{ secrets.VITE_FIREBASE_AUTH_DOMAIN }}
          VITE_FIREBASE_PROJECT_ID: ${{ secrets.VITE_FIREBASE_PROJECT_ID }}
          VITE_FIREBASE_STORAGE_BUCKET: ${{ secrets.VITE_FIREBASE_STORAGE_BUCKET }}
          VITE_FIREBASE_MESSAGING_SENDER_ID: ${{ secrets.VITE_FIREBASE_MESSAGING_SENDER_ID }}
          VITE_FIREBASE_APP_ID: ${{ secrets.VITE_FIREBASE_APP_ID }}

      - name: Deploy to Firebase
        uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: ${{ secrets.GITHUB_TOKEN }}
          firebaseServiceAccount: ${{ secrets.FIREBASE_SERVICE_ACCOUNT }}
          channelId: live
          projectId: your-project-id

Setup GitHub Secrets

1. Go to GitHub repo → Settings → Secrets → Actions
2. Add all environment variables
3. Add FIREBASE_SERVICE_ACCOUNT:
   • Go to Firebase Console → Project Settings → Service Accounts
   • Click "Generate new private key"
   • Copy the JSON content
   • Add as GitHub secret

---

Performance Optimization

Enable Compression

Firebase Hosting automatically compresses files. Vite also minifies in production builds.

Cache Headers

Update firebase.json for better caching:

{
  "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"
          }
        ]
      }
    ]
  }
}

Check Bundle Size

After building:

npm run build

Vite shows the size of each chunk. Keep bundles small for faster loading.

---

Monitoring

Firebase Hosting Metrics

Firebase Console → Hosting shows:

• Total requests
• Bandwidth usage
• Response times
• Geographic distribution

Set Up Alerts

Firebase Console → Project Settings → Integrations:

• Enable email notifications for quota alerts
• Set budget alerts for free tier limits

---

Troubleshooting

Error: "HTTP 403 Forbidden"

firebase login --reauth

Error: "Build command failed"

• Check all environment variables are set in .env
• Run npm run build locally first to see errors
• Clear node_modules and reinstall

Error: "Deploying rules failed"

• Check syntax in firestore.rules
• Validate rules in Firebase Console
• Make sure Firestore is initialized in your project

Site Not Updating

• Clear browser cache (Ctrl + Shift + R)
• Check if deployment was successful
• Verify correct Firebase project: firebase use

404 on Routes

Make sure firebase.json has the rewrite rule:

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

---

Useful Commands

# Firebase commands
firebase login                    # Login to Firebase
firebase logout                   # Logout
firebase projects:list            # List all projects
firebase use PROJECT_ID           # Switch project
firebase deploy                   # Deploy everything
firebase deploy --only hosting    # Deploy only hosting
firebase serve                    # Test locally with Firebase
firebase hosting:channel:list     # List all channels

# Build commands
npm run build                     # Production build
npm run preview                   # Preview build locally

---

Best Practices

1. ✅ Test locally before every deployment
2. ✅ Use staging environment for testing
3. ✅ Tag releases in git
4. ✅ Monitor usage in Firebase Console
5. ✅ Set up alerts for quota limits
6. ✅ Use CI/CD for automatic deployments
7. ✅ Keep rules updated for security
8. ✅ Review deployments regularly

---

Resources

• Firebase Hosting Docs
• Firebase CLI Reference
• Firebase Quotas

---

Next: Development Workflow →