Create your first Netlify Serverless Function!

what's up internet so late last year i discovered serverless functions and i must say they are pretty cool and no no one is paying me to tell you so serverless functions are essentially server side functions that are hosted on a third party service in this case it is netlify because that's what it says in the title and that's what probably brought you here so you're welcome they are great as they essentially mean that we can run them on someone else's server all with the benefit of writing them in our own project with the front-end code lips so hopefully that explains a little bit about serverless functions and why i think they are cool now what do we need to do to make them well there are three super easy steps that we're gonna do step one is installing the netlify command line interface step two is file setup so creating a directory to store your functions and writing a configuration file and step three is learning the syntax each javascript file in our functions directory to be deployed as a synchronous serverless lambda function must export a handler method with a certain syntax we will go into this in the tutorial right so what are we waiting for let's do it if you do like this video please give me a thumbs up and a sub because it really does mean that i can carry on making more content for you guys so thanks very much and let's do it okay so to get started i am just going to create a react app using create react app in my directory of choice i like to store all my projects in the development directory so let's stick it in here now if you haven't used create react app before it's a really cool tool that allows you to literally create the boilerplate for a single page react application uh it offers a modern build setup with no configuration so it's pretty neat and there we go so i'm just going to create a project and i'm going to call it serverless functions and let's do it so this is going to take a while to download so i'm just going to cut this and editing okay there we're done now let's go into our newly made directory now the first thing we need is netlify's command line interface or cli so i'm just going to install that to install netlifeclee make sure you have node.js version 10 or later then run this command from any directory in your terminal now we can either choose to install this globally with this dash g right here so i'm just going to run that now and let it install globally on your machine so we can use it whenever or if you're going to share your project and want other people to be able to use it in the development stage and run your project the way we're going to do it right now you can also install it to your dev dependencies in the actual project so i can do so like this mpm install nullify cle save dev great now with the command code dot i'm just going to open up vs code if you aren't using vs code please open your code editor as you normally would that's just a shortcut into opening vs code and now if we go into our package.json file ta-da there we go there is our netlify cli saved under dev dependencies so that's what we did with the latter command great now let's make our first netlify function in the root of your project so at the same level as the source directory i'm going to make a directory called functions this is where we're going to store all our functions okay you can think of this as a sort of back end if you're used to man stack even though technically is not as we explained at the beginning of this video and i'll explain a little bit later in here i'm going to create my first file called hello world the name of this file is super important and you will find out why in a bit each javascript file to be deployed as a synchronous serverless lambda function must export a handler method with the following general syntax so exports dot handler async function pass through an event and context and then a coach okay so that is essentially the generic syntax and what is happening here is that netlify provides the event and context parameters when the serverless function is invoked when you call a serverless function endpoint the handler receives an event object the context parameter includes information about the context in which the serverless function was called we will not be using them much for this example but just know that they have to be there if you actually want to learn more about them i do actually use them in a recent project i have done and that's the tick tock clone where i go into this in a lot more detail and actually use them in a working example so go check that out after this okay so that is now done although um netlify function still supports callback syntax async is more versatile that's why we've used it because async functions return a promise netlife recommends returning a response with at least an http status code instead of allowing the function to timeout so that's what we're going to do okay okay so we are done here let's move on next we need to make a netlify tomorrow file the identified tomal file is essentially our configuration file on how netlify will build and deploy your site in here we're going to need to write our build settings so i am going to use the command property or in other words this is the command that starts our development server and then the functions property to tell it where we store our serverless functions so i could have renamed it to make it more clever but the functions on the right hand side is essentially the name of our directory and finally the publish property with the party your static content folder okay that's it just one last thing before i forget and that's that we need to write a script so if we type npm run dev i essentially want to start our local dev server this is a netlife command that i'm going to show you later now let's get our project up and running in the terminal if i type netlify we can see all the commands who are disposable i need this one so netlify dev i know we wrote it in our scripts but as we are here now i'm just going to type it out so netlify dev it's the same thing and there we go here is our bog standard create react app and now if i use the same url and type netify and go into the functions directory and then use the file name we gave our netlify function i'm getting the data show up in our browser we have made our first serverless function now to get this data to the front end so i just want to replace this text here so let's go to the project i want to replace this text with hello world for now i am just going to delete this and put text as a placeholder okay so there you see it has updated in our browser great now let the let's get the data in our front end so we can see it i am going to use react hooks for this so hopefully you are familiar with the react hooks i'm just going to call this let's call this fetch data and then i'm going to make this an async function so an async function which i'm going to store the result of my get request as the const result so i'm going to use axios for this axios is a package i'm going to have to import and it helps us make the get request okay now the path i'm going to put is the relative path to the data so once again it's just netlify and then the functions directory and then hello world and i'm just going to console.log the results and the data object actually just results you can see what's what's going on now we need to get the use effect hook and i'm just going to call the function in here and have just an empty array so no dependencies now before i forget let's import axios so back in our terminal let's go back there and install it into our project first and again just wait for that to finish and now let's actually import it into this file so import axios from the package axios and then of course import use effects as well and now create react app cleverly gives us react through a sort of provider so we don't have to import it into every file i'm not sure if we have no we don't let's just leave it as this let's just get use effect from there okay so you might need to import react 2 but i'm not going to because i'm using create react app and there we go now let's inspect the results so i'm basically inspecting what our console log is logging out and there we go we need the data so let's get the data so i do so and my console log i'm just going to go into the object stored as results and get data okay perfect we are just getting this object right here let's go further in and get the actual message this time so back to our project and get the message itself now i'm going to replace the test here with the message also while i'm here to do this i'm going to set the message using the used state hook so once again i hope you guys know how to use the use state hook but essentially we are going to use set message on the right to set the message on the left in this array and use state i am i'm going to set the initial state to null or actually let's just put the string text because that's what we had before and let's not forget to import the use state up here to from react now if i replace this placeholder with the message and set the message to be the results data message okay let's now have a look at that and we did it we have successfully got the data to show up in our front end cool so that is it that is the most simple implementation of netlify serverless functions i hope you can see how super easy they are if you want to practice them uh and get some more complicated examples of me using them so with databases with actual databases making post put uh delete requests then i have the perfect video for you as i said and that is my tick tock app go check it out i hope you enjoy it and please do like and subscribe to my channel so i can keep creating more awesome content for you guys thanks a bunch and i'll see you soon

Channel: Code with Ania Kubów

Views: 15,704

Keywords: serverless function, netlify function, software development, javascript tutorial, netlify, netlify tutorial, node.js, express, backend, software engineering, javascript project, export handler, coding bootcamp, get request, fetch data, axios, netlify cli, netlify cli -g, netlify cli --save-dev, coding tutorial, backend development, mern stack, jamstack

Id: n_KASTN0gUE

Length: 13min 44sec (824 seconds)

Published: Tue Mar 02 2021