Getting Started with Cloudflare Functions

Install and configure the Cloudflare Functions plugin for your 11ty project.

Installation

Step 1: Install the Package

npm install @zefish/standard

Step 2: Add Plugin to eleventy.config.js

import Standard from "@zefish/standard";
import CloudflarePlugin from "@zefish/standard/cloudflare";

export default function (eleventyConfig) {
  // Add Standard Framework
  eleventyConfig.addPlugin(Standard);

  // Add Cloudflare Functions support
  eleventyConfig.addPlugin(CloudflarePlugin, {
    outputDir: "functions",
    environment: "production",
  });
}

Configuration Options

outputDir

Where to output function files (relative to 11ty output directory).

outputDir: "functions"  // Default

environment

The environment name for your functions.

environment: "production"  // Default: production

env

Environment variables to pass to your functions.

env: {
  MY_VARIABLE: "some-value",
}

Setting Up Wrangler

Step 1: Install Wrangler CLI

npm install -g wrangler

Or use npx:

npx wrangler --version

Step 2: wrangler.toml is generated by the plugin

The wrangler.toml file is automatically generated by the Cloudflare plugin during the Eleventy build process. You can configure its generation via the plugin options in eleventy.config.js.

Step 3: Configure wrangler.toml (if needed)

If you need to customize wrangler.toml beyond what the plugin generates, you can manually edit the generated file or create your own. Ensure it includes your project details:

name = "my-project"
main = "functions/hello.js"
compatibility_date = "2024-10-21"

[env.production]
route = "example.com/api/*"
zone_id = "your-zone-id"

Authentication

Login to Cloudflare

wrangler login

This opens a browser to authenticate with your Cloudflare account.

Create Your First Function

Step 1: Create functions directory

mkdir functions

Step 2: Create hello.js

// functions/hello.js

export default {
  async fetch(request) {
    return new Response("Hello from Cloudflare!", {
      headers: { "Content-Type": "text/plain" },
      status: 200,
    });
  },
};

Step 3: Test Locally

wrangler dev

Visit http://localhost:8787/hello to see your function.

Step 4: Deploy

wrangler publish

Project Structure

After setup, your project looks like:

my-project/
├── eleventy.config.js        ← Plugin configured here
├── wrangler.toml             ← Cloudflare config
├── content/                  ← 11ty content
│   └── index.md
├── functions/                ← Your serverless functions
│   ├── hello.js
│   └── api.js
└── _site/                    ← Build output
    └── functions/           ← Deployed to Cloudflare

Verify Installation

Build the site

npm run build

Check that functions are copied:

ls _site/functions/

You should see your function files.

Test with Wrangler

wrangler dev

Open http://localhost:8787 and test your functions.

Environment Variables

Set in eleventy.config.js

eleventyConfig.addPlugin(CloudflarePlugin, {
  env: {
    API_KEY: "your-secret-key",
    DB_URL: "connection-string",
  },
});

Access in Functions

export default {
  async fetch(request, env) {
    const apiKey = env.API_KEY;
    const dbUrl = env.DB_URL;
    // Use them...
  },
};

Next Steps

• Learn Common Patterns – Build APIs, forms, redirects
• See Examples – Real-world code
• Deploy to Production – Go live

Troubleshooting

Functions not copied during build

Make sure outputDir in your plugin config matches your wrangler.toml:

eleventyConfig.addPlugin(CloudflarePlugin, {
  outputDir: "functions",  // ← Must match
});

Wrangler not found

Install globally or use npx:

npm install -g wrangler
# or
npx wrangler --version

Authentication errors

Login again:

wrangler login

Ready to build your first API? Check out the patterns guide