Deploy NodeJS Express API as AWS Lambda Function in 15 minutes

connecting your front end to your back end is often one of the hardest concepts to grasp when you're getting started with web development today we're going to develop a nodejs express api on aws that will connect your front end react app to a back-end aws environment in 10 minutes hi i'm dylan a cloud engineer living in bend oregon if you find this video useful drop a like and if you haven't yet consider subscribing you'll probably like my other videos okay so let's just get right on into it what we have here is our architecture diagram this is just showing what amplify is doing under the hood uh the really cool thing about amplify if you're a beginner is it takes all this stuff that would take a lot of manual configuration and abstracts that out so what's going on under the hood is we're going to have this front end project that's going to get shipped up and stored in an s3 bucket and then we're going to connect it to an api gateway which will then connect to a lambda function and so pretty straightforward this is you know about as basic as you're going to get but is a great starting off point if you're just getting into amplify and it is also a common use case and so i'm actually just going to be following right along with the amplify tutorial um this is your getting started tutorial so if you want to follow along are you doing this yourself just hop into these amplify docs i'm going under the react getting started page and we're going to go right from there so what we're going to do is open up so it looks like we want to globally install the amplify cli if you haven't already and we're gonna do these steps i prefer this is just personal to open and do a do a project uh before installing globally i just like to keep everything local instead of installing globally um so i'm gonna call this you know my lamb api and we're just going to take that slide it onto vs code get a new project going here there we go all right my lamb api we're gonna oh that's not what we want okay we'll do half screen and half screen and okay so we're going to install the cli we're just going step by step here we'll get a little zoomed in okay we'll copy that uh paste that in copy that there we go paste that in i prefer not to do globally uh just personal preference you do whatever you like um okay so we're getting in here installing and this is the toolkit cli stands for command line interface okay that took a minute but we are here and next we are going to configure amplify i've done this before so maybe a little bit different for you but let's just go through it and see what's going on looks like it's redirecting to the console um cool okay it's gonna have you sign in do actually you know what let's just do it do it all together okay we'll pause i'll get this in okay so i signed into my account and now i'm gonna go back to the terminal and press enter uh we're gonna specify our region i'm us west 2 but whatever you want um this i'm actually not going to do this just because i've already done all this configuration but basically follow through all the steps do a username um actually you know what we'll just do it together uh youtube user youtube user okay it's gonna take us back to the console first i was like let's not do it but you know this is a tutorial so let's do it together management access you know what no that's not we don't need it for here okay um out of user group administrator so this is what's happening is you're get you're creating an iam role and if you want to learn more about im roles check the card but this is what is going to make it so you can run stuff from vs code and have access to your aws account and so administrator access gives all the all the credentials and so what i do is i give every single thing i add a tag of name capital n and this will be my white youtube user and that just makes it easy for billing and whatever else this wouldn't have anything to do with billing but i like to use that convention of name that way i can know what it is okay and so what you're going to want to do you're going to want to take these two things and keep them handy i'm going to hit enter here access key id so you're going to copy this you're going to paste it in enter it you're going to take the secret access key i'm going to pause it so you don't see it but i'm just going to copy it and then enter it in here okay we are back i'm going to give this the name youtube user the profile successfully set up great so now we can go back to our tutorial now that we have an account we'll make this a little smaller i'm just trying to make it so you guys can see the tutorial and what i'm doing here okay so this is our initial setup now to start our project so what you want to do if you haven't already is create a folder like i just did and let's go back oof there we go there we go come on okay so you're going to want to do create react app let's do it for me i'm just going to press this dot to show that i want it to do to make it in my local directory this would be it's going to make a new react amplified folder so let's look at our file structure as you can see node modules are in there uh package lock oh let's see is there already npm rocking in here interesting uh either try using it okay so let's let's just delete oh it's because we did the amplify install so we're just gonna delete these things and we will install amplify again in a second so copy it we will oh no delete here to trash okay so we will take this much of it npx create react app dot um like i said before i didn't realize that would happen but it doesn't want to create the app because there's already a node modules folder in there so it thinks there's something already started so what we will have to do now is just if you haven't already or if you don't have the amplify cli installed globally you're going to want to reinstall that package and so we'll do that in just a sec okay so that downloaded and we are going to reinstall amplify cli because we had to delete it in order to create the react app so we're gonna do that and we will be right back okay that took a minute but we got it so let's go back up top so we did this we just installed the cli uh you can always verify that by going to the uh the package.json see that you know everything that we want is downloaded next npm start that's really just to test and verify that it's working so we're going to skip that and now we are going to officially initialize our amplify project you know up until now we've just downloaded dependencies but now we're actually going to provision a project in the cloud yeah let's call it my lame api dev environment vs code javascript react source build just hit enter through these unless you know what you're doing uh you're going to want to go down to aws profile that's what we just created and there's our youtube user we're going to use that guy and let's go from there okay that's going to initialize we'll be back in a sec you know actually while that's initializing let's just get going with some of this stuff the thing for me is like it can get kind of annoying to sit here and wait while stuff loads and so sometimes i like to work ahead um oh looks like this already finished so we're good there um okay we'll install these libraries i was going to skip a step but looks like we don't need to okay we'll install these bad boys and then we are going to set up the front end okay configure it so i'm going to copy this we're going to look for our source index right here pretty simple file structure but a little quick tip in the case that you do not you know you have a big file structure if you hit command p it's going to pull up this little file searcher and you can look up index.js and it'll show you where that is i'm going to hit enter and it'll open up that file just a fun little quick tip so we're going to just paste that code in here hit save and this is just taking that same configuration file that we did in the command line and importing it into the project okay so now what we do is we're going to add an api um if i add api uh this is the beautiful thing you are not okay rest let's give it a name let's call this what do we call this my lamb api i believe um we're gonna call this woohoo yeah we're just doing a little fun thing and now we're going to create a lambda function that is connecting directly to this api so what's going to happen we just made an api we made a path so when this api gets hit on the woohoo path it is going to trigger the lambda function that we're creating right now um so we're going to give this we're going to call this my lamb a p i funk um namings conventions right now we're not good okay and so this is where we're gonna make our express api so within our lambda function is gonna be the logic for the express api so we're gonna hit enter there uh we're not gonna figure advanced settings and we do want to configure this now enter oh i may have hit enter too soon okay so now what we have let's uh just show where we are so what we can see is if i go back so this tutorial now gets into some graphql stuff so i'm just going to delete this we won't need it anymore and we will just go together okay so just to show you guys where we're at in the file structure uh source is where all of our front end is going to be amplifies where all our back end's going to be and inside of this function um we're going to go to the source app.js and this is where the fun stuff is going to happen so if we call it get it's going to do this if we call a post it's going to do this and so this is this is our api right here so what we'll do is we're just going to do a very simple demo to get the front end and back end connected and so what we're going to say is git call call exceeded okay and so this is what we're doing uh if you wanted this is where you would add your code you know you can do some for loops you can call a database anything you want you type in here and once you're ready to return it this is a json object that is going to give you back the data so you could even do like body and then you know whatever whatever you want to do there but we are going to keep it simple i'm going to save that and so in theory we should call this and get back this success message this is our api now we need to connect it to the front end so i'm going to close this amplify folder and we're going to go to our front end this app.js is the main component this is where the home page is and so what we're gonna do is okay we already did our um our imports all that fun stuff okay so that means that we can call this api and so what we want to do is we'll do this import amplify api from abws amplify and then we are going to have a function that runs called fetch woohoos and this is something i made beforehand and it is the syntax for connecting the back and the front end and so what we have is this api function from the amplify library i don't think we actually need this what it's going to do is we're going to say we're going to do a git request we need the name of the api and the path okay so i just realized that our api i do not believe has been deployed yet because we were editing the function and never hit enter down here let's finish doing this api there we go now we have this api folder what we have here we can check out the name of our api let's see is this where it is api params pass okay so this is going to tell us about our api if you go to this params.json so we're going to go to our resource name api name and so this is the name of our api this is the function within it let's see and so this is showing you know this is the function that's going to trigger within this api when we call the woohoo path it's going to trigger this function which is the code inside of here and so we in order to call an api from the front end we need the name and the path and so i'm going to take this name i'm going to copy it we're going to go here and put it right there just to prove it this is the path we want to call it's woohoo it's already in there but just type that in and then this right here is if you're gonna pass anything into that lambda function uh for us we are not but you know this could be a let's say you want to pass some fruit in there you could say fruit one you know apple and that would get passed in to the lambda function so what we're going to do is we're going to make this call to the api we're going to get a response and we're going to set my message we haven't declared my message yet that is going to be right up here is my message in order to do that we need to use some react we need to use use state and then we're going to use use effect to call fetch woohoos as soon as this loads so this empty brackets means on first load we are going to call this function and then let's pass the woohoos into our page um and what are we calling this my message all right so in theory uh when we load this up we should have this working but before it'll work we need to push all our changes to the cloud and so uh we do that by saying amplify push and this is literally going to make the api gateway it's going to make that lambda function that when we um even our testing locally it's going to be calling cloud resources that we're going to work on and so i'm going to let this load we're going to give it a second and then we are going to see hopefully if we did this right it's all gonna work if not we're gonna learn something debugging together okay we are deployed now for the moment of truth uh npm start okay and this is how you test the project locally if you've done this before this would be very familiar and this is loading yeah we'll just wait for it usually it takes a second when it's just getting loaded up but we'll just let it hang and chill cool boom great and there we have it call succeeded woohoo and which is exactly what we thought would happen we wanted this message what it did was when the page loaded it called this function which literally in the cloud you know called the api gateway which it called the api gateway at this path which caused it to trigger that lambda function which returned that string we passed in and if you are continuing on learning about this stuff and you say man this is great dylan but it's super simple i just type in a rest to this amplify documentation let me get this a little bigger and you can see getting started using resources this is android ios flutter go to javascript click on that and you can follow some documentation to see what it looks like to make different requests and to go a little bit deeper with the rest fetching updating all that fun stuff if it worked drop a like and if it didn't let me know in the comments and let's try to get it figured out amplify is a really powerful tool and if you want to learn more about it you'll like this video where i use amplify to create a dogecoin prediction app thanks for watching we'll see you in the next video

Channel: Dylan Albertazzi

Views: 54,360

Keywords: aws, API Gateway, apigateway, lambda, lambda function, lambda api gateway, api gateway lambda, lambda function api gateway, api gateway lambda function, lamda, python, aws api gateway, amazon web services, aws lambda, aws api gateway lambda, aws lambda api gateway, aws api gateway lambda python, aws api gateway example, aws lambda api gateway event, aws lambda api gateway response, api gateway REST, api gateway rest api, REST api, serverless, serverless nodejs, aws cloud

Id: ryPgWz6hbXo

Length: 18min 28sec (1108 seconds)

Published: Fri Mar 26 2021