Skip to content

VERCEL_SUPABASE_DEPLOYMENT.md

Latest commit

 

History

History
347 lines (241 loc) · 7.26 KB

VERCEL_SUPABASE_DEPLOYMENT.md

File metadata and controls

347 lines (241 loc) · 7.26 KB
Raw

Vercel + Supabase Deployment Guide

Objetivo: Desplegar FocusXP a Vercel (frontend) y Supabase (database)

📋 Requisitos Previos

  • Cuenta en Vercel (vercel.com)
  • Cuenta en Supabase (supabase.com)
  • Git configurado y repositorio en GitHub
  • CLI de Vercel instalado: npm.cmd install -g vercel

Step 1: Configurar Base de Datos en Supabase ✅

1.1 Crear Proyecto en Supabase

  1. Ve a https://supabase.com y crea cuenta

  2. Dashboard → Nuevo Proyecto

  3. Configura:

    • Name: focusxp-db
    • Database Password: [Genera uno seguro]
    • Region: [Tu región más cercana]
    • Pricing Plan: Free tier está bien para empezar

  4. Espera a que se cree (~2 minutos)

1.2 Obtener Connection String

  1. En Supabase Dashboard, ve a: Settings → Database → Connection Strings
  2. Copia la connection string en "URI" (nodejs)
  3. Se verá así: 
    postgresql://postgres:[PASSWORD]@[HOST]:[PORT]/postgres

1.3 Guardar Connection String Seguro

CONNECTION_STRING=postgresql://postgres:[PASSWORD]@[HOST]:[PORT]/postgres

⚠️ IMPORTANTE:

  • Reemplaza [PASSWORD], [HOST], [PORT] con los valores reales
  • Usa esta URL en Vercel environment variables, NO en git

Step 2: Preparar Repositorio GitHub

2.1 Actualizar .gitignore

Asegúrate que tu .gitignore en root incluya:

.env
.env.local
.env.*.local
backend-node/.env
backend-node/.env.local
node_modules
dist
build

2.2 Subir a GitHub

git add .
git commit -m "Phase 2: Ready for Vercel deployment"
git push origin backend-dev

O si quieres pushar a main:

git push origin backend-dev:main

Step 3: Deploy Frontend a Vercel

3.1 Primer Deploy (Automático)

Opción A: Desde CLI

cd c:\Users\Usuario\ I\ 2026\Desktop\FocusXP\Focusxp

# Instalar Vercel CLI globalmente (una sola vez)
npm.cmd install -g vercel

# Deploy
vercel

Opción B: Desde Dashboard

  1. Ve a https://vercel.com/dashboard
  2. Click en "Add New..." → "Project"
  3. Importa tu repositorio de GitHub
  4. Vercel detectará automáticamente:
    • Root Directory: . (raíz)
    • Framework: Vite
    • Build Command: npm.cmd run build
    • Output Directory: dist

3.2 Configurar Frontend Environment Variables

En Vercel Dashboard → Project Settings → Environment Variables

Agregar:

VITE_API_URL = https://backend.example.com

O si el backend está en Vercel también:

VITE_API_URL = https://focusxp-backend.vercel.app

VITE_WS_URL = wss://focusxp-backend.vercel.app

Step 4: Deploy Backend a Vercel (Alternativo)

Opción A: Backend en Vercel como Serverless (Más Complejo)

Vercel soporta Node.js serverless functions. Requiere refactoring del código.

Opción B: Backend en Otro Servicio (RECOMENDADO para tu caso)

Para un servidor Express con WebSocket en vivo, mejor usar:

  • Railway (fácil, soporta PostgreSQL)
  • Render (heroku gratuito alternativo)
  • Fly.io (buena performance)
  • DigitalOcean App Platform

Deploy a Railway (Recomendado)

  1. Ve a https://railway.app
  2. Create New Project → GitHub Repo
  3. Railway detecta Node.js automáticamente
  4. Configura Build: 
    • npm --prefix backend-node install
npm --prefix backend-node run build
  5. Configura Start: 
    • npm --prefix backend-node start
  6. Agrega variables de entorno:

Step 5: Conectar Frontend a Backend

5.1 Actualizar CORS en Backend

En backend-node/src/server.js, actualiza CORS:

corsOptions = {
  origin: [
    'http://localhost:5173',
    'http://localhost:5174',
    'https://focusxp.vercel.app',  // Tu frontend Vercel
    'https://backend-focusxp.railway.app' // Tu backend
  ],
  credentials: true
};

5.2 Actualizar Frontend useApi Hook

En src/hooks/useApi.ts, asegúrate de usar la variable de entorno:

const API_URL = import.meta.env.VITE_API_URL || 'http://localhost:8000';

export async function useApi(endpoint: string, options: any) {
  const response = await fetch(`${API_URL}${endpoint}`, options);
  // ...
}

Step 6: Verificar Conexiones

6.1 Test de Backend

# Desde tu máquina local
curl -X GET https://backend-focusxp.railway.app/health

# Respuesta esperada:
# { "status": "ok", "database": "postgresql" }

6.2 Test de API Login

curl -X POST https://backend-focusxp.railway.app/auth/login \
  -H "Content-Type: application/json" \
  -d '{"email":"test@example.com","password":"password123"}'

6.3 Verificar Supabase Connection

En tu dashboard de Supabase, ve a:

  • SQL Editor → Ejecuta: 
    SELECT current_database(), current_user, now();

Step 7: Checklist Final

  • Frontend deployado en Vercel
  • Backend deployado (Railway/Render/etc)
  • Base de datos Supabase creada
  • DATABASE_URL configurada en backend
  • CORS configurado correctamente
  • VITE_API_URL configurada en frontend
  • Health check endpoint responde
  • Login desde frontend funciona
  • Datos persisten en Supabase
  • WebSocket conecta (si lo necesitas)

Comando Rápido: Deploy Completo

Opción 1: CLI Vercel + Railway

# 1. Verificar cambios
git status

# 2. Commit
git add .
git commit -m "Deploy config for Vercel + Supabase"

# 3. Push a GitHub
git push origin backend-dev

# 4. Vercel auto-deploya cuando pushas (si está conectado)
# 5. Railway auto-deploya cuando pushas (si está conectado)

# 6. Verificar status
vercel logs  # Para ver logs de Vercel

Opción 2: Manual Vercel + Railway

# Frontend
vercel deploy --prod

# Backend (desde Railway CLI)
railway up

Variables de Entorno Requeridas

En Vercel (Frontend)

VITE_API_URL=https://backend-focusxp.railway.app
VITE_WS_URL=wss://backend-focusxp.railway.app

En Railway (Backend)

DATABASE_URL=postgresql://user:password@host:port/database
NODE_ENV=production
CORS_ORIGINS=https://focusxp.vercel.app
JWT_SECRET=your-secret-key-here

En Supabase (Base de Datos)

No necesita variables, está todo en CONNECTION_STRING

Troubleshooting

Error: CORS Origin Not Allowed

Solución: Actualiza CORS_ORIGINS en backend con tu Vercel URL

Error: Cannot Connect to Database

Solución: Verifica que DATABASE_URL está correcto y Supabase está online

Error: WebSocket Connection Failed

Solución: Asegúrate que backend está en https/wss (no http/ws en producción)

Error: 502 Bad Gateway

Solución: Backend puede estar reiniciando, espera 1-2 minutos

URLs Finales (Ejemplo)

Componente URL
Frontend https://focusxp.vercel.app
Backend https://backend-focusxp.railway.app
Database PostgreSQL via Supabase
API Health https://backend-focusxp.railway.app/health

Próximos Pasos

  1. Deploy a Vercel/Railway today
  2. Phase 3: Liveness challenges en backend
  3. Monitoreo con Sentry o Datadog (opcional)
  4. Custom domain (ejemplo: focus-xp.app)

Estado: Listo para deployment
Tiempo Estimado: 20-30 minutos
Costo: $0 (Free tier Vercel + Free tier Railway + Free tier Supabase)