Sending Email From Your Frontend Application Using MongoDB Stitch and AWS SES

Aydrian Howard

mongodb
Facebook ShareLinkedin ShareReddit ShareTwitter Share

Email is king of communication. Most grandparents have an email account, so if you are looking for a communication channel with the most coverage, it’s going to be email. But sending an email from an application is not fun. Many transactional email services, for security reasons, will not allow you to make a request to their APIs from a front end application. This requires you to support a backend application to handle these transactions. If you are looking to host a simple Contact Form or share content from your website, setting up a Node.js application, configuring REST routes with Express.js, and deploying that somewhere would be overkill.

The built-in AWS service from MongoDB Stitch makes it easy to send a transactional email using the Simple Email Service (SES). Just add the AWS service, configure SES, and use the Stitch client to execute the AWS SES request right from your React.js application. I created the following function in a recent Stitchcraft live coding session on my Twitch channel.

share = async (entry, email) => {
  const args = {
    Destination: {
      ToAddresses: [email]
    },
    Message: {
      Body: {
        Html: {
          Charset: 'UTF-8',
          Data: `
              <h1>Enjoy this pic!</h1>
              <img src="${entry.url}" />
              `
        }
      },
      Subject: {
        Charset: 'UTF-8',
        Data: `Picture shared by ${entry.owner_name}`
      }
    },
    Source: 'picstream@ses.aydrian.me'
  }

  const request = new AwsRequest.Builder()
    .withService('ses')
    .withAction('SendEmail')
    .withRegion('us-east-1')
    .withArgs(args)
    .build()

  return this.aws.execute(request)
}

With these few lines of code, I was able to take an image, stored in S3 and email it to the specified email. Wasn’t able to see it live? Watch the recording on YouTube with the Github repo in the description. Follow me on Twitch to join me and ask questions live.

-Aydrian Howard
Developer Advocate
NYC
@aydrianh