Set up a Local Development Environment for Serverless Functions Using Netlify

Instructor: [0:00] To keep our serverless function setup is painless as possible, we're going to be using Netlify functions, which let us build and test these locally as well as deploying them very quickly. To get started, we're going to create a function's folder. Inside of that, we're going to create a lodashworld.js.

[0:20] A serverless function is going to require us to export a function called handler from the file. Using node syntax CommonJS, we're going to export.handler. The value of this needs to be a function. We're going to make it async. That means that we don't have to return a callback. We can just return an object.

[0:42] We're going to return an object. In our object, we need to return two things, a status code and a body. The body can be anything we want, but it'll usually be a stringified value. Either a string, a stringified JSON, or something like that. In this case, we're just going to say, "Hello World." Our status code is any valid HTTP status code. In this case, we're going to send 200 for OK.

[1:09] All we're going to do here is when you call this, it's going to return this text. To test these functions locally, we need Netlify Dev, which runs on the Netlify CLI. We're going to install globally Netlify CLI.

[1:25] Now that that's installed, we can test that it's working by running netlify -v to print the version. We can see that we're currently running 2.69.. Nice. We also can use the shorter version, ntl -v, that I prefer. That is just an alias for the same thing. They both work exactly the same. It's just whichever you prefer.

[1:48] Now that we've got this, we need to be able to tell Netlify Dev how to run. Netlify Dev looks for a netlify.toml file. We're going to create that, netflify.T-O-M-L. Inside of this, we're going to add a build config.

[2:03] The first thing that it's going to look for is what our public directory is. What are we going to publish? In this case, it's public. We want this index.html to be what gets published. We can type that in, public. Next, we want to tell it where our functions are. Our functions are going to be in the folder, functions.

[2:21] The last thing that I want to do is I want to add a dev block, because by default Netlify Dev will automatically launch a window whenever we start it. I don't particularly care for that, so I'm going to turn that off by saying autoLaunch = false. Now that we've set this up, we can come out here and we can run ntl dev.

[2:43] We will see that it has started our static server, serving from public, and it started a function server. Both of those are now available at localhost port 8888.

[2:59] If I take this port and I come out here and load the page, we can see our app is running here. If I want to test my functions, I can go to .netlify. The reason that everything is under .netflify is because that's a very unlikely URL to show up, so Netlify uses that as a proxy for any services like functions, or other products like identity.

[3:23] Inside the functions directory, then I'm going to hit Hello_World, which is just the name of our function without the .js. When I hit that, I can see "Hello World." If I come back into my code editor, I can change this to say, "Hello Egghead."

[3:41] Save that. Let's refresh the page. Now I can see "Hello Egghead." Now we have local development with live reloading to quickly test our serverless functions.