Bindings (3)·续2

Bindings (3)·续2

To configure a Hyperdrive binding via the Cloudflare dashboard:

In the Cloudflare dashboard, go to the Workers & Pages page. Go to Workers & Pages ↗
Select your Pages project.
Go to Settings > Bindings > Add > Hyperdrive.
Give your binding a name under Variable name.
Under Hyperdrive configuration, select your desired configuration.
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:

import postgres from "postgres";

export async function onRequest(context) {
    // create connection to postgres database
    const sql = postgres(context.env.HYPERDRIVE.connectionString);

try {
        const result = await sql`SELECT id, name, value FROM records`;

return Response.json({result: result})
    } catch (e) {
        return Response.json({error: e.message, {status: 500}});
    }
}

import postgres from "postgres";

interface Env {
    HYPERDRIVE: Hyperdrive;
}

type MyRecord = {
    id: number;
    name: string;
    value: string;
};

export const onRequest: PagesFunction<Env> = async (context) => {
    // create connection to postgres database
    const sql = postgres(context.env.HYPERDRIVE.connectionString);

try {
        const result = await sql<MyRecord[]>`SELECT id, name, value FROM records`;

return Response.json({result: result})
    } catch (e) {
        return Response.json({error: e.message, {status: 500}});
    }
};

Interact with your Hyperdrive binding locally

To interact with your Hyperdrive binding locally, you must provide a local connection string to your database that your Pages project will connect to directly. You can set an environment variable CLOUDFLARE_HYPERDRIVE_LOCAL_CONNECTION_STRING_<BINDING_NAME> with the connection string of the database, or use the Wrangler file to configure your Hyperdrive binding with a localConnectionString as specified in Hyperdrive documentation for local development. Then, run npx wrangler pages dev <OUTPUT_DIR>.

Analytics Engine

The Analytics Engine binding enables you to write analytics within your Pages Function.

To bind an Analytics Engine dataset to your Pages Function, you must configure an Analytics Engine binding using the Wrangler configuration file or the Cloudflare dashboard:

To configure an Analytics Engine binding via the Cloudflare dashboard:

In the Cloudflare dashboard, go to the Workers & Pages page. Go to Workers & Pages ↗
Select your Pages project.
Go to Settings > Bindings > Add > Analytics engine.
Give your binding a name under Variable name.
Under Dataset, input your desired dataset.
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:

export async function onRequest(context) {
    const url = new URL(context.request.url);

context.env.ANALYTICS_ENGINE.writeDataPoint({
        indexes: [],
        blobs: [url.hostname, url.pathname],
        doubles: [],
    });

return new Response("Logged analytic");
}

interface Env {
    ANALYTICS_ENGINE: AnalyticsEngineDataset;
}

export const onRequest: PagesFunction<Env> = async (context) => {
    const url = new URL(context.request.url);

context.env.ANALYTICS_ENGINE.writeDataPoint({
        indexes: [],
        blobs: [url.hostname, url.pathname],
        doubles: [],
    });

return new Response("Logged analytic");
};

Interact with your Analytics Engine binding locally

You cannot use an Analytics Engine binding locally.

Environment variables

An environment variable is an injected value that can be accessed by your Functions. Environment variables are a type of binding that allow you to attach text strings or JSON values to your Pages Function. It is stored as plain text. Set your environment variables directly within the Cloudflare dashboard for both your production and preview environments at runtime and build-time.

To add environment variables to your Pages project, you can use the Wrangler configuration file or the Cloudflare dashboard.

To configure an environment variable via the Cloudflare dashboard:

In the Cloudflare dashboard, go to the Workers & Pages page. Go to Workers & Pages ↗
Select your Pages project.
Go to Settings > Variables and Secrets > Add .
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:

export function onRequest(context) {
    if (context.env.ENVIRONMENT === "development") {
        return new Response("This is a local environment!");
    } else {
        return new Response("This is a live environment");
    }
}

interface Env {
    ENVIRONMENT: string;
}

export const onRequest: PagesFunction<Env> = async (context) => {
    if (context.env.ENVIRONMENT === "development") {
        return new Response("This is a local environment!");
    } else {
        return new Response("This is a live environment");
    }
};

Interact with your environment variables locally

You can interact with your environment variables locally in one of two ways:

Configure your Pages project's Wrangler file and running npx wrangler pages dev.
Pass arguments to wrangler pages dev directly.

To interact with your environment variables locally via the Wrangler CLI, add --binding=<ENVIRONMENT_VARIABLE_NAME>=<ENVIRONMENT_VARIABLE_VALUE> to the wrangler pages dev command:

npx wrangler pages dev --binding=<ENVIRONMENT_VARIABLE_NAME>=<ENVIRONMENT_VARIABLE_VALUE>

Secrets

Secrets are a type of binding that allow you to attach encrypted text values to your Pages Function. You cannot see secrets after you set them and can only access secrets programmatically on context.env. Secrets are used for storing sensitive information like API keys and auth tokens.

To add secrets to your Pages project:

In the Cloudflare dashboard, go to the Workers & Pages page. Go to Workers & Pages ↗
Select your Pages project.
Go to Settings > Variables and Secrets > Add.
Set a variable name and value.
Select Encrypt to create your secret.
Select Save.

You use secrets the same way as environment variables. When setting secrets with Wrangler or in the Cloudflare dashboard, it needs to be done before a deployment that uses those secrets. For more guidance, refer to Environment variables.

Local development with secrets

Caution

Do not use vars to store sensitive information in your Worker's Wrangler configuration file. Use secrets instead.

Put secrets for use in local development in either a .dev.vars file or a .env file, in the same directory as the Wrangler configuration file.

Note

You can use the secrets configuration property to declare which secret names your Worker requires. When defined, only the keys listed in secrets.required are loaded from .dev.vars or .env. Additional keys are excluded and missing keys produce a warning.

Note

Choose to use either .dev.vars or .env but not both. If you define a .dev.vars file, then values in .env files will not be included in the env object during local development.

These files should be formatted using the dotenv ↗︎ syntax. For example:

.dev.vars / .envbash

SECRET_KEY="value"
API_TOKEN="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9"

Do not commit secrets to git

The .dev.vars and .env files should not be committed to git. Add .dev.vars* and .env* to your project's .gitignore file.

To set different secrets for each Cloudflare environment, create files named .dev.vars.<environment-name> or .env.<environment-name>.

When you select a Cloudflare environment in your local development, the corresponding environment-specific file will be loaded ahead of the generic .dev.vars (or .env) file.

When using .dev.vars.<environment-name> files, all secrets must be defined per environment. If .dev.vars.<environment-name> exists then only this will be loaded; the .dev.vars file will not be loaded.
In contrast, all matching .env files are loaded and the values are merged. For each variable, the value from the most specific file is used, with the following precedence:
.env.<environment-name>.local (most specific)
.env.local
.env.<environment-name>
.env (least specific)

Controlling `.env` handling

It is possible to control how .env files are loaded in local development by setting environment variables on the process running the tools.

To disable loading local dev vars from .env files without providing a .dev.vars file, set the CLOUDFLARE_LOAD_DEV_VARS_FROM_DOT_ENV environment variable to "false".
To include every environment variable defined in your system's process environment as a local development variable, ensure there is no .dev.vars and then set the CLOUDFLARE_INCLUDE_PROCESS_ENV environment variable to "true". This is not needed when using the secrets configuration property, which loads from process.env automatically.

Was this helpful?

YesNo

{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/pages/functions/bindings/#page","headline":"Bindings","description":"Connect Pages Functions to Cloudflare resources like KV, R2, D1, and Durable Objects.","url":"https://developers.cloudflare.com/pages/functions/bindings/","inLanguage":"en","image":"https://developers.cloudflare.com/pages/functions/bindings/og.png?v=3a2a66ac42cf54e8","dateModified":"2026-06-25","publisher":{"@type":"Organization","name":"Cloudflare","description":"One platform for your apps, agents, and workforce. Build, secure, and scale without managing infrastructure","url":"https://www.cloudflare.com/","sameAs":["https://github.com/cloudflare","https://www.linkedin.com/company/cloudflare","https://x.com/cloudflare"],"logo":{"@type":"ImageObject","url":"https://developers.cloudflare.com/logo.svg"},"address":{"@type":"PostalAddress","streetAddress":"101 Townsend St","addressLocality":"San Francisco","addressRegion":"CA","postalCode":"94107","addressCountry":"US"},"contactPoint":[{"@type":"ContactPoint","contactType":"Customer Support","url":"https://support.cloudflare.com/","availableLanguage":["English"]},{"@type":"ContactPoint","contactType":"Sales","url":"https://www.cloudflare.com/contact/","availableLanguage":["English"]}]},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"},"keywords":["Bindings"]}

description: Access logs for Pages Functions using the Cloudflare dashboard or Wrangler CLI. title: Debugging and logging image: https://developers.cloudflare.com/pages/functions/debugging-and-logging/og.png?v=05eb47ae72ab1995

Documentation Index
Fetch the complete documentation index at: https://developers.cloudflare.com/pages/llms.txt
Use this file to discover all available pages before exploring further.

Bindings (3)·续2

Bindings (3)·续2

Interact with your Hyperdrive binding locally

Analytics Engine

Interact with your Analytics Engine binding locally

Environment variables

Interact with your environment variables locally

Secrets

Local development with secrets

On this page