📧 Configurar Email SMTP para Formulario de Contacto

[GMNAPI]

📧 Configurar Email para Formulario de Contacto

🔴 Problema

El formulario de contacto no envía emails porque faltan las variables de entorno SMTP.

Estado actual:

• ✅ Código implementado y funcional
• ✅ Tests pasando (80%+ coverage)
• ❌ Variables de entorno NO configuradas
• ❌ Emails NO se envían

---

✅ Solución

Configurar las 6 variables de entorno requeridas:

EMAIL_HOST=smtp.gmail.com
EMAIL_PORT=587
EMAIL_USER=angel@gestionominegocio.es
EMAIL_PASSWORD=xxxx xxxx xxxx xxxx  # Gmail App Password
EMAIL_FROM=angel@gestionominegocio.es
EMAIL_TO=angel@gestionominegocio.es

---

📋 Tareas

1. Crear .env.local para desarrollo

Archivo: apps/portfolio/.env.local

EMAIL_HOST=smtp.gmail.com
EMAIL_PORT=587
EMAIL_USER=angel@gestionominegocio.es
EMAIL_PASSWORD=xxxx xxxx xxxx xxxx
EMAIL_FROM=angel@gestionominegocio.es
EMAIL_TO=angel@gestionominegocio.es

Obtener Gmail App Password:

1. Ir a: https://myaccount.google.com/security
2. Activar "Verificación en 2 pasos" (requisito)
3. Buscar "Contraseñas de aplicaciones"
4. Seleccionar "Correo" → "Otro"
5. Copiar código de 16 dígitos
6. Pegar en EMAIL_PASSWORD (mantener espacios)

⏱️ Tiempo: 10-15 minutos

---

2. Crear .env.example como documentación

Archivo: apps/portfolio/.env.example

# Email Configuration (Required for Contact Form)
# Copy this file to .env.local and fill with your SMTP credentials

# SMTP Server
EMAIL_HOST=smtp.example.com

# SMTP Port (587 for TLS, 465 for SSL)
EMAIL_PORT=587

# SMTP User
EMAIL_USER=your-email@example.com

# SMTP Password (Gmail: use App Password)
EMAIL_PASSWORD=your-app-password

# Email From Address
EMAIL_FROM=noreply@example.com

# Email To Address (where messages are sent)
EMAIL_TO=contact@example.com

⏱️ Tiempo: 5 minutos

---

3. Configurar variables en Vercel (Producción)

Pasos:

1. Ir a: https://vercel.com/dashboard
2. Seleccionar proyecto "DevPortfolio"
3. Settings → Environment Variables
4. Añadir cada variable:

Variable	Value	Environments
EMAIL_HOST	smtp.gmail.com	Production, Preview
EMAIL_PORT	587	Production, Preview
EMAIL_USER	angel@gestionominegocio.es	Production, Preview
EMAIL_PASSWORD	[App Password]	Production, Preview
EMAIL_FROM	angel@gestionominegocio.es	Production, Preview
EMAIL_TO	angel@gestionominegocio.es	Production, Preview

5. Click Save en cada una
6. Redeploy la aplicación (obligatorio)

⏱️ Tiempo: 10 minutos + redeploy (3 min)

---

4. Probar en desarrollo

cd apps/portfolio
npm run dev

1. Abrir: http://localhost:3002
2. Scroll a sección Contacto
3. Llenar formulario:
   • Nombre: "Test"
   • Email: "test@example.com"
   • Mensaje: "Prueba de email"
4. Click "Enviar mensaje"

Resultado esperado:

• ✅ Mensaje verde de éxito
• ✅ Formulario se limpia
• ✅ Email recibido en EMAIL_TO

⏱️ Tiempo: 5 minutos

---

5. Verificar en producción

1. Ir a: https://desenvolupadormaster.vercel.app
2. Sección Contacto → Enviar mensaje de prueba
3. Verificar email recibido

⏱️ Tiempo: 5 minutos

---

⚙️ Proveedores SMTP Alternativos

Gmail (Recomendado para desarrollo)

EMAIL_HOST=smtp.gmail.com
EMAIL_PORT=587
EMAIL_USER=tu.email@gmail.com
EMAIL_PASSWORD=[App Password de 16 dígitos]

• ✅ Gratis
• ✅ Fácil configuración
• ⚠️ Requiere App Password
• ⚠️ Límite: 500 emails/día

SendGrid (Profesional)

EMAIL_HOST=smtp.sendgrid.net
EMAIL_PORT=587
EMAIL_USER=apikey
EMAIL_PASSWORD=[Tu API Key]

• ✅ 100 emails/día gratis
• ✅ Mejor deliverability
• ✅ Analytics incluido

Mailgun (Profesional)

EMAIL_HOST=smtp.mailgun.org
EMAIL_PORT=587
EMAIL_USER=postmaster@mg.tudominio.com
EMAIL_PASSWORD=[API Key]

• ✅ API flexible
• ✅ Buen soporte

---

🐛 Troubleshooting

Error: "Email configuration is incomplete"

Causa: Faltan variables de entorno

Solución:

1. Verificar .env.local existe en apps/portfolio/
2. Verificar tiene las 6 variables
3. Reiniciar npm run dev

---

Error: "Invalid login" (Gmail)

Causa: Usando contraseña normal en vez de App Password

Solución:

1. Generar App Password en: https://myaccount.google.com/apppasswords
2. Usar ese código en EMAIL_PASSWORD

---

Error: "Connection timeout"

Causa: Puerto o host incorrecto

Solución:

• Usar smtp.gmail.com y puerto 587
• Verificar firewall

---

Email llega a spam

Solución temporal:

• Marcar como "No es spam"

Solución permanente:

• Usar SendGrid con dominio verificado
• Configurar SPF/DKIM

---

✅ Checklist de Implementación

Local (Desarrollo)

• Crear apps/portfolio/.env.local
• Generar Gmail App Password
• Configurar las 6 variables EMAIL_*
• Reiniciar npm run dev
• Probar envío de email
• Verificar email recibido

Documentación

• Crear apps/portfolio/.env.example
• Commitear .env.example al repo
• Verificar .env.local está en .gitignore

Producción (Vercel)

• Añadir 6 variables en Vercel Dashboard
• Marcar "Production" y "Preview"
• Redeploy aplicación
• Probar desde sitio en producción
• Verificar email recibido

---

⏱️ Tiempo Total Estimado

Tarea	Tiempo
Crear .env.local	10-15 min
Crear .env.example	5 min
Configurar Vercel	10 min
Redeploy	3 min
Probar desarrollo	5 min
Probar producción	5 min
Total	40-45 min

---

🎯 Resultado Esperado

✅ Formulario de contacto funcional en desarrollo
✅ Formulario de contacto funcional en producción
✅ Emails llegan correctamente
✅ Documentación completa en .env.example
✅ Zero cambios de código (solo configuración)

---

📚 Recursos

• Gmail App Passwords
• SendGrid Docs
• Vercel Environment Variables
• Nodemailer Docs

---

Prioridad: 🔴 ALTA
Complejidad: 🟢 BAJA (solo configuración)
Impacto: 🔴 ALTO (contactabilidad del portfolio)