96 lines
2.3 KiB
Plaintext
96 lines
2.3 KiB
Plaintext
---
|
|
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
|