Search
⌃K

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.
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 = {
...
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