Skip to content

Commit

Permalink
Update Pages bindings to reflect new dashboard, correct queues docume…
Browse files Browse the repository at this point in the history 
…ntation, and add Hyperdrive details
  • Loading branch information
@thomasgauvin
thomasgauvin authored Oct 10, 2024
1 parent 7b9c7be commit 0149530
Showing 1 changed file with 53 additions and 33 deletions.
86 changes: 53 additions & 33 deletions src/content/docs/pages/functions/bindings.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,11 +27,11 @@ To configure a KV namespace binding via the Cloudflare dashboard:

1. Log in to the [Cloudflare dashboard](https://dash.cloudflare.com) and select your account.
2. In **Account Home**, select **Workers & Pages**.
3. Select your Pages project > **Settings** > **Functions** > **KV namespace bindings** > **Add binding**.
4. Choose whether you would like to set up the binding in your **Production** or **Preview** environment.
5. Give your binding a name under **Variable name**.
6. Under **KV namespace**, select your desired namespace. You must repeat steps 5 and 6 for both the **Production** and **Preview** environments.
7. Redeploy your project for the binding to take effect.
3. Select your Pages project > **Settings**.
4. Select your Pages environment > **Bindings** > **Add** > **KV namespace**.
4. Give your binding a name under **Variable name**.
5. Under **KV namespace**, select your desired namespace.
6. Redeploy your project for the binding to take effect.

Below is an example of how to use KV in your Function. In the following example, your KV namespace binding is called `TODO_LIST` and you can access the binding in your Function code on `context.env`:

Expand Down Expand Up @@ -86,10 +86,10 @@ To configure a Durable Object binding via the Cloudflare dashboard:

1. Log in to the [Cloudflare dashboard](https://dash.cloudflare.com) and select your account.
2. In **Account Home**, select **Workers & Pages**.
3. Select your Pages project > **Settings** > **Functions** > **Durable Object bindings** > **Add binding**.
4. Choose whether you would like to set up the binding in your **Production** or **Preview** environment.
3. Select your Pages project > **Settings**.
4. Select your Pages environment > **Bindings** > **Add binding** > **Durable Object**.
5. Give your binding a name under **Variable name**.
6. Under **Durable Object namespace**, select your desired namespace. You must repeat steps 5 and 6 for both the **Production** and **Preview** environments.
6. Under **Durable Object namespace**, select your desired namespace.
7. Redeploy your project for the binding to take effect.

Below is an example of how to use Durable Objects in your Function. In the following example, your DO binding is called `DURABLE_OBJECT` and you can access the binding in your Function code on `context.env`:
Expand Down Expand Up @@ -149,10 +149,10 @@ To configure a R2 bucket binding via the Cloudflare dashboard:

1. Log in to the [Cloudflare dashboard](https://dash.cloudflare.com) and select your account.
2. In **Account Home**, select **Workers & Pages**.
3. Select your Pages project > **Settings** > **Functions** > **R2 bucket bindings** > **Add binding**.
4. Choose whether you would like to set up the binding in your **Production** or **Preview** environment.
3. Select your Pages project > **Settings**.
4. Select your Pages environment > **Bindings** > **Add binding** > **R2 bucket**.
5. Give your binding a name under **Variable name**.
6. Under **R2 bucket**, select your desired R2 bucket. You must repeat steps 5 and 6 for both the **Production** and **Preview** environments.
6. Under **R2 bucket**, select your desired R2 bucket.
7. Redeploy your project for the binding to take effect.

Below is an example of how to use R2 buckets in your Function. In the following example, your R2 bucket binding is called `BUCKET` and you can access the binding in your Function code on `context.env`:
Expand Down Expand Up @@ -220,10 +220,10 @@ To configure a D1 database binding via the Cloudflare dashboard:

1. Log in to the [Cloudflare dashboard](https://dash.cloudflare.com) and select your account.
2. In **Account Home**, select **Workers & Pages**.
3. Select your Pages project > **Settings** > **Functions** > **D1 database bindings** > **Add binding**.
4. Choose whether you would like to set up the binding in your **Production** or **Preview** environment.
3. Select your Pages project > **Settings**.
4. Select your Pages environment > **Bindings** > **Add binding**> **D1 database bindings**.
5. Give your binding a name under **Variable name**.
6. Under **D1 database**, select your desired D1 database. You must repeat steps 5 and 6 for both the **Production** and **Preview** environments.
6. Under **D1 database**, select your desired D1 database.
7. Redeploy your project for the binding to take effect.

Below is an example of how to use D1 in your Function. In the following example, your D1 database binding is `NORTHWIND_DB` and you can access the binding in your Function code on `context.env`:
Expand Down Expand Up @@ -296,9 +296,10 @@ To configure a Vectorize index binding via the Cloudflare dashboard:
1. Log in to the [Cloudflare dashboard](https://dash.cloudflare.com) and select your account.
2. In **Account Home**, select **Workers & Pages**.
3. Choose whether you would like to set up the binding in your **Production** or **Preview** environment.
4. Select your Pages project > **Settings** > **Functions** > **Vectorize index bindings** > **Add binding**.
4. Select your Pages project > **Settings**.
4. Select your Pages environment > **Bindings** > **Add** > **Vectorize index**.
5. Give your binding a name under **Variable name**.
6. Under **Vectorize index**, select your desired Vectorize index. You must repeat steps 5 and 6 for both the **Production** and **Preview** environments.
6. Under **Vectorize index**, select your desired Vectorize index.
7. Redeploy your project for the binding to take effect.

### Use Vectorize index bindings
Expand Down Expand Up @@ -433,8 +434,8 @@ To configure a Workers AI binding via the Cloudflare dashboard:

1. Log in to the [Cloudflare dashboard](https://dash.cloudflare.com) and select your account.
2. In **Account Home**, select **Workers & Pages**.
3. Select your Pages project > **Settings** > **Functions** > **Workers AI bindings** > **Add binding**.
4. Choose whether you would like to set up the binding in your **Production** or **Preview** environment.
3. Select your Pages project > **Settings**.
4. Select your Pages environment > **Bindings** > **Add** > **Workers AI**.
5. Give your binding a name under **Variable name**.
6. Redeploy your project for the binding to take effect.

Expand Down Expand Up @@ -505,10 +506,10 @@ To configure a Service binding via the Cloudflare dashboard:

1. Log in to the [Cloudflare dashboard](https://dash.cloudflare.com) and select your account.
2. In **Account Home**, select **Workers & Pages**.
3. Select your Pages project > **Settings** > **Functions** > **Service bindings** > **Add binding**.
4. Choose whether you would like to set up the binding in your **Production** or **Preview** environment.
3. Select your Pages project > **Settings**.
4. Select your Pages environment > **Functions** > **Add** > **Service binding**.
5. Give your binding a name under **Variable name**.
6. Under **Service**, select your desired Worker. You must repeat steps 5 and 6 for both the **Production** and **Preview** environments.
6. Under **Service**, select your desired Worker.
7. Redeploy your project for the binding to take effect.

Below is an example of how to use Service bindings in your Function. In the following example, your Service binding is called `SERVICE` and you can access the binding in your Function code on `context.env`:
Expand Down Expand Up @@ -560,10 +561,10 @@ To configure a queue producer binding via the Cloudflare dashboard:

1. Log in to the [Cloudflare dashboard](https://dash.cloudflare.com) and select your account.
2. In **Account Home**, select **Workers & Pages**.
3. Select your Pages project > **Settings** > **Functions** > **Queue Producers bindings** > **Add binding**.
4. Choose whether you would like to set up the binding in your **Production** or **Preview** environment.
3. Select your Pages project > **Settings**.
4. Select your Pages environment > **Functions** > **Add** > **Queue**.
5. Give your binding a name under **Variable name**.
6. Under **Dataset**, input your desired dataset. You must repeat steps 5 and 6 for both the **Production** and **Preview** environments.
6. Under **Queue**, select your desired queue.
7. Redeploy your project for the binding to take effect.

Below is an example of how to use a queue producer binding in your Function. In this example, the binding is named `MY_QUEUE` and you can access the binding in your Function code on `context.env`::
Expand Down Expand Up @@ -610,14 +611,28 @@ If using a queue producer binding with a Pages Function, you will be able to sen

:::note

PostgreSQL drivers like [`Postgres.js`](https://github.com/porsager/postgres) depend on Node.js APIs and as such Functions with Hyperdrive config bindings must be [deployed with Node.js compatibility](/workers/runtime-apis/nodejs).
PostgreSQL drivers like [`Postgres.js`](https://github.com/porsager/postgres) depend on Node.js APIs. Pages Functions with Hyperdrive bindings must be [deployed with Node.js compatibility](/workers/runtime-apis/nodejs).

```toml title="wrangler.toml"
compatibility_flags = [ "nodejs_compat" ]
compatibility_date = "2024-09-23"
```

:::

[Hyperdrive](/hyperdrive/) is a service for connecting to your existing databases from Cloudflare Workers and Pages Functions.

To bind your Hyperdrive config to your Pages Function, you can configure a Hyperdrive binding in [`wrangler.toml`](/pages/functions/wrangler-configuration/#hyperdrive) or the Cloudflare dashboard.

To configure a Hyperdrive binding via the Cloudflare dashboard:
1. Log in to the [Cloudflare dashboard](https://dash.cloudflare.com) and select your account.
2. In **Account Home**, select **Workers & Pages**.
3. Select your Pages project > **Settings**.
4. Select your Pages environment > **Bindings** > **Add** > **Hyperdrive**.
5. Give your binding a name under **Variable name**.
6. Under **Hyperdrive configuration**, select your desired configuration.
7. Redeploy your project for the binding to take effect.

Below is an example of how to use Hyperdrive in your Function. In the following example, your Hyperdrive config is named `HYPERDRIVE` and you can access the binding in your Function code on `context.env`:

<Tabs> <TabItem label="JavaScript" icon="seti:javascript">
Expand Down Expand Up @@ -668,7 +683,11 @@ export const onRequest: PagesFunction<Env> = async (context) => {
};
```

</TabItem> </Tabs>
</TabItem> </Tabs>

### Interact with your Hyperdrive binding locally

To interact with your Hyperdrive binding locally, use the `wrangler.toml` file to configure your Hyperdrive binding. Then, run [`npx wrangler pages dev <OUTPUT_DIR>`](/workers/wrangler/commands/#dev-1).

## Analytics Engine

Expand All @@ -680,10 +699,10 @@ To configure an Analytics Engine binding via the Cloudflare dashboard:

1. Log in to the [Cloudflare dashboard](https://dash.cloudflare.com) and select your account.
2. In **Account Home**, select **Workers & Pages**.
3. Select your Pages project > **Settings** > **Functions** > **Analytics Engine bindings** > **Add binding**.
4. Choose whether you would like to set up the binding in your **Production** or **Preview** environment.
3. Select your Pages project > **Settings**.
4. Select your Pages environment > **Bindings** > **Add** > **Analytics engine**.
5. Give your binding a name under **Variable name**.
6. Under **Dataset**, input your desired dataset. You must repeat steps 5 and 6 for both the **Production** and **Preview** environments.
6. Under **Dataset**, input your desired dataset.
7. Redeploy your project for the binding to take effect.

Below is an example of how to use an Analytics Engine binding in your Function. In the following example, the binding is called `ANALYTICS_ENGINE` and you can access the binding in your Function code on `context.env`:
Expand Down Expand Up @@ -740,8 +759,8 @@ To configure an environment variable via the Cloudflare dashboard:

1. Log in to the [Cloudflare dashboard](https://dash.cloudflare.com) and select your account.
2. In **Account Home**, select **Workers & Pages**.
3. Select your Pages project > **Settings** > **Environment variables**.
4. Selecting **Add variables** under **Production** and/or **Preview**.
3. Select your Pages project > **Settings**.
4. Select your Pages environment > **Variables and Secrets** > **Add** .
5. After setting a variable name and value, select **Save**.

Below is an example of how to use environment variables in your Function. The environment variable in this example is `ENVIRONMENT` and you can access the environment variable on `context.env`:
Expand Down Expand Up @@ -797,8 +816,9 @@ To add secrets to your Pages project:

1. Log in to the [Cloudflare dashboard](https://dash.cloudflare.com) and select your account.
2. In **Account Home**, select **Workers & Pages**.
3. Select your Pages project > select **Settings** > **Environment variables**.
4. Selecting **Add variables** under **Production** and/or **Preview**.
3. Select your Pages project > select **Settings**.
4. Select your Pages environment > **Variables and Secrets** > **Add**.
5. Set a variable name and value.
5. Select **Encrypt** to create your secret.
6. Select **Save**.

Expand Down

0 comments on commit 0149530

Please sign in to comment.