Serverless Lambda Functions

[Music] this video is sponsored by dev Mountain if you're interested in learning web development iOS or UX design dev Mountain is a 12-week design and development boot camp intended to get you a full-time position in the industry to learn more visit dev mountain comm or click the link in the description below hey what's going on guys so I've been getting a lot of requests lately to do some tutorials on serverless architecture so in this video we're going to be looking at AWS lambda functions which allow us to run server-side tasks without actually having to manage a server but we're actually going to be using net Liffe I to simplify everything I'm not a huge fan of AWS in general just because I think a lot of their services are wicked overcomplicated and it's a ton of overkill for small to medium sized applications I think they're great for a really large production apps mostly for teams and stuff like that but for smaller applications that are built by individuals I think it's it's very over complicated natla Phi also offers some really useful tools one of which is called natla Phi lambda and we'll be using this to test our functions locally okay so basically as you can see right here powered by AWS lambdas simplified by nella Phi and if you want to go over some of this and check out some of the features and so on you can do that but I want to briefly talk a little bit about what serverless means because I know that it's kind of a buzz word it's something that's that's really popular right now that's really gaining a lot of traction and really interest me so basically it doesn't mean that your application doesn't do anything with a server it just means that you don't manage the server yourself you can run server-side tasks through different services and different functions and this makes it much more manageable I don't know how many of you have actually managed a production server but it can it can be quite a headache so this takes a lot of the pain out of it and still allows you to run server-side tasks whatever that may be so what I want to do in this video is show you how to create an AWS lambda function using net loss I also how to test them locally and how to deploy them now you can do just about anything with these functions what we're going to do is handle a request to the github API to fetch a list of users because one problem with using third-party API is on the client side is usually have some kind of API key or API secret and if it's on the client side people can easily get that and to give you an example I actually have a github application I built with jQuery a couple years ago and if we go ahead and look at the the JavaScript file the client-side JavaScript file the client ID and the client secret are right there and anyone could get that so a server list function is a good way to kind of hide that from the client okay so that's what we're gonna do is we're gonna build a very very simple application to just fetch a list of users from the API but we're gonna create a server list function that that actually does the request to github with our API key or in this case it's actually the client secret because you don't want this showing in your you know in your source code so that's what we're gonna do guys hopefully you enjoy it let's get started alright guys so we're gonna get started here I just have an empty folder opening vs code called net liffe iaw s lambda and we're gonna need to install a package to help us out to serve our functions so that we can test them locally so we're gonna use NPM and just run NPM in it I'm gonna add dash Y and that will just create a package JSON file alright and of course you need nodejs installed to run NPM and the package that we want to install this will say npm i or install is called nella phi dash lambda okay so we want to install that and while that's going i'll just going to show you the documentation the github page for it so basically it's a small CLI tool that helps with building are serving lambdas built with this it's built with a simple web pack babel setup so after this installs we need to create two scripts one to serve our functions and one to build okay because when we run the build it's actually going to create a folder called lambda have our compiled functions in there and that's what we want to deploy to nullify alright so let's go back and now that that's installed as you can see right here we're just going to create a new script here let's call this lambda - serve and we just want to run natla Phi lambda serve and then whatever the name of our functions folder is going to be which in our case is going to be functions and then we also want a build script so instead of serve we want to just do build and we'll call this lambda build okay just like that and we'll save this and we can close it up now the way that we create functions lambda functions is we create a folder and we're gonna call this functions and each function we create we want to have its own file okay and we want to call the file whatever we want to call the function so in this case I'm gonna call this get users dot J s because that's ultimately what what it's going to do it's going to get users from the github API using my credentials so we also need to have a settings file on the root called net liffe i dot t om l and in here all we need to put is the the name of the build folder which is going to be lambda so we want to put right here in brackets build and then right here we just want to do functions equals lambda and save that alright we won't be able to serve without having that file and if you check out the documentation here this is nullified com slash Docs slash functions it's it's kind of just showing you what we're doing here we need to create a functions folder tells you to create a net Liffe ID dot tomo file or T Oh ml and then if we look down here it shows us the structure of function which is going to be a handler so exports handler equals function and it's going to take in three things okay so one is the event which is where we can retrieve post data headers stuff like that context if there's any context like user information and then callback which is actually the function that we run to send a response back to the user okay so let's go ahead and do that we're gonna go into our get users dot JS file and let's do exports dot handler and we're gonna set that to function and this is gonna take in three things event context and callback okay so basically this is like just running something on the server we can do whatever we want here but ultimately we want to call callback because that is that's what is actually going to return to the user and this takes in two things and a possible error we don't want to send an error so we're gonna say no and then in object which is gonna have a status code of 200 meaning everything's okay and then whatever we want to put in the body which in our case for now we're just gonna say hello world okay and we'll save this and if we take a look at the documentation this is exactly what they what they have here okay as an example so to make a request to this function we can actually run that serve command that we created so let's do npm run and I called it lambda - serve and it's going to do two things one it's going to create this lambda folder that's going to have all of our functions in it such as get users except if we look at it it's gonna look like this this is what we actually want to deploy that natla Phi but this is the one that we want to edit the one under functions okay you don't want to touch the one that's in the lambda folder it's also serving on port 9000 so we can actually now make requests to this lambda function now we don't have a front-end application yet so let's go ahead and just open up postman which is used to make HTTP requests and let's make a request to localhost localhost and then we want to do pour 9000 and then that whatever the name of the function so in our case get user and we run that you can see we get a 200 response with hello world in the body and I can make any kind of requests I can make a post requests it'll do the same thing we can limit the type of the method within the function if we want which we will do later but I just want to show you how we can send along data to the function as well so if we were to go to headers and just add a content type so that we can send JSON data let's do application slash Jason and then go to body raw and let's send along let's say a name and I'll say Brad right now if I send will get the same response because we didn't catch that data within the function but if we want we can get that data within this event okay so I'm actually going to use a little D structure in here and pull out the name from event dot body okay and I'm actually going to wrap this in Jason dot parse because I want to parse it as Jason and then down here in our response let's change it from hello world to just hello and then the name so we'll save that let's go back to postman and make a post request with the the body of name Brad and send and we get back hello Brad alright usually you would probably return Jason so what we would do is Jason dot stringify and do something like message and then like that so let's try that and send and we get back Jason message hello Brad alright so this was just an example this whole this whole body thing I just wanted to show you that was possible we don't actually need that so we're gonna get rid of that for now we'll get rid of this call back and we just want the the handler function so let's get ready to deal with github so we need to actually get a client ID and a client secret so we need to register I always forget the URL so I just search for github ooofff register and it's this first link right here so it's actually github.com slash settings slash application slash new and they already have some values available here so I'm just calling it gh test app homepage URL and callback I'm just using localhost 5,000 and I'll say register and now it gives me a client ID and a client secret now the way that the github API works is you can make a request without this stuff but you only get like 50 an hour or 20 an hour or something like that if you want more than that then you have to attach this to the URL as parameters so to give you an example in the browser I'm just going to do HTTP API dot github.com slash users and you'll see it'll give me a list of the first hundred users and that's that's ultimately what I want to fetch of course you could get repositories or single users whatever you want and then if I were to reload this a bunch of times it'll exhaust it if I have no client secret and client ID so what I want to do is add on my question mark and then client underscore ID equals and we'll grab my client ID here and you want to use your own because this won't work when you watch this and then an ampersand client underscore secret equals and then we'll grab that and paste that in and I'm just gonna copy this whole thing okay and then if I run that we'll get the same response only we'll get more than whatever 50 requests per hour all right so now that we have that let's go back to our function here and to make the request to github we're actually going to use Axios so I'm gonna open up a new terminal here and just install Axios and that's the beauty of these functions is we're not going to deploy an express server or anything like that but since we're using the server 'less functions we can you install and use whatever we want so let's import Axios so I'm sorry we want to use the the node.js syntax Axios equals require Axios all right now in here we want to create variables that have a few all the different parts of the URLs so I'm going to put API URL equals a string and I'm gonna paste in that whole thing but I just want the URL so I just want up to users like that now before we deploy we're gonna change this because we want these to be what are called environment variables we don't want to hard-code the the actual value we want to put that on the server in environmental variables but just for now to test locally I'm gonna put the actual value so it's say API underscore client underscore ID and I'll paste that in and we just want the client ID so I'm gonna get rid of this and this okay so that's our ID we want the client secret so paste that in just want the secret itself good and then we want to construct the URL and we'll use backticks here so that we can use a template string with variables so we want to put in the API URL then we want a parameter of clients underscore ID equals and we want the API client ID and then amperes amp client secret is going to be the API client secret okay oops shouldn't go there all right so that's the the constructed URL that we want to make our request to to get the users so next thing I'm going to do is I'm going to create actually two functions one to send the user response and remember we do that with the callback I also want a function to actually perform the API call to github so let's do the response I'm actually gonna use an arrow function here so I'll call this send and it's gonna take in a body parameter oops I'm gonna use an arrow function here and remember we need to run callback to send send data to the user and callback takes in an error we want to put null for that we want to put a status code of 200 and in the body we're gonna put whatever comes in the body parameter right here okay but we want to wrap it in JSON dot stringify because we want to send a JSON string okay so that's basically just like a helper function now down here we want to actually perform the API call so I'm gonna create a function called get or I guess we'll call it get users and we'll use an arrow function here okay now we're gonna use Axios to make our request to github so we're gonna say Axio stock get pass in this constructed URL that we created above it's going to give us a promise back so we want to use dot then if you want to use a sync await you can do that but I'm just gonna say dot then and let's do a dot catch and then in here we'll get a response and all we want to do is run that send function and pass in the response data ok whatever we get back we're gonna send through this send function it'll get sent in as the body and then we run the callback to send it back to the client and catch we're gonna do we're gonna get the error if there is one and then we're gonna do the same thing we're gonna send send or run send and just send along the error like that okay and then the last thing I want to do is I want to make sure method is get so we can do that by using that event object we can say if event dot HTTP method is equal to get then we just want to run get users okay and that's it so it save that now we should be able to test this out test this out in postman so let's open that up and we want to make a get request okay so we don't need anything else we don't need any any data or anything like that and let's just try it let's send and there we go it works so we get an array adjacent string which is an array of users okay so it has all their data yeah I mean it looks like but it's giving us all the data and all I want when we build out a little application vanilla JavaScript it's just going to show a list of user names with the link to their profiles but if you guys want to expand upon it and make it a nice-looking application you can do that so now that we know that that's working let's go back and let's create our front-end so I'm going to close that up and I'm gonna create a let's see how should I do this yeah we'll just just create it right in the root so we'll create an index dot HTML and let's create a folder called Jas this will be our front-end JavaScript and we'll call this main Jas okay and then in the index.html I'm just gonna paste in the mark-up which is pretty simple I'll go over it real quick so I am using bootstrap I just included bootstrap here the CDN and then we just have a container we have a row a sixth column div that's going to be pushed into the middle with M auto we'll get some padding we add a border we have an h1 that says github users and we just have a ul with the ID of users so in here is where we want to insert the users that are fetched through the function okay and then of course we're just linking main J s so I'm gonna save that and I'm actually going to open this with a live server which is an extension for vs code so it's say open with live server and there we go so obviously the users aren't listed yet because we haven't added the client-side JavaScript to to make the request from the function so let's head over to the main dot J s and again I'm just gonna paste this in because this isn't really the focus of the tutorial and it's already getting kind of long so basically I created a function called fetch users that uses a sink await to actually this is not right this is what we want ultimately when we deploy but for now we just want HTTP localhost port 9000 all right so making a request to localhost 9000 get users just like we did in postman and then that's going to return a promise so we're gonna run fetch users with dot then since this returns a promise we get the data that's returned and inside here we're going to create a variable that is equal to the Dom element ID users which is this right here and then we're going to loop through the data and for each user we want to create a list item with a link inside of it that has the user log in as the text and the user's HTML URL property as the href so that we can click on it and go to their profile we're also giving the link a target of underscore blank and then we're just appending the link to the to the list item and then we're appending the list item to the UL the user list okay so let's go ahead and save this and we'll go back and I think we're going to have an access control problem yep so this error right here we're getting because we're locally we're on a different domain then then 9000 so what we can do here to fix it temporarily for for local development is go back to get users j/s and we can add in a header value to the callback here so let's say headers and that's going to be an object and I'm just going to grab this real quick and paste it in so basically whoops what I do here there should be a quote there all right so we're setting this access control allow origin to all and then we're setting some of the headers the allowed headers to of origin X requested with content type and except so this should get rid of that chrome error so I'm going to save it and go back and there we go so the error is gone and we're fetching our users and displaying them and if I click on one of them it'll open up a new tab with that profile now obviously this isn't a great application but it gives you an idea of what you can do in the whole point of the video is to show you how to create lambda functions with nella Phi so the last thing we have to do is to deploy okay but there's a couple things we want to do before deployment so we go back we have all this stuff hard-coded the URL the client ID the secret we actually don't want to do that we want we want this to be in our environment variables so before deployment what I'll do is use some destructuring here we want to get the API URL the client ID client secret and that's going to be pulled from process dot env okay so that's how we can get those and then we can get rid of this so now those will be stored in the process in variables I'm sorry the environment variables and we can actually set those during deployment let's see the next thing we want to do we can save this and then the next thing we want to do is instead of making a request to this localhost 9000 that's not going to exist on net liffe i we want to make a request to the net lefeve functions on this server and we do that by make by saying dot net Liffe i slash functions slash get users okay and that should be all we need to change so I'm going to stop the server down here and now we want to run the build command so we're going to do NPM run lambda dash build which will do one final build to the lambda folder now the way that we deploy to net liffe is through github we we push this to github and then we log into net Liffe i and we just pull it from github so we need to actually add a git ignore file so dot get ignore because we don't want to push oops it should be on the root we don't want to push the functions folder and we don't want to push the node modules so let's add node underscore modules and functions and save okay and then we can close all this out because this should be already and we'll do a get an it and let's do a git add all and get commit and for a comment i'll just say initial commit okay so now that's all in our local repository now let's go to github and i'm gonna add a new repository i'm just going to call this let's call this natla Phi lambda just call it net laughs ilambda okay create that and let's grab this get remote command here paste that in and then we just want to do git push - you origin/master I mean you can push to whatever Bryn any branch you want you can deploy to natla Phi but I'm just gonna deploy the master branch okay and then we'll go back here and reload and there we go and I do have a video on net low Phi and I'll put that in the description where we just push a simple static website pretty much the same process here so let's go to net liffe I now and you need to create an account and log in so I'm already logged in here I'm gonna say new site from git and you can use github get lab bitbucket we're going to use github that's where we push to and I can search for nullify we want this nullify lambda repository that we just created and like I said you can deploy from any branch we only have the master branch so that's what we'll use under show advanced we can actually add our environment variables and you can also add them later on but we might as well add them now so we'll say new variable and they need to match in our script or I'm sorry in our function here where we have API URL client ID client secret we're pulling these from process T and V which is where our environment variables are stored so let's go back and add the URL which is HTTP GET api dot github.com slash users and now for the client ID we're also going to need the client secret so for those I'm gonna have to go back to my page let's see so if we go to this register page and hit cancel it'll show you all of your oauth apps I'm going to click on this I can grab the ID put that here and grab the secret and put that here okay so these are now stored on the server and now we should be all set so we'll say deploy site and it should only take a couple seconds and it'll give us some weird domain which of course you can add your own custom domain after if you want and let's try it out we'll click on it opens up and there we go so if we look at the source code of this and we go to our main J's file all it's showing us is a request to our function of get users unlike the jQuery app the client side app that I showed you in the beginning that completely exposed our client secret and client ID although I think it's ok to for your client ID to show but you definitely don't want your secret and it doesn't matter what API you're using if you have some kind of API key you don't want to show that you don't want people to get that because they could easily just build their own application and take advantage of it so as you can see this is now secure because it's on the server using this function okay so that's just I mean that's one the fit of using functions like this you could do pretty much anything you can get into authentication and all types of stuff so this is a pretty simple example now let's see if we go back to our panel here and we go to functions you'll see that we have one lambda function actively running in production so whatever however many functions you put you're gonna see them here as you can see you the get users and every time it gets invoked its gonna display in the log so if I go back and I reload a couple times here you're gonna see that that gets logged alright so hopefully this gives you guys a little insight into lambda functions and just service architecture in general I do plan on doing more especially with natla Phi I really love this site they don't even know who I am on though they're not sponsoring me or anything but it's just a fantastic service they also have something called natla Phi identity where you can actually do like client-side login and you can use functions for authentication using JWT and they also have form processing so definitely something to check out it's it's one of my favorite web companies or platforms so that's it guys hopefully you enjoyed this little video and I will see you next time

Channel: Traversy Media

Views: 53,042

Rating: 4.9727554 out of 5

Keywords: aws lambda, aws lambda functions, netlify, netlify functions, netlify lambda functions, serverless, serverless functions

Id: drJwMlD9Mjo

Length: 31min 24sec (1884 seconds)

Published: Thu Dec 06 2018