Como enviar emails com NestJS e Nodemailer

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 curso

Instalando 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:

Formulário de envio de emails com NestJS

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 curso

Configurando 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:

Desabilitando meio de pagamento mailgun

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:

Menu Mailgun

Perfeito, agora basta clicar em SMTP e pegar os dados que serão exibidos, de forma similar como a imagem a seguir:

Dados de autenticação do Mailgun

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).

Autorização de Emails Destinatários Mailgun

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:

Enviando Email Pela Aplicação

Sucesso! Agora verifique se o email foi enviado na sua caixa de entrada, lembrando que devemos passar um email previamente cadastrado no mailgun.

Teste de recebimento de email com sucesso

Curso Nest.js - Fundamentos

Conhecer o curso

Conclusã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: