AWS Project – Building a React App with Amplify, Cognito, and CI/CD with GitHub | AWS Tutorial

hey everyone coming at you with another AWS project today we're going to create a simple quiz game that uses Amazon Cognito which will let you register for an account and sign in just like that all without very much effort this is just a really simple quiz game it's a react app the questions and answers are hardcoded so nothing too fancy but the important parts are the amplify Incognito services and getting those to work together now before we get to far along the all important question what will this cost me so there are basically two different Services we're going to be using that might have costs associated with them going out to the pricing Pages starting with Cognito Cognito has a free tier available that's beyond the regular 12month free tier that you might be familiar with and this is based on monthly active users or Maus so the free tier is basically 50,000 Maus so I'm guessing that all of you going to fall within that outside of that though you'll see the pricing here per monthly active user so Cognito probably is going to be free for you and then for amplify there's a couple different parts we are going to be building out the back end for amplify there's no charge to use things like the CLI or the libraries you really just pay for the backend services that you're actually using for us again that's just going to be Cognito and we saw that that's essentially going to be free for you and then the hosting part this means hosting the front end of your application we're going to start building the application locally in Visual Studio code and you can run the application run the front end locally and still use Cognito on the back end so if that's all you want to do then the front end is basically free you weren't hosting anything an amplify if you do want to host an amplify though chances are you're inside of the free 12 months if you're in the free tier still and then outside of that you'll be doing pay as you go and you'll see here it depends on your data storage the data transfer out request count and so on but I'm guessing for most of you this whole project will be free or very very inexpensive but that said stick around to the end of the video I'll show you how to delete everything that we do just so you don't get any surprise bills at some point in the future okay so let's go see what we're doing here I'm going to be using a tool called eraser. it's just really handy to do checklists here and then we're also going to be doing some diagramming as well Link in the description if you're interested in using it the basically these are the steps that we're going to go through here let's start with setting up the environment so like I said we're going to be using VSS code you can use a different IDE if you want but you do need node installed if you don't have that installed you can get that at nodejs.org and then we also need to set up the amplify CLI this is going to let us create the project add different components push things out to the cloud and so on and incidentally if you do need the basics of amplify check out this other video that might help but let me just start a simple diagram here so we can keep track of what we're doing I'll do a cloud architecture diagram and this lets you do diagramming as code which is pretty cool I'm actually going to get rid of everything though and we're just going to start with amplify and the icon will come back and add some connections as we build more things out but basically this is what we've got going on here okay so over to visual studio code and here in the terminal we're going to do an npm install for the amplify CLI now if you don't want to type all this stuff from scratch I did create a repo for this video and here's all the different commands that I'm going to be running if you just want to copy paste those and then I've also got the code files uploaded as well when we get to those you can just copy and paste that code okay so let's grab this first one here and go back over to VSS code I'll just paste that in and start the install okay next we need to configure amplify this basically makes the CLI work with your AWS accounts we'll have to set up a new user configure access keys and all of that but the command is just amplify configure and that will launch a page to the ads console asking you to sign in as an administrator account I've done that here I've signed into an account that has admin permissions but not my root account so after you're signed in you just want to press enter here and then just go through a few more questions so your region for me I am in uswest 2 Oregon just use your arrow keys up and down to select your region and then hit enter and then this will launch the amplifi documentation with instructions on what you need to do next this page right here so amplify configure that's the command that we just ran and then it's basically giving you a step- byep of what's Happening we already selected the region so next what we need to do is navigate to the IM am user creation page in the console so let's go do that I'll go to I am recently visited or if it's not in recently visited for you just navigate here come over to users and create a new user I'm going to call the user amplify Dev you can choose another name if you want but then I'll say next I don't want to add it to any groups instead what I want to do is attach policies directly and then there's a policy here called administrator access dampf if you don't see that you can just type in amplify here and that will filter for you so select that policy name say next and then create user and again this is all in the documentation that got launched for you okay back to vs code so once we've created the user we press enter let me just give us a little bit more space here next you need to enter the access key ID and the secret access key for that user that you just created so back to I am I'll click into the user and then you want to come to the security credentials Tab and scrolling down access keys so there's no access Keys here right now you want to create them and specifically these will be for the CLI so select that scroll down understand and accept and say next and create access key okay so you want to grab the access key here I'll just copy that to my clip board go back to visual studio and for me at least on Windows I have to rightclick my mouse to paste that in there we go and hit enter and then let's go grab the secret access key show copy don't worry I'm going to delete this user when we're done I'll paste that in and then would you like to update or create NWS profile on your local machine yes we do I'm going to call mine amplifi Dev local and this will save this information like the region the keys and so on on your local machine so that you don't have to do this every time so we'll hit enter and success excellent okay back to our checklist we've set up the environment so now we can interact with amplify from our local it okay next let's create our react app back to vs code here I'm going to say npx create react app and then whatever name you want to give it I'm calling mine my quiz app Okay cool so this is just a vanilla react app you'll see all the different code and everything that we get up here and then you want to change directories into whatever you named your app so for me it was my quiz app and just go down that level next we need to initialize the amplify project within the react app so here it's going to ask you a series of questions like what do you want to name your amplify app in the cloud what language are you using what's your local IDE and that kind of thing so to do this we just say amplify init it is recommended to run this from the root we're already in there perfect so the name for the project this is the name that's going to show up in the AWS console when we go look at our amplify projects so different from what we just created locally on our file system and I'll just go with the suggestion here my quiz app and then it'll start with a default configuration based on what it's detecting so it sees that we're in vs code it sees that we're using JavaScript and specifically react our source directory path so where the code is is here in the SRC file and so on so if you're good with all of that then we'll say yes let's proceed with this configuration if he said no then you can go customize those things the authentication method so we did save the ews profile that we set up earlier you could enter Keys again but let's go with the profile and I called my amplify Dev local so I'll select that do we want to help amplify improve by sharing non-sensitive project configurations I'm going to say no and we'll continue all right cool now it gives you some possible next steps here you could try adding an API you could do amplify push to deploy everything for now we're just going to go check this off our checklist and then move on so we created the react app check and if we go out to the AWS console now I'll navigate to amplify we we've got my quiz app so this is the one that I just created from the command line it created an environment for us called Dev but this is basically empty we don't have any authentication or databases or apis or anything like that it's just kind of an empty container right now for the application but everything worked as far as that goes so that's great okay so let's actually add something to this app now and that's going to be authentication using Cognito so in our diagram we'll add a new node for Cognito and then we need to connect these two so we'll do a connector in eraser doio we can do a bidirectional one with the less than greater than and Cognito so that's what we're going for back to vs code you can add Cognito add these connections and everything really simply just here on the command line we're going to say amplify add off and then this will ask you some questions about what exactly you want to do we're going to go with a default configuration that will give us Cognito you can do Federation with a social provider like Facebook or Google or something like that you can do manual configuration but we're just going to go with the default and hit enter we want users to sign in using an email so I'll select that nope we don't want to do any advanced settings no I'm done and now let's push everything out to AWS we'll say amplify push yes we want to continue nice so it looks like everything deployed okay Cognito is built around this concept of a user pool which is basically a pool of users that are going to register and log into your application so if we go out to Cognito here in the console we should see a new user pool created for us here we go two minutes ago that's us so if we click into here it looks like everything got set up correctly we don't have any users yet though so let's get the UI set up enough that we can actually create an account and log in as a new user so back to vs code I'm going to open up the app.js file so this is our main file for the react application I'm actually going to replace this with my code that I put out in GitHub you can grab this as well if you want again this is linked in the description for the video but we want app.js and I'm just going to grab all this code right here copy it and replace everything here NBS code now I do have the quiz functionality in here which we haven't implemented yet so let me just comment this out it's line 19 and then down here I'll do these comments line 32 save but before we run it there's one other thing we need to do we need to install the amplifi libraries that give us the login user interface that's going to be this line right here npm install AWS amplify aw amplify ui- re act okay good and now we can actually run the application go create an account and log in I'll just do an npm start and that Launches on local hostport 3000 for me with this fabulous UI that we can use to create an account or sign in so let's create an account you do need to use a valid email for this it's going to send you a code that you have to use to activate the email so I'll enter my email password and create the account so it has emailed me a code I'll go grab that confirmation code enter that here and confirm so this is a legit user account and that logged Us in at the moment all of our quiz functionality is commented out so all we have is a sign out button but we could sign out and then sign back in using the email and password we just used to create the account excellent now if we go back and look at our user pool and refresh the users you'll see that we have one user cool so let's go check this off the list we have added authentication with Cognito we got both of those working even though we're just running the UI locally on Local Host now we kind of skipped over the code that's making all of that happen so let me quickly walk you through that I've also added lots of comments that will hopefully help but we're starting with importing the amplify library from the AWS amplify package this is how we're going to interact with different AWS services and then really the line that makes the authentication magic work is this one here importing authenticator and with authenticator this is coming from the UI react library that we installed down on the terminal a little bit ago so this is how you get that nice signin screen and the signup screen in that functionality so this line is key we also want to make sure that things look good so we're importing the styles.css and then I've got two lines for AWS exports this holds configuration for various things you can see that file right here so things like my Cognito region my user pool ID and so on so really without very much code you're able to get a smooth authentication experience using Cognito okay back to our checklist so let's go add some functionality and styling for the quiz now this part is not so important I just put a quiz in so there was something fun to do in the application really the amplifying Cognito part is the main takeaway from the video but I do have some code out here in our repo that you can grab for quiz I'll just copy all that and then back in VSS code you want to add a new file under the SRC folder so new file call it quiz. JS and then just paste all of that code in save and then you want a second file in the same location SRC this one is called quiz data.js and let me grab that code out of GitHub and these are the questions and answers so like I said in the beginning they're just hardcoded nothing fancy in the real world you'd probably want a database or you want to get these from an API or something like that but we're just keeping things simple and then back in app.js we had commented out these two lines so line 19 put that back in we're importing the quiz component and then down here actually placing it on our page save that file and when you save it your page should refresh and now we have questions so the first video game ever made space War you can see the answers in the JS file if you want to know which ones are correct okay back to our checklist then we have added that functionality and styling for the quiz now if this is all you want to do is just run your front end locally on Local Host and use Cognito on the back end then you're good to go in the real world though it's more likely that you're going to have your code in GitHub or another source control repository you're going to hook that up to amp and host the front end there so I'm going to walk you through that over here in our diagram let me add nodes for GitHub and VSS code and then we need some connectors as well so let me rearrange things here though resize a little bit so we have our code in vs code currently what we want to do is push that out to a new GitHub repo and then we want to set up amplify to pull from that repo and amplify will host the front end also whenever we make a change to the code in GitHub we want to trigger a new build and deploy and amplify so basically a continuous integration continuous deployment cicd pipeline that you're setting up here all right let's work on this bit right here getting the code out to a GitHub repository so this step over here push local code to GitHub let me go back to GitHub here so this is the repo that I created just for you to grab code but I'm going to create another repository to hook up to amplify so let me open up a new tab looks like I'm not signed in so let me sign in and then it create a new repository you can name your repo whatever you want I'm going to go with amplify Cognito Quiz 2 I had one without a two on it so I'm just going to add that I'll make this private again this is just for me to push my code out and then hook up to amplify you can add a read me if you want I'm going to skip it and then create the repository so we've got the remote repository created out in GitHub now we need to hook things up with what we've got going on in Visual Studio code now for the most part you can actually use this code right here except instead of just adding a read me you're going to do add period to add all of the files that you've been working on but but you will need this URL right here so I'm going to grab that and then switch over to visual studio code and then do a get a knit so initializing the repo for the project get add period so adding everything that we have changed or added to this folder get commit dasm and then whatever comment you want just say initial commit get Branch DM main we're going to call that our Branch name and then get remote add origin and here's where you want to put in your repository URL that you just created so I'll paste mine in and then finally you want to push everything out so get push dasu origin and Main okay let's go make sure everything made it out there so back in the repo here there's all of the code that I just checked in perfect so we've checked in our code from VSS code out to GitHub so we can check that part off now we need to hook up amplify to basically go grab that code out of GitHub and set up some cicd so to do that let's come back to the AWS console come into amplify so here's my application we've got the backend environment we've seen that's working we've got Cognito we can log in register for a new account and so on the front end is under hosting environments and here it's basically going to say where are all of your files so let's walk through this they're in GitHub because we just put them there let's say connect branch and then select the Repository now mine is not showing up here mine should be called amplify Cognito Quiz 2 you can refresh but I think the problem is probably permissions and there's actually a handy little way to get there from here so if you don't see your repo ensure the amplifi GitHub app has permissions to the repository and I think it doesn't so let me say view those permissions this will take me out to GitHub to my settings and then down here you want to select the repository if you've said all repositories this gives amplify permissions on all of your repositories I've said only select repositories and I need to add that new one which was this one right here amplify Cognito Quiz 2 save and then I should be able to back up to amplify I'll have to start that over by going to GitHub and this time it should find my repository here we go so this is the new one my branch is called main perfect I'll say next for app name I'll leave this as it is and then the back end should be called something else let me just double check that let me open up a new tab I've done a few of these as I've been prepping so I want to make sure I've got the right back end so my quiz app is where the back end was so my quiz app you probably just have one so you don't need to worry about this but my quiz app and then there should be an environment called Dev perfect we want to enable full stack cicd so anytime we make a change in the GitHub repo that will trigger a new build and deployment here in amplify and then we'll need a service Ro that gives amplify hosting access to our resources now I heard got several created here but you probably don't so let me just walk you through how to create a new role click on this right here and then you just basically walk through and take all the defaults so for NWS service it's filled in amplify for you as the service for backend deployment say next very importantly it's added this policy administrator access amplify if you're creating a new rule from scratch for some reason you want to make sure this policy is added otherwise nothing is going to work it will fail at the build stage but if you're walking through this wizard everything should be good for you we'll say next I already have a roll called this so I'll just add a two to the end of that you probably don't so you can just accept the defaults and create roll okay excellent so this is the RO that we want to select back here and amplify you'll probably have to do a refresh and here we go there's the new roll scrolling down next and save and deploy okay so you can watch the progress here as it's going along it's provisioned now it's building things so it's gone out grabbed our code out of GitHub doing the build and then it's going to deploy it and very shortly we should be able to launch this URL right here and see our quiz running in the cloud and success so the build worked the deploy worked and now if we click on this link that should take us to our amplify app we've got a real URL out here we're no longer on Local Host obviously we should be able to sign in using that email address that we created earlier so this is still using the same user pool and has that account that I created so I'll log in and we've got our questions nice now to show you that cicd is is working if you were to come back to the code that's in GitHub now so let me come into our SRC folder here and let's say I want to update the quiz data file so maybe remove one of our questions let's say so I'll just edit this in place and we'll get rid of this first question and commit that change commit to the main branch and as soon as that happens amplify I should here we go detect that we made a change it's doing the provision doing the build and it'll do a deployment all right so I'll let that run I do want to show you how to delete everything before we're done but let's just make sure that we've hit everything on our list here so we've got this hosted we've got cicd and like magic everything is working very nice so back to amplify I'll let this finish it's usually not a good idea to try deleting your app while it's in the middle of doing something like this so give me a minute I'll be right back all right everything built and deployed excellent so you can leave this running we covered the costs in the beginning but assuming that you want to delete just come up here to actions and delete app he'll confirm and delete and when you delete the backend stuff it should delete Cognito for you as well or anything else you had if you're building another type of application say that you had a database or apis or something that were part of that all of that should be blown away when you delete the ad amplify app and then if we look at the Cognito user pools here's the one that we were working with before if we refresh this list this one should be gone there we go so we got rid of that as part of deleting the amplify app we did create an I am user amplify Dev there's no charge associated with I am users I'm going to keep mine but if you don't plan to use yours in the future you can go ahead and delete it all right and with that we've made it through our list I hope you were able to get yours working as well if you found it helpful give me a big thumbs up and also think about subscribing for more content like this thank you so much for watching

Channel: Tiny Technical Tutorials

Views: 14,159

Keywords: technical tutorials, technical training, technology, aws amplify, github, cicd tutorial, react, web front end, continuous integration continuous deployment, amazon cognito, development, programming, code, software development, javascript, reactjs, cloud computing

Id: ma1FA2be8Ac

Length: 29min 19sec (1759 seconds)

Published: Thu Mar 28 2024