Skip to content

Get started

This guide will instruct you on creating and deploying a Pages Function.

Prerequisites

You must have a Pages project set up on your local machine or deployed on the Cloudflare dashboard. To create a Pages project, refer to Get started.

Create a Function

To get started with generating a Pages Function, create a /functions directory. Make sure that the /functions directory is at the root of your Pages project (and not in the static root, such as /dist).

Writing your Functions files in the /functions directory will automatically generate a Worker with custom functionality at predesignated routes.

Copy and paste the following code into a helloworld.js file that you create in your /functions folder:

export function onRequest(context) {
return new Response("Hello, world!")
}

In the above example code, the onRequest handler takes a request context object. The handler must return a Response or a Promise of a Response.

This Function will run on the /helloworld route and returns "Hello, world!". The reason this Function is available on this route is because the file is named helloworld.js. Similarly, if this file was called howdyworld.js, this function would run on /howdyworld.

Refer to Routing for more information on route customization.

Runtime features

Workers runtime features are configurable on Pages Functions, including compatibility with a subset of Node.js APIs and the ability to set a compatibility date or compatibility flag.

Set these configurations by passing an argument to your Wrangler command or by setting them in the dashboard. To set Pages compatibility flags in the Cloudflare dashboard:

  1. Log into the Cloudflare dashboard and select your account.
  2. Select Workers & Pages and select your Pages project.
  3. Select Settings > Functions > Compatibility Flags.
  4. Configure your Production and Preview compatibility flags as needed.

Additionally, use other Cloudflare products such as D1 (serverless DB) and R2 from within your Pages project by configuring bindings.

Deploy your Function

After you have set up your Function, deploy your Pages project. Deploy your project by: