Email Service
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),
],
})
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.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,
}),
],
})
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',
},
},
],
}
}
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
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.Last modified 1mo ago