Learn Serverless and AWS whilst building a Full-Stack App with React

1. Welcome and Intro: Hi, and welcome to this skill share course on how to build a Fullstack React app using AWS on serverless as the backend. In this project, we're going to learn how to setup our AWS account on serverless. We're then going to deploy Office API and then create a new API endpoint, which allows us to send emails using Amazon's simple email service. We're then going to build a front-end react up, which allows us to enter the details that we need to enter using React hooks and state, and then sending that request to our API so that we get sent that email. By the end of this course, you will have learned how to create an API Gateway lambda, which acts as an endpoint, allowing you to easily create APIs, will know how to interact with the AWS SDK, which allows you to interact with other services, such as the simple email service. You'll also know how to connect your React front-end app up to this backend API and have the backend API deployed all using serverless. So why don't we jump in and have a look at the first video. 2. Setting up your AWS account: In this video, we're going to be setting up our AWS account. If you already have an AWS accounts that you can log into, then you can skip this step and jump straight through to the next video. So we need to search for AWS and then click on the top link. For Amazon Web Services. You'll land on one of their landing pages. And we need to look at the top for create an AWS account. In here, we need to enter our email address, a password, confirm that password, and give this account a name. So I'm going to call this AWS course accounts. Once on this page, you can either choose a professional or a personal account. I'm gonna go with a personal accounts and I recommend you do that unless you are sure that you are going to be using this as a business account. Inside here, you need to add a phone number which you are contacts belong, then fit in your country, adress and postcode. The last thing you need to do is read the terms and conditions and then tick that box. With all that done, you can click create account and continue. Now you get through to your payment information page. The way that AWS works is it has eight free tier of the weight our AWS works is it is a pay-per-use service. So if you create an API and there are requests made to the API, you will pay just for the number of requests that are made. These are tiny, tiny amounts of money. And you also get a free tier. This means every single month you have a set number of API requests, a set number of Lambda's, a set amount of dynamo that you can use for free before you even pay for anything. If you follow this course, then you will be able to fit everything you do. Weigh on the free tier element, so you will actually get charged anything. Unfortunately, this does mean that we do need to enter a credit or debit card. So that as soon as we do go over that limit. Amazon could automatically billers. For example, I have been running eight. We asked for a couple of years. I have quite a loss of projects and my monthly bill comes to about $1.35. So these are tiny, tiny amounts of money. And you can always go back and delete things so that you don't get charged for them anymore. Once you've filled out your card number and use your address, you can also add a new address if you need to. You need to click, verify and add. Once you've entered your car details, you'll get through to this page where you're asked to confirm your identity. You can do this either via text message or by having a call. Make sure you select the correct country. Enter your phone number, and then enter the security check code at the bottom of the page and then click send a SMS. You will then receive that message. And you'll have to enter it onto your screen to confirm that that is your phone. So enter your code in here and click Verify code, and it will be ready to fill up this setup. Now we can choose our support plan. I'm gonna go with a free fun. But if you want extra support and quicker responses to your support queries with AWS, you can go for a business, a developer plan. And if you are already an established business and you know that you want premium support, then you can go and select the business plan. For now I'm going to choose the basic plan. And that is everything completed. It sometimes takes a little bit of time to create your AWS account. But you can always try clicking the sign into the console button and then entering your email address and password. If you come back to this later and you need to sign into your account, search for AWS. And instead of clicking on create an AWS account, click the drop-down for my account, and select AWS management console. When we click on this, it will bring us to a sign in page. We need to select root user. We can then paste in our email address and password. And we'll get into our AWS account. Inside here. We can then carry on with the rest of this course. As our AWS account has been created. 3. Setting Up Serverless to work with AWS: So the first thing that we need to do to get all of this working is we need to set up a user. So that's serverless, can make changes on our AWS account. The way that we do that is we log into our AWS account. And then we click on the search box and search for what I am, which is identity access management. When we click into here, we will get through to a page where there are a lot of different details. There are groups and users and roles and policies. But for this, all we need to do is click onto uses on the left and add a new user. Here we can define the name of the user. I'm going to call this skill share serverless user. And here in the type of the account we want to select programmatic access. This means that we'll be able to use the AWS SDK and CLI to access our account through this user, which is how serverless works. Next, we're giving permissions. And we're gonna go across to Attach existing policies directly. And because we want to be able to do lots of different things, such as creating S3 buckets, creating a API, as well as lambdas. We want to select administrator access. We next, we're gonna go into tags next. And if you need to, you can add some tags. And this will tag the user so that you know what this user has been doing. Finally, we can go into review and we're just saying we have the skill share serverless user with programmatic access. And they have a managed policy of administrator access. So we can click create user. This is now going to create our user here. And make sure you don't close this screen because we need these details. So now we've got that setup. We can head over to our, our computer and open up a terminal. In our terminal, we need to actually get serverless setup on our computer. The way that we do that is run npm install minus g because it's a globally installed package and serverless. Now if you haven't gotten node and NPM installed, and I'm going to be linking and in the notes of this lesson how you can install those. But if you have, this should just work straight away. This takes a little bit of time to setup, so I'll get back to you once that has all been configured. Now that law has finished setting up, we can use this serverless CLI to setup the credentials for that user we have just created. The way that we do that is in our terminal, we type serverless config credentials. And these are credentials for AWS. So the provider is AWS. And we also want to say that we're creating these credentials on a profile. So dash, dash profile. And there is going to be Skill Share serverless user. The next thing that we need to add to this is the credentials. So we need to Dutch dash k and then head back to our AWS account, where we can copy our access key and paste it in here. As well as the key. We need to also add dash does secrets. And again, go into our code. And we're now going to be selecting our show button here, copying the secret. And that's what we're going to paste into that secret value. So I've just copied that. I'm going to go into here and paste that in there and hit Enter. What this is gonna do is it's going to set those credentials up so that we can use them in the future. That is all we need to do for this lesson. And in the next video, we're going to be looking at setting up our repo and creating our first API. 4. Deploying Our First API: In the last video, we set up our serverless user. So in this video we're going to use that user to create our first API. So what we need to do to start with is create a folder for this project. I'm gonna do that by running MKDIR, which is creating a directory and calling it the skill share email course. And I'm going to change directory into the skill share dash email course. So now that I'm in here, what we can do is we can create our api folder. Again, we're gonna be using the serverless CLI. So we're going to call it a function of serverless creates. And we're gonna be using the templates have dash, dash, templates, AWS, dash node js, and then the path that we want to install this into. So dash, dash path. And the path for this is going to be skill share email dash API. So now that we've created this API project, we're going to go into VS code, have a look at the code, and then actually deploy our first API. So if we go into a visual code window, if you click on Open Folder and find the skill share email course and hit open. Then at the moment we can see this has one folder of API and enact. It has a 100.json and a serverless YAML. So in our serverless YAML, This is where we are configuring what our serverless package will do when we deploy it. It has a service. And it says that we are using AWS. And node 12. There's a lot of comments in here about extra features that you can use. But we're going to ignore those for now. And we can look straight up the functions. Inside this function, it says there is a hello function and the handler is a handler. Hello. If we look at the handler ab.js, it exports a function called Hello, and that takes an event which returns some JSON. So the last thing that we need to do is go back into our serverless YAML. And we're going to turn this function into an API. The way that we do that is we say that this handler also has events. And one of those events is HTTP. And what this is going to do is this is going to set up. An API gateway, where we can then use that to access that lambda through an API. The premises we need for this, Hey, TTP configuration is a path. And I'm going to say that the path for this is just hello dash text. We can check if it's a get or a post by defining the method. And in this case it's going to be a get method. And finally, we have a feature called cause, which is allowing or disallowing the API to be made a request from a different URL. And in this case, we want to set that to true so we can access this from our web app in the future. If we save this, we have one last bit of configuration we need to do. Up in the provider. We need to say how we are going to be deploying this. And we're gonna be deploying this with a profile. And the profile is what we made earlier inside our terminal, which is our skill share serverless user. And this is just telling serverless what set of credentials to use. We can also add in a region. And I'm going to do this and set that to Ireland. But you can set it to wherever is the nearest regions you. So for me, Ireland is EU, West dash one. And if I save that, we have everything we need. We can now open up our terminal. And inside our terminal, we can cd into our api folder. And once we're in this folder, we can run SLS deploy. And what this command will do is it will look at this serverless YAML workout what resources and what systems need building, get the code and deploy that all to the account using our new skill share serverless user. This takes a little bit of time to do, but I'll get back to you when NIH is done. Now that that has finished deploying, We can see that we have a function of hello, which is what we'd expect because there we have a function of hello. And we also have an API endpoint, which has a path which is hello dash test at the end. This first bit is randomly generated as part of the API gateway deployment. And that is what we are going to be testing in a minute. Before we do that, we're going to head over to our AWS console again. And inherent, we're going to click on services at the top and search for lambda. If we go into here, we can now see that we actually have API def hello lambda, and that was deployed just two minutes ago. So back into our code, we're going to copy this URL that we have here. And we are going to head over to our browser and paste that into a new tab. When hits that API, we get a message of go serverless version 1, your function executed successfully, and then an inputs. In our code. If we actually have a look at the handler ab.js, We have a message and an input, and that is what we are returning from this function. So that shows that this API endpoint is triggering this function and returning that data. Whilst this is really cool, what we're gonna do in the next video is changed the code inside our API so that we can send an email from our API to our customers accounts. 5. Creating Our 'Send Email' API Endpoint: In the last video, we had a just to deployed our first lambda and our first API and test it out that it was working. In this video, we're going to be creating an API endpoint to send emails to our customers. And to start off with what we're gonna do is a little bit of clean up inside this surplus YAML file. What we're gonna do is delete everything. What that is commented out to reduce the amount of clutter in this file so we can remove everything. So we're left with just the service provider and the functions. So everything else can go save that. And we've got a much cleaner file. Now to start creating this new API, we need to create a new handler. So set inside our API, we're gonna create a new file and call it send email dot JS. Inside this file, we need to create our code for our lambda. So the way that you create a lambda is you say exports dot handler equals an async event function. So this is saying we're creating an asynchronous function that takes the parameter of events. And then this is where we process that. So honest event. We know that we're going to be passing up the address that we're sending it to, the address that we're sending it from a subject and some text. So we're gonna extract that from the event body. The way the API Gateway works is that it stringify is the body that it sends into our lambda. So we also need to own stringify that. So we're gonna say that const curly brackets to destructure the values of, we can say to from subject and text equals JSON.parse event dot body. Now the law is done. We need to check that all these values exist because there is the possibility that someone has sent a request to this API, but not passed up all of the data. So if you're going to copy all of these and paste them in, just to make my job a little easier. So if there is not a two or there is not a from, or there is not a subject, or there is not a text. Then we're going to return a 400 response. And instead of taping out the exact JSON here, what I'm gonna do is create a new function called underscore 400. And that is going to take an object as a parameter. And he's going to have a message on it. In this case, I'm going to say missing parameter on request body. And now we need to make this 400 function. So at the bottom of the file, we're gonna say that const underscore 400 is going to be a function like that. And it's going to take on body. So in this case the body is going to be message. And now we need to set up some parameters. So this is going to return an object with headers and with a status code. And finally with a body. So in this case the status code is a 400. So we can put the number of 409. The body. The way that we need to return this is we need to return a string of the data. So that is going to be JSON dot stringify, pass in the body. And finally, we need to define some headers. So there are three headers that we need to set up to get this working. Those are content type with a capital T. And that is going to be Application slash JSon, which tells the response that we're sending back some JSON. We need access, control, allow methods. And this is just telling what the requesting resorts, whether we're allowed to do a get post or anything like that. And for now we're gonna go with star. And second one is access control allow origins. Someone's gonna copy this and change methods to origin. And again, leave it as star. So that is how we, this is the JSON object that we need to return every time that we respond to an API Gateway requests to a lambda. And we can just change the status code and the body depending on what kind of responses. If we go back to our content, we can now carry on with the process. Now that we have these details, what we can do is we can use those to create the parameters. That we use to pass to Amazon's simple email service. So const, email params equals an object. The first one is a destination. That is an object with an array of two addresses. And that array is only going to have one item, which is the email that we're sending this to, as well as having a destination. We also have a message. That message has a body. The body, in our case is just going to be taxed. And that text field has the data value of text as well as a body. We also need a subject. Subject has a data field of the subject that we've got passed in. This may seem a little bit complicated, but with Amazon SES, it allows for a lot better controls such as sending different variants of the body depending on what the devices the customer is reading with. The last thing that we need to setup is the source. And this is where we are sending it from. In our case, that is from. So that is our email parameters all setup. So now we can start looking at sending this email. We're going to be using an assay S, which is the simple email service. And because this is asynchronous and we'll be using a weight. We're going to wrap this all in a try catch. And this just means that if something goes wrong in the SES call, then we'll be able to catch that error. So what we need to do now is await SES dot send email passing in our EML parameters. And then to make sure that it is a promise, we add dot promise on the end, which is something you can do with a lot of the AWS services. If this is successful, then it's gonna carry on inside this try block. And we're going to return and underscore 200 this time. And that doesn't need any parameters. So now we need to make that 200. And we do that by copying off 400 function. And then we need to change the 400's 28200. We don't have a body on this, so we can get rid of that. The body down here is just going to be an empty string and then change the status code to 200. We can save that. And then go back to our code. So this is what's going to happen if it is a successful request. What's going to happen if it is an unsuccessful request, it's going to fall into this catch. And it's always good to console log out your errors. So console dot log error, sending email. And then the error message. As well as that we also need to return a 400. So return underscore 400. And this is going to have a message of unable to send the email. We can now save that. And some among you may have noticed that we've used SES, but we haven't defined it. So dy is absolutely right. And what we need to do is scroll right the way to the top of our file. And before we export our handler, we need to say that const AWS equals require the AWS SDK. And now that we have the SDK, we can create a new instance of the simple email service client. So const SES equals new AWS, dots, SES, and save that. And we now have all of the code that we need in here to send an email to a customer from our address. So now the last thing we need to do is go into our serverless YAML file, find R functions, and add a new function. So we need to go to the same level as the hello. And I had to send email. We also need to set up a handler. And our handler is arts. Send email dot handler. So it's filename dot what you've exported. So in our case, send email dot handler. We also have events. And this is gonna look very similar to the one above, where we have HTTP. This is going to have a path. And this time the path is going to be send email. Then we're going to have a method. But this time instead of having a gaps like we did in the top one, we want to be able to post data up. So we're setting out to a post. And the last thing that we need to do is set to true so that we can access this from another URL. If we save all of that, we've now added our function to our API. And we have one last thing we need to do. So by default, everything in Amazon has the minimum amount of permissions possible to do its job. So because we're now using Amazon's SES, we need to give these API lambdas and a little bit of extra permission. We do that by going up to a provider and adding an extra statement, which is IM role statements. This statement here, it's going to have an effect which is going to be allow, which means we are allowing these lambdas to do something extra as well as an allow. We also have an action. And these are going to be an array of things that we are allowing these lambdas to do. In our case, that is SES colon star, which says we're allowing SES to do anything on for these lambdas. Last thing we need to do is add a resource. And in our case, that is going to be a string of star Saying that were allowed on any of the email addresses that we have stored. If we save that, we now have our permissions are added for our API. And we've got our new API endpoint setup. If we're back down to our terminal and run SLS, deploy One more time. What's going to happen is it's now going to add this extra endpoint and this extra lambda to our deployment and give them the permissions that they need. This takes a little while, but then we're gonna test out how it works. And one extra step that we need to do to get it all working. So now that has finished deploying, We can see that we have two functions and we have two end points. One is a get and one is a post, which is exactly what we expect. Before we can test this, send email, we need to go back into our AWS console and search for simple email service. This is the service we're using to send emails. And before we can actually send any emails, we need to prove that we're sending them from an account that we own. We do that by going on to email addresses and verify a new email address. In here, you can enter your own email address. I'm glad to mine, such as some arts, complete coding, dot IO and hit verify this email address. So I've been now sent an email. So I need to go into my inbox and click the I have verified this email and I will get back to you in just a second. So I've now verified this and refreshed. And I can see that my email husband verified, which means I'm now allowed to send e-mails from or to this email address. So I'm just going to copy that. And now what we need to do is test out our Email sending and point. The way that we do that is because this is a post request. We can't just put the URL in the browser. But there's a really cool tool called post woman. So if you search for post woman dot IO, it opens up this browser where you can enter your URL. Changed the method. So a get or a post or a put, and then adds some data as well. So here we, we need to check that it is a post. And then we need to get our URL from our deployment and adds that here. So we need to get this URL, which is our send email post and paste it in here. The last thing that we need to do is go and turn on raw input, which allows us to pass up a body. As you can remember, we need four parameters. We need a two address. So what I'm going to do is I'm gonna paste the two into that. I also need a from. And for now use the same email address for sending to and from. But in the next video, what we'll do is we're going to add there so you can send it to any address that you like. We also need to add a subject. And I'm gonna put the subject as my test e-mail. And finally, the last thing that we need is the text. And that text is going to be string. Something along the lines of this is an email sent through my API. If we now hit send, what's gonna happen? It's gonna make the request. And we see that we get a 200 response. That means that we have probably successfully made the API call and got back that response. I'm now going to jump into my emails so we can see what that looks like. Now I'm in my email account. I can see that I've got an email with the subject of I've misspelt it, but my test email, I've sent the email from some to sum up complete coding. And this is the content of the message. This just shows that our email is working and that we can now hit that API to send an email to our email address. In the next video, what we'll be doing is going into SES and making an application to make our email account verified so that we can send emails to any email address that we like from our verified email addresses. So when we've done that, it will allow us to send to any customer that we enter in nuts to email address box. 6. Getting out of sandbox mode (Optional): In the last video, we set up our e-mailing API, endpoint and lambda, untested that we can send an email to and from our verified email address. In this video, what we're gonna do is get it setup so that we can send e-mails from our verified email addresses to whichever email we like. To do that, we need to go and go back into the simple email service. We could search in here, or we could list are visited services under just clicked on simple email service. Inside here. If we click in descending statistics, we can see that we are having accounts in eight sandbox mode. This means that we're only able to send to and from email addresses that are verified. So we can only send from or to. Some aren't complete coding, Das IO. This isn't great because there's not much point emailing yourself. So if we go back into here, we can request eight sending limits increase. This will take us to a new tab where we're going to Amazon support. And we want to do a service lemma, increase and increasing the sending limits for SES. Here we can enter some details such as your mailing tape, your website URL, and details such as how you'll only send emails to people who have opted in. Fitting out all of these details is really important, even though they say they are optional. Because Amazon won't let you verify your account and get out of sandbox mode. If you haven't told them how this is going to work. This is to protect them so that you're not sending emails to people who don't want to receive emails from you. So make sure that you fell all of this out. And then you can go down to here and select the region. So for me, it's EUR island. And we want to select the daily sending quota. And you can set this to a number. I'm going to go with a 1000, which means I'm allowed to send 1000 emails a day. And then that is it. As long as you have filled these are honestly with your website URL, who you'll be sending it to. So if, say, have a website that your customer has entered their email saying they want to receive updates and how you will process if there are complaints. And a good detail for that is probably going and saying, I'm going to delete them from the mail list so they won't receive any future emails. Once you've done all of that, you can add a bit of a description if you'd like, and then hit submit. That will then allow you to make that request and send emails to multiple customers, not just the two verified email addresses. Sometimes Amazon don't let you do this, but this whole project well still work if you haven't verified this. In the next video, what we'll be doing is we'll be having a look at building our React up so that we have a front-end to handle creating these emails. 7. Creating Our React App: In the last video, we had a look at setting up our Amazon SES to get out of sandbox mode. If you've done that, guy is great. But if you haven't, we'll still carry on and be able to do everything that we need to be able to do. So in this video, we're going to be setting up our React up. So if you go back to our code and we can close both of these files and in our terminal, but currently in API. So we need to CD into our route, which has the skill share email course. Here, we need to install a React up. So the way we do that is using Create React up. If you haven't used Create React up before, then you can go into Google and search for Create React app. And you'll be able to see the installation package here. So getting started with Create React up. And you can follow this Quick Start Guide for getting setup. So back into our code, we can use n px, create dash, react dash up to allow us to create a new reactor up. And then we're going to be calling this up. This is gonna create a new folder in the roots of this repo. And is then going to install all of the required packages, files, and dependencies that we need to run our React up. This takes a little bit of time to setup, so I'll get back to you when that is done. So now that has finished installing, We can see that it's telling us that we can run Yarn, start to start our reacts up. But first we're going to have a look at the UPC code that is given. This is given as a public folder and a source folder. And the first thing we're going to look at is app.js. So in here we can see that we have an image, a p tag, paragraph tag, a link saying learn, react. What we're gonna do is we're gonna delete some of this. So delete that top section and replace it with an H one. And H one, we're going to call it my email app. And then outside of our header, we're going to add a new string. And this is just going to be e-mail container. If we save this, we can now go into our terminal and we can go CD into our app. And now that we're in are up, we can run MPM start, which is going to start off our React up. As you can see, is opened up a new tab where I'll react up is going to be loaded. It takes a little bit of time to get setup. And there we go. We have the default React up with our, my email up content. And then right at the very bottom, it says email container. What we're gonna do is we're gonna do it better with CSS to change this around a bed bug in our code. The first thing we're going to do is we're going to change the E. We are going to change the logo that we're loading. At the moment we're loading logo dot SVG. But what I'm gonna do is I'm going to add in the complete coding logo. So I'm going to drag that into here. And there we have the logo for complete coding. In our app.js. What we can do is we can change where we're importing the logo from and changes to complete coding. Logo dot PNG. And that's just drag this out a little bit. So yeah, it's complete coding, logo dot PNG. If we save that and go back into here, we can now see that the logo has changed, so we're still robot, but the styling still isn't quite right. So in here we can go into our AP dot CSS and change a few things. The first thing we want to change is make the logo a little bit smaller. So change it from 40 the men to ten V min. We can also delete this media section as that is what is causing the app to spin. And it looks a bit crazy. Now we need to find our app header. So we're gonna change the min-height from 100 down to five. And we're going to get rid of this column direction. We're going to leave a line items center and justify content Center and everything else. So if we save lots, we go back into our code. We can now see we have our logo and then the title of the app. This looks a lot cleaner. Now what we can do is we can actually define this email content area so that we have more than just a text field and can enter an email address, a subject, and the text that we want to send, and then actually send them. So that's what we're gonna be doing in this next video. 8. Creating Our Email Form Component: In the last video, we got to this point where we had a custom react up with our logo and our title with just a string of email container. And in this video, what we're gonna do is we're going to update this email container to be a new components and then add the input boxes for the til address, as well as a subject and the content of the email. If we jump across into our code, what we want to do is replace this text with a component. So what we need to do is go into saws and creates a new file and call this new file email container dot js X. In here, what we can do is we first need to import React from React as this is a React component. And then we need to declare the function as we normally would. So Comcast email container is a function. And that function returns div with a class of email container. Inside that div, we still want the text of email container. And the last thing we need to do in this file is saved at the bottom, export default email container. If we save that, we can now go back into our app.js. And here we have the text for email container. We can delete that and add a new component called Email container like that. And when I did that, it automatically imported the email container functional components from dot slash email container. If we save this, we can now look into our belt. And it still says email container. But this time it is pulling it from that component. So now what we can do is go back into that component and update it to have the fields that we want. So in here, what we're also going to be doing is we are going to be using a package called material UI. This is great as a allows us to very easily make nice looking components. So I'm gonna do is I'm going to hit this plus in a terminal to create a second terminal. And in here I'm going to run npm install dash, dash save material. Dash UI. Forward slash call. Now, while PSI is running, what we can do is we can start using some of these components. So instead of it saying e-mail container, what we want to do is we want to add a group to group all of this together. So what I'm gonna do is I'm going to create an element called paper. And this paper elements we need to import from material UI. So import paper from adds material UI slash core. Inside this paper, we want to add a form. And we don't need the action on the phone. So inside the form, we then want to put off fields. First thing that we need is a text field. And this text field is going to have a few attributes on it. The first attribute we're going to have on it is an ID. And that ID is going to be destination e-mail address. And as well as that id is also going to have a label. And that label is going to be what we want to display just above this input. In our case, this is going to be the nice version, so it's destination email address. Now when we save this file, we need to first import our text field. So we can add that as another import to our material UI call. Saving it again, this now has worked. So it can go over to our code. And we see that we have the email address. And that is where a textbox that we can enter stuff into. That's great, but now we need to add a couple more fields. So as well as having a text field for the email address, we want another text field, which is going to be e-mail, sorry, ID equals email subject with a label of email subject. And a third one, which is going to be a text field with an ID of email content and a label of email. Content as well. The last thing that we want is we want to add a button at the bottom. So what we can do is say that we have a, another button. And we're gonna do a little bit of styling on this. So we're gonna say there's going to be a variant. And that just tells this material UI components, what kind of Boston we wanted to be. And we're gonna say it's a contained component. We can also set the color. And in this case, we're gonna go with primary. And then close that off. And inside this button we're gonna send it, have a text of send email. If we save all this, we again need to import our Boston as we haven't done that yet. So go into our material UI call and save it so that this successfully builds. We can now head over to our app and see that we have three input boxes under button. But the layout of this isn't great. So what we're gonna do is head back to our code and add some styling. In our source, creates a new file and call that file. Email container taught CSS. And in here, we can add a couple of things. The first thing that we need to add is a control for the email container itself. So email container, and what we want to do is add a little bit of a margin so that it isn't so close to the edge. So margin is going to be ten pixels. As well as that, we want to change the layout of the form inside. That will change the way that these components inside the form a pair. So the way that we reference that is email container space form. And we want to add some padding of ten pixels. We also want to change the display method. So display is going to be flax. And finally the flex direction is going to be column. Now we have that. We can save this file, go back into our email container, Dr. Jay Sx. And we need to import that CSS file. So import dot slash email container dots CSS. And now when we go into, we can see that this is laid out in a much nicer way. The one thing I do want to change now is the fact that this button is way too big. So we can go back into our code and our CSS and add another thing which is going to be e-mail container form button, which is going to reference just that button and set the width to be a 150 pixels. That's going to change, that send email to be a much nicer size. Without all done, we now have an app that we cannot type in. Under button that we can click. At the moment. This doesn't do anything, and that's what we're gonna cover in the next video, where we're going to add state to this so that we can store these data fields. 9. Adding State to Our Component: In the last video, we created this component and added these input fields where we can type content. But in this video we're now going to add state so that we can take these values and use them for something. So if we go into our app and our container dot j x x, we're going to be using React hooks and react state. So at the top of this file, we want to create a new state variable for the destination email. And the way that we do that with hooks is say that Comcast and then declare an array destination email, comma set. Destination, email equals US states, and for now is going to be an empty string. So what have we done in this line? We've created a variable called Destination email, which is the value that the email currently has. And we've created a function. And this function allows us to pass up some new data, which is going to update the state and change the value of our destination email. The way that we use that is if we go down to our text field here, we can add some extra parameters. So in here, we can stay instead change the value. And the value is going to be destination email. That means whatever this value is in the state, is what the value of this text field is also going to be. As well as that we have an ability to art and on change. And this is going to be a function which is called anytime someone changes the value of this. So that change triggers an event. And what we want to do is we want to set the destination email. So e dot targets dot value like that, and save that. So here we've used US states, but we haven't actually imported down. So what we need to do is go up to react the imports top. And as well as importing reacts. We can also import US state. That has now succeeded. And although this looks like it works in exactly the same way, we have this value stored in state, whereas this value is an uncontrolled value that we don't have access to in our app. What we're going to do now is add an extra function just to show dots. We have controlled this state. And that function is going to be a send function. So const, send is a function. And in here for now, we're going to console dot log current state. And that is going to be an object. With destination email. This send function we can actually add to our button. So as well as a variant and a color, we can add an on click, which in our case is just going to be send. If we save this and head back to our code, we can type something into our destination email, and then we can type something into our subject. And if we go into our console and hit send email, we can see that the current state has the destination email, but it doesn't have a subject. So what we now need to do is repeat this process. But for the subject and the content. So const subject comma set, subject equals US state. And we're going to start out with an empty string. We then also say that const text equals and set text equals use state. Just like that. And now we can go down to our input text fields and had those extra parameters. So here we can set value equals subject and onChange equals a function that takes the event and calls set subject. With E dot target dot value. We do the same thing again with the text field for email content. So in here, we can set the value. And that value is going to equal text. And an onchange equals E event. And the event then triggers. Set text, passing in E dot targets dot value. Now that we have all of those set, we can update this console log two as the subject, as well as the text. If we go into our terminal, into our app, sorry, we can add a, an email address and a content and hit send in our console over on the right-hand side, we can see that we have a destination email and a text, but the subject is blank, which is exactly what we expect. We're gonna put a little bit of validation in here so that we know that the fields, the customer has entered our correct. So if there is not a destination email, we're going to add a new state. And that new state is going to be an error message. So const error, message. Error message equals US state. And for now is going to start as a blank message. So if there isn't a destination email, we're going to set error message two, missing email address. I'm just gonna capitalize that. And then we're going to return from this function. So it doesn't carry on any further. We're gonna do the same check for subject on text. So if there is not subject, and I'm going to copy these two missing email subject. And finally, if there isn't dot text, set error message of missing email text. Now, even though we've done this, we haven't actually used this error message anywhere, which is why we're guessing this error message assigned but never used. So we're going to copy that error message value and go back to our code. Rise at the bottom. And just before our button, we're going to add in a little bit of code. We're going to add some curly braces. And then we're going to use a ternary equation. We're going to say, this is going to say if there is an error message, we're going to show a message. And that is going to be a div. Just like that. And inside that div is going to be the error message itself. We're also going to add a class to this because we can do a little bit of styling in a sec. So className equals error message. Now, whether ternary equation, you always need to put a colon at the end because this is an if-else statement. So if the error message is true, we show this div else. And in this case, we want to show null, which is just going to show nothing. So if you go back to our app and if we hit send email, now, we'd now get this extra div, saying that we are missing our email address. That is great as it shows the user that this hasn't succeeded. And why? If we enter something in the email address and send it, changes it to missing email subject. Now, back into our confirmation. Once we've got all of this, if we have the email, the subjects on the text, we want to set the error message to an empty string so that it doesn't get shown anymore. So if we enter something in email on content, we're missing the subject. But now if we add a subject, the error message disappears. In the next video, what we'll be doing is hooking this up to the API we made earlier in the course. So that once the user has entered the details, we can send that email to ourselves. 10. Connecting Our Component to Our API: In the last video, we created our reacts up with our state and added some testing to make sure that the destination email subject on texts were all populated. In this bit of the video, what we're gonna do is we're going to add in axioms so that we can actually send this request to our API, which will send our message. So after this send process, we want to add some extra code to send the request. The tool we are going to be using for this is axis. So if we go back into our second terminal window, we can install a new package. So npm install dash, dash save seals. So now what we need to do is add some extra code after this validation to send that request. Here we're going to do axial S dot post. And what we're going to be posting up is we're going to be posting up to our URL, which we'll get to in a second. And as well as that, we're going to be pasting an object. The object is the object we're expecting to receive in our API, which is a two. And that is going to be our destination email. We're expecting to have a subject. And for us, we can just say that the subject equals this subject. We're also expecting text, which again, we can say is the text that we have stored in states. And finally, we, are we expecting a from? And in this case, you need to set the from address to the email address you verified in Amazon's SES, which in our case is some complete coding dot IO. Now what we need to do is make sure that we've imported access. So if you go to the top of your file and import axis from axioms. We've now got this all working. But what happens if this doesn't succeed? What happens if this fails? Well, we can add a dot then onto this. And this will only ever get called if this API has been successful. So if this has been successful, what we want to do is we want to set the variables back to empty strings. So set text to empty. We want to set destination email to empty. And we want to set subject to Mt. Now that we have that, we want to add one extra nice little thing. We want to set a success message. So that means we add one more thing in state. So at the top, const success message, set, success message equals US states. And for now is going to be an empty string. And in here, we can set success message. And the message can be your email was sent. Now this is what happens when things go well and it goes into this successful dot then block. But what happens if this falls over? Say, the email that you're sending to doesn't exist. So Amazon's SES can't send it. Or there is some other issue such as your URL being invalid or your lambda being down. In that case, we want to add a catch. And we want to catch the error, which goes into this function. The first thing we want to do is console.log error in OK CEOs post and the error message. This will make it much easier when we are trying to debug why our application may have failed. So the first thing we want to do in here after the error message is we want to set the success message to empty so that it gets removed. We also want to set the error message. And in this case, we can go with error dots message as there is sometimes a message on the error itself. Or if there isn't, then we can go with unable to send the email. Now that we have that, we actually need to use the success message. And we're going to use it in a very similar way to how we've used the error message. If we scroll down to where we have that error message, what we can do is create a new line underneath that. Say that the success message using a ternary. We can then have a div like that. And inside this div, we have a dynamic property of success message. And if that doesn't exist, we're gonna go with no. Similar to how we don't want the error message. We're also going to add a class name. Not class_name is going to be success message as well. So if we save all of this, we have one last little bit of tweaking to do, which is going into our CSS and adding something to define the difference between success and error message. What we can do is we can say dots error message, and change the color to red. That just means the error messages show up in red are a success messages turn up in the normal block. Back in our email container. This is all setup. So we, all we need to do is find our URL. That is what we have built in our API earlier in this course. And paste it in. If you need to find this URL and don't know how to get it or have forgotten what it was. I'll show you a cool way of getting that. At the moment we're in the root of the skill share email course inside our terminal. If you're still in your app, then you can cd down one directory with dot-dot slash. But then we need to cd into API. Now we're in the API, we can do SLS info. And he's gonna pull back the information about the system we've deployed with serverless. And here we go, we have our send email URL point, just so we can copy that and paste that into there and hit save. So if we now go across into our up, we can enter our e-mail address, which is some art complete coding dot IO. You need to enter your email address. If you have managed to the account verifications, your account is not in some box mode. You can ends up other people's email address, but behalf or don't enter a random email address. Because if it gets reported, then you can lose the right to that free mode and you'll end up back in some books. The subject. My first email from the app. And the content is, this is really cool that you can send an email from my full stack up. If I now hit send email, you can see that your email was sent. And that's all of the fields were removed, which is exactly what we expect. If I now open up my email, we'll have a look and see if I've received it. So as you can see, we've received my first email for now. And when you first start sending messages, sometimes pops up in Google saying it might be spam. That's because you've not sent many emails through this Amazon service. And as you send more, this will get removed. If you click on looks safe, that will help that process. As you can see, we have the subject and the text that we entered on our app. So that means that we have the full stack process, all setup. 11. Wrap-up: Congratulations on completing this full-stack serverless cause. We've learned how to set up our AWS and serverless accounts and deploy an API which works with the AWS SDK to be to allow us to send emails on behalf of our users. With then sets up a reactor up and connect the two to create our full stack up. If you've learnt something new in this course, it really helped me out. If you give this course and rating as it helps more developers just like yourselves, learn the skills and help everybody level up as a developer.