Migrating an App to SendGrid's Template Engine

Migrating an App to SendGrid's Template Engine

I've built a lot of applications to demonstrate what SendGrid can do over the past few years. Recently, I've started either updating them, getting rid of really old ones, or replacing them with newer ideas and more modernised examples.

With the apps I've been updating, the biggest change has been removing all of the inline template code for the emails being generated by the app and moving it to SendGrid's Template Engine, leaving behind a much cleaner looking codebase and a much more manageable set of templates.

Migrating a simple app to Template Engine is really easy, here's how I did one of mine:

Migrating "Oh, Cardless" to Template Engine

I built Oh, Cardless to fix the problem of either forgetting or running out of business cards. You can read more about what it does and how I built it in the post Oh, Cardless: My Business Card Email App from last year.

Here's the main function I use to send out the cards:

Massive, isn't it? Thankfully, there's a lot that can now be removed from this to clean it up.

We're going to take away:
  • The text_block variable (Template Engine handles plain text email too!)
  • The html_block variable
  • The filter that adds the footer to the bottom of the email

Making the New Template

A simple copy and paste is really all it takes. In this instance it took about 5 minutes to get everything ready. I recorded and annotated the process--you can see it below (500% faster):

Integrating Template Engine

Now that all our template code has been removed, let's look at how the code above has changed:

Much cleaner. You'll notice that although the template code is gone, some new elements have been added:

cardEmail.setFilters({"templates": {"settings": {"enabled": 1, "template_id": "325ae5e7-69dd-4b95-b003-b0109f759cfa"}}}); cardEmail.addSubstitution('-from_name-', process.env.FROM_NAME); cardEmail.addSubstitution('-twitter-', process.env.TWITTER); cardEmail.addSubstitution('-from_address-', process.env.FROM_ADDRESS); cardEmail.addSubstitution('-sign_off-', process.env.SIGN_OFF); cardEmail.addSubstitution('-signature-', process.env.SIGNATURE); cardEmail.addSubstitution('-card_image_url-', process.env.CARD_IMAGE_URL);

These are the substitutions required by the template you see being built in the video above. I've passed them in one at a time because it looks more readable, but it's also possible to pass all of them together.

That's it, overall it's a relatively quick process that gives you much cleaner, manageable emails that you can tweak and play around with without having to redeploy any code to production.

Recommended For You

Most Popular

Send With Confidence

Partner with the email service trusted by developers and marketers for time-savings, scalability, and delivery expertise.