Mailer Madness, (React frontend + AWS lambda/SendGrid)

People have been asking how I made my little mailer on my website (go here and click on chat), so I figured I would just write it down…

Going through the process of renting your first server and setting up your first website is exciting! My first attempt at this was not ideal, I had my website frontend running off my server, as well as a little node express server that brought in SendGrid. To send the mail, my front end would ping the root of this server, and send me an email…. Like so (here was my node server):

const express = require('express');
const app = express();
require('dotenv').config()
const sgMail = require("@sendgrid/mail");
sgMail.setApiKey(process.env.SECRET_KEY);
const msg = {
  to: "jack.sanders.xyz@gmail.com",
  from: "jack.sanders.xyz@gmail.com",
  subject: "heyy, I hope this works dude",
  text: "whats up with this guy lolololol",
  html: "<strong>the node email works okay hahaha please bro</strong>"
}
app.get('/', (request, response) => {
  sgMail.send(msg)
  response.json({ returnMessage: "check your email!!!" })
})
app.listen(4000)

Above, I brought in SendGrid, made an express server as an endpoint, and when my frontend would fetch to port 4000 it would trigger send grid to send a message. You can learn how to do this here…

NOW…. this is silly. I mean this is important for understanding how Send Grid works and what you need to do to in order to get things working…But you don’t need an express server running all the time, it is not worth the overhead just to run this little function. Moreover “why can’t I just put this on my frontend… like just use the .seng(msg) right from the form data”. To wit, my response is… I tried. Does not seem to vibe with Send Grid… SO…

Instead, use Lambda! Lambda is “a serverless compute service that lets you run code without provisioning or managing servers”.. i.e. “pay-per run function” (A good vid about it here). You write a function and only pay per the compute power to run your SendGrid function!

So:

• step 1, do everything here till 0:45 seconds… get a key from SendGrid. Then sign up AWS lambda!
• step 2, make a new lambda function… call it (myEmailFunction) or whatever. Then save your key in Lambdas environment variables (here)…
• step 3, Locally make a directory, install your dependencies (node and sendgrid), and write your function for sending the email! here is my directory. What you’re going to do is zip this file, give it to lambda and with it goes your dependencies (how to do this here).

the dependencies you need are:

Bring in node:

$ npm init --y

Bring in send grid:

$ npm i @sendgrid/mail

Now make an index.js to write your function (here is mine)… If you’re thinking… What about my API key? Its on Lambdas side…don’t worry, lambda will know what you mean and will grab your key out of its .env

then, zip it up and give it to Lambda:

$ zip -r <nameOfYourZipFile>.zip ./

• step 4, You need to make a trigger! Use API gateway to make an end point, it will give you a url when you make a post request to it, it shall trigger your lambda. Learn how to do this here. Or just click Add trigger.

Make it a REST API and make sure you add a POST option in it. Make sure you deploy changes and you should be live! Post to the url of your endpoint, with your form data and your lambda function should take over and send the email.

• note* if you’re still in dev and not live (still running npm start), you need to tell CORS…. or it will block you. You would do this by specifying what origin you’re fetching from:

(in your lambda function)

return {    
statusCode,    
   headers: { 
"Access-Control-Allow-Origin": "http://localhost:3000",      
"Access-Control-Allow-Headers": "Content-Type",      
"Access-Control-Allow-Methods": "OPTIONS,POST"    
},

And if you were live, you tell CORS that your origin would instead be your site.