vibn-frontend/FIREBASE_DEPLOYMENT.md

# Firebase Deployment Guide

This guide will help you deploy VIBN to Firebase Hosting with Firebase Functions.

## Prerequisites

1. Firebase CLI installed: `npm install -g firebase-tools`
2. Firebase project created
3. AlloyDB instance set up
4. Environment variables configured

## Environment Variables Required

Create a `.env.production` file in the `vibn-frontend` directory with:

```bash
# Deployment URL
NEXT_PUBLIC_APP_URL=https://your-app.web.app

# Firebase Admin SDK (Server-side)
FIREBASE_PROJECT_ID=your-project-id
FIREBASE_CLIENT_EMAIL=your-service-account@your-project.iam.gserviceaccount.com
FIREBASE_PRIVATE_KEY="-----BEGIN PRIVATE KEY-----\nYour private key here\n-----END PRIVATE KEY-----\n"

# Firebase Client SDK (Public)
NEXT_PUBLIC_FIREBASE_API_KEY=your-api-key
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your-project.firebaseapp.com
NEXT_PUBLIC_FIREBASE_PROJECT_ID=your-project-id
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=your-project.appspot.com
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=123456789
NEXT_PUBLIC_FIREBASE_APP_ID=1:123456789:web:abcdef

# AlloyDB
ALLOYDB_HOST=10.x.x.x
ALLOYDB_PORT=5432
ALLOYDB_DATABASE=vibn
ALLOYDB_USER=postgres
ALLOYDB_PASSWORD=your-secure-password

# AI Providers
GEMINI_API_KEY=your-gemini-api-key
GOOGLE_CLOUD_PROJECT=your-project-id
GOOGLE_CLOUD_LOCATION=us-central1

# GitHub Integration
GITHUB_CLIENT_ID=your-github-oauth-app-client-id
GITHUB_CLIENT_SECRET=your-github-oauth-app-secret
GITHUB_REDIRECT_URI=https://your-app.web.app/api/github/oauth/callback

# V0 Design Integration
V0_API_KEY=your-v0-api-key
```

## Set Firebase Environment Variables

For sensitive variables that shouldn't be in the `.env.production` file, set them as Firebase Functions secrets:

```bash
# Set Firebase secrets for production
firebase functions:secrets:set FIREBASE_PRIVATE_KEY
firebase functions:secrets:set ALLOYDB_PASSWORD
firebase functions:secrets:set GEMINI_API_KEY
firebase functions:secrets:set GITHUB_CLIENT_SECRET
firebase functions:secrets:set V0_API_KEY

# Set public config
firebase functions:config:set app.url="https://your-app.web.app"
```

## Deployment Steps

### 1. Login to Firebase

```bash
firebase login
```

### 2. Initialize Firebase (if not already done)

```bash
firebase init
```

Select:
- Firestore
- Functions
- Hosting
- Storage

### 3. Build the Application

```bash
cd vibn-frontend
npm run build
```

### 4. Deploy Everything

```bash
# Deploy all (functions + hosting + firestore rules + storage rules)
npm run firebase:deploy:all
```

Or deploy individually:

```bash
# Deploy only Firestore rules and storage rules
npm run firebase:deploy:rules

# Deploy only Firestore indexes
npm run firebase:deploy:indexes

# Deploy only functions and hosting
npm run firebase:deploy:app
```

### 5. Verify Deployment

After deployment, visit your Firebase Hosting URL:
- **Hosting URL**: `https://your-project-id.web.app`
- **Custom Domain**: `https://your-custom-domain.com` (if configured)

## Key Changes Made for Production

### API URL Resolution

The app now automatically detects the correct API URL:

1. **Development**: Uses `http://localhost:3000`
2. **Production**: Uses the request origin or `NEXT_PUBLIC_APP_URL` environment variable
3. **Vercel**: Auto-detects using `VERCEL_URL`

This is handled by the `getApiUrl()` utility in `/lib/utils/api-url.ts`.

### Updated Files

The following API routes now use dynamic URL resolution:

- `/api/projects/[projectId]/mvp-checklist/route.ts`
- `/api/projects/[projectId]/timeline-view/route.ts`
- `/api/projects/[projectId]/complete-history/route.ts`
- `/api/projects/[projectId]/plan/intelligent/route.ts`
- `/api/projects/[projectId]/plan/simulate/route.ts`
- `/api/projects/[projectId]/context/route.ts`
- `/api/projects/[projectId]/audit/generate/route.ts`

## Firebase Configuration

The app is configured to run as a Firebase Function via `firebase.json`:

```json
{
  "hosting": {
    "rewrites": [
      {
        "source": "**",
        "function": "nextjsFunc"
      }
    ]
  },
  "functions": [{
    "source": ".",
    "runtime": "nodejs20"
  }]
}
```

## Troubleshooting

### Port 3000 or 8000 References

All hardcoded `localhost:3000` and `localhost:8000` references have been replaced with environment-aware URL resolution.

### Build Failures

If the build fails:

```bash
# Clear Next.js cache
rm -rf .next

# Clear node_modules and reinstall
rm -rf node_modules package-lock.json
npm install

# Try building again
npm run build
```

### Function Timeout

If your functions timeout, increase the timeout in `firebase.json`:

```json
{
  "functions": [{
    "source": ".",
    "runtime": "nodejs20",
    "timeout": "300s"
  }]
}
```

### Memory Issues

If you encounter memory issues, increase the memory allocation:

```json
{
  "functions": [{
    "source": ".",
    "runtime": "nodejs20",
    "memory": "2GB"
  }]
}
```

## Custom Domain Setup

1. Go to Firebase Console → Hosting
2. Click "Add custom domain"
3. Follow the DNS verification steps
4. Update `NEXT_PUBLIC_APP_URL` and `GITHUB_REDIRECT_URI` to use your custom domain

## Monitoring

- **Firebase Console**: https://console.firebase.google.com
- **Functions Logs**: `firebase functions:log`
- **Hosting Logs**: Available in Firebase Console

## CI/CD with 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
      - uses: actions/setup-node@v2
        with:
          node-version: '20'
      - run: npm install
        working-directory: vibn-frontend
      - run: npm run build
        working-directory: vibn-frontend
      - uses: w9jds/firebase-action@master
        with:
          args: deploy --only hosting,functions
        env:
          FIREBASE_TOKEN: \${{ secrets.FIREBASE_TOKEN }}
```

## Support

For issues, check:
1. Firebase Functions logs
2. Browser console for client-side errors
3. Network tab to debug API calls