/

Netlify Lambda Functions: A Tutorial for Adding Dynamic Processing to JAMstack Sites

Netlify Lambda Functions: A Tutorial for Adding Dynamic Processing to JAMstack Sites

In my previous tutorial on Netlify, I discussed how to use it to host websites, including this blog. Netlify is a great platform for running sites, especially those built with Hugo, as it enables us to have a 100% JAMstack (JavaScript, APIs, and Markup) implementation.

What makes JAMstack even more exciting is its ability to handle dynamic functionality. And a major player in enabling dynamic capabilities in JAMstack sites is Netlify Lambda Functions.

With Netlify Lambda Functions, you can create URL endpoints that execute pre-determined code, allowing you to add dynamic functionality to your JAMstack sites. Supported languages include Node.js and Go, with this tutorial focusing on Node.js.

Netlify provides a generous free tier, allowing up to 125,000 function invocations and a total of 100 hours of runtime per month. Each function has 128MB of memory and can execute for up to 10 seconds, which is typically sufficient for most needs.

Under the hood, Netlify runs these functions on AWS Lambda, taking care of all the complexities of AWS for you.

So, how do you create a function? Simply upload a JavaScript file to the functions folder in your site’s repository. The file should contain a handler method, as shown below:

1
2
3
exports.handler = (event, context, callback) => {
 //functionality
}

If you’re already familiar with AWS Lambda, this function code will look familiar. But if you’re new to it, don’t worry. Let’s briefly go over the parameters our handler function receives:

  • event: An object containing data about the request
  • context: Contains user information when using Identity for user authentication
  • callback: A function used to create a response

The simplest thing we can do is return a positive response. To do this, we use the callback() method, as shown below:

1
2
3
4
5
6
exports.handler = (event, context, callback) => {
 callback(null, {
 statusCode: 200,
 body: 'No worries, all is working fine!'
 })
}

Save this code in a file named test.js within the functions folder.

To make it work, you need to configure the folder for functions in the netlify.toml file with the following code:

1
2
[build]
functions = "./functions"

To test your function, create an empty folder, add the test.js file to a GitHub repository, and create a new Netlify site from that repository.

Once you’ve done that, navigate to the Settings -> Functions menu in Netlify. You should see a new menu displaying details about your function’s usage.

Access your function by appending /.netlify/functions/test to your site’s URL, like this: https://YOURSITENAME.netlify.com/.netlify/functions/test.

To access the request parameters, use the event object:

  • event.path: The request path
  • event.httpMethod: The request HTTP method
  • event.headers: The request headers
  • event.queryStringParameters: The request query parameters
  • event.body: The request body in JSON format

In addition to the response body, you can also include a headers object in the callback() function, which contains an associative array (object) with header values.

For more examples and samples, check out the Netlify Lambda Functions repository.

tags: [“Netlify”, “JAMstack”, “Lambda functions”, “Node.js”]