Send Emails with AWS Amplify and SES

hello and welcome back all of you focus otters my name is michael lendo and today we're going to be talking about how you can create a serverless contact form now this is going to be great in case you want to have your customers send you an email and you can have that information persisted inside of a database just in case you were to go ahead and empty inside of your trash bin in your email provider we're going to be talking about graphql dynamodb and how this all fits in the context of aws amplify so without further ado let's take a peek at the architecture and go and get started [Music] okay so essentially what is happening on the back inside of things is that we have a customer here and this customer is going to be interacting with a react application but whenever it comes time to send information to the back end say they fill out a contact form with their name and their email then we're going to go ahead and take that information and through the use of aws appsync we can send that information off in a graphql manner to dynamodb now the cool thing about dynamodb is that you can set up triggers known as dynamodb streams and anytime a record has an event on it say it was added updated modified or deleted uh we can go ahead and trigger a function now this is going to come in handy whenever we have a item added to the database so we can say hey go ahead and fire off this lambda function which is going to have access to whatever event just got added and we can take that information and send off an email now you can see in the box here that all of this is happening in the context of amplify now we're actually going to hop out of amplify world to integrate with a service that aws doesn't natively support fortunately we have access to the entire aws ecosystem so we're going to be touching base with aws ses simple email service and that lambda function is going to be in charge of firing off that email so we're going to be doing all of this in a matter of minutes and i hope you have a lot of fun learning through this seeing what we can do with amplify and even more so extend its capabilities so let's go ahead and hop into the code now one last thing is that this video is actually based off of a blog post that it created by the same title serverless contact form using aws amplify so a lot of the code snippets uh can be found in here i'll go ahead and paste the relevant bits inside of the description of this video down below so definitely go and check that out while you're looking at the youtube video feel free to go and hit that like and subscribe button and we can go ahead and continue on from here okay so inside of this video i'm going to provide you with all the ui bits to get us started it doesn't have any back-end code working just yet but at least this way we don't have to worry about how do we create a contact form and how do we make it look pretty so i'm going to clone down a repo city into it check out the relevant branch install our dependencies and then lastly run the application let's go ahead and do that here in case you wanted to follow along again i link to the blog post regarding all the code snippets for this video in the description down below and then in addition you can go ahead and just check out the blog post uh if you look at the blog post that i have set up all right so we have this set up on localhost 3000 let's want to take a look at what the application actually looks like so here it is it's actually fairly simple it's a single page and when i click on i'm interested say this is a job posting then i have a modal pop-up modal currently has a name and an email i'm going to say michael liendo and then the email you can find me at is we could say empty lindo somewhere dot com if i would hit enter here it says yay it's successfully submitted now this actually didn't go anywhere but let's go ahead and see how we can get this all working with amplify so the next step is going to take the project and open it up in vs code all right so with this project opened in vs code i'm going to go ahead and uh just work in the cli for just a little bit longer because a lot of this functionality we can actually get set up without even touching any of the code inside of here in doing so i'm going to go ahead and run amplify init and this is going to use the amplify aws amplify cli to go ahead and get our project scaffolded so for the most part i'm going to accept a lot of the defaults here so amplify email recipes feel free to change that if you'd like and then for the project configuration i'm going to go ahead and say no because this is set up for create react app but we're actually in a next gs project at the moment dev environment is fine and we are using vs code with javascript but when it comes down to the source directory i'm going to say dot here and this is going to specify the root and then for the distribution directory path this is where i'm actually going to specify out now we're not using get static props or anything like that so with next export it's not going to put it in that dot next folder it'll actually put it inside of an out directory instead build command and start command are free to accept the defaults that's pretty much it this is going to set up our amplified backend and we are free to choose a profile here and then we can go and get set up with adding services that we'd like to include inside of this back and they just got created so we're going to go ahead and give this a moment to get everything scaffolded it's not going to take that long and then we can go ahead and create more services alright so with everything deployed and initialized i'm going to start by adding my api to do so i'll type in amplify add api and it'll ask me whether or not i want a rest or graphql api we're using graphql in this example the name is fine and i'm actually going to use an api key we're not going to have our users log in rather we'll have a public api key that they all sort of take advantage of a description go ahead and set the days here and then no advanced settings we're going to say that we are done now here's where it gets really cool because do you have an annotated schema i don't at the moment we're going to be creating one so great we have a couple of templates for you to choose from and from here it's going to scaffold out a template for us do you want to edit it now it's like yeah yes we do let's go ahead and peel this back just a little bit and see what's going on here here's a schema that graphql file that just got created for us and we want to go ahead and tailor this so that way it suits the needs of what we're looking for a candidate so i could tweak this accordingly uh it's that to-do's that we're gonna be having in our application but rather we're keeping track of candidates so we'll have a candidate model this app model directory says create a dynamodb table for this basically hook this up so that all the crud operations will be associated and for every candidate we'll give them an id they do have a name and in addition they have an email and that email isn't going to be a type string well it is but aws can actually do a little bit more for us if we specify it has to be an actual email address it's going to just do a quick little sanity check to make sure that it is an actual email now in addition to the model that got created we do want to add in a layer of authentication primarily we just want to dictate who can do what so for that let's go ahead and add in some auth rules here and we do that by adding another directive this is going to be auth and then the rules get specified inside of an array and each array has a certain permission set that you apply to it now we said that we're using an api key so we're going to save public here then the operations that we want folks to have is the ability to create and if you ever wanted to have users read or delete or whatever maybe they you have some authorization in place and you want to give them the ability to update their contact information simply enough type in update but for us create makes the most sense so i'm going to go ahead and leave that there now it reformatted and that's just a quick little sanity check to make sure that it's i don't have any bugs or or typos inside of my my file here and then we can go and continue on to the next part because this is all we had to do to create our backend api so with that out of the way back in our terminal let's go ahead and add in our function because we've already created our api and the api automatically is going to create the table so now the next step is to create our lambda function i'm going to do so by typing in amplify add function and then we'll do the same process we'll walk through the cli and establish some set of reasonable defaults this is going to be a lambda function the actual name here is perfectly fine it's going to be nodejs but instead of hello world or a serverless way of doing it with api gateway is going to be a trigger and it's like cool what do you want this to be set off of dynamodb is where we're at and then the next step here is um well you want a dynamodb table cool where is this table coming from and the very first option gives us the ability to tie into this table that we're about to create so i'm going to select that one and then do you want to configure any advanced settings no we don't awesome next step is asking us if we want to go ahead and edit the lambda function now and we can absolutely take advantage of this that opens up the file and i'm going to hit enter to go and clear this part out so let's get that part out of the way let's take a peek here this is just a basic lambda function however i'm going to go ahead and bring in a couple of other items so let's go ahead and paste this in and then we'll walk through the code okay so not too much we're looking at you know 30 lines of code here but we're going to bring in the aws sdk notice that we don't have to install this because when this gets pushed up to aws it's automatically going to include this package also off of this sdk we're going to be tying it with ses that's going to give us the ability to use emails and send those off to our customers now as i mentioned this land of function you kind of have to visualize it here it's going to be fired anytime an item gets added to our database so with that said this event is going to have all of the information related to whatever just got added but because download db is meant to scale very high it's going to send that information over in streams which is why it's called the dyno db string so let's go ahead and walk through this segment of code here every time an item gets inserted into our database go ahead and pull off two pieces of information one from this stream from dynamodb give me the name also give me the email this next part is equally straightforward where we can go ahead and say all right we configured ses that has a send email method on it and from here the destination is going to be this process.emva.scs email that we have not set up yet we'll do that in a second once you have the destination in place go ahead and construct the message now the header of this message that the subject is going to be candidate submission this is going to be whatever email comes through but it's going to say at the top and then as far as the body we can use a javascript template literal so go ahead and interpolate the candidate's name along with their email we're just going to have a very standard message here now this is promise based and then at the very end of it we're going to say we're done and that's it you can go ahead and again copy this code either from the blog or from that link in the description to check things out but it's a pretty standard way of sending just a plain text email off to a verified email address now note here that i said verified email address because we have this process.env ses email but we need to go ahead and let amazon know that this is something that we have verified and is okay to send from so let's go ahead and get that started i'm going to start things up by saving this file and then i'm going to run amplify console so let's slide this over here and this will ask us if we want to go to various parts within the aws console either the admin ui or the aws console itself perfect now once we're in the console this is a really good spot to see what services we have inside of our application you can see that we just went ahead and created our back end that went ahead and got completed but the other services haven't been pushed up yet they're still sort of local to our machine but we'll push those up in just a second so at the very top we're going to search for ses again that's amplify simple or amazon simple email service hit enter here and this is outside the scope of amplify now we have a little message here just saying hey we're in a sandbox environment and what we want to go ahead and do is on the main page here we'll go ahead and create an identity now i already have my email verified with aws but i'll show you how to do that on your end you're going to want to come here type in the email address that you want to use and then select create identity this should probably yell at me saying yeah saying hey you already have that existing in which case i'm going to come here and i'm going to click on verified identities now this shows me what i have verified but if you were verifying an email for the very first time it's going to send you a message to your inbox with just a link on it as usual that you want to click on to verify that you actually own that email domain once you have that set up you can return here again on this verified identities tab and then you want to head to an email address or the email address that you're going to use i'm going to keep this page open for now because the part that i actually care about is this arn and this is just the unique identifier so that way i can send emails from this domain so with that said i'm going to go into our code again and we're going to update our lambda function to be able to send emails here all right so back in our code i'm going to open up our files and let's take a look at what has gotten created for us just uh so far so we have this api we have our lambda function and inside of here we have this cloud formation template this is really just all the rules that got created for us whenever we were using the cli to generate amplify content well inside of here i can go ahead and scroll down just a little bit and what we're looking for is the aws execution policy or rather the lambda execution policy in this case so i'm going to do a quick little ctrl f i'm going to say lambda execution policy all one word there it is great you can see that there's already one policy attached to it it's just a quick little six liner that gives us the ability to log out the events to cloudwatch now we're going to add in one more and this is the ability to talk to aws ses so i'll say comma add in a new set here you can see it reads fairly well the action that we want our landlord to have is the ability to use ses to send email the effect can either be allow or deny and we're going to and we're going to allow this to happen and then the resource is going to be the arn that we just had over in the aws console that we copied over i'm going to go ahead and grab that one more time and paste that in so with all that taken care of we're in a pretty good spot to go ahead and push us up to the cloud but there's one more thing that we want to go ahead and make sure that we account for and that's going to be that environment variable that process that emv dot ses email that we set up and we can check that out one more time just by looking at the index.js we call it ses underscore email all caps so it's going to break up the cli one more time and we'll say amplify we want to update a function this is going to go ahead and walk us through a series of steps one of those is going to be hey do you want to go ahead and add in a um there it is environment variable now this isn't a secret right it's just our email address um so we're just going to add it in as a environment variable there we go and then as mentioned this is going to be our ses underscore email and then the value is going to be empty liendo and then my email address here all right and we're all done there uh do we want to edit it nope we already have that in place so then we're good with that out of the way let's go ahead and push up our resources to the cloud are running amplify push one thing i always forget to do is making sure all of my files are saved so let's go ahead and verify that we're good awesome amplify push will get us there it's going to bring up a table saying hey here are the resources that are created inside of your application are you sure that this is what you want it should be api and the function notice that the database isn't there just because that is a child resource of our api so we are sure and the cool part is it's saying do you want to generate code so that way your front end can interact with your back end yes we do we want that to be in javascript for this example is fine and i'm going to accept the defaults here now this is going to take a moment to go ahead and do its thing but we can go ahead and get started on working on our front end basically giving it the ability to talk to our now created backend or newly created back-end so i'm going to open up a new terminal instance i'm going to install a package this is going to be npm i aws amplified and all this is doing is giving us the ability again for our front end to communicate with our backend here now over in our underscore app.js file we can go in and configure all of the credentials that give us the ability to talk to it so we'll say underscore app.js and then we'll slide this over and we can go and get started here we're going to import amplify whoops from aws amplify next up we can go ahead and import our config and i'll show you where this is coming from in just a second from and i believe it's going to be dot slash or dot dot slash there we go aws exports and i see that that is there because outside of our pages directory we have this aws exports file that got created and this is basically creating all of these secret values so it's not going to get committed to github that give us the ability to talk to our backend so that way just anybody can do it now this is updating all those resources but in just a moment when this is completed it's going to populate this with all those secret values so with that nearing completion i'm going to head back over into the underscore app.js file and go ahead and finish getting this configured and the last step is just to say amplify.configure pass it in the config now i went ahead and tried to break this out into the relevant components that way you don't have to dive too deep into which files are doing what so i do have a contact form.js file that we can take a peek into and inside of here i even added a small little console.log statement so the very first thing is to go ahead and bring in the api from aws amplifi and the ability to create those candidates so let's go ahead and do just that i will say import and this is going to be api from aws amplify then we'll also have the ability to create those candidates so i'm going to say import and then it's going to be called create candidate i believe but let's go to c and make sure where this is coming from so over in my file system i can get rid of the terminal for now in my files now that the cli is done we can take a peek and see what's going on here so inside of source i have a graphql file that just got generated for us and one of the queries is going to be a git candidate list and then in terms of the mutations so adding them we have create candidate update and delete now note that we only have the ability to create a candidate so i have this here and i can import this into my file so create candidate from slash source graphql and then it is our mutation this is great because it gives us the ability to easily call our api and say hey we're trying to create a candidate specifically whenever a user has a name and an email for us now we're keeping track of this in state right so let's slide down to this comment and handle contact form submit is the relevant method that's going to hook this up for us and we can get rid of this console.log there we go and then we can say something like i want to await and then we'll say api.graphql and then we'll pass in the relevant bits here the actual string is going to be this create candidate method and then the variables that we want to also provide to it are going to have a input with a name and an email so basically bring those along for the ride so we're going to try and send this assuming this works then we can fire off this toast message uh otherwise we'll get an error i'm gonna give that a quick save and then from here with everything push up to the cloud our front end working we should be in a pretty good spot to go ahead and try this out let's head back over to the application actually let me get the application running and delete that one and then we'll say npm run dev if i were to go ahead and fill this out and say michael leondo and then type in my email address here and click send it says congratulations successfully submitted and any moment i should go ahead and get an email um shown up here and there we go my name is mike liendo you can reach me at and then my email address there all right so we went ahead and got that taken care of and a lot of applications that you can go ahead and pick off off the shelf you can typically spend between 9.99 a month or some other variable amount of money but hopefully this was a use case that proves hey you can get this set up in a matter of minutes if you were to know the right tools have the right guidance and of course have an extremely powerful back-end system that allows us to get this set up fairly quickly once again my name is michael liando and if you did like this video feel free to go ahead and hit that like button hit that subscribe button share it and i'll catch you all next time peace [Music]

Channel: Focus Otter

Views: 942

Keywords: aws amplify, aws, amplify, cloud, computing

Id: hPeXnEX1EWE

Length: 25min 42sec (1542 seconds)

Published: Mon Aug 23 2021