---
title: "Deployment"
description: "Deploy your portfolio to Vercel"
---

# Vercel Deployment

## Step 1: Push to GitHub

```bash
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
{
  "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