2.2 KiB
2.2 KiB
React Email (padrão de templates de e-mail)
Este projeto usa React Email como base para criar e manter templates de e-mail em React/TypeScript, com foco em compatibilidade entre clientes (Gmail/Outlook/Apple Mail).
Por que React Email
- E-mail não é navegador: suporte a CSS é limitado e inconsistente.
- React Email fornece componentes e um fluxo de preview que ajudam a manter layouts com tabelas e estilos inline, de forma mais sustentável.
Estrutura de pastas
- Templates:
emails/ - Componentes compartilhados (não aparecem no preview):
emails/_components - Assets para preview local:
emails/static(servidos como/static/...no preview server)
Templates atuais:
emails/automation-email.tsx(automações)emails/simple-notification-email.tsx(notificações simples)
Preview local (CLI)
Comandos (Bun):
bun run email:dev→ abre o preview server emhttp://localhost:3001bun run email:export→ gera HTML ememails/out(útil para inspeção/debug)
Notas:
- O
email devusa heurísticas para listar templates (arquivos.tsxcomexport default). - Para evitar que pastas apareçam no menu, prefixe com
_(ex.:emails/_components).
Como os templates viram HTML no backend
O backend renderiza templates React em HTML no momento do envio usando @react-email/render.
Pontos do código:
- Renderização:
convex/reactEmail.tsxrenderAutomationEmailHtml(...)renderSimpleNotificationEmailHtml(...)
Envio via SMTP (Convex)
O envio real ocorre em Convex Action (Node), evitando I/O de rede dentro de mutations.
Arquivos:
convex/ticketNotifications.ts(actions de envio)docs/AUTOMATIONS_EMAIL.md(fluxo de automações + variáveis/CTA)
Teste manual de envio (SMTP)
Script de teste:
bun run email:test-send -- --to monkeyesdras@gmail.com
Parâmetros:
--to(opcional): destinatário (default:monkeyesdras@gmail.com)--subject(opcional): assunto
Variáveis necessárias no .env.local (ou .env):
SMTP_HOSTSMTP_PORTSMTP_USERSMTP_PASSSMTP_FROM_EMAILSMTP_FROM_NAME(opcional)SMTP_SECURE(opcional)
O script usa o template emails/automation-email.tsx e envia um e-mail real via SMTP.