webtretech / nestjs-mailer-react-adapter

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

📨 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,
        }),
      },
    }),
  ],
})
export class AppModule {}

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(): 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>
  );
}

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

nestjs-mailer-react-adapter's Issues

How to preview email templates

Hey, nice package! I have successfully integrated this package into my project, but I'm wondering how would be the recommended workflow for previewing my templates with hot-reloading.

Thanks in advance ! :D

Support windows runtime

When running Nestjs in a Windows environment, the template could not be loaded properly.

Only URLs with a scheme in: file and data are supported by the default ESM loader. On Windows, absolute paths must be valid file:// URLs. Received protocol 'c:'

I'll submit an PR shortly.

Documentation improvements to be more clear

Hi, thanks a lot for the initiative of open sourcing this adapter, it has given me a direction on how integrate the React Email with NestJS.

But i had some issues on how setup this at first.

Here some points i think the instructions should be improved. In my case i configured the templates directory at src/emails/templates, containing the tsx files with react email templates.

A base point i have done were to setup swc builder with swc-loader and updating the test rules with test: /\.(tsx|ts|js|cjs|mjs)$/, at webpack.config.js

import { swcDefaultsFactory } from '@nestjs/cli/lib/compiler/defaults/swc-defaults';

const swcDefaultConfig = swcDefaultsFactory().swcOptions;

export const module = {
  rules: [
    {
      test: /\.(tsx|ts|js|cjs|mjs)$/,
      exclude: /node_modules/,
      use: {
        loader: 'swc-loader',
        options: swcDefaultConfig,
      },
    },
  ],
};

Also, i had to setup a .swcrc file, updating the sample with tsx=true

{
  "$schema": "https://json.schemastore.org/swcrc",
  "sourceMaps": true,  
  "module": {
    "type": "commonjs"
  },
  "jsc": {
    "target": "es2022",
    "parser": {
      "syntax": "typescript",
      "decorators": true,
      "dynamicImport": true,
      "tsx": true  
    },
    "transform": {
      "legacyDecorator": true,
      "decoratorMetadata": true      
    },
    "keepClassNames": true,
  },
  "minify": true
}

Also, is important to have jsx set as preserve on tsconfig.json.

Also, is import some scripts configured on package.json for the developmen of the templates.

"emails:dev": "email dev --dir src/emails/templates --port 5000",
"emails:export": "email export --dir src/emails/templates --outDir dist/emails/templates"

With this setup, is even not necessary run yarn emails:export, each time the server hot reloads on development mode, the templates are updated on dist/emails/templates.

By end, i had to do 2 updates on your adapter implementation:

1. With a console log, i noticed that this generic import were receiving a undefined, i updated from tmpl.default.default to tmpl.default
2. Looking at the docs, as this is a NodeJS backend project, i updated from JSX Tag notation to function call, to avoid some errors..

error passing component to render function

Hello, Im getting an error passing Component to render function.

Argument of type 'boolean' is not assignable to parameter of type 'ReactElement<any, string | JSXElementConstructor<any>>'.ts(2345)

https://github.com/webtretech/nestjs-mailer-react-adapter/blob/f968913154607530e00f5f93062a826c637c5caa/src/react.adapter.tsx#L37C10-L38C27

Cannot find module '/Users/xxxx/node/nestjs-prisma-starter/dist/templates/welcome.js

Something seems to have gone wrong with it. The system doesn't seem to be generating welcomm.js automatically.
Also, if you don't import react. welcome.tsx will throw an error.