> ## Documentation Index
> Fetch the complete documentation index at: https://docs.shieldhq.xyz/llms.txt
> Use this file to discover all available pages before exploring further.

# Vercel Deployment

> Deploy SHIELD frontend to Vercel

# Vercel Deployment

Deploy the SHIELD frontend to Vercel's edge network.

## Prerequisites

* Vercel account
* Project connected to GitHub
* Environment variables ready

## Deployment Steps

### 1. Connect Repository

1. Go to [Vercel Dashboard](https://vercel.com/dashboard)
2. Click "Add New Project"
3. Import your SHIELD repository
4. Select the `frontend` directory as root

### 2. Configure Project

**Build Settings:**

| Setting          | Value           |
| ---------------- | --------------- |
| Framework        | Next.js         |
| Root Directory   | `frontend`      |
| Build Command    | `npm run build` |
| Output Directory | `.next`         |
| Install Command  | `npm install`   |

### 3. Environment Variables

Add in Project Settings → Environment Variables:

```
DATABASE_URL=postgresql://...
PINATA_JWT=eyJ...
PINATA_GATEWAY_URL=https://...
NEXT_PUBLIC_SHIELD_CONTRACT_BASE=0x...
NEXT_PUBLIC_SHIELD_CONTRACT_BASE_SEPOLIA=0x...
ALCHEMY_API_KEY=...
NEXT_PUBLIC_WC_PROJECT_ID=...
SESSION_SECRET=...
NEXT_PUBLIC_APP_URL=https://app.shieldhq.xyz
```

Mark as **Production** for main deployment.

### 4. Deploy

Click "Deploy". Vercel will:

1. Install dependencies
2. Run build
3. Deploy to edge

### 5. Custom Domain

1. Go to Project Settings → Domains
2. Add `app.shieldhq.xyz`
3. Configure DNS:
   * Type: CNAME
   * Name: app
   * Value: cname.vercel-dns.com

### 6. Preview Deployments

Every PR gets a preview deployment at:

```
https://shield-git-branch-name-username.vercel.app
```

## Production Checklist

* [ ] Environment variables set
* [ ] Database accessible from Vercel IPs
* [ ] Contract addresses correct
* [ ] Custom domain configured
* [ ] Analytics enabled
* [ ] Rate limiting configured
* [ ] Security headers set

## Vercel.json Configuration

Create `frontend/vercel.json`:

```json theme={null}
{
  "headers": [
    {
      "source": "/(.*)",
      "headers": [
        {
          "key": "X-Frame-Options",
          "value": "DENY"
        },
        {
          "key": "X-Content-Type-Options",
          "value": "nosniff"
        },
        {
          "key": "Referrer-Policy",
          "value": "strict-origin-when-cross-origin"
        }
      ]
    }
  ],
  "functions": {
    "app/api/**/*.ts": {
      "maxDuration": 30
    }
  }
}
```

## Monitoring

Enable in Vercel Dashboard:

* Analytics
* Speed Insights
* Logs
* Alerts

## Troubleshooting

| Issue               | Solution                 |
| ------------------- | ------------------------ |
| Build fails         | Check Node version (18+) |
| DB connection fails | Whitelist Vercel IPs     |
| 404 on routes       | Check `next.config.mjs`  |
| Slow cold starts    | Optimize API routes      |