Build an AWS Serverless Web App with Amplify, Cognito, API-Gateway, Lambda and DynamoDB

hi everyone today we are building a serverless web application on AWS we will use Lambda the API Gateway amplify dunamodb and Cockney tool so in step one we will host a static website then we will manage the users next we will build a serverless backend afterwards we will deploy restful API and finally we will determinate all the resources so let's have a look at the overview we will create a web app that enables users to request unicorn rights from the wild rights Fleet the app will present users with an interface for indicating the location where they would like to be picked up and will interact with the restful web service on the back end to submit the request and dispatch a nearby unicorn the app will also provide facilities for users to register with the service and log in before requesting rights okay next we need to check the prerequisites so first you need an AWS account if you don't have one you can click on this link here setting up your AWS environment and get started and also you need an account with arcgis for the map so let's jump over to check it so that's the website from rgis so um there's a free version here create a public account so yeah just walks um through here I already have a count so I can't show it again okay next here we can have a look at the application architecture so our app is hosted on AWS amplify and we will use authentication with Amazon Cognito our app then can send requests through the Amazon API Gateway which will call the AWS Lambda function and the AWS Lambda function can write to the Amazon dunamore DB to persist some data and now we come to our material section we can get started with hosting aesthetic website hosting the city website will be setting up our app on AWS amplify so the first step you need to do is to select a region here's a list from the regions that support the services we need to choose that you click on the top right in your the console and then you can choose one I pick us East next we need to create a get Repository navigate to code commit or you can also use a GitHub repository but we will look at the code comments option and the code commit and then click on create Repository and here you enter the name of the app which is wide rights site I already have it so I skip it and then you click on create okay now you also have to set up an IM user with Git credentials in the IM console it is described here on this link I already did this so please walk through this snip it yourself and set up your user and then come back to the video now we have the IM user and next we need to clone our Repository click on your Repository and then on clone URL and click on clone https and then open your terminal typed git clone and then you paste your URL okay for me it's I already cloned it before so but for you it should download the Repository and yeah you need to enter your username and your password and also if this is the first time that from your terminal you want to make a connection to your AWS console you also need to set up your AWS CLI which I will link in the description box there's um there's a documentation getting started with the AWS CLI then after you have set this up it should work now that we have an empty repository we need to populate it and then you execute this command you add all the files so that you can commit them to your repository so we say get it all and then we say git commit message new and then get push next we jump over to amplify so I will open up a new window and type amplify or I already have it here so right then scroll down and go to host your web app get started then AWS code commit continue and here you can select your Repository and Branch Masters correct then click on next and then you put in the name why it writes site and you leave the option here like this create and use a new service role click on next oh yeah right there you need to check this then click on next and then click on Save and deploy so this might take a few minutes to build and deploy okay now it's all green and now we can check out our website by clicking on this link and there you go we already have our website hosted there's also a section modify your site where you can change the title I will skip this because it's pretty easy if you want to change the title you can do it I won't now so let's jump to start module two in this module we will create a Cognito user pool to manage the user's accounts we will deploy pages that enable the customers to register as a new user verify their email address and sign into the site okay let's start by creating the user pool for this you need to go to cognito so jump to user pool then click on create user pool okay on this page you need to select username and click next okay here we say Cognito default and also I pick no MFA and then click on next and again click on next here we pick send email with Amazon SES and in the from email address field you need to register an email that you have registered with Amazon SES if you didn't register an email yet you need to follow these instructions on this link here I will put this link also in the description box click on next next we need to create a user pool name let's say write it right and app client name wired rights app and then click on next and then on click on create user pool right next let's update the website config so in our app we have a file config Dot Js okay this file we have to update now user pool ID we need so jump to user pool this is user full ID copy paste it here and next we need to use our poor client ID select app clients from the left navigation bar yeah so you need to click on app integration then scroll down and then at the bottom you have the client ID copy this paste it here and here you need to put in the region you have so I have us East one then we need to save the file and push it at all it commit new change config get push right then we need to wait until this has been deployed okay it's deployed right now we will go back to our website on and click on giddy up and then you can register with your email and choose a passport and then check your email and put in the verification code then you put in your email again verification code click on verify then okay and now you can sign in right and then you should be able to see this okay and also we can go to our user pool and check if it's also visible in AWS so go to your user pools choose your pool and then you hear in the section users you can see that my email address is in here and also my email is verified so we are all done with this okay so let's move on and go to module three in this module we will create a Lambda function and also set up dinner mode DB okay so let's create an Amazon dunamore DB table so for this go back to your console and click on the normal DB or if or type it in the search bar then click on create table and for the table name we want rights for the partition key we want write ID and everything else can stay the same and click on create table from our table we need the Arn so click on right and click on additional info and here you can copy the a RN which we need in a second okay following we need to create an IM role for our Lambda function so that the Lambda function is able to write the dunamode table so let's go to I am and then we need to click on roles click on create role and then choose AWS service and for the use case we need to select Lambda and click on next and then we want to look for this role obvious Lambda basic execution rule that this one ticket and then click on next as the role name we pick white right slumdar then choose create role create role ah it already exists okay because I already did it before okay so next we check if we have the role by searching it in the role section and you see it's here and then go to the role click on ADD permissions create inline policy choose a service Junior modib and expand okay so we want with the Lambda function we want to write through the dynamodb so scroll to right and click on put item then click on resources and click on ADD r a r n okay we need to fetch the arm from the dunamore DB table so go to click on tables click on rights click on additional info copy this and then we put it in this field yeah and then click on ADD now click on review policy fill in a name for the policy and then click on create policy and now you should have here your policy let's move on with the Lambda function for handling the requests let's move to the Lambda section in the console click on create function author from scratch request uniform in the name field then select node gs16.x 16 then open up change default executioner and click use an existing role and then from the drop down we use our wild rights Lambda roll that we created before then we click on create function then we need to put in the code let's see let's click on the index.s file make this empty and we pick the code from request unicorn.js copy paste it in here and next click on deploy okay following up we need to validate our implementation so we will configure a test event in the Lambda function click on the Arrow configure test event test request when we will choose the name then copy the snippet and paste it in here and click on Save then we can test the test the test our code click on test Shutter's code status code 201 that's fine looks good okay we're done with module three moving on to module four so as we can see all the gray parts we have already done now we will build the Amazon API Gateway okay first we need to go to API Gateway we want to create a rest API so click on build click on new API and here we want it to be Edge optimized the API name will be right rights and click on create a pi we need a new resource called write so click on actions create resource will be named right enable API Gateway course we also need to select this and click on create resource okay select write and click on create method and click on post and on the check mark Lambda function is correct we need to check this use Lambda proxy integration the region is correct for me you need to pick the one that you have used okay and then we need to pick our function here click on Save and click on OK now we need to add our user pool from Amazon Cockney tool first we need to add the authorizers create new authorizer and then as name you can say wild rights authorize this then choose Cognito and then we can pick our user pool here authorization click on create so now we can add our pool to our resource click on method request click on dispensary authorization and here you can oh wait I need to reload Maybe okay reload and then you can shoot the authorizer here and then click on the small check mark and then we have added it okay deploy our API click on actions deploy API deployment stage new stage we will call it production deploy okay and this is the URL where you can call our API guideway so we need to add this URL into our config file so copy it then here you have your config put it in save and then as you already know from before click get add or get commit um add API URL get push we also need to change the write.html file so open the Red Dot HTML file and look for arcgis okay so 4.3 it should be 4.6 4.6 the rest is the same and edit and push it change change arcgis version and git push okay so now we wait until it's deployed now we are already done and can check if it's working so either you can go to write.html but I had the case that the map was not loading so um if this is the case go to sign in.html and log in again click on sign in and it can also be that you have to sign in for arcgis okay now you can pick a location where you want to have your unicorn to be so just click for example here and then click on request unicorn and take a while and then you see that the Unicorn is coming yeah and you can click again somewhere else and click again and try it you can also zoom in and out of the map and here you can see which which unicorn came and that's about it so the last step module 5 is that you clean up all your resources and delete everything but I will not walk you through it because it's very easy and yeah you can go through it yourself and yeah that's it if you have any questions please let me know in the comment section and I'm happy to help thank you so much for watching and have a nice day bye bye

Channel: Lumary

Views: 1,367

Keywords: aws, aws web app, aws serverless, serverless, web app, serverless web app, amplify, cognito, dynamodb, aws lambda, amazon api gateway, build a serverless web application

Id: JIdlwVSC-Go

Length: 26min 42sec (1602 seconds)

Published: Sat Apr 29 2023