Email Service

About
This library defines the emailService, which allows its users to send email using nodemailer.
The service currently supports the following transports:
AWS SES
Nodemailer's test account
NodemailerApp
You can easily be extended to include other transports supported by nodemailer.
NestJS Standalone - not recommended
Assuming environment.emailOptions implements EmailServiceOptions, add the module to your Module imports:
@Module({
  imports: [
    EmailModule.register(environment.emailOptions),
  ],
})
Test account
To enable the test account, pass the following option when importing the EmailModule.
@Module({
  imports: [
    EmailModule.register({
      ...
      useTestAccount: true,
    }),
  ],
})
When using the sendEmail method, the email will use Ethereal and return a link where you will be able to preview the email on their website.
NodemailerApp
You can use the nodemailer app to preview the emails sent on your local environment. When using the sendEmail method, the emails sent will be visible in the UI.
NodemailerApp example
To use the app:
Install the NodemailerApp from the link above
Add the following environnement variable:
USE_NODEMAILER_APP=true
You will need your module to be configured as follow:
@Module({
  imports: [
    EmailModule.register({
      ...
      useNodemailerApp: process.env.USE_NODEMAILER_APP === 'true' ?? false,
    }),
  ],
})
Design template
Instead of sending raw html, you are able to use a few components based on this Figma design.
The following components and their props are available:
Image
{
  component: 'Image',
  context: {
    src: 'image-path',
    alt: 'Alt text',
  },
}
Heading
{
  component: 'Heading',
  context: {
    copy: 'A mind-blowing heading',
    align: 'left' | 'center' | 'right'
    small: false
    eyebrow: 'A tiny bit of text displayed above the heading'
  },
}
Copy
{
  component: 'Copy',
  context: {
    copy: 'Some beautiful lorem ipsum',
    align: 'left' | 'center' | 'right'
    small: false
    eyebrow: 'A tiny bit of text displayed above the heading'
  },
}
Button
{
  component: 'Button',
  context: {
    copy: 'Button copy',
    href: 'Button url',
  },
}
Subtitle
{
  component: 'Subtitle'
  context: {
    copy: 'Some text - esp. suited for application-related emails'
    application: 'Name of an application'
  }
}
Bulleted list
{
  component: 'List'
  context: {
    items: ['Item 1', 'Item 2']
  }
}
To use theses components, define a template object in your email message, instead of the html object:
const message = {
  to: '[email protected]',
  ...
  template: {
    title: 'Email title',
    body: [
      {
        component: 'Image',
        context: {
          src: 'logo.jpg',
          alt: 'Logo name',
        },
      },
      {
        component: 'Heading',
        context: {
          copy: 'Email heading',
        },
      },
    ],
  }
}
​Email example for the parental leave application.
Generate an example email template into an html file
If you are curious to see what your template will look like or simply want to play around with the template components you can modify libs/email-service/src/tools/generate-html/example.ts and then run:
yarn nx run email-service:generate-html
Once generated, the output html file will appear in libs/email-service/src/tools/generate-html/output
Under the hood
It is based on Foundation emails template and Handlebars to create each components. The foundation based styles has been minified and is coming from here. Is has been minified and embed within foundation.hbs to avoid adding heavy CSS preprocessor/pipeline to handle everything. We are using Juice to inline the styles within the HTML, not because we like inline CSS, but because emails.
Code owners and maintainers
​Kolibri​

Last modified 11mo ago