Configuration

Before you register the MailmanModule, you need to add the following change in your root tsconfig.json to enable your project to make JSX components valid.

...
    "compilerOptions": {
        ...,
        "jsx": "react-jsx",
        "skipLibCheck": true,
    }
...

Now you can follow the below steps to register MailmanModule with your app, import the module inside AppModule.

Static Registration

MailmanModule is added to global scope by default.

import { Module } from "@nestjs/common";
import { MailmanModule } from "@squareboat/nest-mailman";

@Module({
  imports: [
    MailmanModule.register({
      host: process.env.MAIL_HOST,
      port: +process.env.MAIL_PORT,
      username: process.env.MAIL_USERNAME,
      password: process.env.MAIL_PASSWORD,
      from: process.env.MAIL_SENDER_ID,
      templateConfig: {
        baseComponent: GenericMail,
        templateOptions: {
          socialMedia: [
            {
              name: "youtube-noshare",
              href: "https://www.youtube.com/channel/UCyUzPvikgKBYTfp4XBIbbOg",
            },
            {
              name: "instagram-noshare",
              href: "https://www.instagram.com/square.boat/",
            },
            {
              name: "linkedin-noshare",
              href: "https://www.linkedin.com/company/squareboat",
            },
            {
              name: "github-noshare",
              href: "https://github.com/squareboat",
            },
          ],
          appLogoSrc:
            "https://i.ibb.co/7VrFQwN/squareboat-logo-transparent.png",
          appName: "Squareboat",
          contactEmail: "hi@squareboat.com",
        },
      },
    }),
  ],
  controllers: [],
  providers: [],
})
export class AppModule {}

Recommended Way

Use ConfigModule provided by NestJS to load configurations. To learn about ConfigModule, click here.

1. Create filesystem.ts file

import { registerAs } from "@nestjs/config";
import { MailmanOptions } from "@squareboat/nest-mailman";
import { GenericMail } from "resources/views/mail";

export default registerAs(
  "mailman",
  () =>
    ({
      host: process.env.MAIL_HOST,
      port: +process.env.MAIL_PORT,
      username: process.env.MAIL_USERNAME,
      password: process.env.MAIL_PASSWORD,
      from: process.env.MAIL_SENDER_ID,
      templateConfig: {
        baseComponent: GenericMail,
        templateOptions: {
          socialMedia: [
            {
              name: "youtube-noshare",
              href: "https://www.youtube.com/channel/UCyUzPvikgKBYTfp4XBIbbOg",
            },
            {
              name: "instagram-noshare",
              href: "https://www.instagram.com/square.boat/",
            },
            {
              name: "linkedin-noshare",
              href: "https://www.linkedin.com/company/squareboat",
            },
            {
              name: "github-noshare",
              href: "https://github.com/squareboat",
            },
          ],
          appLogoSrc:
            "https://i.ibb.co/7VrFQwN/squareboat-logo-transparent.png",
          appName: "Squareboat",
          contactEmail: "hi@squareboat.com",
        },
      },
    } as MailmanOptions)
);

2. Register ConfigModule

import { Module } from "@nestjs/common";
import filesystem from "@config/fileystem";
import { ConfigModule } from "@nestjs/config";

@Module({
  imports: [
    ConfigModule.forRoot({
      isGlobal: true,
      expandVariables: true,
      load: [filesystem],
    }),
  ],
  controllers: [],
  providers: [],
})
export class AppModule {}

#3. Register Async StorageModule Add following snippet to the imports array. ConfigService is importable from @nestjs/config module.

MailmanModule.registerAsync({
  imports: [ConfigService],
  useFactory: (config: ConfigService) => {
    return config.get("mailman");
  },
  inject: [ConfigService],
});

Configuration

We provide some configuration which you can use this set default values for the generic template and the smtp server.

Attribute	Description
host	SMTP Server Host
port	SMTP Server Port
username	Username for SMTP Server
password	Password for SMTP Server
from	Default from address
mjml	MJML Configuration Object, refer here.
templateConfig	Refer here

Template Configuration Object

Attribute	Description
baseComponent	Base React Component for the generic mail
templateOptions.socialMedia	Object to define social media links in the footer of the mail
templateOptions.appLogoSrc	App Logo src
templateOptions.appName	App Name
templateOptions.contactEmail	Contact Email address for footer

Now that the configuration is done, let's get started with building some elegant mails!