Skip to content

Firebase Deployment Guide

🔐 Firebase Authentication Required

Your Firebase credentials have expired. Before deploying, you need to re-authenticate.

Step 1: Re-authenticate with Firebase

bash
firebase login --reauth

This will:

  1. Open your browser
  2. Ask you to sign in with Google
  3. Grant Firebase CLI access
  4. Save credentials for future deployments

Step 2: Deploy Web App

Once authenticated, deploy the web app:

bash
firebase deploy --only hosting:web

Or from the project root:

bash
cd /Users/olorin/Documents/Projects/olorin/olorin-media/bayit-plus
firebase deploy --only hosting:web

📦 What Will Be Deployed

Target: web (bayit-plus-web) Source: web/dist/Build Status: ✅ Already built (2.61 MiB bundle)

Files:

  • index.html (1.8 KiB)
  • bundle.d29ea72599c3fd41faad.js (2.6 MiB)
  • logo.png (20 KiB)
  • Fonts and voice recognition models

🎯 Firebase Configuration

Project Details

Firebase Project: bayit-plus

Hosting Targets:

  1. Web App (web target)

    • Site: bayit-plus-web
    • Deploy directory: web/dist/
    • URL: Will be shown after deployment
  2. TV App (tv target)

    • Site: bayit-plus
    • Deploy directory: tv-app/dist/
    • URL: Will be shown after deployment

Configuration Files

firebase.json:

json
{
  "hosting": [
    {
      "target": "web",
      "public": "web/dist",
      "rewrites": [{"source": "**", "destination": "/index.html"}],
      "headers": [/* Caching rules */]
    },
    {
      "target": "tv",
      "public": "tv-app/dist",
      "rewrites": [{"source": "**", "destination": "/index.html"}],
      "headers": [/* Caching rules */]
    }
  ]
}

.firebaserc:

json
{
  "projects": {
    "default": "bayit-plus"
  },
  "targets": {
    "bayit-plus": {
      "hosting": {
        "web": ["bayit-plus-web"],
        "tv": ["bayit-plus"]
      }
    }
  }
}

🚀 Deployment Commands

Deploy Only Web App

bash
firebase deploy --only hosting:web

Deploy Only TV App

bash
# First build the TV app (if not already done)
cd tv-app
npm run build:web

# Then deploy
cd ..
firebase deploy --only hosting:tv

Deploy Both Apps

bash
firebase deploy --only hosting

Deploy with Preview

bash
firebase hosting:channel:deploy preview --only web

📝 Post-Deployment Steps

1. Get Deployment URL

After deployment completes, Firebase will show:

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/bayit-plus/overview
Hosting URL: https://bayit-plus-web.web.app

2. Update CORS Configuration

Add the new Firebase URL to your backend CORS origins:

bash
# Get current CORS origins
gcloud secrets versions access latest --secret="bayit-cors-origins" --project=israeli-radio-475c9

# Update to include Firebase URL
echo '["http://localhost:3200","https://bayit-plus-web.web.app","https://bayit-backend-production-624470113582.us-east1.run.app"]' | gcloud secrets versions add bayit-cors-origins --data-file=- --project=israeli-radio-475c9

3. Update Google OAuth Redirect URIs

Add the Firebase hosting URL to Google OAuth:

  1. Go to: https://console.cloud.google.com/apis/credentials?project=israeli-radio-475c9
  2. Click your OAuth 2.0 Client ID
  3. Add to "Authorized redirect URIs":
    • https://bayit-plus-web.web.app/auth/google/callback
  4. Add to "Authorized JavaScript origins":
    • https://bayit-plus-web.web.app
  5. Click "SAVE"

4. Test the Deployment

Visit your deployment URL and test:

  • [ ] App loads correctly
  • [ ] API calls work (check Network tab)
  • [ ] Google OAuth login works
  • [ ] Content displays properly
  • [ ] All features functional

🔧 Common Issues & Solutions

Issue: "Firebase login required"

Solution:

bash
firebase login --reauth

Issue: "Permission denied"

Solution: Make sure you're logged in with the correct Google account that has access to the bayit-plus Firebase project.

Issue: "No targets found"

Solution: Check that .firebaserc exists and has the correct configuration.

Issue: "Build directory not found"

Solution: Build the app first:

bash
cd web
npm run build
cd ..

Issue: "CORS errors after deployment"

Solution: Update backend CORS configuration to include Firebase hosting URL.


📊 Monitoring & Analytics

View Deployment History

bash
firebase hosting:channel:list

View Usage Stats

Visit: https://console.firebase.google.com/project/bayit-plus/hosting

Check Logs

Visit: https://console.firebase.google.com/project/bayit-plus/logs


🎨 Custom Domain (Optional)

Add Custom Domain to Firebase Hosting

  1. Go to: https://console.firebase.google.com/project/bayit-plus/hosting/sites
  2. Click on "Add custom domain"
  3. Enter your domain (e.g., app.bayit.tv)
  4. Follow DNS verification steps
  5. Firebase will provision SSL certificate automatically

Update DNS Records

Add the following DNS records to your domain:

Type: A
Name: app
Value: (Firebase will provide IP addresses)

Type: AAAA
Name: app
Value: (Firebase will provide IPv6 addresses)

🔄 Automated Deployments (CI/CD)

GitHub Actions

Create .github/workflows/deploy.yml:

yaml
name: Deploy to Firebase

on:
  push:
    branches: [ main ]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2

      - name: Setup Node.js
        uses: actions/setup-node@v2
        with:
          node-version: '20'

      - name: Install dependencies
        run: |
          cd web
          npm install

      - name: Build
        run: |
          cd web
          npm run build

      - name: Deploy to Firebase
        uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: '${{ secrets.GITHUB_TOKEN }}'
          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT }}'
          projectId: bayit-plus
          target: web

Generate Service Account

bash
firebase login:ci
# Copy the token and add it to GitHub secrets as FIREBASE_SERVICE_ACCOUNT

📱 Quick Reference

bash
# Re-authenticate
firebase login --reauth

# Deploy web app
firebase deploy --only hosting:web

# Deploy TV app
firebase deploy --only hosting:tv

# Deploy both
firebase deploy --only hosting

# Preview deployment
firebase hosting:channel:deploy preview --only web

# List projects
firebase projects:list

# Switch project
firebase use bayit-plus

# View current project
firebase use

✅ Deployment Checklist

Before deploying:

  • [x] Web app is built (web/dist/ exists)
  • [x] Firebase is configured
  • [ ] Firebase authentication is valid
  • [ ] Backend CORS includes Firebase URL
  • [ ] Google OAuth includes Firebase redirect URI

After deploying:

  • [ ] Test deployment URL
  • [ ] Verify API connectivity
  • [ ] Test Google login
  • [ ] Check all features work
  • [ ] Monitor Firebase console for errors

🆘 Need Help?

Current Status: Ready to deploy! Just run firebase login --reauth then firebase deploy --only hosting:web

Released under the MIT License.