Creating & Sending Transactional Emails with Node.js and Mailgun — Part 1
Building and testing responsive HTML emails the pain free way
We recently rolled out a new suite of transactional emails at Hintsy, and we discovered a few helpful workflows and tools we’d like to share. In Part 1, we’ll walk through a modern workflow for coding your transactional emails. In Part 2, we’ll cover how to send your shiny new emails with Node.js and the Mailgun API (with code samples, of course!).
Email development is still a pain. It comes from the fact that emails still need to meet the outdated specs of a wide variety of email clients. That means:
- Using old-school HTML tables
- Inlining (almost) all of your CSS using
styleattributes - Avoiding any new web standards (like CSS3, for example)
- A variety of devices, browsers, and email clients to test against
While some framework-like solutions exist for email development (link Ink or Litmus), there isn’t much out there for those who want to quickly spin up a new project without the technical overhead of learning (or paying for, in Litmus’ case) a large framework.
In short, emails are not something developers typically jump at the chance to build. So let’s see what we can do about that.
A Grunt Email Workflow
The first step towards saner email development is getting your dev environment in order. That’s where this Grunt workflow comes in (built by a developer who used to work at Mailgun). You can get up and running with it in 2 minutes, and start developing emails the same (modern) way you develop the rest of your projects.
Just npm install and you get some great tools right out of the box: responsive email starter templates, Handlebars and SCSS, and a live reload server that automatically compiles and previews your changes in the browser (including inlining your CSS, so you’re all ready to go).
The Handlebars and SCSS are particularly useful in transactional emails, as you’ll want to templatize components (like buttons and footers, for example) and reuse them across all of your emails. So a button would end up looking something like the following in your template:
{{> button type="primary" align="center" url="LINK GOES HERE" title="ANCHOR TEXT GOES HERE" }}This is incredibly helpful because of the terrible support for <button> and even <div> tags across email clients. So your buttons will actually compile to look something like this:
<table border="0" cellspacing="0" cellpadding="0" style="box-sizing: border-box; border-collapse: separate !important; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: auto; padding-bottom: 15px; margin-left: auto; margin-right: auto;">
<tr>
<td align="center" valign="top" style="box-sizing: border-box; vertical-align: top; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-radius: 5px; text-align: center; background: #1271db;">
<a href="#" style="box-sizing: border-box; color: #ffffff; text-decoration: none; border-radius: 5px; cursor: pointer; display: inline-block; font-size: 14px; font-weight: bold; text-transform: capitalize; background: #1271db; margin: 0; padding: 12px 25px; border: 1px solid #1271db;">Click Here</a>
</td>
</tr>
</table>Which is, of course, a nightmare zone (can anyone spot the valign attribute? It’s actually not a typo 😱).
And finally, the icing on the cake: the browser preview layout. When you npm start your browser launches a side-by-side desktop and mobile view, with a dropdown that allows you to select from any of your email templates (see the image below).
Pretty powerful stuff so far, but familiar territory for anyone who’s written front end code in the recent past. It feels strangely awesome to put it to use in email design.
On top of the amazing dev experience, you also get some pretty sophisticated testing capabilities. Email clients are incredibly finicky, so relying exclusively on the browser to test your emails is unwise. But just substitute a few values in a secrets.json file, and boom: you can send test emails of any of your templates from the command line! It’s pretty fun—you can spam all of your friends and ask them to help you QA 😉.
To set it up, just substitute a few strings in a secrets.json file:
"mailgun": {
"api_key": "YOUR MG PRIVATE API KEY",
"sender": "E.G. POSTMASTER@YOURDOMAIN.COM",
"recipient": "WHO YOU WANT TO SEND THE EMAIL TO"
},Then send test emails right from the command line:
grunt send — template=TEMPLATE_NAME.htmlThough we didn’t get a chance to try them out, you can also take advantage of a variety of other features, like automatically uploading your local images to a CDN, or sending emails to Litmus to test compatibility with various clients, browsers, and devices. Pretty cool stuff.
Getting Some Inspiration
To finish up part 1, we’ll just point you to a few other resources we found that were a big help to us. One of those is Really Good Emails. It’s a catalog of a variety of types of emails from some cool companies. Search by keyword or category to find inspiration!
And here are a few other resources to dig into:
- Mailgun’s responsive transactional email templates. These are helpful starting points that can be worked into this Grunt email workflow. I noticed that about 90% of the CSS attributes are the same as the Grunt workflow ones, so just paste them in, change a few attributes and they’ll work right alongside your other templates.
- Technical overview of email clients and standards. This is really in depth stuff from the man who created and maintains the repo we walked through above.
Coming Up in Part 2
In Part 2, we’ll talk about how to wire everything up using Node and the powerful Dot.js templating engine to compile your shiny new email template with dynamic user data, and then automatically send them out through the Mailgun API. Stay tuned!
Thanks for reading! If you found it helpful be sure to click the green heart. Happy coding. 💥
