AWS Amplify: Adding a RESTful backend to reactjs

all right now in this project we're going to kick things off by running MPX create react up and we're gonna go ahead and call this our pets API just like so and we're not gonna be using yarn which is going to be the default so I'm going to switch this over to use NPM just to make sure that we are in fact getting a package dot lock die JSON or package - JSON instead of a yarn lock file does it go ahead and do its thing for just a moment and once it's done we'll go ahead and pick things back up okay now once everything is completed we can go ahead and CD into our pets API directory and we want to go ahead and install two modules here the first one is going to be the JavaScript implementation of the amplified library as well as the react specific components that the library provides to us as well so AWS amplify and AWS amplify / UI - react these will go ahead and just take a moment to install and once these get done that we can go ahead and start configuring some of our resources when I first initialize in our project to be used with amplify okay that went ahead and got done I'm going to clear up my terminal here and now we can go ahead and run the command amplify in it in which case that'll walk us through a series of prompts I'm gonna go ahead and keep this as our pets API for the project name I'm gonna say dev that can be whatever you want I am using vs code and I have some react specifics that I'm just gonna go ahead and accept the defaults for now when it comes to our default provider it is using CloudFormation under the hood to scaffold a lot of this out and then I do have an AWS profile that I'm going to work with called default now this is initializing our project in the cloud meaning interests setting up that meta information that we provided to it along with these specific policies and I am roles that are needed to get things done alright once that's done I'm gonna go ahead and clear some space once more and we'll go ahead and configure our first back-end resource which is going to be a comida pool which we can add by running the command amplify ad off now once I do this we can go ahead and say we have several options that we can choose from I'm going to go ahead and select the default configuration where we can allow our use to sign it with a username and that's all we're gonna be doing from here it looks like I accepted all the defaults so let me go ahead and show you what happening here we can go ahead and say we have various options to add users to groups and other capabilities I have provided inside of our application and once that's done I can go ahead and run the command amplify push to push up our back-end resource to the cloud all right now one second is configured we can go ahead and clear our screen and from here let's go ahead and open up our application so that way we can get a sense of what's happening inside of our project I'm going to go ahead and bring this over into full page mode and we'll hop into our source app DJ s now this is just the default that we have provides to us however we're not going to be using this logo as we're going to go ahead and get rid of everything inside of the header elements here now what we are going to do is go ahead and provision our front-end to be able to speak with our back-end and we'll go ahead and kick things off by importing amplifi from AWS amplify in addition we want to go ahead and take note that one of the files that got generated for us is going to be this aw s exports file this is definitely a secret file that you don't want to share or push up to version control and as such I am going to go ahead and be deleting this project afterwards so that these will be null and void back over in our app that J's file I'll go ahead and bring in that secrets file by saying import and I'll just call it my config from AWS exports just like so additionally one other item that I do want to go ahead and bring in is going to be a with Authenticator component that is going to be provided to us through AWS amplify UI react now from here I can go ahead and rely on intellisense to bring this in this will go ahead and give us a nice authentication service that we can go ahead and copy into our our project here this is great now go ahead and say hello here making sure that I make the connection between amplify and our config by calling the method amplified dot configure in doing so we can pass in our config save the project and make sure that we stop go ahead and start things up on localhost 3000 all right now when the application loads you can go ahead and see that that with Authenticator component went ahead and wrapped our entire application to provide to us this nice form that we can use to log in to our account if we have a user already created in our case we're going to go ahead and select on create account and I'll go ahead and fill this out with some reasonable defaults here go alright so I went ahead and got that configured and this is going to go ahead and email me a code that I can go ahead and enter here in which case you can see it is two nine zero four five four second firm I am being brought right back into my application and this is great but my users don't have a way to sign out so let's go ahead and change that and in addition to be without the indicator component we'll go ahead and bring it the amplify sign out component as well and we can render that right after our hello component just like so now if I were to go ahead and flip back over to our application what we have here is going to be the word hello and that we have a nice button that we can go ahead and configure and theme if you wanted to but by default it gives us this nice orange great now inside of here we can go ahead and open up a new terminal instance because what we want to do is go ahead and get our API set up and we'll go ahead and kick things off I'll run it amplify add API now we get presented with two options here we have graph QL and breast I'm gonna go ahead and select rest and this part is actually fairly important where it'll give us a default name that we can choose from however this is going to be the name of the file or folder within our application so I'm going to go ahead and make this a little bit more reasonable in which case I'll call it our pets API now the configure path that we want to go ahead and select is going to be slash pets we don't have a lambda created so we'll go ahead and create one and I'll go ahead and provide another well named resource in which case this will be our pets function same thing for the function name taking note of the various languages that we can use to construct our lambda in I'm selecting the OJS we want to go ahead and have dynamodb configure it in this as well now we don't have a table created so I'll go in and select one and I'll say this is going to be our pets dB this is great for a table name and then for the first column we want to go ahead and say that every item inside of our table is going to have a name this name is going to be set equal to a string noting the various types that we can select along the way and then for the next column we'll say yes and in addition to every pet having a name every pet will also have a type of pet this will also be a string and we are going to add any more columns in here but feel free to do so if you'd like now in our case in this project we're in go ahead and do a scan on our entire table but if you did want to go ahead and setup different partition keys to filter the queries on we can go ahead a select those here as an example I'll select name and then for these sort key also that this is going to be set equal to the type I won't configure any global secondary indexes nor will I have a lambda trigger though that is a nice resource that we have available to us if you want to go ahead and get that configured as well we have no other resources that this is going to talk to and we do want to go ahead and say no to setting up a cron job but we are going to edit Li function now this will go ahead and take us over to the file that has our back-end code and note that it did create quite a bit of code for us here which is awesome because we don't have to write that ourselves however we do want to go ahead and tweak a couple things as soon as how this is our backing code and we want to make it specific to our application because we are having our users log in we're going to set the user ID present to be true and in addition we want to go ahead and tweak the get method for listing a bunch of objects to not use the partition key so instead of query we'll go ahead and switch this over to a scan as actually all we have to do inside of this file so back up in the terminal we can go ahead and select enter it'll ask us if we want to go ahead and restrict API access I'm going to sleep yes and only authenticated users will be able to enter this so using the spacebar I'm going to go ahead and use my arrow keys to tap down spacebar to select the various crud operations in which case I'm selecting all of them no other paths are going to be created in this project and now I can go ahead and run amplify push so go ahead and push these resources up to the cloud in addition to our kind needle interface that we've created just a moment ago are we sure want to continue what we have storage for our database function with lambda and API through API gateway all looks good I'm going to select yes and this will go ahead and take a moment as we are configuring quite a bit of services all at once but I'll go ahead and catch you when this is all done okay now that we have that all completed and push up to the cloud I can go ahead and clear out of here and then we're going to go ahead and flip back over to our front end and here's our front end code and I'm thinking that if we just have a form where a user could enter in a name as well as the type of animal that they're working with and submit that off to a database that we can go ahead and list the contents to see if things are configured correctly now one of the items that I do want to go ahead and bring in in addition to the amplified library is the API library itself this allow us to contact our back-end resource now what I'll do is I'll say when the application first loads go ahead and contact our back-end that way we can see if any items are in there and the way that you do that and react is through this use effect function here use effect takes in a function itself as a single argument and then following that we'll go ahead and pass in an empty array just to say hey only fire this function on the first mount of our code now from here we can go ahead and provide our logic in which case I'll say API I get and this takes as the pop-up suggests the API name that were working with and this is why it's very specific and important that we give our API a reasonable name note that we called ours pets API so I'll go ahead and provide that here and then following that it is asking for the path that we are trying to target in which case we are at pets however since we are connected to a DynamoDB database we do want to go ahead and provide the partition key that we are using in which case we are using name as our partition key great that's actually all we have to do to make the call this is promise base so we can go ahead and inspect the results by saying dot then we'll get our pet response back and I'm simply going to constant that log all of this to the screen to make sure that we are getting a reasonable data set in return so there's our pet response and if I click save and flip back over to our application and open up the dev tools you see that we do get an empty array back this is great so let's go ahead and create a form to see that if we can add an item and then we'll try this one more time now to get this set up the first thing I'm going to do is create three pieces of state here first one is going to be the pet name second won't be the pet type so we're going to get that started here Const pet name and then we'll have a way to update that name so we'll say set pet name this is going to be equal to react you state having an empty string by default now following this up we are going to have a way to assign the type for each pet so I'll say pet tight and then for a third piece of state that's going to be very similar except that we don't need the pet type we'll just call this pet and we might as well make this plural to specify that instead of an empty string this is going to be conformant to an array this is looking great however we don't have the elements yet to utilize any of these so let's go ahead and say after our hello text here we will have a form and this form inside of it is going to have two inputs the first one and a second one first one will go ahead and have a value set equal to the pet name just like so and then any placeholder text of Fido now I can say anytime that a user types into this input we can go ahead and run a function in which case I'll just have a callback function here now this is going to taking the event from the input itself and I can say set pet name pass it and eat a target value to represent the user's inputted text I'm actually going to go ahead and copy this because it's so relevant to the next line and I'll just go ahead and tweak what I need to or I have a pet name this is now going to be set equal to the pet type same thing over here in our callback function set pet name is now set pet tight these are looking great however I don't have a button to submit the form so I'll say the button is just going to be having the text add pet and on the form this will go ahead and get triggered any time a user clicks on the button or hit enter on the form itself by having this on submit function being applied we'll go ahead and call this handle submit because this is going to have a little bit more logic so we want to go ahead and caps like this outside of the function itself let's go ahead and create that right up top cons handle submit this is going to be passed in the event from the form and the first thing we want to do is prevent the default behavior from happening so I'll say e to prevent default that way our page doesn't refresh now in our case we want to go ahead and all that API method except in our instance will say post and we'll go ahead and use a very similar formula where this is going to be the pets API and then following we will go ahead and have the slash pets route being invoked just like so note that we don't have to specify the partition key when we are using the post requests however it from here we do want to go ahead and provide an empty object this is going to be sent as the body or the payload over to our back-end so this is going to be the body that we have inside of here note that if you wanted to you can also specify headers as another property on this main object now for us we will say that the name is going to be set equal to the pet name and then the type is going to be set equal to the pet type this was looking great however we want to go ahead and make sure that we can render these items let's go ahead and test this out and then we can see where we can take things from there so I will go ahead and say that for Fito we'll switch this up and we'll call this mr. good boy and it's going to be a dog and we can go ahead and add this pet now everything went successful then once i refresh the screen i should be able to get one item here it looks like we have mr. good boy the dog as well as the user ID of the currently authenticated user this is great so let's go ahead and flip back over to our application and now we know that we have an array with an object and a couple of properties on here so because this is promised base I can save that then in which case we get the responsive data back now this response data looks like it is if we flip back over to our application not containing any other meta information it is simply our data itself this is also because we don't have to do any additional parsing so I can say we want to go ahead and set pets which is currently an empty array to be whatever is in it as far as the current pets plus all of this response data and we're simply using the spread operator here to spread this out now to make this a little bit more reasonable we can call this our fetched pets now go ahead and use the same name here that was a little bit clearer to other developers on what's happening this is looking great so now we can go ahead and use this to go ahead and render these out to the screen so underneath our form I'll go ahead and have an unordered list and instead of here a pair of curly braces because I am going to be using the built in map function by saying pets that map and for each pet we want to go ahead and return a list item where the content inside of it is going to be the pet's name note that I have a small typo here on referencing pets this is actually going to be pet this is great though I also want to go ahead and assign the state over to our user fact that way instead of logging the data out we can go ahead and assign this to our state as well so instead of here we get our pet response which is actually all of the pets that we were currently retrieved and I'll go ahead and say we're going to set pets having this set equal to any current pets that are available just like how we did before in addition to this new array which is going to be our pet response here so essentially we'll have one array filled with an array of objects which is exactly what we want now with that in place if we flip back over to our application it should have refreshed and you can see that we have mr. good boys showing up here I'll go ahead and refresh again and there we go now if I were to enter in another item here we'll say that the name is going to be Remy and he is a dog well go ahead and add him and you see that our application blows up if we take a look at the after Jas and inspect what is going on with our posts you'll notice that what happens when we post an object is that we're actually not getting back the data rather than a success message with the URL that also contains the data itself so we don't want that and instead of our current app we can actually forego this whole setting to pets by simply updating our state what that means is that we can actually get rid of this fetch pets and it's here we can go ahead and say set pets passing in an array which is going to be equal to whatever pets are currently there in addition to one more pet with the name that is set equal to the pet name and then they type which is set equal to be pet type as well there we go so now you see Remy and there's a good boy here and if I were to add one more item I can go ahead and say charcoal it's going to be a hamster hit enter notice that it took place right away no network calls had to be made and then if I were to refresh then we can go ahead and get all three listed here now we did notice that is out of order so I'm going to go ahead and make one small tweak where instead of having pets first we'll go ahead and list that last just like so that way every time a pet is added it is in the correct order as when we refresh the screen so this has been a lesson on how to use dynamodb api gateway as well as AWS kognito in addition to lamda within a reaction application all within the confines of AWS amplify as you notice it makes it very simple through the CLI interface to get things taken care of I hope you enjoyed this video and I'll catch you all next time

Channel: Focus Otter

Views: 14,457

Rating: 4.961165 out of 5

Keywords: Amplify, aws, reactjs, rest, dynamodb, apigateway, serverless, lambda

Id: A2LXm9TZJck

Length: 21min 33sec (1293 seconds)

Published: Fri May 15 2020