Deployment Overview
Cabina consists of two main components:- Frontend Application - React + Vite SPA
- Backend Services - Supabase (Database, Auth, Storage, Edge Functions)
Frontend Deployment
Vercel (Recommended)
Vercel provides optimal performance for Vite applications with automatic deployments.1. Connect Repository
2. Configure Build Settings
vercel.json
3. Set Environment Variables
In Vercel Dashboard → Project → Settings → Environment Variables:4. Deploy
Vercel automatically deploys on every push to your main branch.
Netlify
1. Build Configuration
Createnetlify.toml:
netlify.toml
2. Deploy via CLI
Docker Deployment
Dockerfile
Dockerfile
nginx.conf
nginx.conf
Build and Run
Supabase Backend Deployment
Database Setup
1. Create Supabase Project
- Go to supabase.com
- Create a new project
- Note your project URL and API keys
2. Run Migrations
3. Configure RLS Policies
RLS (Row Level Security) policies are included in migrations. Verify in Supabase Dashboard → Authentication → Policies.Edge Functions Deployment
1. Deploy cabina-vision
2. Deploy mercadopago-payment
3. Verify Deployment
Storage Buckets
Create required storage buckets in Supabase Dashboard → Storage:-
user_photos - For uploaded user photos
- Public: No
- File size limit: 10MB
- Allowed MIME types:
image/png,image/jpeg,image/webp
-
generations - For AI-generated images
- Public: Yes
- File size limit: 50MB
- Allowed MIME types:
image/png,image/jpeg
-
event_assets - For event logos and branding
- Public: Yes
- File size limit: 5MB
- Allowed MIME types:
image/png,image/jpeg,image/svg+xml
Custom Domain Configuration
Vercel Custom Domain
- Go to Vercel Dashboard → Project → Settings → Domains
- Add your custom domain
- Configure DNS records:
SSL Certificate
Vercel automatically provisions SSL certificates via Let’s Encrypt.Post-Deployment Checklist
Verify Frontend
- App loads correctly at production URL
- Both
/and/dashboard.htmlroutes work - SSL certificate is valid
- All assets load (images, fonts)
Test Authentication
- Email signup works
- Google OAuth works (if configured)
- Password reset emails are sent
- Session persists after refresh
Verify Database
- All migrations ran successfully
- RLS policies are enabled
- Test user CRUD operations
- Check foreign key constraints
Test Edge Functions
-
cabina-visiongenerates images -
mercadopago-paymentcreates payment links - Webhooks receive notifications
- API keys are working
Storage & Assets
- User photos upload correctly
- Generated images are stored
- Bucket permissions are correct
- CDN is serving images
Monitoring & Logging
Vercel Analytics
Enable in Vercel Dashboard → Analytics:- Web Vitals tracking
- Audience insights
- Top pages
Supabase Monitoring
Dashboard → Reports:- Database size and growth
- API requests per day
- Edge function invocations
- Storage usage
Error Tracking
Integrate Sentry for production error tracking:src/main.tsx
Rollback Strategy
Frontend Rollback
Database Rollback
Performance Optimization
Enable Compression
Gzip/Brotli compression in nginx or CDN
Image Optimization
Use WebP format, lazy loading, and Supabase image transformation
Code Splitting
Vite automatically code-splits routes
CDN Caching
Set appropriate cache headers for static assets
Troubleshooting
White screen after deployment
White screen after deployment
Check browser console for errors. Common causes:
- Missing environment variables
- Incorrect base path in
vite.config.ts - CORS issues with Supabase
Edge functions not responding
Edge functions not responding
Verify:
- Functions are deployed:
supabase functions list - Secrets are set correctly
- Check function logs in Supabase Dashboard
Database connection errors
Database connection errors
Ensure:
VITE_SUPABASE_URLis correctVITE_SUPABASE_ANON_KEYmatches your project- Project is not paused (free tier)
Next Steps
Database Schema
Review the complete database structure
API Reference
Explore Edge Functions API