1×
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.

Autoplay

    Get started with Netlify Serverless Functions

    Kent C. DoddsKent C. Dodds
    javascriptJavaScript
    nodeNode.js

    Netlify Functions are super empowering, but they can be a little confusing, so in this lesson you'll learn the total basics of serverless functions using Netlify's Functions functionality.

    This is based on my blog post: Super simple start to serverless

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Discuss

    Discuss

    Transcript

    Transcript

    Instructor: 0:00 The first step to using Netlify lambda functions is to create a netlify.tunnel file. Here, we're going to specify that for the build configuration, we want our functions to be located in the functions directory. Since we've told Netlify that's where to find functions, let's go ahead and make a function there.

    0:19 We'll say functions, and then we're going to make a file called hello.js. This file is going to run in Node. What I'm going to do is I'll say, exports -- using the CommonJS module API -- .handler. This is the export that Netlify lambda functions will expect.

    0:35 We're going to make an async function that takes an event argument. The event is going to have a bunch of properties on it. One of those will be a queryStringParameters. This will be the query string when this endpoint is hit, and we want to get the name property off of this. If it doesn't exist, then we'll use the name World, and we'll call that our subject.

    0:58 With that then, we're going to return the response object. It'll have a status code of 200 and a body of "Hello subject." With those two files, our function and our configuration, we're now ready to create a GitHub repo.

    1:16 Let's go ahead and initialize the repository, look at our git status. We'll get out all this. Git commit this within it.

    1:26 Then, I have a special shortcut for creating GitHub repository, so I'll have git create. This is using hub by GitHub to do this. With that now, I can go to this GitHub URL and I can see that my repository is created. I can run git push and we'll refresh here. We've got our GitHub repository here with our functions and our Netlify tunnel there.

    1:51 Next, let's go to app.netlify.com. Once you've logged in, then you'll see this UI. We'll go a new side from git and let's skip that over a little bit. Then we have GitHub. This will authenticate us with GitHub. It will search for all of our repos.

    2:07 I want the super simple serverless repo that I just created. We'll say we want to deploy the master branch. We don't need any build command or publish directory, so we'll just go ahead and deploy this thing. That gets us deploying and it deploys really quickly.

    2:25 If we look at the functions here, we'll see that we have one lambda function actively running in production. It is hello.js. We can see the log from this. If we had any console.log statements, then those would appear in here.

    2:38 We can see our endpoint exists right here, so I'm going to copy that, paste it up here, and we're going to see "Hello World," and because the way that we built this, we can add a query parameter here for name is Bob, and now we're going to see "Hello Bob."

    2:53 In review, all that we needed to do to make this happen is, we created a tunnel file indicating to Netlify where our functions live, and then we created a function inside of that functions directory. That function is just a JavaScript file that has a handler export, which is a function. That function accepts an event and returns the response object.

    3:15 Then, we created a GitHub repo, connected the Netlify app to that GitHub repo to deploy it, and then pulled up our Netlify function by its URL, so that we can get a nice, happy greeting.