-
Notifications
You must be signed in to change notification settings - Fork 23
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Create Workers + Hono env middleware example
- Loading branch information
1 parent
67c6be4
commit 3fbf725
Showing
6 changed files
with
197 additions
and
14 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
110 changes: 110 additions & 0 deletions
110
pages/docs/examples/middleware/cloudflare-workers-environment-variables.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,110 @@ | ||
| import { CodeGroup } from "src/shared/Docs/mdx"; | ||
|
|
||
| # Cloudflare Workers environment variables and context | ||
|
|
||
| Cloudflare Workers does not set environment variables a global object like Node.js does with `process.env`. Workers [binds environment variables](https://developers.cloudflare.com/workers/configuration/environment-variables/) to the worker's special `fetch` event handler thought a specific `env` argument. | ||
|
|
||
| This means accessing environment variables within Inngest function handlers isn't possible without explicitly passing them through from the worker event handler to the Inngest function handler. | ||
|
|
||
| We can accomplish this by use the [middleware](/docs/features/middleware) feature for Workers or when using [Hono](/docs/learn/serving-inngest-functions#framework-hono). | ||
|
|
||
| ## Creating middleware | ||
|
|
||
| You can create middleware which extracts the `env` argument from the Workers `fetch` event handler arguments for either Workers or Hono: | ||
|
|
||
| 1. Use `onFunctionRun`'s `reqArgs` array to get the `env` object and, optionally, cast a type. | ||
| 2. Return the `env` object within the special `ctx` object of `transformInput` lifecycle method. | ||
|
|
||
| <CodeGroup> | ||
|
|
||
| ```ts {{ title: "Workers" }} | ||
| import { Inngest, InngestMiddleware } from 'inngest'; | ||
|
|
||
| const bindings = new InngestMiddleware({ | ||
| name: 'Cloudflare Workers bindings', | ||
| init({ client, fn }) { | ||
| return { | ||
| onFunctionRun({ ctx, fn, steps, reqArgs }) { | ||
| return { | ||
| transformInput({ ctx, fn, steps }) { | ||
| // reqArgs is the array of arguments passed to the Worker's fetch event handler | ||
| // ex. fetch(request, env, ctx) | ||
| // We cast the argument to the global Env var that Wrangler generates: | ||
| const env = reqArgs[1] as Env; | ||
| return { | ||
| ctx: { | ||
| // Return the env object to the function handler's input args | ||
| env, | ||
| }, | ||
| }; | ||
| }, | ||
| }; | ||
| }, | ||
| }; | ||
| }, | ||
| }); | ||
|
|
||
| // Include the middleware when creating the Inngest client | ||
| export const inngest = new Inngest({ | ||
| id: 'my-workers-app', | ||
| middleware: [bindings], | ||
| }); | ||
| ``` | ||
|
|
||
| ```ts {{ title: "Hono" }} | ||
| import { Inngest, InngestMiddleware } from 'inngest'; | ||
| import { type Context } from 'hono'; | ||
|
|
||
| type Bindings = { | ||
| MY_VAR: string; | ||
| DB_URL: string; | ||
| MY_BUCKET: R2Bucket; | ||
| }; | ||
|
|
||
| const bindings = new InngestMiddleware({ | ||
| name: 'Hono bindings', | ||
| init({ client, fn }) { | ||
| return { | ||
| onFunctionRun({ ctx, fn, steps, reqArgs }) { | ||
| return { | ||
| transformInput({ ctx, fn, steps }) { | ||
| // reqArgs is the array of arguments passed to a Hono handler | ||
| // We cast the argument to the correct Hono Context type with our | ||
| // environment variable bindings | ||
| const [honoCtx] = reqArgs as [Context<{ Bindings: Bindings }>]; | ||
| return { | ||
| ctx: { | ||
| // Return the context's env object to the function handler's input args | ||
| env: honoCtx.env, | ||
| }, | ||
| }; | ||
| }, | ||
| }; | ||
| }, | ||
| }; | ||
| }, | ||
| }); | ||
|
|
||
| // Include the middleware when creating the Inngest client | ||
| export const inngest = new Inngest({ | ||
| id: 'my-hono-app', | ||
| middleware: [bindings], | ||
| }); | ||
| ``` | ||
|
|
||
| </CodeGroup> | ||
|
|
||
| Within your functions, you can now access the environment variables via the `env` object argument that you returned in `transformInput` above. Here's an example function: | ||
|
|
||
| ```ts | ||
| const myFn = inngest.createFunction( | ||
| { id: 'my-fn' }, | ||
| { event: 'demo/event.sent' }, | ||
| // The "env" argument returned in transformInput is passed through: | ||
| async ({ event, step, env }) => { | ||
|
|
||
| // The env object will be typed as well: | ||
| console.log(env.MY_VAR); | ||
| } | ||
| ); | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters