📨 Build and send emails in Nest framework using React.js

Features

• 🦾 Write your email templates in React and TypeScript

• 📬 No more template not found / sending blank emails.

• 🔰 No more missing context / variables from template.

• 🧪 Write testable templates intended for email clients.

• 💌 Built on top of react-email — the next generation of writing emails.

Installation

This library is an adapter for the @nestjs-modules/mailer module, so we'll install the dependencies alongside by running the command below.

npm i @webtre/nestjs-mailer-react-adapter @nestjs-modules/mailer nodemailer

Getting Started

To add support for React to your project, modify tsconfig.json

{
  "compilerOptions": {
    // add this line
    "jsx": "react-jsx"
  }
}

Configuration

// src/app.module.ts
import { Module } from "@nestjs/common";
import { MailerModule } from "@nestjs-modules/mailer";
import { ReactAdapter } from "@webtre/nestjs-mailer-react-adapter";

@Module({
  imports: [
    MailerModule.forRoot({
      transport: {
        host: "smtp.domain.com",
        port: 2525,
        secure: false,
        auth: {
          user: "[email protected]",
          pass: "password",
        },
      },
      defaults: {
        from: '"Webtre Technologies" <[email protected]>',
      },
      template: {
        dir: __dirname + "/templates",
        // Use the adapter
        adapter: new ReactAdapter(),

        // Or with optional config
        adapter: new ReactAdapter({
          pretty: false,
          plainText: true,
          htmlToTextOptions: {
            wordwrap: 130,
            limits: {
              ellipsis: "...",
            },
          },
        }),
      },
    }),
  ],
})
export class AppModule {}

To see more options that can be passed to the htmlToTextOptions object, click here.

Service Provider

import { Injectable } from '@nestjs/common';
import { MailerService } from '@nestjs-modules/mailer';

@Injectable()
export class ExampleService {
  constructor(private readonly mailerService: MailerService) {}

  async public example(): Promise<void> {
    await this.mailerService
      .sendMail({
        to: '[email protected]',
        subject: 'Testing react template',
        template: 'welcome', // The compiled extension is appended automatically.
        context: { // Data to be passed as props to your template.
          code: '123456',
          name: 'John Doe',
        },
      });
  }
}

React Template

// src/templates/welcome.tsx
interface Props {
  code: string;
  name: string;
}

export default function Welcome({ name, code }: Props) {
  return (
    <div>
      Hi {name}, thanks for signing up. Your code is {code}
    </div>
  );
}

Example

You can also check the example folder in this repository for a working usage example.

Credits

• react-email — build and send emails using React
• @nestjs-modules/mailer — a mailer module for Nest framework (node.js)

License

MIT License © 2022 Webtre Technologies