Guía de Self-Hosting con Supabase Externo

Tu Configuración

VITE_SUPABASE_URL=https://efximdysssnbnncuxleh.supabase.co
VITE_SUPABASE_PUBLISHABLE_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImVmeGltZHlzc3NuYm5uY3V4bGVoIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NjY4OTQ5MTEsImV4cCI6MjA4MjQ3MDkxMX0.vhvdeSc1v_ScNMOpj51hxAaZmU5wQuSL_d-inbfcn0Q
VITE_SUPABASE_PROJECT_ID=efximdysssnbnncuxleh

---

Paso 1: Clonar el Repositorio

git clone https://github.com/TU_USUARIO/TU_REPO.git
cd TU_REPO
npm install

---

Paso 2: Configurar Variables de Entorno

Para desarrollo local

Crea un archivo .env.local en la raíz del proyecto:

VITE_SUPABASE_URL=https://efximdysssnbnncuxleh.supabase.co
VITE_SUPABASE_PUBLISHABLE_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImVmeGltZHlzc3NuYm5uY3V4bGVoIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NjY4OTQ5MTEsImV4cCI6MjA4MjQ3MDkxMX0.vhvdeSc1v_ScNMOpj51hxAaZmU5wQuSL_d-inbfcn0Q
VITE_SUPABASE_PROJECT_ID=efximdysssnbnncuxleh

Para Vercel

1. Ve a tu proyecto en Vercel Dashboard

2. Settings → Environment Variables

3. Agrega cada variable:

Variable	Valor
VITE_SUPABASE_URL	https://efximdysssnbnncuxleh.supabase.co
VITE_SUPABASE_PUBLISHABLE_KEY	eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...
VITE_SUPABASE_PROJECT_ID	efximdysssnbnncuxleh

Para Netlify

1. Ve a tu sitio en Netlify Dashboard

2. Site settings → Environment variables

3. Agrega las mismas variables

---

Paso 3: Desplegar en Vercel (Recomendado)

Opción A: Desde la CLI

# Instalar Vercel CLI
npm install -g vercel

# Login
vercel login

# Desplegar
vercel

# Producción
vercel --prod

Opción B: Desde el Dashboard

1. Ve a vercel.com/new

2. Importa tu repositorio de GitHub

3. Framework Preset: Vite

4. Configura las variables de entorno

5. Click "Deploy"

---

Paso 4: Desplegar Edge Functions

Las Edge Functions deben desplegarse en tu proyecto Supabase:

# Instalar Supabase CLI
npm install -g supabase

# Login
supabase login

# Vincular proyecto
supabase link --project-ref efximdysssnbnncuxleh

# Desplegar funciones
cd supabase/functions
supabase functions deploy

---

Paso 5: Configurar Secrets en Supabase

Ve a Supabase Dashboard → Settings → Edge Functions → Secrets y agrega:

Secret	Descripción
CLERK_PUBLISHABLE_KEY	Tu clave pública de Clerk
CLERK_SECRET_KEY	Tu clave secreta de Clerk
GEMINI_API_KEY	API key de Google Gemini
OPENAI_API_KEY	API key de OpenAI
LIVEBLOCKS_SECRET_KEY	Clave de Liveblocks
HUBSPOT_ACCESS_TOKEN	Token de HubSpot (si usas)
PIPEDREAM_CLIENT_ID	Client ID de Pipedream
PIPEDREAM_CLIENT_SECRET	Secret de Pipedream
PIPEDREAM_PROJECT_ID	Project ID de Pipedream

---

Paso 6: Configurar Autenticación en Supabase

Configurar URLs de redirección

1. Ve a Supabase Dashboard → Authentication → URL Configuration

2. Configura:

   • Site URL: https://tu-app.vercel.app

   • Redirect URLs:

     • https://tu-app.vercel.app

     • https://tu-app.vercel.app/*

     • http://localhost:5173 (para desarrollo)

---

Paso 7: Migrar Base de Datos

Si aún no has ejecutado la migración:

1. Ve a Supabase Dashboard → SQL Editor

2. Ejecuta el contenido de docs/migration/01-schema-migration.sql

3. Exporta datos con las queries de docs/migration/02-data-export-queries.sql

4. Importa los datos en tu nuevo proyecto

---

Verificación Final

Checklist

• Repositorio clonado y dependencias instaladas

• Variables de entorno configuradas en Vercel/Netlify

• Schema migrado a Supabase externo

• Datos importados

• Edge Functions desplegadas

• Secrets configurados en Supabase

• URLs de autenticación configuradas

• App desplegada y funcionando

Test de la aplicación

1. Abre tu URL de Vercel/Netlify

2. Prueba el login/registro

3. Crea un presupuesto de prueba

4. Verifica que se guarda en la base de datos

---

Troubleshooting

Error: "Invalid API key"

• Verifica que VITE_SUPABASE_PUBLISHABLE_KEY esté correctamente configurado

• Asegúrate de que las variables estén en el entorno de build

Error: "CORS"

• Agrega tu dominio a las URLs permitidas en Supabase

• Dashboard → Authentication → URL Configuration → Redirect URLs

Edge Functions no responden

• Verifica que los secrets estén configurados

• Revisa logs en Dashboard → Edge Functions → Logs

Clerk no funciona

• Actualiza las URLs en tu dashboard de Clerk

• Agrega tu nuevo dominio como "Allowed origins"

---

Comandos Útiles

# Desarrollo local
npm run dev

# Build de producción
npm run build

# Preview del build
npm run preview

# Desplegar a Vercel
vercel --prod

# Ver logs de Edge Functions
supabase functions logs --project-ref efximdysssnbnncuxleh