AWS Amplify in Plain English | Getting Started Tutorial for Beginners

hi friends and welcome in this video I'm going to explain AWS amplify in plain English and in only a few minutes we're not going to build out a full weight working application but I will show you how to get started with all of the main components before we dive into a demo though let's spend just a second talking about why amplify even exists in the first place and why you might want to use it a traditional full stack application might look something like this you've got your front end you've got the back end probably some kind of authentication so users can log in and most modern apps you also have a database you probably have storage for files or images that type of thing and then there's various other services that you might use as well maybe third-party providers a notification system AI Services a whole bunch of different things that could end up here but the point is there's a lot of moving parts and when you think about building all of that stuff out in AWS especially if you aren't super familiar with the AWS ecosystem it can be a little bit overwhelming in AWS land it might look like this you likely have to set up at least a half dozen different services and configure them and in addition you also need to understand the overall infrastructure of AWS like how does networking work what about identity and access management that type of stuff so it's just a lot the idea with amplify is that we can just say okay I don't really know or care about all that stuff I just want to build an app my app's going to need a front end some type of authentication an API storage and a function that does something then go set everything up for me so you just get to kind of pick and choose what you need for the application answer some questions about the details and then amplify it goes and does its magic on everything else so it's really meant to simplify full stack development especially for doing quick prototypes and that kind of thing so with that background let's go step through the main pieces in the console first thing I want to take a look at is the amplify app this is basically just a container for your code and configuration and the different Services as you build things out you can do this through the browser or through the amplify command line interface or CLI I will briefly show you both from the AWS console just navigate to amplify and it's super easy to create a new app just say new app and then build an app you can also just host a web app we'll talk about that later but let's start by building an app for this one we'll call it my app from browser to distinguish it from the one that we'll create on the CLI in just a minute this will take a minute to spin everything up it's doing a whole bunch of stuff for you in the background I'll pause the video for just a second and be back when it's done okay so here's our app which again is just kind of like a container to hold everything else and it's easy peasy to create through the browser but it is more common that you'll be working with amplify through the CLI so I want to show you what that's like if you look at any tutorials or documentation chances are that the steps will be through CLI commands I'm going to be using Cloud9 which is aws's integrated development environment or IDE in the browser but this will also work with your local IDE of choice like Visual Studio code or IntelliJ or any of the other popular IDE options but for Cloud9 let me just quickly spin something up here I won't make you wait through all the details of this since this is not the point of the demo but I'll spin up the environment and be right back okay my IDE is launched and ready to go I've got a console window open down here on the bottom and regardless of your IDE you will need to install the amplify CLI which you can do with npm install Dash G at aws-implify CLI and this will let me do other things from the command line here related to amplify might take just a minute after the amplify CLI is installed then we want to initialize a new amplify project you can do that with amplify init and then it'll prompt you for some additional details for this one I'm going to say my app from CLI give me some default settings here let me expand that and just to keep things simple I'm going to go with yes for all of these we'll say this looks good I just really want to show you how to get started and then we also need to select our authentication method if you've already set up an AWS profile you can use that I'm just going to use access Keys these are the access keys for an IAM user go to IAM grab your access key and secret access key for that user I've got those on my clipboard so I'll just paste those in then we need to select the region that we're using I'm in US West 2 and incidentally I'm just using the up and down arrow to move between these options so with us West 2 selected I'll hit the enter key and now it's setting up our back-end environment and then behind the scenes it's using AWS cloud formation if you're not familiar that's the infrastructure as code solution we'll take a closer look at that a little bit later but you'll see that it's creating an S3 bucket for me and then a couple of rolls to give us the appropriate access that we need so that completed some additional questions here do we want to share non-sensitive configuration on failures I'm just going to say no for this we'll keep it easy and then it's giving us a tip on what we could try next but just as a sanity check what a lot of people like to do is use the CLI here to take action and then you can go back to the browser here the amplify console and if we take a look at all apps we should now have the app from the CLI right here and it looks like everything worked perfectly Okay so we've got the container or the app created next let's talk about the front end remember this is a full stack solution so you've got front end and back end front end could be something like a single page app like react app or a static front end something like HTML files and images that type of thing so back here in the browser to get to the front end functionality you want to click on hosting environments and from here you can deploy the front end so if you've already got something built out you just hook it up to where that code lives so GitHub or gitlab and so forth or you can even just upload something right here by dragging and dropping and deploying without a git provider I'll just do this quickly to show you how easy it is so we could just drag and drop a file here we could pull something from an S3 bucket or any other URL I happen to have an index.html page here a super simple page and then a picture of a cat if you do choose to drag and drop something in to amplify it needs to be in a zip file but there is a gotcha with this what you want to do is select your files and then zip up the files don't zip up the containing folder so I'll just right click on these and then send to folder make sure that it's called index.zip sometimes it will get called cat or some other name of your file and then we can just drag the index.zip over here we'll save and deploy this is nothing spectacular I just want to show you how you can get a front end working through amplify here's our domain so this is a hosting solution you'll see it's being hosted on amplifyapp.com and if I were to click on this you'll see my fancy HTML page and the picture of a cat because all YouTube videos should have cats so if this is all I wanted was a static website then that's basically all you need to do just deal with the front end part and that's actually a perfectly valid use case for amplify just use it for this instead of something like a static website in an S3 bucket in fact I have another video where we do just use amplify to deploy a static page link above and below if you're interested in that but assuming that you do want to have a back end for your application as well you can obviously do that with amplify so moving on to the back end here we're saying that we want authentication an API storage and a function that does something there's other components as well like a database and so on that you can add again we're not building this out as a full functioning application but I just want to show you how to kind of plug and play these back-end components now adding these back-end components again is typically done through the CLI and it'll give you kind of a prompt or a wizard asking you for the details that it needs but if you don't even know where to start you can actually get some help from the browser to begin with so back here in the browser in our app from CLI click on backend environments and then if you click on the name of the environment here Dev is the one that we chose when we set this up you'll see down here the different components that you can add so you can say oh I want authentication or I want an API or storage and so on for us let's say that we want an API and very handily it will give you the command down here for the CLI so you can then take this run into the CLI to set up that API and you're off and running so let's just get started on this one for a simple API I'll copy this code and then we'll go back to my IDE here or back to vs code or wherever you're running this and I'll paste that in so we're saying take that app that we created earlier and add an API to it and then it's going to ask us questions that it needs to know in order to do that so do we want to use graphql or rest let's go with rest just to keep things simple a friendly name for the resource I'll call it my first API enter a path for the API with an example for something like a bookstore I'll just leave it with Slash items since they're not actually building this out fully but you could put something else in there and then the API Gateway is going to be used in conjunction with a Lambda function link above and below if you want to know more about Lambda but let's give that a name my first Lambda function the run time for the function will go with node.js but there's other options as well we'll just stick with the hello world template again I'm just going through these really quickly just to show you how easy it is to add something like an API to your application there's additional advanced settings that you can configure if you need to but we're going to go with no we don't want to edit the Lambda function now we can always do that later we don't want to restrict access we don't want to add another path and voila so everything has been set up locally and you'll see that message there added locally that means that it hasn't actually been pushed out to the cloud out to amplify yet it's just here in my IDE so if I take a look at amplify here and expand my code files looking at back end we've got API so here's my first API if we go to function here's my first Lambda function and the source code for that will be in index.js so just a boilerplate hello world template for Lambda so everything is just local but you get a nice message down here of what you could do next so if we say amplify push that'll take all of the local changes here and push them out to the cloud so let's do that it'll give you a nice summary of what it's going to do we've got one Function One API and so on so just to confirm let's say yes let's do this and then it's going to go off and do its thing now you can check the progress of this if we come back to the amplify console here and take a look at the overview tab here's what's going on here so we've got an update in progress amplify backend deployment initiated I mentioned the behind the scenes this is just running a cloud formation template you can even open up cloud formation and go take a look at what's happening there so we'll open up a new tab and you'll see I've got a great in progress and an update in progress here so the magic of amplify really isn't Magic at all it's just using cloud formation behind the scenes but it's kind of abstracting all of that away from you as a developer so you don't have to know how to create a cloud formation template or how to create an S3 bucket and those types of things as this progresses you should also be able to go into the different services like Lambda for example and we should have a function created out there that was just our hello world function and I'll sort by last modified here we go my first Lambda function Dev we should also have an API Gateway resource setup for us here we go my first API and we had told it slash items to use for our path and the API this is just kind of a dummy API at the moment since we didn't really build it out but all the resources that it asked us about in the CLI all of these things are being created behind the scenes for us if we go back to the amplify console now we can refresh the overview here looks like everything completed and you'll see that we have a function that's our Lambda function as well as the API they're now part of the back end of this application if you wanted to continue building this out you could say okay I think I need to add some authentication this will add Amazon incognito you can add storage and a bunch of other things so again just allowing you to kind of pick and choose the different parts of your application without having to know all the specifics of how they work and how to set them up and configure them and so on all right one last thing to show you before we wrap up and that is amplify Studio this will give you a really nice visual interface to build out your full stack apps you do need to go enable it so I can do that from right here we will enable amplify Studio while we're waiting for that if you found this helpful go ahead and hit that like button for me and also consider subscribing for additional content like this okay that's been enabled and now if we go back to the application here back-end environments we can launch studio now this will open up in a new tab and this gives you a lot of additional options for setup so over here on the left you could add authentication like we saw before there's additional things here though as well and also a UI library to help you with your user interface so just a lot more here I find this a little bit overwhelming sometimes though for beginners which is why I saved it to the end but there's a lot more that you can do with amplifying now before you leave me very important let's go delete the resources that we spun up in case you were following along I don't want you to have any surprise bills so come back to the amplify console here go to all apps and then make sure you delete anything that you created along with me you can just click into it come up to actions and then delete app this should use cloud formation to get rid of any resources that it created but we will want to just double check that I will delete this one as well my app from the CLI delete app we'll let those run if you were using Cloud9 like I was for an IDE make sure you shut that down as well so I'll just delete let that run we can look at cloud formation here to make sure that things are getting deleted I'll just refresh that so we see delete in progress for those that's looking good so it's deleting things like the API Gateway endpoint some S3 buckets that got created Lambda functions and so on let's just go do a quick sanity check if we look at API Gateway here come up to apis these are two of my other projects that were already here but the new one that we created has been deleted so that's perfect let's just double check Lambda make sure that everything got deleted there sort by last modified it looks like all of the recent things are deleted again these are some old ones that I had here so that's fine we'll come back to the amplify console just make sure that everything's good and all of the new apps that we created are gone so there you have it that was kind of a whirlwind tour of amplify why it exists why you might want to use it and how to get started creating the front end and back end for your full stack application thank you so much for watching I hope you found this helpful and check out some of my other AWS videos on the channel

Channel: Tiny Technical Tutorials

Views: 28,609

Keywords: technical tutorials, technical training, technology, amazon web services, aws amplify, aws tutorial, amplify tutorial, aws full-stack development

Id: HdCmo0a3ngM

Length: 16min 54sec (1014 seconds)

Published: Thu Aug 03 2023