Skip to main content

​
Vercel Deployment

​
Step 1: Push to GitHub

git add .
git commit -m "Ready for deployment"
git push origin main

​
Step 2: Import to Vercel

  1. Go to vercel.com/dashboard
  2. Click Add New → Project
  3. Import your GitHub repository
  4. Click Deploy

​
Step 3: Add Environment Variables

Your site won’t work without environment variables configured in Vercel!
  1. Go to Project Settings → Environment Variables
  2. Add these variables:
VariableValue
VITE_APPWRITE_ENDPOINThttps://cloud.appwrite.io/v1
VITE_APPWRITE_PROJECT_IDYour project ID
VITE_APPWRITE_DATABASE_IDportfolio_db
VITE_APPWRITE_STORAGE_IDreactbucket
  1. Set for Production, Preview, and Development
  2. Click Save

​
Step 4: Configure CORS in Appwrite

This is critical! Without CORS configuration, your deployed site cannot access Appwrite.
  1. Go to Appwrite Console
  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: 
{
  "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