Netlify Serverless Function 1
Learn how to create a serverless function using the Netlify CLI. This tutorial walks you through the process of setting up a serverless function, starting from the initial boilerplate code. You'll learn how to choose the appropriate options and templates, and modify the function to suit your needs. The example demonstrates how to create a "fetch AI" function that returns a default message of "hello world" unless a query string parameter is provided.
You'll also discover how to access the function endpoint and make fetch requests to it from the frontend, replacing direct API calls. This tutorial empowers you to leverage serverless functions to handle backend logic in your web applications effectively.
[00:00] Okay, let's get to work on a serverless function. The Netlify CLI is going to give us some boilerplate. So in the terminal, let's say netlify functions colon create. We'll hit enter, and we're going to get some options. The first one is for an edge function. We don't want that, so we can use the arrow key
[00:18] to come down to serverless function. Press enter, and it's going to ask us a few questions. The language that we want is JavaScript, so hit enter. Now it's telling us to pick a template, and we've got some interesting options here, including this one, auth fetch, which talks about APIs.
[00:36] But because we've already got the OpenAI dependency and we're not really dealing with authentication, I'm going to go with this basic hello world function, and we're going to adapt it from there. So let's hit enter. Now it's asking me for a name. The default is hello world. We definitely don't want that. I'm going to go for fetch AI,
[00:56] which I think is a reasonably descriptive name. And the function is instantly created. And now if we look at the whole of VS Code, we've got a new folder here, netlify. Let's click into it. Here's our function, fetch AI. Let's click on that, and there we are. That is the boilerplate for our serverless function.
[01:17] And at the moment, it's basically returning hello subject. Well, we can see from this line of code right here that unless we put a query string parameter in, the subject will be world. So this should return hello world. And if we open up a browser
[01:33] and we actually navigate to .netlify slash functions slash the name of our function, and I have actually put that right here in this terminal commands MD file, and when we go to that URL, what we get is this message, hello world. So we're seeing the object returned
[01:52] from that serverless function. And so this URL is now my endpoint. This is what I'm going to call from the front end instead of calling the open AI API directly. So next we need to go back to the editor and make some changes to index.js. We want to make it so that instead of calling the open AI API directly,
[02:12] we make a fetch request to this new endpoint. So let's do that next.
Member comments are a way for members to communicate, interact, and ask questions about a lesson.
The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
Code Problems?
Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!