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

# Deployment

> Deploy your portfolio to Vercel

# Vercel Deployment

## Step 1: Push to GitHub

```bash theme={null}
git add .
git commit -m "Ready for deployment"
git push origin main
```

## Step 2: Import to Vercel

1. Go to [vercel.com/dashboard](https://vercel.com/dashboard)
2. Click **Add New** → **Project**
3. Import your GitHub repository
4. Click **Deploy**

## Step 3: Add Environment Variables

<Warning>
  Your site won't work without environment variables configured in Vercel!
</Warning>

1. Go to **Project Settings** → **Environment Variables**
2. Add these variables:

| Variable                    | Value                          |
| --------------------------- | ------------------------------ |
| `VITE_APPWRITE_ENDPOINT`    | `https://cloud.appwrite.io/v1` |
| `VITE_APPWRITE_PROJECT_ID`  | Your project ID                |
| `VITE_APPWRITE_DATABASE_ID` | `portfolio_db`                 |
| `VITE_APPWRITE_STORAGE_ID`  | `reactbucket`                  |

3. Set for **Production**, **Preview**, and **Development**
4. Click **Save**

## Step 4: Configure CORS in Appwrite

<Warning>
  This is critical! Without CORS configuration, your deployed site cannot access Appwrite.
</Warning>

1. Go to [Appwrite Console](https://cloud.appwrite.io)
2. Select your project → **Settings** → **Platforms**
3. Add a **Web** platform with your Vercel domain:
   * `https://your-project.vercel.app`
   * `https://*.vercel.app` (for preview deployments)
   * Your custom domain if applicable

## Step 5: Redeploy

After adding environment variables:

1. Go to **Deployments** tab
2. Click **⋯** on latest deployment
3. Click **Redeploy**

## Troubleshooting

### Site shows "basic mode" or empty data

**Cause:** Environment variables not set or CORS not configured.

**Solution:**

1. Check Vercel → Settings → Environment Variables
2. Check Appwrite → Settings → Platforms
3. Redeploy after making changes

### CORS Error in Console

```
Access to XMLHttpRequest blocked by CORS policy
```

**Solution:** Add your Vercel domain to Appwrite Platforms (Step 4).

### 404 on Page Refresh

**Solution:** Vercel handles this automatically for Vite projects. If issues persist, add a `vercel.json`:

```json theme={null}
{
  "rewrites": [{ "source": "/(.*)", "destination": "/" }]
}
```

## Custom Domain

1. In Vercel: **Settings** → **Domains** → Add your domain
2. Update DNS records as instructed
3. Add the custom domain to Appwrite Platforms