AWS Portfolio Project: Build an End-to-End Web Application with 7 Services | Step-by-Step Tutorial

one comment that I consistently get here on the channel is we want more AWS projects do a video where I can build something end to endend using a variety of AWS Services well you got it I do have one other video like that if you haven't seen it yet check it out but here's another so we've got wild rides which is basically an Uber oryt except for unicorns we've got some good static content here but we're also going to incorporate user registration and and log in and by the time we're done we're going to be able to work with some map functionality here so that if we were in Seattle let's say we could request a unicorn just by clicking on the map we'll request unicorn and voila Here Comes Angel the white unicorn on the way she's arrived giddy up now this is actually an AWS sample project so I can't take credit for all the Brilliance here but I will walk you through how to build it basically from scratch I think it's really a great app for tying together a bunch of different services in AWS and you'll actually have a working application when you're done that you could share with friends or family if you want all of the code is available for download so no worries there here's a list of all the different services that we're going to be using quite a few and these are all pretty common in modern web applications so hopefully you'll learn a lot here that you can take to other projects as far as what this will cost everything we're doing should be in the AWS free tier which is typically good for the first 12 months that you have an account if you're outside of that window it shouldn't cost any more than about a dollar but stick around to the end and I'll walk you through how to delete everything that we set up just so you don't get any surprise bills as far as what you'll need to follow along you'll need some kind of a text editor or somewhere to keep notes we'll need to copy and paste various IDs and credentials and whatnot for use later you will need an AWS account and access to the console some basic knowledge of AWS I'm assuming that you're familiar with the console and some basics of the different services and then for the mapping functionality we're going to be using arcgis and you will need an account there it's free and easy to set up just go out to arcgis.com I already have an account and I'm signed in but if you don't have an account there'll be a sign in link up here and then once you click on that you'll have the option to create a new account so that's very important otherwise your maps are not going to work all right so now that we've seen what we're working towards let's talk through how we're going to get there making this as real world as possible pretend that a customer asked you to build them an application and they're giving you some high level requirements for it first thing we're going to need is a way to store and update and pull the code so all of this code is available from AWS and we need a way to get it into a source control system basically and we also need to be able to handle permissions for the code so really just some setup work here these first couple of bullets we need need a place to host a website and we should also be able to make updates there that get deployed automatically ideally we need a way for users to register and log into the site we obviously need some ride sharing functionality we'll need somewhere to store and return the ride results and then we need a way to actually invoke that functionality as well from the browser we'll work down this list as we go throughout the video starting with the top two basically getting our code setup the surface we're going to use for that is AWS code commit which is aws's Source control system kind of like GitHub you could actually use GitHub as well for what we're doing but everything I'll be showing we be using Code commit and this is where we're going to store HTML files and CSS and JavaScript and so on for the site now before we dive in just make a note of the region that you're working in here in the AWS console that will be up here on the top top right I'm going to be in US West to you can be in some other region but there are a couple of places where this will come into play where you'll need to update the name of the region to get things working so just make a note of that and make sure that you're consistent with the region that you're working in so here's what we need to do our good friends over at AWS have put all of the code the HTML and CSS and so on in a publicly accessible S3 bucket so we're not really going to be writing much from scratch which is awesome so we need to take that code and create a code commit repo and basically copy the code into our repository where we can then work with it there are several steps that we need to take here to do that so let's just start here first we need an empty repository in code commit so out to the console let's go to code commit it's really easy to create a new repository just create Repository and then the name will be wild rides hyphen site now I did already set up a repository with that name so I'm going to use two on the end of mine and then create so that basically gives us an empty repository we'll check that one off the list easy peasy now we need to do a little bit of permissions work in I am so that we can actually access code commit back here in the console I'll open up a new tab and then we'll go to IM am identity and access management of course now I'm currently logged in as an I am user that has admin access as the best practice you shouldn't really be using your root account for this and I'm assuming in the rest of this video that you are not using the root account so we need to go and do some of these I am updates here and in other places but I go into my list of users and then click on my TT admin here on the permissions tab we want to add permissions and add permissions attach policies directly here on the right and for this one we want to search for the AWS code commit power user so you can just type that in to filter down and then select the one for power user here next and then add permissions so that should give us the code commit access that we need okay moving on next we're going to need to create some git credentials for the I IM user to allow https connections to code commit so again code commit is a source control repository that uses the git technology and so we have an additional set of credentials there that we need to get all of this working back to my IM user I want to come into security credentials and then scroll down here to the https git credentials for code commit I've already got some credentials that I generated here but if you don't have them it's easy to generate just click on the generate credentials you can have two sets of these you'll have a usern name and then your password which you can show I will delete these when I'm done but you can just copy these make a note of them or download them and again these will let us make https calls to code commit okay the next thing we're going to do is clone the repository now the repository at the moment is basically empty but it's going to create a folder for future use and it just lets us test out that everything's working as far as credentials go so here we're going to go back to code commit if you've closed out of that just go into your repositories and the one that we just created and then we want to grab the URL that we would use to clone this we want to grab the https version so just click on that that doesn't actually clone the name kind of makes it seem like it's cloning it's really just copying the URL that you would use to clone it and then what we're going to do is open up Cloud shell right here on the top of the browser if you aren't familiar with cloudshell it's basically a command line interface or CLI that runs in the browser there is an AWS CLI that you can download and install locally on your machine but you will need to configure it it needs a secret access key and access key IDs and I find it's just a little bit clunky and a lot of people have issues with it and it can be hard to troubles shoot when things go wrong so that's why we're here in the browser when you use cloudshell the credentials and so on are all handled behind the scenes for you and so life is just a lot simpler so what we want to do here let me increase my zoom a little bit is get clone and then we want this URL that we copied here a second ago and then we'll need to enter our username that's this username back here that you just generated so I'll grab mine paste it in and then your password hopefully you made a note of this when that dialogue was open because you can't get back to your password so if you didn't make a note you'll need to generate some new credentials but I've got mine on a clipboard so let me go grab mine and paste it in now when you paste it's not going to look like anything happened so be careful not to to paste it two or three times just paste it once and then hit enter and then we're going to get a warning that it appears that we've cloned an empty repository and that is true and that's totally fine what's happened though is here in cloudshell you have what's called a home directory which is where files and documents and so on live that you can access later so if we do an LS to list what's here we now have a folder called wild rides site two if we were to change cies CD into that and then LS you'll see it's just an empty folder so basically cloning the repository just created an empty folder for us and this is where the code files will eventually end up before they go to our repository so the last thing we need to do is grab the code from the S3 bucket copy it to the empty folder that we have in cloudshell and then commit it to our repo so this part right here on the lower right so back here in cloudshell if you haven't already navigated inside of this folder wild rides then do that now CD wild rides D site and then I'll grab the command to copy things out of the S3 bucket I'll also put this command in the description of the video if you just want to copy and paste it but basically we're saying AWS this is an AWS command S3 is our service CP is copy and then S3 colon back slashback slash Wild rides uswest 2 so this is the S3 bucket that AWS has set up for us where the code lives this is not anything that you set up so make sure that you're using this name but you will need to change the region right here if you're using a different region make sure you update this so I'm in US West 2 in Oregon but if you're in another region say you're in Us East one or Us East 2 or something like that you want to update that name and then SL web application1 static website hosting website space period slash and then-- recursive all right so this is going to go out grab the code from the S3 bucket here we go downloading downloading excellent so right now the files are just sitting in this cloudshell home directory if we were to do another LS we'll see the files here we've got some folders as well they are not in the code commit repository yet so to do that we need to do get add space period so the period says we want to add everything all the stuff that we just copied from S3 we want to add this to code commit and then you'll do get commit commit DM and this is the message about what this commit is what action you're taking so I'll just say initial commit so that in the future we can look back at this commit and know what we did it says please tell me who you are and we'll need to run these commands right here for a username and email there is a credential helper if you're working locally that will make this a little bit easier for for you but I'm only going to do it once here on the command line so I'll just enter my stuff manually entering these commands so there's my email and then the other one for my username this is just the I am user that I'm logged in as this is not the username back here so just your I am user which for me is TTT admin you'll see up there on the top right okay okay and then finally get push this is what we'll actually push things out to our code commit repository actually my bad I need to go back and do my commit again there we go and now we can do the push so get add get commit enter your credentials do get commit again and then get push and then for this one it's this username right here and then our password paste that in hit enter and there we go okay so things are finally pushing out to our repository hopefully you were able to follow along a little bit of back and forth there but let's go look at our files now so I'll zoom out a little bit back here in my repository close out of this come back to repositories and site two is the one that I was working in and then over here on the left code and here's all of our code so this code came from the S3 bucket that Amazon provided we copied it into our local cloudshell home directory and then pushed it here to the repository where we can work with it so pretty simple code some CSS some images some JavaScript and HTML files feel free to come take a look around in here but we're going to move on to the next step in our project okay now that that setup work is out of the way we've got the code now we need a place to host it so a user could actually browse to this location and we also need to be able to make updates to the code and have those updates push out to wherever we're hosting it the service we're going to use for this is amplify it's super easy you can build and host webites with amplify and it's a really good service particularly for front-end developers but let's go set this one up now we aren't going to need Cloud shell anymore so I'll just close out of that and then I'll open up a new tab here in the console and we'll go to amplify amplify also lucky for us will let us hook up to a code commit repository and pull our code from there so yet another reason to go with this but over here on the right we'll do new app and host web app we'll choose code commit but amplify does work with these other providers as well hit continue and then we'll select the repository that we created earlier mine was site 2 yours might just be site and then the branch should be selected automatically for you if there's just the one and then we'll say next for the app name I will leave this as it is site two for me since I already have another one and then make sure you select this here allow Amplified to automatically deploy files which basically means it's as soon as you make an update in a code file it will automatically deploy so continuous deployment essentially is what this is and then scrolling down we'll create a new service Ro and then say next review and then save and deploy and then you can watch the progress here of what's happening so with provisioning infrastructure and different things that it needs to run this is Con considered serverless meaning we didn't have to go set up an ec2 instance and all of that for hosting the website so that's what it's doing now and then it's going to build stage it's in now and then it will push our code out to the infrastructure that it's set up in the provision stage so I'll give this a minute to run and be back when it's done okay we've got green check marks and everything so that looks good let's test it out we should be able to open up the site with this link right here in a new tab and like magic here is our site awesome now let's check that we can update our code commit a change and then have it reflected here by having amplify deploy it so basically testing that continuous deployment is working so let's come back to code commit here to our repository and I'll open up index.html I can just click on the file here in the browser and then over to edit there's some text on the site right here that says how does this work so let's just update that to say how does this thing work just so we can see the change small change but then scrolling down I can commit my changes I'll put my name in my email address commit messages are usually a good idea especially if you're working with a team but I'm going to skip it for now and we'll commit changes and by committing that change that should have triggered amplify back here looks like it did so we're going through the steps again to basically push out the change so we'll go through provision build and deploy and when that's done we should be able to see our text change on the UI I'll give it a minute and be back when this is done and success so now if we go back to our site and refresh how does this thing work so our changes there amplifies is working we're pulling code we're able to commit code and continuously deploy excellent work but at the moment it really doesn't do anything I can't log in I can't register I definitely can't use maps at the moment so let's talk about what's next let's work on that user registration and login part and for this we're going to be using cognito this is used to do authentication with this service you can do authentication by having people register with their own accounts or you can use external identity systems like Facebook or Twitter or Amazon or other saml or open ID providers it's actually very powerful and also pretty easy to set up so let's go work on that next now when you're working in amplify if you come into the backend environments here you can actually use amplify Studio to set up Cognito and other parts of the application all from right here this is actually one of the selling points of amplify that you can add different components as you build out the application for our purposes though I think it's actually a bit more instructive to head over to Cognito to do that work and then we'll come back to our application and make some configuration changes to hook things up but let me open up a new tab and we'll just go directly to cognito and the main construct in cognito is a user pool so want to create a new user pool Cognito user pool is selected for us by default that's what we want and then we can choose the attributes that we want for people to sign in I'm just going to do username but you could do email or phone number as well we won't do any username requirements we'll just skip through that and say next we'll go with Cognito defaults on a password policy but you can do a custom policy as well if you want to do that for multifactor authentication usually a good idea but just keeping things simple we're going to say no MFA we'll do the defaults here and say next we'll enable self-registration so we'll be able to go into wild rides and register we'll leave all the defaults on the rest of this page and then next so you can get really granular with this if you want to but you can also keep it pretty simple like we're doing Cognito will send an email to verify users when they sign up you can either do that using SES simple email service or I'm just going to go with sending email with Cognito this is good for development up to 50 emails a day that's plenty for what we're doing so I'll select that leave all the defaults here for the from and reply to email addresses and then say next the user pool name I'll go with wild rides 2 in my case but you can go with wild rides scrolling down for initial app client we need a client name and this will be the wild rides web app we can leave defaults everywhere else here and then next review and then all the way to the bottom we will create this user pool now we want to click into the user pool and we need to copy a couple of things so bring up your notepad or whatever you're using to take notes I am using a notepad here and we want to copy the userpool ID so just grab that I'll make a note of what it is and then under app integration down here on the tab we also need to copy the client ID right here under app clients and analytics just copy that to notepad as well and now what we need to do is update the config file in our application code to basically point to this user pool this is how we hook up Cognito with our code and with amplify so back over to code commit to our repo in code we want to go into the JS folder folder here JavaScript and there's a file in here called config.js we'll edit this and then the user pull ID and the client ID that we just copied into notepad we want to put those in here so user pool ID copy it right here between the quotes and then the userpool client ID on the next line and then we also need to update the region so once again I am in US West 2 we'll come back and update the invoke URL a little bit later but for now let's commit these changes as you know by now that will kick off amplify back here under hosting environments to provision build and deploy so I'll give it a second and be back when it's done okay okay so back to our site let just do a refresh here for good measure and then we should be able to test out the registration and login functionality with the giddy up button right here so I'll click on this and Tada let's register so put in my email address and a password and let's ride so the Cognito email service should have just sent us an email let me go grab that and all of that worked just to show you what the email looks like it's super simple but we've got the confirmation code here so I'll grab this then go back to the browser put in my email address here and then the verification code verification was successful we'll be redirected to the login perfect so now we can log in with that email address and the password and sign in so all of that functionality of registering and getting the verification email and code and all of that all happen by us setting up the Cognito user pool which is actually pretty simple and straightforward so a very powerful service with Cognito now this has taken us to the ride. HTML page which will eventually have the map on it we haven't set any of that up yet but there is this authentication token right here that you want to grab and then copy this to your notepad or wherever your keeping notes and we'll use this later all right what do we need to do next well next you need to hit that like button if you haven't already if you're enjoying the video I would super appreciate it it really does help the content spread to more people and also think about subscribing to the channel for more content like this thank you so much okay but seriously next we need to work on the ride sharing functionality we're making a ton of progress here but with this fun fun ality a user will request a ride and then we need to send a unicorn to their location these two pieces work together so we're going to tackle both of them in this next section first we're going to use a Lambda function as you might know a Lambda function is a bit of code that runs in response to some trigger in our case the function will be triggered every time a user requests a unicorn link above and below for a video about Lambda if you need the basics there and then the second part of this is a Dynamo DB database this is a key value or nosql database generally a lighter weight option than something like a relational database where you have to go set up your schema and your relationships and everything ahead of time also link above and below if you want details on Dynamo DB but the user is going to request a ride that will invoke the Lambda function the function will select a unicorn from the fleet and then record that request in the Dynamo DB table and then respond to the front end with details about the Unicorn that's being dispatched okay so we actually need to go set up the Dynamo DB table first back out to the console let me just open up a new tab here and we'll go to Dynamo DB under tables we'll create a new table you want to name your table rides I'm going to go with rides two just because I already have our rides per partition key this should be ride ID with r lowercase i d and then uppercase i d and this will be a string we can go with defaults everywhere else and then create table once your t table is active here and successfully created click into it and then here under general information you want to expand additional info and we want to copy the Amazon resource name or Arn so I'll just grab this and then put that in notepad and then next we need to work on our Lambda function but you'll see that when we go to create the Lambda function it's going to ask us for the execution r the execution rle basically says what the function has permissions to do and specifically Lambda is going to need permissions to write to this Dynamo DB table that we just created so we're actually going to create a roll first rols happen under am so I'll go back to where we were before I am and then roles we'll create a new role The Trusted entity type is AWS service and the service will be Lambda pretty common one and then we can say next and then we need to search for policies to attached to the role basically the permissions that this role should have let's filter by AWS lamba basic execution role should show up here select that and then next the name for the role you want to use wild rides Lambda can leave the defaults for everything else and then say create rle all right now let's go open up that roll so I'll filter by Wild open the roll and we need to add some additional permissions so over here add permissions and create inline policy here we basically need to give it the ability to write to a Dynamo DB table so the service is going to be Dynamo DB select that and it's a best practice to only give permissions to things that it absolutely needs so using the least amount of permissions possible we could just give it permission to do everything but it's a better idea to filter down so the one we want is called put item which will let Lambda write an item to our Dynamo DV table so if you just type in put item this is a write type of function select that and then the resource basically where you want it to be able to write here we also want to be specific and limited instead of giving it the ability to write to everywhere we'll say specific and then we'll add the Arn to that table that we just created so click on the add Arn's link switch over to the text Tab and then we'll paste in the Arn of the table let me grab that it was this one right here and then add errands then we can say next the policy name will be Dynamo DB right access and then create policy okay so now that we have the Dynamo DB table set up we have a role that will allow us to write to it now let's work on the Lambda function that does most of the Magic in this application so we're getting there I will open up a new tab for Lambda and now let's create a new Lambda function we'll author from scratch the name will be request unicorn I'm going to do two on mine again since I have another one the runtime very important on this one don't let it default you to the latest version of node instead we specifically need node 16x it won't work with newer versions so heads up there and then down here for the execution roll all of that work that we just did with our roll in I am that's where this comes into play so we want to use an existing role and then the existing role we should be able to filter wild rides Lambda and then we can create the function Okay so we've got the function and just some boilerplate code here the code that you want I've actually uploaded to my Google Drive and I'll include a link to this in the description of the video but it's right here this does come from AWS like I said in the beginning I cannot take credit for this but you want to grab this code here Lambda function sh of code don't get everything at the bottom at the bottom we've got the test event so just go to the end of this page right here copy that and then back here basically replace everything with that code and then we'll just briefly walk through what's happening here so up here on top we've got our Fleet of unicorns so Angel Gill and rosante I believe is how you say it so you could change the names or add additional unicorns here if you wanted to and then we've got our Handler you'll have one of these in every Lambda function taking in the event the context and the call back so basically the information we're going to get from the user in the browser and then we can do stuff with it the ride ID will just be random bytes from the URL we're going to get the username from the request context the Cognito username the pickup location will come from the request body as well well that's where the user clicked on the map and then we're saying record ride where we're grabbing all of the information that we have then we actually call that function definition right down here record ride and this is where we write things to our Dynamo DB table so really important if you use the name different than rides for your Dynamo DB table make sure you update that name here mine is actually rides to so I'll update that there's a function right here kind of a placeholder if you wanted to implement some additional logic to find the optimal unicorn for the ride so there's definitely different things that you could do in here we've got some helper functions some air handling and so on okay now really importantly always check this message right here change is not deployed so we just updated our code but it hasn't been pushed out anywhere that Lambda could grab it and run it so very very important you want to make sure to deploy the code anytime you make a change to it perfect and now we want to test it out to make sure that things are working here before we go try it as an end user so click on the Arrow here to the right of test and configure a test event for name I'll say test request event and then down here you basically pass in Json code similar to what you would be getting from the browser from the user so I do have some test code here that we can use back here in this document right here at the bottom of the document so I'll just grab this and again the link to this document is in the description for the video so don't feel like you have to type everything out from scratch I'll replace everything here with that code and then save and then now we need to run the test so we're saying for this test data we're sending in let's make sure that our function is working if everything did work you should get a status code of 2011 and you'll see things like the name of our unicorn Gil white gender and so on so it looks like everything is working which is awesome let's also check out our Dynamo DB table to see if things were written here so in the table you can click on explore table items and then scrolling down we should have the one item here here we go we've got the Unicorn we can open this up the request time when it came in we've got the ride ID which again is just random the Unicorn color gender and name now just a heads up in another video where we do some Dynamo DB work some people have told me there's a delay with things getting written to the Dynamo DB table mine have always been very immediate but for whatever reason some people have a delay so if yours doesn't show up right away maybe just give it a minute or two ref fresh and then hopefully everything will be there all right excellent work everybody we are on the last question mark here now we need a way to invoke all of this brilliant work that we've done so this piece right here in yellow we saw how to invoke and test the Lambda function through the console and that seems to be working but obviously we are not expecting our end users to do that they're just going to be out in their browser they're going to click on a map and then some kind of magic should happen so what does this piece right here look like well for this we're actually going to use API Gateway this is really a core service in AWS especially for decoupled applications microservices that type of thing where you can build your own apis whether those are HTTP or rest or websockets and so on it's really the perfect way to invoke a Lambda function so let's go do that now back here at the console I'll open up yet one more tab hopefully this is it for the tab tabs and then we'll go to API Gateway as of the time of this recording AWS recently updated their UI for API Gateway I am going to use the new UI if you're still on the old version hopefully you have an option to go to the new UI but just a heads up in case yours looks different than mine try to get to the new UI if you can because the old one is probably going away but let's create a new API this one is going to be a rest API so scrolling down we'll say build new API the name will be wild rides and two for me the API endpoint type we're going to go with Edge optimized this is typically what you want for things that are being served over the Internet a regional endpoint would typically be used for things that are just accessed within the same AWS region and then private obviously is for private but we're going to go for Edge optimized and then create I'll just close out of some of these messages here to tidy things up now because we're using Cognito user pools we do need to create an authorizer over here on the left nav to authenticate calls API Gateway uses jwt's or Json web tokens that are returned by Cognito so here we're basically hooking up the two parts by creating this authorizer so we'll create authorizer name is wild rides type is going to be Cognito my region right here Us West 2 I should be able to find my user pool so mine had the two at the end I'll select that for token Source this is the header that's going to be sent in and ours will be authorization and and then create authorizer now let's click into this authorizer and we'll test that things are working so you might remember way back when we had an authorization token that we copied into notepad if you didn't copy this for some reason you should be able to get to it from Wild rides and then ride. HTML it was this thing right here so let's take that back to API Gateway and test it out enter that token right here make sure you don't have any spaces or new lines at the end of it that will cause it to fail and then say test authorizer and you should get a status code of 200 everything looks great awesome okay let's back up to our API here now that we've got that authorizer in place I was in Wild rid 2 and now we need to create a resource this is basically how we're going to hook up to the lamb function so resource name will be ride you can leave the path as it is and then we do need to enable cores cross origin resource sharing the reason for this is basically because our domain on the site which we're getting from amplify remember the domain right here is going to be different from the domain or the URL that we use to invoke this API Gateway called all so traffic is going cross domain or cross origin if you don't select this then nothing's going to work so make sure to select that checkbox and then create resource and then with ride selected right here come over and create method the method type will be post we're going to integrate with the Lambda function that we created you want to toggle on the Lambda proxy integration and then down here select your Lambda function so for me this was request Unicorn 2 yours is probably just request unicorn and then create method okay let me clean up some of these messages here now down here select your method request card or the method request tab right here and then scrolling down we want to edit and the way we're going to authorize this particular method request is with the Cognito user pool wild rides okay scrolling down let's save and then finally let's deploy this API so the orange button right here first stage I'll create a new stage and I'll just call this Dev for development and deploy okay perfect now I'll grab this invoke URL right here and I also need to paste this into notepad so invoke URL and we're almost done we just need to make a couple more code updates and then we can go test this out so back to code commit to our code we want to be in the JS folder config.js I still have this one open from last time we basically need to update the invoke URL here with the that we just copied so let's edit I'll paste that in so that's the invoke URL for the API Gateway call I'll commit this change and then there's one other update we need to go make around the mapping scripts so back to code this one's going to be in ride. HTML so so open that up and then edit this file there are two things that you need to update here for the arc GIS versions rather than 4.3 this should be 4.6 and then there's another one down here at the bottom so rather than 4.3 make sure that's 4.6 I will commit this change as well and now all we need to do is just wait for amplif to work its magic push out those changes that we just committed I will pause and then be back and we'll test out our final application very excited okay everything has been deployed let's go check it out so back to Wild rides I'll refresh the ride. HTML page and Tada there's our map if you don't see a map or if you're getting a prompt for logging in just make sure that you're loged in already in your browser at arcgis.com with that account that you set up that we talked about in the beginning that's one common troubleshooting tip there but here's our map let's zoom in here let's say that we're in Seattle we want to ride from a unicorn so let's just click somewhere on the map and then we'll say request unicorn and here we go unicorn is flying across the map we've got Gil a white unicorn on the way Gil has arrived and giddy up yay it worked let's also check our Dynamo DB table to see if we've got this additional item in here cancel out of this one down here for my items I'll refresh and there's the second item so everything is working end to end just as it should awesome so I hope you were able to follow along and have a working application yourself there's a lot more you could do with this hooking up that ride page to some navigation or something like that there's some fun static things in here as well that you could hook up but hopefully that helped you understand all the different parts and services available in AWS to create an application like this now before you run off one very very important reminder if you've been following along let's go delete everything that we spun up in this video again it should be all in the free tier but just in case or if you're outside of that window you don't want any big bills at the end of the month so let's start by deleting our amplify app back to amplify and I'll expand the left nav here all apps I'll select mine and then up here under actions delete app we'll confirm and delete now let's go to our Cognito user pool so user pools this was wild rides 2 for me and delete we also have to say deactivate deletion protection we'll confirm this and delete now let's go get rid of our Lambda function so back to Lambda I'll come into functions this one for me was request Unicorn 2 actions and delete delete and close in am it won't cost you anything to have this roll here I'm actually going to leave mine because my original app is using it as well but if you want to delete this rule for wild rides Lambda then just say delete here now to our Dynamo DB table I'll come into tables here rides to was mine and we'll delete we will delete all cloudwatch alarms I don't want an OnDemand backup so I'll confirm okay now to API Gateway make sure you're getting all of these come into apis and wild rides 2 for me delete now our code commit repository I'll come into repositories and I we'll delete this one here delete repository and delete and then one final thing you might not even know got created but you'll have a cloudwatch log group as well this was created automatically to log things from Lambda so if we come into log groups and then filter Down By Request unicorn I've got Quest Unicorn 2 and then actions and delete log group and that should be it for all of your resources and with that one final thing to do if you haven't already hit that like button for me and also think about subscribing for more content like this I hope you found it helpful and thank you so much for watching

Channel: Tiny Technical Tutorials

Views: 41,240

Keywords: technical tutorials, technical training, technology, amazon web services, aws project, full aws web app, aws tutorials, aws step-by-step, amplify, cognito, codecommit, lambda, api gateway, dynamodb, iam

Id: zuKu0VFiwas

Length: 50min 16sec (3016 seconds)

Published: Thu Nov 02 2023