Deployment Guide

Deploy BlockForge to Vercel or other hosting platforms.

Vercel Deployment (Recommended)

Vercel provides excellent support for Vite applications with automatic deployments.

Prerequisites

• GitHub repository with BlockForge code
• Vercel account (free tier is fine)
• Supabase project configured
• Environment variables ready

Step 1: Prepare Repository

1. Push to GitHub:

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

2. Verify build locally:

npm run build

Step 2: Import to Vercel

1. Go to vercel.com
2. Click Add New Project
3. Import your GitHub repository
4. Configure project:
   • Framework Preset: Vite
   • Root Directory: ./ (or leave default)
   • Build Command: npm run build
   • Output Directory: dist
   • Install Command: npm install

Step 3: Configure Environment Variables

Add all required environment variables in Vercel:

1. Go to Project Settings → Environment Variables

2. Add each variable:

   • VITE_SUPABASE_URL
   • VITE_SUPABASE_ANON_KEY
   • VITE_AI_PROVIDER (optional)
   • VITE_AI_API_KEY (optional)
   • VITE_AI_MODEL (optional)
   • VITE_GITHUB_CLIENT_ID (optional)

3. Select environments:

   • Production ✅
   • Preview ✅ (for PR previews)
   • Development ✅ (optional)

Step 4: Custom Domain (docs.blockforge.pro)

1. Go to Project Settings → Domains
2. Add custom domain: docs.blockforge.pro
3. Follow DNS configuration instructions:
   • Add CNAME record pointing to Vercel
   • Or add A record with Vercel IPs
4. Vercel will automatically provision SSL certificate

Step 5: Deploy

1. Click Deploy (or push to trigger deployment)
2. Wait for build to complete
3. Visit your deployed site

Step 6: Verify Deployment

• ✅ Site loads correctly
• ✅ Authentication works
• ✅ Database connections work
• ✅ AI features work (if configured)
• ✅ File uploads work

Alternative Deployment Options

Netlify

1. Connect repository in Netlify dashboard
2. Configure build:
   • Build command: npm run build
   • Publish directory: dist
3. Add environment variables
4. Deploy

Self-Hosted

1. Build application:

npm run build

2. Serve dist folder:

   • Use nginx, Apache, or any static file server
   • Configure reverse proxy if needed
   • Set up SSL certificate

3. Configure environment:

   • Use environment variables
   • Or configure at build time

Post-Deployment

Monitoring

• Set up error tracking (Sentry, etc.)
• Monitor API usage
• Track performance metrics

Updates

• Push to main branch triggers deployment
• PRs create preview deployments
• Rollback available in Vercel dashboard

Environment-Specific Configs

Use different environment variables for:

• Production - Production Supabase, production APIs
• Preview - Staging environment (optional)
• Development - Local development

Troubleshooting

Build Failures

• Check build logs in Vercel
• Verify all dependencies are in package.json
• Check Node.js version compatibility

Environment Variable Issues

• Verify all required variables are set
• Check variable names are correct
• Ensure no typos or extra spaces

Runtime Errors

• Check browser console
• Review server logs
• Verify API endpoints are accessible

Performance Issues

• Enable Vercel Analytics
• Optimize images and assets
• Check bundle size
• Review API response times

Security Checklist

• [ ] Environment variables are secure
• [ ] API keys are not exposed in client code
• [ ] HTTPS is enabled
• [ ] Security headers are configured
• [ ] CORS is properly configured
• [ ] Rate limiting is enabled (if needed)

Next Steps

• Supabase Setup
• AI Configuration
• Environment Variables