• Introduction
• Goals and quick answer
• Price-details
• deploy-to-test
• API
  • test the emails
    • using the activity API to test
    • using the parsing-email API to test
• design the new development flow to deploy and update the email templates
  • Our current flow
  • New flow
    • create-templates

Introduction

Now we are using Gmail workspace in project, which includes OTP(One-time-password), notification and other services by email.

However, due to the large number of activity notifications in the project, email sending may reach the limitation of 2000 emails per day.

The overage price is not attractive.

Besides, Gmail workspace email service is not designed for handling large volumes of marketing-like emails, and it has its own throttling mechanisms.

So we need to investigate integrating SendGrid.

Goals and quick answer

Clarify the following key questions:

1. The limitation/day of the SendGrid, and if we are out of the limit, what's the limitation and price?

   $19.95/month, basic 50k/month, $0.00133 per additional email check Price-details to know more

2. What extra work needs FE and BE to do if we modify the email service from Gmail to SendGrid.

   1. BE integrate @sendgrid/mail, config domain and test, check deploy to test
   2. A new deployment flow is required, to make sure we could maintain the emails templates in different version.

3. The email compatibility(most of the email send services will do some modify to the html files)

   good. I have tested on gmail-website, gmail-IOS-app, mac-email-app

4. Can we test email context, just as with Mailosaur

   It depends what detail we want to test.

   We could test to know that we have send the email, but may not be able to test the variable send by BE, such as the verification code.

Price-details

Google compare with SendGird:

SendGrid prices:

Other SendGrid Prices - check from their website

deploy-to-test

Official Document

1. sign uo and login https://app.sendgrid.com/, fill the required information.

2. validate private email(only for test)/config the domain

   1. test with private email Setting > Sender Authentication > Single Sender Verification, fill your private email xxx@gmail.com , then the node env test API will send email with your test email.
   2. deploy to test, require validate domain and config domain

3. config the email templates(html file) to send

   1. send with templates: then, try this:

      const sgMail = require('@sendgrid/mail');
      sgMail.setApiKey(OUR_APIKEY);
   
      const sendWithTemplate = {
         to: 'chase.wu1990@gmail.com',
         from: 'chase.wu1990@gmail.com',
         templateId: 'd-7c578e6a094a4129a14f9cc2b08901fb',
         dynamicTemplateData: {
            subject: 'Testing Templates',
            fullName: "Chase",
            bucketName: '93f06186-0d7c-4bf0-9ed3-596a7d4aa7af_develop',
            reasonSuspension: "Explicit contents",
            facebook_link: "https://www.facebook.com/",
            instagram_link: "https://www.instagram.com/",
            youtube_link: "https://www.youtube.com/",
            linkedin_link: "https://www.linkedin.com/",
            twitter_link: "https://www.linkedin.com/",
            email: "test@aladia.io",
            updateLink: "https://docs.aladia.io",
            courseThumbnail: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQHVfnpm7srBabzA86MrYHqeoF6-xsSSZKXDQ&s",
            userAvatar: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQHVfnpm7srBabzA86MrYHqeoF6-xsSSZKXDQ&s",
            titleDescription: "Title Description",
            expirationTime: "2 hours",
            verificationCode: "321937"
         },
      };
   
      sgMail.send(sendWithTemplate).then((res) => {
         console.log(res);
      }).catch((error) => {
         console.error(error);
      });
   

   1. send with local file, we need to hand to place the variables in html by ourself

   const sgMail = require('@sendgrid/mail');
   const fs = require('fs');
   const path = require('path');
   sgMail.setApiKey(OUR_APIKEY);
   
   
   // read the local template html file
   const templatePath = path.join(__dirname, '../../templates/en/account/verifyAccount/index.html');
   const htmlContent = fs.readFileSync(templatePath, 'utf-8');
   
   const sendWithLocalFile = {
   content: [{
      type: 'text/html',
      value: htmlContent
   }],
   to: 'chase.wu1990@gmail.com',
   from: 'chase.wu1990@gmail.com',
   subject: 'Sending with fs read from local file',
   dynamicTemplateData: {
      subject: 'Testing Templates',
      fullName: "Chase",
      bucketName: '93f06186-0d7c-4bf0-9ed3-596a7d4aa7af_develop',
      reasonSuspension: "Explicit contents",
      facebook_link: "https://www.facebook.com/",
      instagram_link: "https://www.instagram.com/",
      youtube_link: "https://www.youtube.com/",
      linkedin_link: "https://www.linkedin.com/",
      twitter_link: "https://www.linkedin.com/",
      email: "test@aladia.io",
      updateLink: "https://docs.aladia.io",
      courseThumbnail: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQHVfnpm7srBabzA86MrYHqeoF6-xsSSZKXDQ&s",
      userAvatar: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQHVfnpm7srBabzA86MrYHqeoF6-xsSSZKXDQ&s",
      titleDescription: "Title Description",
      expirationTime: "2 hours",
      verificationCode: "321937"
   },
   }
   sgMail.send(sendWithLocalFile).then((res) => {
   console.log(res);
   }).catch((error) => {
   console.error(error.response.body.errors);
   });
   

API

test the emails

using the activity API to test

But it only could know which html template we have send, but could not read the variables in the template sent by backend team.

using the parsing-email API to test

document

design the new development flow to deploy and update the email templates

Our current flow

FE part:

1. edit in email project dev mode
2. build html to templates
3. git commit, git push, git tag

BE part: 4. git pull 5. copy /templates to backend project 6. commit with the git tag from FE email project to BE project 7. BE could git log to check the last commit code to track the template versions

New flow

And we need a new flow to maintain versions.

create-templates

https://www.twilio.com/docs/sendgrid/api-reference/transactional-templates-versions/create-a-new-transactional-template-version