# 🛠️ 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:
```typescript
// 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:**
```bash
# 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:

```typescript
// 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

```bash
# 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"**
```bash
# Encuentra y mata el proceso
lsof -ti:3000 | xargs kill -9
```

---

**🎵 ¡Desarrollo con RepoDructor optimizado para proxy nginx!**