Skip to content

Firebase Hosting Deployment Documentation

✅ Deployment Status: LIVE

Live URL: https://gavekort-multitenant.web.app
Firebase Project: gavekort-multitenant
Project ID: gavekort-multitenant
Region: us-central1

🚀 What Was Done

1. Firebase Project Created

  • Project Name: Gavekort Multi-Tenant
  • Project ID: gavekort-multitenant
  • Created: December 18, 2025
  • Firebase Console: https://console.firebase.google.com/project/gavekort-multitenant

2. Web App Created

  • App Name: Klubbens-gavekort
  • App ID: 1:380848678496:web:2d09563be3465b0b208505
  • Firebase SDK Config: Embedded in webapp/.env.local

3. Firebase Configuration Files

Created two critical configuration files:

.firebaserc

{
  "projects": {
    "default": "gavekort-multitenant"
  }
}

Purpose: Tells Firebase CLI which project to deploy to

firebase.json

{
  "hosting": {
    "public": "webapp/build",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "rewrites": [{"source": "**", "destination": "/index.html"}]
  },
  "functions": {
    "source": "functions",
    "runtime": "nodejs20"
  },
  "firestore": {
    "rules": "firestore.rules",
    "indexes": "firestore.indexes.json"
  }
}

Purpose: Configures hosting, functions, and Firestore deployment

Key Settings: - public: "webapp/build" - Points to React build directory - Rewrites all routes to /index.html (enables React Router) - Functions runtime set to Node.js 20 - Firestore rules and indexes configured

4. Environment Configuration

Created webapp/.env.local with Firebase credentials:

REACT_APP_FIREBASE_API_KEY=AIzaSyCG2CaNMx6Z7P8jC28mu_ZwuPXEvImeBjM
REACT_APP_FIREBASE_AUTH_DOMAIN=gavekort-multitenant.firebaseapp.com
REACT_APP_FIREBASE_PROJECT_ID=gavekort-multitenant
REACT_APP_FIREBASE_STORAGE_BUCKET=gavekort-multitenant.firebasestorage.app
REACT_APP_FIREBASE_MESSAGING_SENDER_ID=380848678496
REACT_APP_FIREBASE_APP_ID=1:380848678496:web:2d09563be3465b0b208505
REACT_APP_API_BASE_URL=https://us-central1-gavekort-multitenant.cloudfunctions.net

5. React Build & Deployment

  • Built optimized production bundle: 128.98 kB (gzipped)
  • Deployed 14 files to Firebase Hosting
  • Live URL: https://gavekort-multitenant.web.app

📋 Deployment Checklist

Task Status Command
✅ Firebase project created Done Manual
✅ Web app created Done firebase apps:create web
✅ SDK config obtained Done firebase apps:sdkconfig
✅ .firebaserc configured Done Manual file creation
✅ firebase.json configured Done Manual file creation
✅ .env.local created with credentials Done Manual file creation
✅ React app built Done npm run build
✅ Deployed to Hosting Done firebase deploy --only hosting
✅ Live on web Done https://gavekort-multitenant.web.app

🔄 Future Deployments

After making code changes, deployment is simple:

# From project root
cd webapp
npm run build
cd ..
firebase deploy --only hosting

Or as a one-liner:

cd webapp && npm run build && cd .. && firebase deploy --only hosting

Automated Deployment (Optional)

To setup automatic deployments on Git push, create .github/workflows/deploy.yml:

name: Deploy to Firebase Hosting

on:
  push:
    branches: [main]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 18
      - run: cd webapp && npm install && npm run build && cd ..
      - uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: ${{ secrets.GITHUB_TOKEN }}
          firebaseServiceAccount: ${{ secrets.FIREBASE_SERVICE_ACCOUNT }}
          projectId: gavekort-multitenant
          channelId: live

To enable this, you would need to: 1. Generate a Firebase service account key 2. Store it as a GitHub secret FIREBASE_SERVICE_ACCOUNT 3. Commit the workflow file

🌐 URL Aliases

Firebase Hosting automatically creates these URLs:

  • Primary: https://gavekort-multitenant.web.app
  • Alternate: https://gavekort-multitenant.firebaseapp.com (same content)

Both point to the same deployment.

📊 Firebase Hosting Features

Your React app automatically benefits from:

✅ Free HTTPS SSL Certificate - Auto-renewed
✅ Global CDN - Content served from locations near users
✅ Instant Rollback - Revert to previous version in seconds
✅ Preview URLs - Test before releasing to production
✅ Fast Deploy - Sub-second file uploads
✅ Custom Domain - Can add custom domain (e.g., gavekort.example.com)
✅ Caching - Intelligent HTTP caching
✅ Compression - Automatic gzip for all assets

🔐 Security Notes

Important: The following files are gitignored (NOT in GitHub): - .firebaserc - Contains project reference - firebase.json - Deployment configuration
- webapp/.env.local - Contains Firebase API keys

Why: This prevents accidental exposure of Firebase keys in public repos.

In CI/CD: These files would be: 1. Generated from secure environment variables 2. Never committed to version control 3. Only used during build & deploy steps

📞 Next Steps

1. Deploy Cloud Functions (Backend)

firebase deploy --only functions

This will deploy the Gavekort API endpoints to:

https://us-central1-gavekort-multitenant.cloudfunctions.net/{functionName}

2. Deploy Firestore Rules & Indexes

firebase deploy --only firestore

3. Setup Custom Domain (Optional)

In Firebase Console: 1. Go to Hosting → Custom domains 2. Add your domain (e.g., gavekort.example.com) 3. Follow DNS setup instructions

4. Monitor Performance

Firebase Console shows: - Deployment history - CPU & bandwidth usage - Error logs - Performance metrics

🐛 Troubleshooting

Build fails

cd webapp
npm install  # Reinstall dependencies
npm run build

Deploy permission denied

firebase login --reauth
firebase deploy --only hosting

React Router not working on page reload

  • Check firebase.json has the rewrite rule for ** → /index.html
  • This is already configured ✅

Custom API URL not working

  • Verify REACT_APP_API_BASE_URL in webapp/.env.local
  • Ensure Cloud Functions are deployed with firebase deploy --only functions

📈 Analytics

To track app usage, you can:

  1. Enable Google Analytics

  2. Firebase Console → Project Settings → Google Analytics

  3. View in Google Analytics 4

  4. Analytics will track page views and custom events

  5. Requires adding Analytics code to webapp

  6. Use Firebase Performance Monitoring

  7. Automatic performance metrics
  8. Can be added to webapp with SDK

📝 Deployment History

Date Version Changes Status
2025-12-18 v1.0.0 Initial React app deployment ✅ Live

🎯 Summary

✅ Gavekort React User Wallet App is now LIVE
✅ Hosted on Firebase Hosting
✅ Automatic HTTPS & global CDN
✅ Ready for production traffic

Live URL: https://gavekort-multitenant.web.app