Cloudflare Pages

Inngest provides handlers for Cloudflare Pages, meaning you can deploy background jobs, scheduled functions, and event-driven systems alongside your site as Workers-based functions.

Follow along to:

1. Serve your functions using Cloudflare Pages Functions
2. Register your functions with Inngest after deploying

Serving

Import serve from the inngest/cloudflare package to create your handler:

ts
// functions/api/inngest.ts
import { createFunction } from "inngest";
import { serve } from "inngest/cloudflare";
const foo = createFunction("Foo", "demo/event.sent", () => {
  console.log("Got a demo event!");
});
export const onRequest = serve("Cloudflare Pages Example", [foo]);

serve syntax

serve(appName, [functions]);
serve(appName, [functions], options);

serve arguments

• appName: The name of your app or microservice, used to group all functions together
• [functions]: An array of all functions to enable
• options: An optional object of options, with the type:

ts
type Options = {
  /**
   * A key used to sign requests to and from Inngest in order to prove that the
   * source is legitimate.
   *
   * You must provide a signing key to communicate securely with Inngest. If
   * your key is not provided here, we'll try to retrieve it from the
   * `INNGEST_SIGNING_KEY` environment variable.
   *
   * You can retrieve your signing key from the Inngest UI inside the "Secrets"
   * section at {@link https://app.inngest.com/secrets}. We highly recommend
   * that you add this to your platform's available environment variables as
   * `INNGEST_SIGNING_KEY`.
   *
   * If no key can be found, you will not be able to register your functions or
   * receive events from Inngest.
   */
  signingKey?: string;
  /**
   * Controls whether a landing page with introspection capabilities is shown
   * when a `GET` request is performed to this handler.
   *
   * Defaults to true if NODE_ENV !== production.
   *
   * This page is highly recommended when getting started in development,
   * testing, or staging environments.
   */
  landingPage?: boolean;
  /**
   * The URL used to register functions with Inngest.
   * Defaults to https://api.inngest.com/fn/register
   */
  inngestRegisterUrl?: string;
  /**
   * If provided, will override the used `fetch` implementation. Useful for
   * giving the library a particular implementation if accessing it is not done
   * via globals.
   *
   * By default the library will try to use the native Web API fetch, falling
   * back to a Node implementation if no global fetch can be found.
   */
  fetch?: typeof fetch;
}

Checking function configuration

To make sure everything is set up as you expect it to be, Inngest provides a local dashboard to introspect your served handler, show any found functions, and raise any errors before you get to production.

Most Cloudflare Pages examples use wrangler to locally test your build. For example, building and locally running a Next.js site looks like:

sh
npm run export
npx wrangler pages dev out

Visit ${your-url}/api/inngest (usually http://localhost:3000/api/inngest) to see the dashboard. If there are any problems detected, they'll show up here.

Registering your functions with Inngest

By default, Inngest doesn't know which functions you're serving or the URL of your app. Once you deploy your site to production, you'll need to reigster your functions with Inngest. You can do this via the UI or via an API call.

Registering via the UI

You can add your endpoint’s URL to Inngest via the dashboard:

Registering via the API

You can register your function’s endpoints with a single PUT call to your function endpoint:

bash
curl -X PUT https://www.example.com/api/inngest

Remember to swap www.example.com with your own domain name.

You can read more about registering functions here.