Sending emails using Node.js and SendGrid

This article will provide short overview of how you can utilize SendGrid to design beautiful emails and send them using Node.js.

SendGrid + Node.js = ❤

Step 1: SendGrid Setup

Sign up for SendGrid and get your API key. Now, go ahead and design some templates on SendGrid. SendGrid has a easy drag and drop email designer which makes adding elements like images and buttons super-easy. You are also given an option to view and edit the HTML code of the email template. You can also personalize your emails using handlebars. SendGrid has an awesome documentation about handlebars here.

I have designed the following three templates, one each for user account verification, password reset and password reset confirmation. These emails are currently being used in veniqa.com, a US based startup that makes shopping from popular western brands accessible to the population in eastern countries.

User Account Verification

User Password Reset

User Password Reset Confirmation

You can see that I have used {{{name}}} to personalize the email template. When the email is sent out, {{{name}}} will be replaced by the user’s name. Also, Verify your Email and Reset your Password buttons have personalized hyperlinks.

<a href="{{{confirm_account_url}}}">Verify your Email</a>

Step 2: Node.js Setup

Use npm or yarn to install ‘@sendgrid/mail’ package

npm install @sendgrid/mail --save

or

yarn add @sendgrid/mail

Step 3: Code

Inside mailer.js, I will first create a JavaScript object called templates with template_name and template_id pairs. In my experience, it’s better to identify a template by a unique name rather than the id because you can have multiple version of an email template and each version has its own id. So if you ever decide to use a different version, you can just replace the id.

While I am at it, I will also import @sendgrid/mail package and set it up.

const sgMail = require("@sendgrid/mail");
sgMail.setApiKey("YOUR_API_KEY");
templates = {
    password_reset_confirm: "d-a02ad738dfc8404c8da016b46a754805",
    password_reset        : "d-e779dcfad7fb47e7be8d79bdfe75fb0c",
    confirm_account       : "d-68c570dd120044d894e07566bf951964",
};

You can find template_id on your SendGrid dashboard. See highlighted text below.

Next step is to create a function that will accept data object (which will contain email’s information) and send the email. You can see that I have passed custom fields called name, confirm_account_url and reset_password_url which will be used to personalize the emails.

function sendEmail(data) {
   const msg = {
      to: data.receiver,
      from: data.sender,
      templateId: templates[data.templateName],
      dynamic_template_data: {
         name: data.name,
         confirm_account_url:  data.confirm_account__url,
         reset_password_url: data.reset_password_url
      }
   };
   sgMail.send(msg, (error, result) => {
      if (error) {
          console.log(error);
      } else {
          console.log("That's wassup!");
      }
   });
}

Putting it all together, I have:

const sgMail = require("@sendgrid/mail");
sgMail.setApiKey("YOUR_API_KEY");
templates = {
    password_reset_confirm: "d-a02ad738dfc8404c8da016b46a754805",
    password_reset        : "d-e779dcfad7fb47e7be8d79bdfe75fb0c",
    confirm_account       : "d-68c570dd120044d894e07566bf951964",
};
function sendEmail(data) {
   const msg = {
      //extract the email details
      to: data.receiver,
      from: data.sender,
      templateId: templates[data.templateName],
      //extract the custom fields 
      dynamic_template_data: {
         name: data.name,
         confirm_account_url:  data.confirm_account__url,
         reset_password_url: data.reset_password_url
      }
    };
    //send the email
    sgMail.send(msg, (error, result) => {
      if (error) {
          console.log(error);
      } else {
          console.log("That's wassup!");
      }
    });
}
exports.sendEmail = sendEmail;

Now, I will create another file called demo.js and show you how easy it is to send an email.

//import the mailer.js file we previously created
var sender = require("./mailer.js");
var data = {
   //name of the email template that we will be using
   templateName: "confirm_account",
   //sender's and receiver's email
   sender: "abc@xyz.com",
   receiver: "xyz@abc.com",   
   //name of the user
   name: "Arjun Bastola",
   //unique url for the user to confirm the account
   confirm_account_url: "www.veniqa.com/unique_url"
   
};
//pass the data object to send the email
sender.sendEmail(data);

To test to see if the code works, run the demo.js file.

node demo.js

Arjun Bastola is a Full Stack Developer based out of Greater New York City Area.