El envío de correos electrónicos es una funcionalidad fundamental en muchas aplicaciones, ya sea para notificaciones de usuarios, actualizaciones transaccionales o fines de marketing.
Sin embargo, implementar soluciones de correo electrónico a veces puede ser complicado, ya que hay que integrar el correo con el lenguaje de plantilla, comprobar si hay dependencias...
¡Pero!
Con el paquete @nestixis/nestjs-mailer
, puede simplificar este proceso y al mismo tiempo garantizar flexibilidad y confiabilidad.
Este paquete aprovecha el poder de React y Nodemailer, lo que lo convierte en una herramienta moderna y amigable para los desarrolladores para crear plantillas de correo electrónico dinámicas y enviar correos electrónicos sin esfuerzo.
Veamos ahora cómo configurarlo y usarlo :)
Instalación del paquete
Para comenzar, debe instalar el paquete nestjs-mailer
en su aplicación NestJS. Este paquete está disponible a través de npm, lo que hace que la instalación sea rápida y sencilla. Ejecute el siguiente comando en su terminal:
npm install @nestixis/nestjs-mailer
Configurando el modulo
Una vez instalado el paquete, el siguiente paso es configurar MailerSdkModule
en su aplicación.
La configuración es sencilla y, para realizar pruebas, puede utilizar una herramienta como
A continuación se muestra un ejemplo de cómo configurarlo:
import { MailerSdkModule } from '@nestixis/nestjs-mailer'; import { Module } from '@nestjs/common'; import { AppController } from './app.controller'; import { AppService } from './app.service'; @Module({ imports: [ MailerSdkModule.register({ auth: { user: 'username', password: 'password', host: 'sandbox-smtp.mailcatch.app', port: 2525, ssl: false, }, from: '[email protected]', }), ], controllers: [AppController], providers: [AppService], }) export class AppModule {}
Crear una plantilla de correo electrónico
Para que sus correos electrónicos sean visualmente atractivos y más dinámicos, puede combinar plantillas con React, y el paquete @react-email/components
le permite diseñar dichas plantillas de correo electrónico.
**Pero antes de eso, debes llamar al archivo invite-admin-with-account-template.tsx y configurarlo
**
"jsx": "react"
en tu tsconfig.json
A continuación se muestra un ejemplo de una plantilla para invitar a un nuevo usuario administrador:
import { Body, Container, Head, Html, Img, Link, Section, Text, } from '@react-email/components'; import * as React from 'react'; export default function InviteAdminWithAccountTemplate({ translation, language, invitationHref, passwordHref, logoUrl, }) { return ( <Html lang={language}> <Head> <style>{/* Your custom styles here */}</style> </Head> <Body style={{ fontFamily: 'Arial, sans-serif' }}> <Section> <Container> {logoUrl ? ( <Img src={logoUrl} alt="Logo" /> ) : ( <Text>{translation.titleInside}</Text> )} <Text>{translation.contentPart1}</Text> <Text>{translation.contentPart2}</Text> <Text> {translation.contentPart3.subpart1} <Link href={invitationHref}> {translation.contentPart3.subpart2} </Link> {translation.contentPart3.subpart3} </Text> <Text> {translation.contentPart4.subpart1} <Link href={passwordHref}> {translation.contentPart4.subpart2} </Link> </Text> </Container> </Section> </Body> </Html> ); }
Inyección del remitente del correo electrónico
Después de crear la plantilla de correo electrónico, el siguiente paso es enviar el correo electrónico. Para ello, debe introducir el remitente del correo electrónico en su servicio.
import { EmailSenderInterface, MAILER_SDK_CLIENT, } from '@nestixis/nestjs-mailer'; import { Inject, Injectable } from '@nestjs/common'; import InviteAdminWithAccountTemplate from './invite-admin-with-account-template'; @Injectable() export class AppService { constructor( @Inject(MAILER_SDK_CLIENT) private readonly emailSender: EmailSenderInterface, ) {} async send(): Promise<void> { const translations = { titleInside: { subpart1: 'Welcome', subpart2: ' to the platform!' }, contentPart1: 'Hello', contentPart2: 'Your admin account has been created.', contentPart3: { subpart1: 'Click here to activate your account: ', subpart2: 'Activate', subpart3: '.', }, contentPart4: { subpart1: 'To set your password, click here: ', subpart2: 'Set password', }, }; const emailContent = await InviteAdminWithAccountTemplate({ translation: translations, language: 'en', invitationHref: 'xxx', passwordHref: 'xxx', logoUrl: 'logo.png', }); await this.emailSender.sendEmail( '[email protected]', 'Admin Invitation', emailContent, ); } }
¡Hecho!
¡Eso es todo! Has integrado correctamente nestjs-mailer
en tu aplicación.
Para obtener más detalles y funciones avanzadas, consulte