Lambda compatibility for Functions
Prepare project
Section titled “Prepare project”Before creating a TypeScript function, prepare your project by doing the following:
- Add the
@netlify/functionsmodule to your project to import typings for TypeScript.
npm install @netlify/functions- Set up
tsconfig.json. We recommend that you enable the propertiesesModuleInteropandverbatimModuleSyntaxin your TypeScript configuration file for better compatibility. During the build process, Netlify automatically loads anytsconfig.jsonconfiguration files found in your functions directory, the repository root directory, or the base directory, if set.
Create function file
Section titled “Create function file”To add a serverless function to your project, create a TypeScript file in your functions directory following the instructions below for naming and coding your function. Netlify will access the functions directory during every build, preparing and deploying each supported code file as a function.
Directory
Section titled “Directory”The default functions directory is YOUR_BASE_DIRECTORY/netlify/functions. You can optionally configure a custom functions directory.
Name your function
Section titled “Name your function”You can store your function file directly under the functions directory or in a subdirectory dedicated to the function. The function’s endpoint name is case-sensitive and determined by its filename or the name of its dedicated parent directory.
For example, to create a function with an endpoint name of hello, save the function file in one of the following ways:
netlify/functions/hello.tsnetlify/functions/hello/hello.tsnetlify/functions/hello/index.ts
These formats would deploy a synchronous function that can be called on the following endpoint: /.netlify/functions/hello. The endpoint is relative to the base URL of your site. Here are some example full endpoint URLs: mysitename.netlify.app/.netlify/functions/hello for a site using the default Netlify subdomain or www.yourcustomdomain.com/.netlify/functions/hello for a site using a custom domain.
To create a background function, append the function name with -background. For example, to create a background function with an endpoint name of hello-background, save the function file in one of these ways:
netlify/functions/hello-background.tsnetlify/functions/hello-background/hello-background.tsnetlify/functions/hello-background/index.ts
These formats would deploy a background function that can be called on the following endpoint: /.netlify/functions/hello-background. The endpoint is relative to the base URL of your site. Here are some example full endpoint URLs: mysitename.netlify.app/.netlify/functions/hello-background for a site using the default Netlify subdomain or www.yourcustomdomain.com/.netlify/functions/hello-background for a site using a custom domain.
Code your function
Section titled “Code your function”This section will help you learn how to write functions. It covers the syntax for synchronous functions, both buffered and streaming, as well as background functions.
Synchronous function format
Section titled “Synchronous function format”To create a synchronous function, use the following general syntax in your TypeScript function file to export a handler method:
import type { Handler, HandlerEvent, HandlerContext } from "@netlify/functions";
const handler: Handler = async (event: HandlerEvent, context: HandlerContext) => { // your server-side functionality};
export { handler };Import types before declaring the function.
- If you import the
Handlertype as demonstrated in the previous code sample, theeventandcontextarguments and the response are typed accordingly. - Alternatively, you can import the types
HandlerEvent,HandlerContext, andHandlerResponseseparately and use them to construct ahandlerfunction.
Netlify provides the event and context parameters when the function is invoked.
-
The
eventobject received by thehandleris similar to the following:{"path": "Path parameter (original URL encoding)","httpMethod": "Incoming request’s method name","headers": {Incoming request headers},"queryStringParameters": {Query string parameters},"body": "A JSON string of the request payload","isBase64Encoded": "A boolean flag to indicate if the applicable request payload is Base64-encoded"}If you need to parse a
multipart/form-data-encodedevent.body, we recommend using busboy. To learn more, visit our blog article on processing multipart form data with Netlify Functions. -
The
contextobject received by thehandlerincludes information about the context in which the function was called, like certain Identity user information, for example.
Here’s a basic example function, hello.ts:
import type { Handler, HandlerEvent, HandlerContext } from "@netlify/functions";
const handler: Handler = async (event: HandlerEvent, context: HandlerContext) => { return { statusCode: 200, body: JSON.stringify({ message: "Hello World" }), };};
export { handler };- This function deploys to an endpoint at
/.netlify/functions/hellorelative to the base URL of your site. - A successful invocation returns the
200status code and the string, “Hello, World”.
Synchronous functions can return a response object that includes the following information:
{ "isBase64Encoded": true|false, "statusCode": httpStatusCode, "headers": { "headerName": "headerValue", ... }, "multiValueHeaders": { "headerName": ["headerValue", "headerValue2", ...], ... }, "body": "..."}- Because
asyncfunction code returns apromise, we recommend returning a response with at least an HTTP status code instead of allowing the function to time out. Usingasyncin your function code doesn’t automatically designate a function as a background function.
Response streaming
Section titled “Response streaming”Netlify Functions can stream data to clients as it becomes available, rather than returning a buffered payload at the end of the computation. This lets developers and frameworks create faster experiences by using streaming and partial hydration to get content and interactions in front of people as quickly as possible.
To stream a function’s response:
- wrap your
handlerexport with thestreamdecorator - return a
ReadableStreamas thebody
Here’s a simplified example that you can use to test that your function response streams to the client:
import { stream } from "@netlify/functions";
export const handler = stream(async () => { const encoder = new TextEncoder(); const formatter = new Intl.DateTimeFormat("en", { timeStyle: "medium" }); const body = new ReadableStream({ start(controller) { controller.enqueue(encoder.encode("<html><body><ol>")); let i = 0; const timer = setInterval(() => { controller.enqueue( encoder.encode( `<li>Hello at ${formatter.format(new Date())}</li>\n\n` ) ); if (i++ >= 5) { controller.enqueue(encoder.encode("</ol></body></html>")); controller.close(); clearInterval(timer); } }, 1000); } }); return { headers: { "content-type": "text/html" }, statusCode: 200, body };});