Neste artigo vamos aprender a como enviar emails com NestJs e o Nodemailer, um dos módulos de envio de email mais utilizados do ecossistema NodeJS.
Antes de começar, é importante que você já saiba como criar um projeto utilizando o NestCLI, para isto, você pode acessar o artigo “O que é NestJS?” onde explicamos o passo a passo para criar um projeto do zero utilizando o NestCLI.
Curso Node.js - Fundamentos
Conhecer o cursoInstalando Template Engine e Nodemailer
Primeiramente, vamos criar um projeto chamado chamado ‘nest-mail’, e instalar os pacotes necessários para aplicação, que serão:
- HandleBars: uma template engine para a criação da view, a interface que vamos utilizar para criar o formulário de envio de email.
npm install hbs
- Nodemailer: um dos módulos do ecossistema node mais utilizados para envio de email que suporta, por exemplo, protocolo SMTP e outras opções o tornando versátil e fácil de utilizar.
npm install --save @nestjs-modules/mailer nodemailer
npm install --save-dev @types/nodemailer
Criando Formulário para envio de email com NestJS
Se você não tem nenhum conhecimento de NestJS, aconselho seguir o artigo “criando primeiro crud com NestJS” para facilitar o entendimento do restante do artigo, garanto que será um aprendizado importante.
Neste momento vamos criar a view do formulário, onde teremos um campo para o email e o campo da mensagem, conforme a seguir:
Teremos então uma pasta views na raiz do projeto e dentro dela o arquivo forms.hbs, com o seguinte conteúdo:
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Envio de Email</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="mb-3 mt-3">
<h3>Envio de emails Utilizando NestJS</h3>
<form action="/enviar-email" method="post">
<div class="col-md-4">
<input class="form-control mb-3" type="email" placeholder="Email" name="email">
</div>
<div class="col-md-4">
<textarea class="form-control mb-3" type="text" placeholder="Mensagem" name="mensagem"></textarea>
</div>
<button class="btn btn-primary" type="submit">Enviar Email</button>
</form>
</div>
</div>
</body>
</html>
Configurando a Template Engine
Após a criação do arquivo de view, precisamos configurar o arquivo main.ts do projeto para a aplicação localizar onde estará o arquivo da view, com as configurações a seguir:
import { NestFactory } from '@nestjs/core';
import { NestExpressApplication } from '@nestjs/platform-express';
import { join } from 'path';
import { AppModule } from './app.module';
async function bootstrap() {
const app = await NestFactory.create<NestExpressApplication>(AppModule);
app.setBaseViewsDir(join(__dirname, '..', 'views'));
app.setViewEngine('hbs');
await app.listen(3000);
}
bootstrap();
- app.setBaseViewsDir(), é onde configuramos o diretório que estará as views.
- app.setViewEngine(), é onde configuramos o Template Engine a ser utilizado.
Configurando as rotas
Com o formulário criado, vamos desenvolver as rotas da aplicação, tanto a rota para acessar a página do formulário quanto a rota que enviará os dados para o serviço de email utilizando o Nodemailer.
As rotas são de responsabilidade do arquivo app.controller.ts, conforme abaixo:
import { Controller, Get, Post, Render, Request } from '@nestjs/common';
import { AppService } from './app.service';
@Controller()
export class AppController {
constructor(private readonly appService: AppService) {}
@Get('email')
@Render('form')
exibirForm() {
//
}
@Post('enviar-email')
enviarEmail(@Request() req) {
return this.appService.enviarEmail(
req.body.email,
req.body.mensagem,
);
}
}
Aqui temos então as duas rotas configuradas, a rota GET, que ao acessarmos localhost:3000/email será renderizado a view form.hbs, desta forma exibindo o formulário, e então a rota POST “enviar-email”, que é a rota responsável por enviar os dados do corpo da requisição para o serviço de email. Veja que temos o appService no construtor, e na rota enviar-email executamos o método this.appService.enviarEmail onde passamos então o email do destinatário e a mensagem.
Curso TypeScript - Fundamentos
Conhecer o cursoConfigurando os dados do email
Vamos criar este método no arquivo app.service.ts:
import { MailerService } from '@nestjs-modules/mailer';
import { Injectable } from '@nestjs/common';
@Injectable()
export class AppService {
constructor(private mailerService: MailerService) {}
async enviarEmail(email: string, mensagem: string) {
await this.mailerService.sendMail({
to: email,
from: 'wesley.gado@treinaweb.com.br',
subject: 'Enviando Email com NestJS',
html: `<h3 style="color: red">${mensagem}</h3>`,
});
}
}
Há algumas questões que merecem atenção aqui, primeiro é em relação ao módulo @nestjs-modules/mailer, lembra que instalamos ele logo no começo do artigo?
Então, aqui que ele será usado, vamos importar o módulo e então criar o mailerService passando no construtor, dessa forma, quando o método enviarEmail for executado, vamos chamar o método sendMail do módulo, nele, podemos configurar os dados do email a ser enviado.
Neste exemplo temos o básico para o envio do email, as propriedades:
- to: para quem será enviado, aqui devemos passar o destinatário que recebemos como parâmetro;
- from: neste caso sendo o remetente do email;
- subject: o assunto do email;
- html: apontando que o corpo do email será um html e o seu conteúdo, também há a possibilidade de termos uma view específica para o envio do email personalizada ou até enviar um simples texto, como podemos ver na documentação do Nodemailer.
Utilizando o mailgun como serviço de envio de emails
Ok, temos o formulário, as rotas e as características do email em si, mas como vamos enviar esse email? Agora precisamos configurar um serviço de envio de email, para fins de exemplo, vamos utilizar a conta de testes gratuitas do mailgun, nele é possível testarmos a nossa aplicação de forma prática. Entre no site do mailgun, clique em “Get Started”, preencha os dados e deixe desabilitada a checkbox “add payment info” para não cadastrar um método de pagamento, conforme abaixo:
Agora basta selecionar “i’m not a robot” e clicar em “create account”. Sua conta estará criada! Só precisamos localizar o usuário e senha, para isto clique na opção sending e no primeiro link com o prefixo sandbox:
Perfeito, agora basta clicar em SMTP e pegar os dados que serão exibidos, de forma similar como a imagem a seguir:
Obs: ao utilizarmos o mailgun no ambiente de testes, existe a limitação de que precisamos previamente cadastrar os emails de destino. Basta adicionar os emails e confirmar que eles estarão aptos a receber os emails enviados pelo mailgun (ou seja, você terá que ter acesso a esses emails).
Configurando o Nodemailer com Mailgun
Com os dados do serviço de envio de email, vamos configurar o Nodemailer da seguinte forma, no arquivo app.module.ts da aplicação vamos importar o MailerModule e configurar o Nodemailer com os dados do mailgun:
import { MailerModule } from '@nestjs-modules/mailer';
import { Module } from '@nestjs/common';
import { AppController } from './app.controller';
import { AppService } from './app.service';
@Module({
imports: [
MailerModule.forRoot({
transport: {
host: 'smtp.mailgun.org', //host smtp
secure: false, //regras de segurança do serviço smtp
port: 587, // porta
auth: { //dados do usuário e senha
user: 'seu-usuario',
pass: 'sua-senha',
},
ignoreTLS: true,
},
defaults: { // configurações que podem ser padrões
from: '"',
},
}),
],
controllers: [AppController],
providers: [AppService],
})
export class AppModule {}
Para ver exemplos e outras opções de configurações mais personalizadas, você pode acessar a documentação do @nestjs-modules/mailer.
Testando a aplicação
Perfeito, agora vamos executar a aplicação com o comando npm run start , entrar pelo navegador em localhost:3000/email , e enviar o seguinte email:
Sucesso! Agora verifique se o email foi enviado na sua caixa de entrada, lembrando que devemos passar um email previamente cadastrado no mailgun.
Curso Nest.js - Fundamentos
Conhecer o cursoConclusão
Neste artigo aprendemos a criar uma aplicação simples de envio de emails utilizando o NestJS com o módulo Nodemailer e configurar de forma prática um serviço de envio de emails, o mailgun. Com este conhecimento podemos agregar muitos recursos as mais diversas aplicações, como: processos de recuperação de senha, confirmações de cadastros, campanhas de email marketing entre outras possibilidades!
Ah, antes que me esqueça, você pode conferir o código da aplicação de exemplo deste artigo no repositório do github 😀
Nesse artigo vimos como enviar emails a partir de uma aplicação NestJS, mas isso é apenas o começo, existem muitos outros recursos e funcionalidades disponíveis neste incrível framework, caso queira aprender mais sobre NestJS saiba que aqui na TreinaWeb nós temos o curso [https://www.treinaweb.com.br/curso/nestjs-fundamentos] que possui 02h07 de videos e um total de 18 exercícios. Conheça também nossos outros cursos de TypeScript.
Veja quais são os tópicos abordados durante o curso de NestJS - Fundamentos:
- Conhecendo a estrutura;
- Utilizando Nest CLI;
- Entendendo Rotas, Controllers e Views;
- Conexão com banco de dados;
- Usando TypeORM;
- Template Engine.
