Tutorial: How to Properly Send Your HTML/CSS Emails with NodeJS

When you need to design a website, an application, or a simple web API, there's a good chance you'll need to set up transactional email sending.

Transactional emails are, as opposed to marketing emails, emails containing information related to a user's action on your site. E.g.: signup email, password recovery, notification, etc.

Setting up email sending is fairly easy, but the task gets more complicated when these emails multiply, need to look nice and be effective, and the code needs to remain clean and maintainable.

So I'm going to show you various tools that will help you create a custom email-sending module in just a few lines of code!

The tools

nodemailer

This library is one of the most widely used for sending transactional emails in Node.js because it's comprehensive, remains simple to use, and there are many plugins available for easily connecting to different email sending services.

We'll use two methods from the library: "createTransport(options)" to create the connection to the SMTP server, and "sendMail(data)" to send the emails themselves.

You'll find the example code in the second part of this tutorial, but you can also check the documentation directly:

https://www.npmjs.com/package/nodemailer

hogan.js

Since the main purpose of transactional emails is to prompt the user to take an action or to provide them with information about their activity, these emails need to contain personalized information.

"hogan.js" is a simple templating engine that lets us inject dynamic data into an HTML template using a mustache (handlebars) system of the {{data}} type.

This library allows us to keep templates clear and is capable of compiling simple data, such as breaking down objects or iterating over a list of objects.

To see the documentation, here's the link:

https://twitter.github.io/hogan.js/

inline-css

Email clients aim to remove as much unnecessary data as possible from emails, both to avoid security vulnerabilities caused by external resources, and to reduce their storage requirements.

This is why many clients remove elements, but sometimes also tags from email content, forcing developers to write their styles directly inline.

But in order to keep the HTML code readable, separate data from style, and above all keep the code maintainable, we're going to use the "inline-css" library, which will let us parse