Workflow: Desarrollo vs Producción

Esta guía explica cómo trabajar con TalentBricks AI en diferentes entornos. Es esencial que todos los miembros del equipo entiendan este workflow para colaborar efectivamente.

🎯 Conceptos Fundamentales

Entornos

Desarrollo (DEV) = Tu computadora local Producción (PROD) = Internet/Nube (Fly.io + Neon)

┌─────────────────────────┐         ┌──────────────────────────┐
│      DESARROLLO         │         │       PRODUCCIÓN         │
│    (Tu Computadora)     │         │       (Fly.io)          │
├─────────────────────────┤         ├──────────────────────────┤
│ Frontend:               │         │ Frontend:                │
│ http://localhost:3000   │         │ talentbricksai-client    │
│                         │         │ .fly.dev                 │
│ Backend:                │         │                          │
│ http://localhost:3001   │         │ Backend:                 │
│                         │         │ talentbricksai.fly.dev   │
│ Base de Datos:          │         │                          │
│ PostgreSQL local        │         │ Base de Datos:           │
│ (Docker via wasp db)    │         │ Neon PostgreSQL          │
│                         │         │                          │
│ Configuración:          │         │ Configuración:           │
│ .env.server             │         │ Fly secrets              │
│ .env.client             │         │ (flyctl secrets set)     │
└─────────────────────────┘         └──────────────────────────┘

🚀 Workflow de Desarrollo Diario

1. Iniciar el Entorno de Desarrollo

Necesitas 3 terminales abiertas simultáneamente:

Terminal 1: Base de Datos

cd app
wasp db start
# Esto inicia PostgreSQL en un contenedor Docker
# Déjalo corriendo en esta terminal

Terminal 2: Migraciones (si hay cambios en schema.prisma)

cd app
wasp db migrate-dev
# Aplica cambios del esquema de la base de datos
# Solo cuando modificas app/schema.prisma

Terminal 3: Servidor de Desarrollo

cd app
wasp start
# Inicia:
# ✅ Cliente (React) en http://localhost:3000
# ✅ Servidor (Node.js) en http://localhost:3001
# ✅ Hot reload automático

2. Hacer Cambios

# Todos los cambios de código van en:
app/src/
  ├── auth/           # Autenticación
  ├── courses/        # Cursos y lecciones
  ├── user/           # Perfil de usuario
  ├── admin/          # Panel admin
  ├── landing-page/   # Página de inicio
  └── shared/         # Componentes compartidos

# Los cambios se reflejan automáticamente gracias al hot reload

3. Probar Localmente

# Opcional: Cargar datos de prueba
wasp db seed seedAllDummyData
# Crea: 4 cursos, 50 usuarios, certificados de prueba

# Abre http://localhost:3000 en tu navegador
# Prueba la funcionalidad que cambiaste

4. Commit y Push

git add .
git commit -m "feat: descripción clara del cambio"
git push origin main

# O si trabajas en una rama:
git checkout -b feature/nombre-feature
git add .
git commit -m "feat: descripción"
git push origin feature/nombre-feature
# Luego crea un Pull Request

📦 Deploy a Producción

Cuándo Hacer Deploy

• ✅ Feature completo y probado localmente
• ✅ Tests pasando (si aplica)
• ✅ Code review aprobado
• ✅ Merge a main completado

Proceso de Deploy

Opción 1: Deploy Completo (Backend + Frontend)

# 1. Asegúrate de estar en la rama main actualizada
git checkout main
git pull origin main

# 2. Limpia builds anteriores
cd app
wasp clean

# 3. Build con variables de producción
REACT_APP_API_URL=https://talentbricksai.fly.dev wasp build

# 4. Build del cliente
cd .wasp/build/web-app
REACT_APP_API_URL=https://talentbricksai.fly.dev npm run build

# 5. Crea Dockerfile del cliente (si no existe)
cat > Dockerfile << 'EOF'
FROM nginx:alpine
COPY build /usr/share/nginx/html
RUN cat > /etc/nginx/conf.d/default.conf <<'NGINX'
server {
    listen 8043;
    server_name _;
    root /usr/share/nginx/html;
    index index.html;
    gzip on;
    gzip_vary on;
    gzip_types text/plain text/css text/xml text/javascript application/javascript application/json;
    location / {
        try_files $uri $uri/ /index.html =404;
    }
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot|webp)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }
}
NGINX
EXPOSE 8043
CMD ["nginx", "-g", "daemon off;"]
EOF

# 6. Deploy del servidor
cd ../../..
flyctl deploy --ha=false --app talentbricksai --config fly-server.toml

# 7. Deploy del cliente
cd .wasp/build/web-app
flyctl deploy --ha=false --app talentbricksai-client

Opción 2: Deploy Solo Backend

cd app
wasp build
cd .wasp/build
flyctl deploy --ha=false --app talentbricksai --config ../../fly-server.toml

Opción 3: Deploy Solo Frontend

cd app
wasp build
cd .wasp/build/web-app
REACT_APP_API_URL=https://talentbricksai.fly.dev npm run build
# Asegúrate que el Dockerfile existe
flyctl deploy --ha=false --app talentbricksai-client

🔑 Variables de Entorno

Desarrollo (.env.server y .env.client)

Estos archivos NO se suben al repositorio (están en .gitignore).

app/.env.server - Variables del servidor de desarrollo:

# Base de datos (opcional si usas wasp db start)
# DATABASE_URL=postgresql://...

# Stripe (modo test)
STRIPE_API_KEY=sk_test_...
STRIPE_WEBHOOK_SECRET=whsec_...

# OAuth
GOOGLE_CLIENT_ID=...
GOOGLE_CLIENT_SECRET=...
GITHUB_CLIENT_ID=...
GITHUB_CLIENT_SECRET=...

# SendGrid
SENDGRID_API_KEY=SG....

# Admin emails
ADMIN_EMAILS=tu-email@talentbricks.com

# IDs de productos Stripe
PAYMENTS_HOBBY_SUBSCRIPTION_PLAN_ID=price_...
PAYMENTS_PRO_SUBSCRIPTION_PLAN_ID=price_...

app/.env.client - Variables del cliente de desarrollo:

# En desarrollo apunta a localhost (por defecto)
# En producción debe apuntar al servidor en Fly.io
REACT_APP_API_URL=http://localhost:3001

# Analytics
REACT_APP_GOOGLE_ANALYTICS_ID=G-...

Producción (Fly.io Secrets)

Las variables de producción se configuran con flyctl secrets:

# Ver secrets actuales
flyctl secrets list --app talentbricksai

# Agregar/actualizar un secret
flyctl secrets set STRIPE_API_KEY=sk_live_... --app talentbricksai

# Agregar múltiples secrets a la vez
flyctl secrets set \
  STRIPE_API_KEY=sk_live_... \
  SENDGRID_API_KEY=SG.... \
  GOOGLE_CLIENT_ID=... \
  --app talentbricksai

# IMPORTANTE: El cliente NO usa Fly secrets
# El cliente necesita REACT_APP_API_URL en tiempo de BUILD

⚠️ Importante sobre Variables

Variable	DEV	PROD
Stripe Keys	sk_test_*	sk_live_*
Database	Local o wasp db	Neon cloud
API URL (cliente)	localhost:3001	talentbricksai.fly.dev
Emails	Modo dummy (consola)	SendGrid real

🐛 Debugging y Monitoreo

Ver Logs en Producción

# Logs del servidor (backend)
flyctl logs --app talentbricksai

# Logs del cliente (frontend)
flyctl logs --app talentbricksai-client

# Logs en tiempo real (follow)
flyctl logs --app talentbricksai -f

# Últimas 100 líneas
flyctl logs --app talentbricksai | tail -100

Verificar Estado de las Apps

# Estado del servidor
flyctl status --app talentbricksai

# Estado del cliente
flyctl status --app talentbricksai-client

# Ver máquinas activas
flyctl machines list --app talentbricksai

SSH a las Máquinas de Producción

# Conectarse al servidor
flyctl ssh console --app talentbricksai

# Una vez dentro:
cd /app
ls -la
cat .env  # Ver variables de entorno

📊 Archivos Importantes

Configuración de Wasp

Archivo	Descripción
app/main.wasp	Configuración principal: rutas, auth, operaciones
app/schema.prisma	Esquema de base de datos (modelos)
app/.env.server	Variables de entorno del servidor (DEV)
app/.env.client	Variables de entorno del cliente (DEV)

Configuración de Fly.io

Archivo	Descripción
app/fly-server.toml	Configuración del servidor en Fly.io
app/.wasp/build/web-app/fly.toml	Configuración del cliente en Fly.io

Estructura del Código

app/src/
├── auth/              # Sistema de autenticación
├── courses/           # Cursos, lecciones, quizzes
├── user/              # Perfil de usuario
├── admin/             # Panel de administración
├── landing-page/      # Página principal
├── payment/           # Integración con Stripe
├── comments/          # Sistema de comentarios
├── referral/          # Sistema de referidos
├── shared/            # Componentes compartidos
│   ├── content/locales/  # i18n (ES/EN)
│   └── components/       # UI components
└── server/            # Utilidades del servidor

✅ Checklist de Desarrollo

Antes de Empezar una Tarea

• git pull origin main (código actualizado)
• wasp db start (base de datos corriendo)
• wasp start (servidor dev corriendo)
• wasp db migrate-dev (si hay cambios en schema)

Antes de Hacer Commit

• Código funciona en localhost
• No hay errores en la consola del navegador
• No hay errores de TypeScript
• Mensajes de error están traducidos (ES y EN)
• Código sigue las convenciones del proyecto

Antes de Deploy a Producción

• Código mergeado a main
• Tests pasando (si aplica)
• Build local exitoso
• Variables de producción configuradas
• Backup de DB reciente (si hay migraciones)

🔄 Flujo Completo de un Feature

1. [DEV]  Crear rama feature
         ↓
2. [DEV]  Desarrollar y probar localmente
         ↓
3. [GIT]  Commit y push
         ↓
4. [GIT]  Pull Request
         ↓
5. [GIT]  Code Review
         ↓
6. [GIT]  Merge a main
         ↓
7. [PROD] Build con variables de producción
         ↓
8. [PROD] Deploy a Fly.io
         ↓
9. [PROD] Verificar en producción
         ↓
10.[PROD] Monitorear logs

🆘 Problemas Comunes

”Error connecting to database"

# Solución: Inicia la base de datos
wasp db start

"Port 3000 already in use"

# Solución: Mata el proceso
lsof -ti:3000 | xargs kill -9

"Changes not reflecting in browser"

# Solución: Hard reload
# Mac: Cmd + Shift + R
# Windows: Ctrl + Shift + R

# O reinicia el servidor dev
wasp start

"Client can’t connect to server in production”

# Problema: Cliente apunta a localhost
# Solución: Rebuild con REACT_APP_API_URL correcto
REACT_APP_API_URL=https://talentbricksai.fly.dev wasp build

📚 Recursos Adicionales

• Documentación de Wasp
• Guía de Deployment
• Setup Local
• Sistema de i18n
• Fly.io Docs

💡 Mejores Prácticas

1. Nunca uses credenciales de producción en desarrollo

   • Stripe: sk_test_* en DEV, sk_live_* en PROD
   • Base de datos: Local en DEV, Neon en PROD

2. Protege tus secretos

   • ❌ NUNCA hagas commit de .env.server o .env.client
   • ✅ Usa Fly secrets para producción
   • ✅ Documenta qué variables son necesarias

3. Mantén los entornos sincronizados

   • El código en main debe reflejar lo que está en producción
   • Deploy frecuentemente para evitar grandes cambios

4. Comunica los deploys

   • Avisa al equipo antes de un deploy importante
   • Documenta cambios que afecten a otros

5. Monitorea después de deploy

   • Revisa logs inmediatamente después
   • Verifica funcionalidad crítica en producción

---

¿Preguntas? Consulta con el equipo en Slack o abre un issue en el repositorio.