dev-resources.site

for different kinds of informations.

Dynamic emails with handlebars and nodemailer

Published at

2/10/2023

How we built the Editor

We wanted to have a nice coding experience in the browser so we tried out a ton of different packages including:

But we found them all either difficult to work with, outdated or a bit laggy for us. They’re probably all great but we didn’t have time so we moved on if we couldn’t get it working smoothly quickly.

Finally, I came across a comment on Reddit suggesting Monaco because VSCode is built on top of it.

Monaco worked perfectly out the box (except for a tiny bit of flashing when you type)

It also had some really nice advanced features like autocomplete and a map view.

It was also really easy to implement.



import Editor from "@monaco-editor/react";

interface Props {
    code: string;
    onChange: (code: string) => void;
}

function MyEditor(props: Props) {
  return (
      <Editor
          value={props.code}
          language="handlebars"
          defaultValue="Please enter HTML code."
          theme="vs-dark"
          onChange={(newvalue?: string) => props.onChange(newvalue || '')}
      />
  );
}

export default MyEditor;

It pretty much works the same as a text box where you update the state on change.

As you can see we also changed it to dark mode 😎

Using Handlebars to add variables

Handlebars are commonly used in HTML emails to make them dynamic. You can use it like so



Your HTML code
...
<p>{{name}}</p>
...

The opening and closing brackets indicate a handlebar variable, more information can be found here.

Then we use the Handlebars compiler to turn our HTML with handlebars variables, to plain HTML with inserted variables.



import Handlebars from 'handlebars';
const data = {
    name: "John"
}

const handlebarsTemplate = Handlebars.compile(YOUR_HTML);
const parsedHtml = handlebarsTemplate(data);

// this transforms the code to 
...
<p>John</p>
...

Handlebars is quite powerful. You can add in conditional logic, loops, etc…

Previewing the email

But now, the tricky part! How do you know your handlebars actually work with the given data?

That was the whole reason we made this tool, easy validation of our handlebar templates with live previews.

On each code change we update your live preview, so you can see exactly how your code looks, and behaves.

We also provided a way of inputting test data. Click on the top right corner on “set test data”. This will open up a JSON editor. Here you can add the variables you declared in your HTML template with handlebars, alongside their test data values.

For instance if you have a variable {{name}} in your HTML template, you can create JSON test data like this:



{

    "name":"Satoshi Nakamoto"

}

Sending test emails to Mailtrap

The final feature of this tool allows you to send your preview to your Mailtrap inbox. This is important because the browser preview is not always going to be perfectly accurate.

Click on “Mailtrap” in the top right corner, this will open up the config modal.

You’ll be asked for:

Inbox ID: This can be found in the url when you open up your inbox in Mailtrap
Api Key: Can be found under settings → API keys in Mailtrap

You only need to input these once, it will be stored in local storage for easy use afterwards

Then go ahead and click “send test email”! This will send a test email to your mailtrap using a small node application we made (which can be found here). We use this small node server to avoid CORS errors, the only purpose is to take your HTML, and send a request to the mailtrap API.

Further info

We didn’t focus on how to send emails with nodemailer. There are a lot of tutorials out there, here are some suggestions:

nodemailer Article's

30 articles in total

Brevo smtp emails to other gmail accounts silently failing , verified domain to the rescue