# Cloudflare Pages Deployment Guide

This guide explains how to deploy the Baselinr Demo to Cloudflare Pages.

## Prerequisites

1. **Wrangler CLI installed**
   ```bash
   npm install -g wrangler
   ```

2. **Cloudflare account and authentication**
   ```bash
   wrangler login
   ```

## Quick Deploy

### Option 1: Using npm script (recommended)
```bash
npm run functions:deploy
```

### Option 2: Using deployment scripts

**Windows (PowerShell):**
```powershell
.\scripts\deploy.ps1
```

**Linux/macOS:**
```bash
chmod +x scripts/deploy.sh
./scripts/deploy.sh
```

### Option 3: Manual deployment
```bash
# Build the demo
npm run build:demo

# Deploy to Cloudflare Pages
wrangler pages deploy out --project-name=baselinr-demo
```

## Setup in Cloudflare Dashboard

1. **Create a new Pages project** (if not already created):
   - Go to https://dash.cloudflare.com
   - Navigate to Workers & Pages → Create application → Pages → Connect to Git
   - Or create manually: Pages → Create a project

2. **Configure build settings**:
   - **Build command**: `npm run build:demo`
   - **Build output directory**: `out`
   - **Root directory**: (leave empty or set to `dashboard/frontend` if deploying from monorepo)

3. **Set environment variables** (in Cloudflare Dashboard):
   - `NEXT_PUBLIC_DEMO_MODE` = `true`
   - `NEXT_PUBLIC_API_URL` = `/api`

4. **Configure custom domain** (optional):
   - Go to your Pages project → Custom domains
   - Add `demo.baselinr.io` (or your chosen subdomain)
   - Cloudflare will automatically provision SSL

## Project Structure for Cloudflare Pages

```
out/                          # Build output (generated by Next.js)
├── index.html
├── _next/
├── api/                      # Cloudflare Pages Functions
│   ├── demo/
│   ├── runs/
│   ├── tables/
│   └── ...
└── demo_data/                # Static JSON demo data
    ├── runs.json
    ├── tables.json
    └── ...
```

## Environment Variables

Set these in the Cloudflare Pages dashboard under Settings → Environment variables:

| Variable | Value | Description |
|----------|-------|-------------|
| `NEXT_PUBLIC_DEMO_MODE` | `true` | Enables demo mode |
| `NEXT_PUBLIC_API_URL` | `/api` | API base URL (relative for Pages Functions) |

## Local Development with Wrangler

Test locally before deploying:

```bash
npm run functions:dev
```

This will:
1. Build the demo (`npm run build:demo`)
2. Start a local Cloudflare Pages dev server
3. Serve at http://localhost:8788 (or similar)

## Troubleshooting

### Build fails with TypeScript errors

If you need to deploy despite TypeScript errors:

1. **Temporary workaround**: Add to `next.config.js`:
   ```javascript
   typescript: {
     ignoreBuildErrors: true,
   }
   ```
   ⚠️ This is only for testing - fix TypeScript errors properly afterwards.

2. **Deploy via Git**: Push your code and let Cloudflare build it - their environment may handle errors differently.

3. **Check Cloudflare build logs**: Even with local errors, Cloudflare's build may succeed or show different errors.

### Functions not working

1. Ensure `functions/` directory is in the `out/` directory after build
2. Check that functions are using the correct file structure (`functions/api/[route].ts`)
3. Verify CORS headers are set correctly in function responses

### Demo data not loading

1. Ensure `public/demo_data/` JSON files are copied to `out/demo_data/`
2. Check that functions use the correct path to load demo data
3. Verify the base URL construction in `demo-data-service.ts`

## CI/CD Integration (GitHub Actions)

Example workflow (`.github/workflows/deploy-demo.yml`):

```yaml
name: Deploy Demo to Cloudflare Pages

on:
  push:
    branches: [main]
    paths:
      - 'dashboard/frontend/**'

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
        working-directory: dashboard/frontend
        run: npm ci
        
      - name: Build demo
        working-directory: dashboard/frontend
        env:
          NEXT_PUBLIC_DEMO_MODE: true
          NEXT_PUBLIC_API_URL: /api
        run: npm run build:demo
        
      - name: Deploy to Cloudflare Pages
        uses: cloudflare/pages-action@v1
        with:
          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
          projectName: baselinr-demo
          directory: dashboard/frontend/out
```

## Monitoring

- **Cloudflare Analytics**: Built-in analytics in the Pages dashboard
- **Function logs**: View function execution logs in Workers & Pages → Pages → Your project → Functions
- **Error tracking**: Consider integrating Sentry or similar for error tracking

## Updating Demo Data

To update demo data:

1. Regenerate demo data (if using a script)
2. Commit updated JSON files in `public/demo_data/`
3. Redeploy:
   ```bash
   npm run functions:deploy
   ```

The next build will include the updated demo data.
