StarterStack

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:

  1. A good code library to connect to an SMTP server and send emails
  2. 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.

TemplateUsed In
resetPassword.handlebarsreset password flow to communicate a request to reset the password along with the reset password link
changePassword.handlebarschange password flow to communicate the password was changed
signup-welcome.handlebarsstripe 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