Appearance
Mail
Building a SaaS product would not be complete without the ability to send your users transactional emails. For example, sending them a welcome email at the completion of subscribing to your product. What about sending them an email as part of a forgot password workflow?
There a couple of things you'll need to get in place in order to have this capability:
- A good code library to connect to an SMTP server and send emails
- Reusable email templates that accept parameterized values
Fortunately these things are already included in StarterStack. In fact, we even have some email templates incorporated into our bundled flows.
Template | Used In |
---|---|
resetPassword.handlebars | reset password flow to communicate a request to reset the password along with the reset password link |
changePassword.handlebars | change password flow to communicate the password was changed |
signup-welcome.handlebars | stripe checkout flow to communicate the reset password link and welcome the user |
The Duo: nodemailer + nodemailer-express-handlebars
We use nodemailer
to connect to your SMTP provider (i.e. MailGun, MailTrap.io, etc.) and send emails. We use nodemailer-express-handlebars
to create reusable email templates. All of this functionality is neatly bundled in our mailer
module located in /backend/modules/mailer.js
.
Sending an E-Mail
Include the mailer
module in your middleware file.
js
const mail = require('../modules/mailer.js');
From within your middleware method:
js
/**
* set up mail
*/
const mailer = await mail()
await mailer.sendMail({
from: `"${process.env.SITE_NAME}" <${process.env.SITE_EMAIL}>`, // sender address
to: user.email, // list of receivers
subject: "Password Reset Request", // Subject line
template: 'resetPassword', // email template name
context: {
email: user.email, // params to replace in the template
reset_link: reset_link, // params to replace in the template
site_name: process.env.SITE_NAME // params to replace in the template
}
});
E-Mail Template
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>{{ site_name }} - Reset Password Request</title>
</head>
<body>
<h1>Reset Password Request Received</h1>
<p>Hello,</p>
<p>We received a request to reset the password for the {{ site_name }} account associated with {{email}}. No changes have been made to this account yet.</p>
<p>You can reset the password for this account by clicking the link below:</p>
<a href="{{reset_link}}" style="
color: #fff;
background-color: #0d6efd;
border-color: #0d6efd;
display: inline-block;
font-weight: 400;
line-height: 1.5;
text-align: center;
text-decoration: none;
vertical-align: middle;border: 1px solid transparent;
padding: 0.375rem 0.75rem;
font-size: 1rem;
border-radius: 0.25rem;">Reset my password</a>
<p>If you did not request a new password, please let us know immediately by replying to this email.</p>
<p>-- The {{ site_name }} Team</p>
</body>
</html>
Adding a New E-Mail Template
StarterStack includes a convenient tool to generate new e-mail templates based on Hygen.io.
Let's say you wanted to generate an email to reach out to users that have not logged in for a long time.
sh
cd /backend
hygen email-generator new We-Miss-You
This command will generate the following scaffold email located at /backend/mail/we-miss-you.handlebars
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>{{site_name}} - Welcome</title>
</head>
<body>
<h1>Welcome to {{site_name}}</h1>
<p>Hey {{first_name}},</p>
<p><!-- add your text here --></p>
<a href="{{link}}" style="
color: #fff;
background-color: #0d6efd;
border-color: #0d6efd;
display: inline-block;
font-weight: 400;
line-height: 1.5;
text-align: center;
text-decoration: none;
vertical-align: middle;border: 1px solid transparent;
padding: 0.375rem 0.75rem;
font-size: 1rem;
border-radius: 0.25rem;"><!-- your button label --></a>
<p>-- The {{ site_name }} Team</p>
</body>
</html>
You can tweak this to fit your use case. For more information on using nodemailer-express-handlebars