RepoDructor/DEVELOPMENT_GUIDE.md

🛠️ Guía de Desarrollo - RepoDructor

🚨 PROBLEMA SOLUCIONADO: WebSocket HMR

El problema era:

Nuxt intentaba conectarse directamente a wss://musica.nucleoriofrio.com:3000/ saltándose el proxy nginx.

Solución implementada:

Configuré HMR para usar el proxy correctamente:

// nuxt.config.ts
vite: {
  server: {
    hmr: {
      host: 'musica.nucleoriofrio.com',
      clientPort: 443,  // Puerto HTTPS del proxy
      protocol: 'wss'   // WebSocket seguro
    }
  }
}

🔧 CONFIGURACIÓN NGINX ACTUALIZADA

Archivo: nginx-dev-config.txt

Cambios clave:

• ✅ Soporte WebSocket para /_nuxt/
• ✅ Soporte DevTools para /__nuxt_devtools__/
• ✅ Headers Upgrade y Connection "upgrade"
• ✅ Sin headers de seguridad que bloqueen DevTools

🚀 PARA APLICAR LA SOLUCIÓN:

1. Actualiza nginx:

• Copia el contenido de nginx-dev-config.txt
• Pégalo en Nginx Proxy Manager → Custom Configuration
• Guarda y reinicia

2. Reinicia el servidor:

# Mata el proceso actual
pkill -f "npm run dev"

# Inicia de nuevo
npm run dev

3. Verifica que funcione:

• ✅ No más errores ERR_SSL_PROTOCOL_ERROR
• ✅ HMR funciona (cambios se aplican automáticamente)
• ✅ DevTools accesible (Shift + Alt + D)

🔄 OPCIÓN ALTERNATIVA (Si WebSocket sigue fallando)

Si aún tienes problemas, puedes deshabilitar HMR completamente:

// nuxt.config.ts - Versión sin HMR
vite: {
  server: {
    hmr: false  // Deshabilita HMR WebSocket
  }
}

Pros: Sin errores de WebSocket
Contras: Debes recargar manualmente la página para ver cambios

🎯 ESTADO ACTUAL

✅ Funcionando:

• 🎵 Reproducción de música
• 📱 PWA instalable
• 🔒 Proxy nginx
• 🎨 UI completa

🔧 En desarrollo:

• ⚡ Hot Module Replacement (HMR)
• 🛠️ DevTools integration

📝 COMANDOS ÚTILES

# Desarrollo normal
npm run dev

# Build para producción  
npm run build
npm start

# Verificar puerto 3000
lsof -i:3000

# Matar procesos en puerto 3000
pkill -f "npm run dev"

🐛 TROUBLESHOOTING

Error: "WebSocket connection failed"

1. Verifica que nginx tenga la configuración de nginx-dev-config.txt
2. Asegúrate de que incluya headers Upgrade y Connection
3. Reinicia nginx y el servidor de desarrollo

Error: "X-Frame-Options DENY"

1. Verifica que nginx NO tenga headers de seguridad
2. El middleware solo aplica X-Frame-Options a /api/music/
3. DevTools necesita poder crear iframes

Error: "Port 3000 already in use"

# Encuentra y mata el proceso
lsof -ti:3000 | xargs kill -9

---

🎵 ¡Desarrollo con RepoDructor optimizado para proxy nginx!