Jamstack Explorers

Up and Running with Serverless Functions with Ben Hong

Create Your First Serverless Function

Repo: https://github.com/netlify/explorers-up-and-running-with-serverless-functions/

📝 Transcript

Let's start by taking a look at the basic anatomy of a serverless function. A serverless function comprises of a few parts. Every serverless function must contain an export of a function called handler. If you're new to node JS, this is the syntax for defining an export where you have exports followed by the name of the variable in this case handler.

And so we defined this using dot notation. As you can see here, exports dot handler, and we'll assign the handler, not just any function, but an asynchronous function because serverless functions are expected to run a synchronously. Finally, the handler function is expected to return an object inside of the response object.

It's typically expected to have at least two properties. The first is a status code. You might also recognize some other status codes, such as four oh four and 500. But in this case, we want the server to report back that everything is okay. Hence why we're using 200. The return object also normally has a body which typically contains a Jason object.

However, we can't just pass an object through the body. So we need to convert it to a string using the method. Jason does string of five with that said, let's jump into our project. We'll go ahead and open our index to HTML in our public directory. As you can see here, what we have here is an H one with the title of the page, we have a button with an idea, fetch button and a paragraph element for the response placeholder below.

We have a small block of JavaScript where we add an event listener to run the following code. When the Dom has already been loaded. Once it's been loaded, we'll go ahead and get the elements for fetch button and response texts and assign them to the respective Constance. And then we'll add an event listener to our fetch button to listen for a click.

And when it does, we'll go ahead and change the response texts to static text replacement. If we look at the preview, you'll see here. Then when we click the text replaces just as we expect next, let's take a look at the Netlify dot Tomal. You'll see here that the commands that we configured earlier, such as no build command and that our functions will live in Netlify functions and that we'll be publishing.

The public directory is all configured right here. So, if you need to make any changes in the future, you can come into this file. We'll need to create our default functions folder, which we see here as Netlify SLAs functions. So go ahead and create those two folders. And for a first serverless function, let's create hello dash, world dot JS.

Since we learned earlier, we'll need to make sure this file has an exports with a key of handler that is assigned an async function. Then we'll go ahead and return an object where the status code will be 200. And the body will be an object that will go ahead and string a fire using Jason does string of fi and they'll have a message of hello world that we've written our serverless function.

Let's go ahead and configure that inside of index that HTML, the main change we need to make is inside of our fetch button event. Listener we'll need to make our function async since we'll be calling the serverless function. Inside of this function, we'll use the native fetch API in order to get the response from the serverless function, by signing into a constant called response and awaiting it using the await keyword.

One of the interesting things you may notice is that when we call a serverless function, we need to call it at the directory. Dot Netlify. And the reason for that is we don't want to have any name clashes with any other APIs. So that's why when we call us over this function, we call it at slash dot Netlify and then following to the directory that we defined earlier with its functions and then flash, hello dash world.

Once we get the response, we'll want to make sure that we can actually utilize it inside of our JavaScript code. So we want to parse it using the dot Jason function. Next we'll go ahead and swap out the inner texts for our response to show what appears. I'll start up our local dev server by running NTL dev.

And you'll see, we have our page up and running. We'll go ahead and open up the dev tools and open the network tab. And you'll see that when I click on the fetch button, we actually see our hello world call right here and we click on it. We'll see inside. We see the object and its message of hello world.

Great. Everything's working. The only thing though, is that we noticed that it's printing currently this weird object object here inside of the HTML. So let's fix that real quick. In order to ensure that it renders correctly on the HTML page. We really just want it to appear as a string. So in this case, we're going to go ahead.

And JSON.stringify, the response back on our site. You'll see now that when we click on fetch, we see the response just as we expect. Congratulations, you just wrote your first serverless function.


your progress