in
- * cf/TypeScriptExample, which recovers the raw source from the rendered
- * block (its slot-based contract) rather than a `code` prop.
- */
-import { z } from "astro/zod";
-import { Code } from "../ui/code";
-import TypeScriptExample from "./TypeScriptExample.astro";
-
-// `lang` is authored freeform in MDX (z.string()); Code's `lang` prop is
-// typed against shiki's narrower CodeLanguage union. Cast at the render
-// site — shiki already falls back gracefully for unrecognized values.
-type CodeLang = Parameters[0]["lang"];
-
-type Props = z.infer;
-
-const props = z
- .object({
- repo: z.string(),
- commit: z.string(),
- file: z.string(),
- lang: z.string(),
- lines: z
- .string()
- .transform((val) => val.split("-").map(Number))
- .optional(),
- tag: z.string().optional(),
- useTypeScriptExample: z.boolean().default(false),
- code: z.custom>().optional(),
- })
- .strict()
- .refine((val) => !(val.lines && val.tag), {
- message: "Lines and tag are mutually exclusive filters.",
- })
- .refine((val) => !val.useTypeScriptExample || val.lang === "ts", {
- message: "useTypeScriptExample can only be used when 'lang' is set to 'ts'",
- });
-
-const { repo, commit, file, lang, lines, tag, useTypeScriptExample, code } =
- props.parse(Astro.props);
-
-const res = await fetch(
- `https://gh-code.developers.cloudflare.com/${repo}/${commit}/${file}`,
-);
-
-if (!res.ok) {
- throw new Error(`[GitHubCode] Received ${res.status} from Worker.`);
-}
-
-const content = await res.text();
-let contentLines = content.split("\n");
-
-if (lines) {
- const [start, end] = lines;
-
- if (contentLines.length < end - 1) {
- throw new Error(
- `[GitHubCode] End line requested is beyond content length (${contentLines.length}).`,
- );
- }
-
- contentLines = contentLines.slice(start - 1, end);
-} else if (tag) {
- const startTag = contentLines.findIndex((x) =>
- x.includes(``),
- );
- const endTag = contentLines.findIndex((x) =>
- x.includes(` `),
- );
-
- if (startTag === -1 || endTag === -1) {
- throw new Error(`[GitHubCode] Unable to find a region using tag "${tag}".`);
- }
-
- contentLines = contentLines.slice(startTag + 1, endTag);
-}
-
-contentLines = contentLines.filter(
- (line) => !/<[/]?docs-tag name=".*">/.test(line),
-);
-
-const finalCode = contentLines.join("\n");
-
-const { title, ...restCode } = (code ?? {}) as Record;
-const meta = title ? `title="${title}"` : undefined;
----
-
-{
- useTypeScriptExample ? (
-
-
- ) : (
-
-
-
-
- );
- })
-}
diff --git a/src/content/docs/agents/concepts/agentic-patterns/index.mdx b/src/content/docs/agents/concepts/agentic-patterns/index.mdx
index 61701e33f5b..8545f41a04c 100644
--- a/src/content/docs/agents/concepts/agentic-patterns/index.mdx
+++ b/src/content/docs/agents/concepts/agentic-patterns/index.mdx
@@ -9,8 +9,6 @@ products:
- agents
---
-import { GitHubCode } from "~/components";
-
This page lists and defines common patterns for implementing AI agents, based on [Anthropic's patterns for building effective agents](https://www.anthropic.com/research/building-effective-agents).
Code samples use the [AI SDK](https://ai-sdk.dev/docs/foundations/agents), running in [Durable Objects](/durable-objects).
@@ -21,12 +19,57 @@ Decomposes tasks into a sequence of steps, where each LLM call processes the out
-
+
+```ts
+export default {
+ async fetch(request, env, ctx): Promise {
+ const url = new URL(request.url);
+
+ // A. Create the Session.
+ // When we create a D1 Session, we can continue where we left off from a previous
+ // Session if we have that Session's last bookmark or use a constraint.
+ const bookmark =
+ request.headers.get("x-d1-bookmark") ?? "first-unconstrained";
+ const session = env.DB01.withSession(bookmark);
+
+ try {
+ // Use this Session for all our Workers' routes.
+ const response = await withTablesInitialized(
+ request,
+ session,
+ handleRequest,
+ );
+
+ // B. Return the bookmark so we can continue the Session in another request.
+ response.headers.set("x-d1-bookmark", session.getBookmark() ?? "");
+
+ return response;
+ } catch (e) {
+ console.error({
+ message: "Failed to handle request",
+ error: String(e),
+ errorProps: e,
+ url,
+ bookmark,
+ });
+ return Response.json(
+ { error: String(e), errorDetails: e },
+ { status: 500 },
+ );
+ }
+ },
+} satisfies ExportedHandler;
+```
+
+
## Primary database instance vs read replicas
diff --git a/src/content/docs/d1/best-practices/retry-queries.mdx b/src/content/docs/d1/best-practices/retry-queries.mdx
index 02bc218ed30..12b186d11af 100644
--- a/src/content/docs/d1/best-practices/retry-queries.mdx
+++ b/src/content/docs/d1/best-practices/retry-queries.mdx
@@ -8,8 +8,6 @@ products:
- d1
---
-import { GitHubCode } from "~/components";
-
It is useful to retry write queries from your application when you encounter a transient [error](/d1/observability/debug-d1/#error-list). From the list of `D1_ERROR`s, refer to the Recommended action column to determine if a query should be retried.
:::note
diff --git a/src/content/docs/d1/tutorials/d1-and-prisma-orm.mdx b/src/content/docs/d1/tutorials/d1-and-prisma-orm.mdx
index 64bb7a1593d..8c9494a3c01 100644
--- a/src/content/docs/d1/tutorials/d1-and-prisma-orm.mdx
+++ b/src/content/docs/d1/tutorials/d1-and-prisma-orm.mdx
@@ -16,7 +16,7 @@ import {
WranglerConfig,
FileTree,
PackageManagers,
- GitHubCode,
+ TypeScriptExample,
Tabs,
TabItem,
} from "~/components";
@@ -201,16 +201,13 @@ Next, you need to add the SQL statement that will create a `User` table to that
Open the `schema.prisma` file and add the following `User` model to your schema:
-
+
+```ts
+import { PrismaClient } from './generated/prisma/';
+import { PrismaD1 } from '@prisma/adapter-d1';
+
+export interface Env {
+ DB: D1Database;
+}
+
+export default {
+ async fetch(request, env, ctx): Promise {
+ const adapter = new PrismaD1(env.DB);
+ const prisma = new PrismaClient({ adapter });
+
+ const users = await prisma.user.findMany();
+ const result = JSON.stringify(users);
+ return new Response(result);
+ },
+} satisfies ExportedHandler;
+```
+
+
Before running the Worker, generate Prisma Client with the following command:
diff --git a/src/content/docs/kv/get-started.mdx b/src/content/docs/kv/get-started.mdx
index de961789320..1daef895dbb 100644
--- a/src/content/docs/kv/get-started.mdx
+++ b/src/content/docs/kv/get-started.mdx
@@ -11,7 +11,7 @@ products:
- kv
---
-import { Render, PackageManagers, Steps, FileTree, Details, Tabs, TabItem, WranglerConfig, GitHubCode, DashButton } from "~/components";
+import { Render, PackageManagers, Steps, FileTree, Details, Tabs, TabItem, WranglerConfig, TypeScriptExample, DashButton } from "~/components";
Workers KV provides low-latency, high-throughput global storage to your [Cloudflare Workers](/workers/) applications. Workers KV is ideal for storing user configuration data, routing data, A/B testing configurations and authentication tokens, and is well suited for read-heavy workloads.
@@ -375,14 +375,38 @@ Also refer to [KV binding docs](/kv/concepts/kv-bindings/#use-kv-bindings-when-d
Your Worker code should look like this:
-
+
+```ts
+export interface Env {
+ USERS_NOTIFICATION_CONFIG: KVNamespace;
+}
+
+export default {
+ async fetch(request, env, ctx): Promise {
+ try {
+ await env.USERS_NOTIFICATION_CONFIG.put("user_2", "disabled");
+ const value = await env.USERS_NOTIFICATION_CONFIG.get("user_2");
+ if (value === null) {
+ return new Response("Value not found", { status: 404 });
+ }
+ return new Response(value);
+ } catch (err) {
+ console.error(`KV returned error:`, err);
+ const errorMessage =
+ err instanceof Error
+ ? err.message
+ : "An unknown error occurred when accessing KV storage";
+ return new Response(errorMessage, {
+ status: 500,
+ headers: { "Content-Type": "text/plain" },
+ });
+ }
+ },
+} satisfies ExportedHandler;
+```
+
+
The code above:
@@ -402,14 +426,38 @@ The code above:
3. Select **Edit Code**.
4. Clear the contents of the `workers.js` file, then paste the following code.
-
+
+ ```ts
+ export interface Env {
+ USERS_NOTIFICATION_CONFIG: KVNamespace;
+ }
+
+ export default {
+ async fetch(request, env, ctx): Promise {
+ try {
+ await env.USERS_NOTIFICATION_CONFIG.put("user_2", "disabled");
+ const value = await env.USERS_NOTIFICATION_CONFIG.get("user_2");
+ if (value === null) {
+ return new Response("Value not found", { status: 404 });
+ }
+ return new Response(value);
+ } catch (err) {
+ console.error(`KV returned error:`, err);
+ const errorMessage =
+ err instanceof Error
+ ? err.message
+ : "An unknown error occurred when accessing KV storage";
+ return new Response(errorMessage, {
+ status: 500,
+ headers: { "Content-Type": "text/plain" },
+ });
+ }
+ },
+ } satisfies ExportedHandler;
+ ```
+
+
The code above:
diff --git a/src/content/docs/style-guide/components/github-code.mdx b/src/content/docs/style-guide/components/github-code.mdx
deleted file mode 100644
index a7af6ff49ee..00000000000
--- a/src/content/docs/style-guide/components/github-code.mdx
+++ /dev/null
@@ -1,159 +0,0 @@
----
-title: GitHubCode
-styleGuide:
- component: GitHubCode
-description: Fetch and display code from a GitHub repository.
-products:
- - style-guide
----
-
-import { GitHubCode } from "~/components";
-
-The `GitHubCode` component allows you to include files from Cloudflare repositories.
-
-The remote content can be filtered by lines or a region enclosed in tags.
-
-## Import
-
-```mdx
-import { GitHubCode } from "~/components";
-```
-
-## Usage
-
-```mdx
-import { GitHubCode } from "~/components";
-
-
-import { foo } from "bar";
-
-const baz = foo();
-
-
-console.log(baz);
-*/}
-` Props
-
-### `repo`
-
-**required**
-**type:** `string`
-
-The owner and repository to pull from, in the form of `cloudflare/`
-
-For example:
-
-- `cloudflare/workers-rs`.
-- `cloudflare/templates`.
-
-### `file`
-
-**required**
-**type:** `string`
-
-The file path to pull from, in the form of `path/to/filename-including-extensions`. This path excludes the repo name.
-
-For example:
-
-- `templates/hello-world/src/lib.rs`.
-- `d1-starter-sessions-api/src/index.ts`.
-
-### `commit`
-
-**required**
-**type:** `string`
-
-The long (40-characters) Git commit hash to pull from, for example `ab3951b5c95329a600a7baa9f9bb1a7a95f1aeaa`.
-
-### `lang`
-
-**required**
-**type:** `string`
-
-The language to use for the code block, for example `rs`.
-
-### `useTypeScriptExample`
-
-**type:** `boolean`
-
-
-If the `lang` is `"ts"` and `useTypeScriptExample` is `true`, the [`TypeScriptExample`](/style-guide/components/typescript-example/) component will be used to provide a JavaScript tab as well.
-
-### `lines`
-
-**type:** `string`
-
-A range of lines to filter the content using, for example `1-3`.
-
-### `tag`
-
-**type:** `string`
-
-A region to filter the content with, for example `no-logging`.
-
-This should be represented as starting `` and closing ` ` comments in the source file.
-
-### `code`
-
-**type**: `object`
-
-Props to pass to the [Astro `Code` component](https://docs.astro.build/en/reference/api-reference/#code-).
-
-## Associated content types
-
-- [Tutorial](/style-guide/documentation-content-strategy/content-types/tutorial/)
\ No newline at end of file
diff --git a/src/content/docs/style-guide/components/typescript-example.mdx b/src/content/docs/style-guide/components/typescript-example.mdx
index b7e6aa093d2..cbfa82137fb 100644
--- a/src/content/docs/style-guide/components/typescript-example.mdx
+++ b/src/content/docs/style-guide/components/typescript-example.mdx
@@ -11,8 +11,6 @@ products:
The `TypeScriptExample` component uses [`ts-blank-space`](https://github.com/bloomberg/ts-blank-space) to remove TypeScript-specific syntax from your example and provide a JavaScript tab. This reduces maintenance burden by only having a single example to maintain.
-This component is automatically used in the [`GitHubCode`](/style-guide/components/github-code/) component when the `lang` is set to `ts`.
-
:::note
Some TypeScript syntax influences runtime behaviour, and cannot be stripped.
diff --git a/src/content/docs/style-guide/documentation-content-strategy/content-types/tutorial.mdx b/src/content/docs/style-guide/documentation-content-strategy/content-types/tutorial.mdx
index a76fdb23d94..0ff55623a61 100644
--- a/src/content/docs/style-guide/documentation-content-strategy/content-types/tutorial.mdx
+++ b/src/content/docs/style-guide/documentation-content-strategy/content-types/tutorial.mdx
@@ -58,7 +58,6 @@ For more details, refer to [`pcx_content_type`](/style-guide/frontmatter/custom-
#### Most used
-- [`GitHubCode`](/style-guide/components/github-code/)
- [`ListTutorials`](/style-guide/components/list-tutorials/)
#### Required
diff --git a/src/content/docs/style-guide/how-we-docs/image-maintenance.mdx b/src/content/docs/style-guide/how-we-docs/image-maintenance.mdx
index 2e27e05adfd..8ae3333b43c 100644
--- a/src/content/docs/style-guide/how-we-docs/image-maintenance.mdx
+++ b/src/content/docs/style-guide/how-we-docs/image-maintenance.mdx
@@ -8,8 +8,6 @@ products:
- style-guide
---
-import { GitHubCode } from "~/components";
-
Though valuable for user understanding, images are difficult to maintain. We have a few strategies that we use to help make this easier.
## Guidelines
@@ -43,14 +41,23 @@ What the GitHub action does is:
In combination with [flagging unused images](#flag-unused-images), we also have logic in our [build process](https://github.com/cloudflare/cloudflare-docs/blob/production/astro.config.ts) to validate image paths.
-redirects preserve continuity for your users and (friendly) bots.
@@ -76,13 +76,67 @@ We trigger this check _after_ we build our site. What it does it then call [`val
- Redirect targets with anchor links in them
-
+ Deploy a template
+
diff --git a/src/content/docs/workers/platform/infrastructure-as-code.mdx b/src/content/docs/workers/platform/infrastructure-as-code.mdx
index 345e55a62e9..a6523ff9688 100644
--- a/src/content/docs/workers/platform/infrastructure-as-code.mdx
+++ b/src/content/docs/workers/platform/infrastructure-as-code.mdx
@@ -8,7 +8,7 @@ products:
- workers
---
-import { GitHubCode, TabItem, Tabs } from "~/components";
+import { TypeScriptExample, TabItem, Tabs } from "~/components";
While [Wrangler](/workers/wrangler/configuration) makes it easy to upload and manage Workers, there are times when you need a more programmatic approach. This could involve using Infrastructure as Code (IaC) tools or interacting directly with the [Workers API](/api/resources/workers/). Examples include build and deploy scripts, CI/CD pipelines, custom developer tools, and automated testing.
@@ -382,13 +382,167 @@ resource "cloudflare_worker_version" "my_worker_version" {
This example uses the [cloudflare-typescript](https://github.com/cloudflare/cloudflare-typescript) SDK which provides convenient access to the Cloudflare REST API from server-side JavaScript or TypeScript.
-
+
+```ts
+#!/usr/bin/env -S npm run tsn -T
+
+/**
+ * Create and deploy a Worker
+ *
+ * Docs:
+ * - https://developers.cloudflare.com/workers/configuration/versions-and-deployments/
+ * - https://developers.cloudflare.com/workers/platform/infrastructure-as-code/
+ *
+ * Prerequisites:
+ * 1. Generate an API token: https://developers.cloudflare.com/fundamentals/api/get-started/create-token/
+ * 2. Find your account ID: https://developers.cloudflare.com/fundamentals/setup/find-account-and-zone-ids/
+ * 3. Find your workers.dev subdomain: https://developers.cloudflare.com/workers/configuration/routing/workers-dev/
+ *
+ * Environment variables:
+ * - CLOUDFLARE_API_TOKEN (required)
+ * - CLOUDFLARE_ACCOUNT_ID (required)
+ * - CLOUDFLARE_SUBDOMAIN (optional)
+ *
+ * Usage:
+ * Run this script to deploy a simple "Hello World" Worker.
+ * Access it at: my-hello-world-worker.$subdomain.workers.dev
+ */
+
+import { exit } from 'node:process';
+
+import Cloudflare from 'cloudflare';
+
+interface Config {
+ apiToken: string;
+ accountId: string;
+ subdomain: string | undefined;
+ workerName: string;
+}
+
+const WORKER_NAME = 'my-hello-world-worker';
+const SCRIPT_FILENAME = `${WORKER_NAME}.mjs`;
+
+function loadConfig(): Config {
+ const apiToken = process.env['CLOUDFLARE_API_TOKEN'];
+ if (!apiToken) {
+ throw new Error('Missing required environment variable: CLOUDFLARE_API_TOKEN');
+ }
+
+ const accountId = process.env['CLOUDFLARE_ACCOUNT_ID'];
+ if (!accountId) {
+ throw new Error('Missing required environment variable: CLOUDFLARE_ACCOUNT_ID');
+ }
+
+ const subdomain = process.env['CLOUDFLARE_SUBDOMAIN'];
+
+ return {
+ apiToken,
+ accountId,
+ subdomain: subdomain || undefined,
+ workerName: WORKER_NAME,
+ };
+}
+
+const config = loadConfig();
+const client = new Cloudflare({
+ apiToken: config.apiToken,
+});
+
+async function main(): Promise {
+ try {
+ console.log('🚀 Starting Worker creation and deployment...');
+
+ const scriptContent = `
+ export default {
+ async fetch(request, env, ctx) {
+ return new Response(env.MESSAGE, { status: 200 });
+ },
+ }`.trim();
+
+ let worker;
+ try {
+ worker = await client.workers.beta.workers.get(config.workerName, {
+ account_id: config.accountId,
+ });
+ console.log(`♻️ Worker ${config.workerName} already exists. Using it.`);
+ } catch (error) {
+ if (!(error instanceof Cloudflare.NotFoundError)) { throw error; }
+ console.log(`✏️ Creating Worker ${config.workerName}...`);
+ worker = await client.workers.beta.workers.create({
+ account_id: config.accountId,
+ name: config.workerName,
+ subdomain: {
+ enabled: config.subdomain !== undefined,
+ },
+ observability: {
+ enabled: true,
+ },
+ });
+ }
+
+ console.log(`⚙️ Worker id: ${worker.id}`);
+ console.log('✏️ Creating Worker version...');
+
+ // Create the first version of the Worker
+ const version = await client.workers.beta.workers.versions.create(worker.id, {
+ account_id: config.accountId,
+ main_module: SCRIPT_FILENAME,
+ compatibility_date: new Date().toISOString().split('T')[0]!,
+ bindings: [
+ {
+ type: 'plain_text',
+ name: 'MESSAGE',
+ text: 'Hello World!',
+ },
+ ],
+ modules: [
+ {
+ name: SCRIPT_FILENAME,
+ content_type: 'application/javascript+module',
+ content_base64: Buffer.from(scriptContent).toString('base64'),
+ },
+ ],
+ });
+
+ console.log(`⚙️ Version id: ${version.id}`);
+ console.log('🚚 Creating Worker deployment...');
+
+ // Create a deployment and point all traffic to the version we created
+ await client.workers.scripts.deployments.create(config.workerName, {
+ account_id: config.accountId,
+ strategy: 'percentage',
+ versions: [
+ {
+ percentage: 100,
+ version_id: version.id,
+ },
+ ],
+ });
+
+ console.log('✅ Deployment successful!');
+
+ if (config.subdomain) {
+ console.log(`
+🌍 Your Worker is live!
+📍 URL: https://${config.workerName}.${config.subdomain}.workers.dev/
+`);
+ } else {
+ console.log(`
+⚠️ Set up a route, custom domain, or workers.dev subdomain to access your Worker.
+Add CLOUDFLARE_SUBDOMAIN to your environment variables to set one up automatically.
+`);
+ }
+ } catch (error) {
+ console.error('❌ Deployment failed:', error);
+ exit(1);
+ }
+}
+
+main();
+```
+
+
## Cloudflare REST API
diff --git a/src/content/docs/workers/static-assets/direct-upload.mdx b/src/content/docs/workers/static-assets/direct-upload.mdx
index aab6097c0ec..f47159bb0fb 100644
--- a/src/content/docs/workers/static-assets/direct-upload.mdx
+++ b/src/content/docs/workers/static-assets/direct-upload.mdx
@@ -13,7 +13,6 @@ import {
Badge,
Description,
FileTree,
- GitHubCode,
InlineBadge,
Render,
TabItem,
@@ -217,10 +216,420 @@ Optionally, an assets binding can be provided if you wish to fetch and serve ass
This example is from [cloudflare-typescript](https://github.com/cloudflare/cloudflare-typescript/blob/main/examples/workers/script-with-assets-upload.ts).
-
+
+```ts
+#!/usr/bin/env -S npm run tsn -T
+
+/**
+ * Create a Worker that serves static assets
+ *
+ * This example demonstrates how to:
+ * - Upload static assets to Cloudflare Workers
+ * - Create and deploy a Worker that serves those assets
+ *
+ * Docs:
+ * - https://developers.cloudflare.com/workers/static-assets/direct-upload
+ *
+ * Prerequisites:
+ * 1. Generate an API token: https://developers.cloudflare.com/fundamentals/api/get-started/create-token/
+ * 2. Find your account ID: https://developers.cloudflare.com/fundamentals/setup/find-account-and-zone-ids/
+ * 3. Find your workers.dev subdomain: https://developers.cloudflare.com/workers/configuration/routing/workers-dev/
+ *
+ * Environment variables:
+ * - CLOUDFLARE_API_TOKEN (required)
+ * - CLOUDFLARE_ACCOUNT_ID (required)
+ * - ASSETS_DIRECTORY (required)
+ * - CLOUDFLARE_SUBDOMAIN (optional)
+ *
+ * Usage:
+ * Place your static files in the ASSETS_DIRECTORY, then run this script.
+ * Assets will be available at: my-script-with-assets.$subdomain.workers.dev/$filename
+ */
+
+import crypto from 'crypto';
+import fs from 'fs';
+import { readFile } from 'node:fs/promises';
+import { extname } from 'node:path';
+import path from 'path';
+import { exit } from 'node:process';
+
+import Cloudflare from 'cloudflare';
+
+interface Config {
+ apiToken: string;
+ accountId: string;
+ assetsDirectory: string;
+ subdomain: string | undefined;
+ workerName: string;
+}
+
+interface AssetManifest {
+ [path: string]: {
+ hash: string;
+ size: number;
+ };
+}
+
+interface UploadPayload {
+ [hash: string]: string; // base64 encoded content
+}
+
+const WORKER_NAME = 'my-worker-with-assets';
+const SCRIPT_FILENAME = `${WORKER_NAME}.mjs`;
+
+function loadConfig(): Config {
+ const apiToken = process.env['CLOUDFLARE_API_TOKEN'];
+ if (!apiToken) {
+ throw new Error('Missing required environment variable: CLOUDFLARE_API_TOKEN');
+ }
+
+ const accountId = process.env['CLOUDFLARE_ACCOUNT_ID'];
+ if (!accountId) {
+ throw new Error('Missing required environment variable: CLOUDFLARE_ACCOUNT_ID');
+ }
+
+ const assetsDirectory = process.env['ASSETS_DIRECTORY'];
+ if (!assetsDirectory) {
+ throw new Error('Missing required environment variable: ASSETS_DIRECTORY');
+ }
+
+ if (!fs.existsSync(assetsDirectory)) {
+ throw new Error(`Assets directory does not exist: ${assetsDirectory}`);
+ }
+
+ const subdomain = process.env['CLOUDFLARE_SUBDOMAIN'];
+
+ return {
+ apiToken,
+ accountId,
+ assetsDirectory,
+ subdomain: subdomain || undefined,
+ workerName: WORKER_NAME,
+ };
+}
+
+const config = loadConfig();
+const client = new Cloudflare({
+ apiToken: config.apiToken,
+});
+
+/**
+ * Recursively reads all files from a directory and creates a manifest
+ * mapping file paths to their hash and size.
+ */
+function createManifest(directory: string): AssetManifest {
+ const manifest: AssetManifest = {};
+
+ function processDirectory(currentDir: string, basePath = ''): void {
+ try {
+ const entries = fs.readdirSync(currentDir, { withFileTypes: true });
+
+ for (const entry of entries) {
+ const fullPath = path.join(currentDir, entry.name);
+ const relativePath = path.join(basePath, entry.name);
+
+ if (entry.isDirectory()) {
+ processDirectory(fullPath, relativePath);
+ } else if (entry.isFile()) {
+ try {
+ const fileContent = fs.readFileSync(fullPath);
+ const extension = extname(relativePath).substring(1);
+
+ // Generate a hash for the file
+ const hash = crypto
+ .createHash('sha256')
+ .update(fileContent.toString('base64') + extension)
+ .digest('hex')
+ .slice(0, 32);
+
+ // Normalize path separators to forward slashes
+ const manifestPath = `/${relativePath.replace(/\\/g, '/')}`;
+
+ manifest[manifestPath] = {
+ hash,
+ size: fileContent.length,
+ };
+
+ console.log(`Added to manifest: ${manifestPath} (${fileContent.length} bytes)`);
+ } catch (error) {
+ console.warn(`Failed to process file ${fullPath}:`, error);
+ }
+ }
+ }
+ } catch (error) {
+ throw new Error(`Failed to read directory ${currentDir}: ${error}`);
+ }
+ }
+
+ processDirectory(directory);
+
+ if (Object.keys(manifest).length === 0) {
+ throw new Error(`No files found in assets directory: ${directory}`);
+ }
+
+ console.log(`Created manifest with ${Object.keys(manifest).length} files`);
+ return manifest;
+}
+
+/**
+ * Generates the Worker script content that serves static assets
+ */
+function generateWorkerScript(exampleFile: string): string {
+ return `
+export default {
+ async fetch(request, env, ctx) {
+ const url = new URL(request.url);
+
+ // Serve a simple index page at the root
+ if (url.pathname === '/') {
+ return new Response(
+ \`
+
+
+ Static Assets Worker
+
+
+
+ This Worker serves static assets!
+
+ To access your assets, add /filename to the URL.
+ Try visiting /${exampleFile}
+
+
+\`,
+ {
+ status: 200,
+ headers: { 'Content-Type': 'text/html' }
+ }
+ );
+ }
+
+ // Serve static assets for all other paths
+ return env.ASSETS.fetch(request);
+ }
+};
+ `.trim();
+}
+
+/**
+ * Creates upload payloads from buckets and manifest
+ */
+async function createUploadPayloads(
+ buckets: string[][],
+ manifest: AssetManifest,
+ assetsDirectory: string
+): Promise {
+ const payloads: UploadPayload[] = [];
+
+ for (const bucket of buckets) {
+ const payload: UploadPayload = {};
+
+ for (const hash of bucket) {
+ // Find the file path for this hash
+ const manifestEntry = Object.entries(manifest).find(
+ ([_, data]) => data.hash === hash
+ );
+
+ if (!manifestEntry) {
+ throw new Error(`Could not find file for hash: ${hash}`);
+ }
+
+ const [relativePath] = manifestEntry;
+ const fullPath = path.join(assetsDirectory, relativePath);
+
+ try {
+ const fileContent = await readFile(fullPath);
+ payload[hash] = fileContent.toString('base64');
+ console.log(`Prepared for upload: ${relativePath}`);
+ } catch (error) {
+ throw new Error(`Failed to read file ${fullPath}: ${error}`);
+ }
+ }
+
+ payloads.push(payload);
+ }
+
+ return payloads;
+}
+
+/**
+ * Uploads asset payloads
+ */
+async function uploadAssets(
+ payloads: UploadPayload[],
+ uploadJwt: string,
+ accountId: string
+): Promise {
+ let completionJwt: string | undefined;
+
+ console.log(`Uploading ${payloads.length} payload(s)...`);
+
+ for (let i = 0; i < payloads.length; i++) {
+ const payload = payloads[i]!;
+ console.log(`Uploading payload ${i + 1}/${payloads.length}...`);
+
+ try {
+ const response = await client.workers.assets.upload.create(
+ {
+ account_id: accountId,
+ base64: true,
+ body: payload,
+ },
+ {
+ headers: { Authorization: `Bearer ${uploadJwt}` },
+ }
+ );
+
+ if (response?.jwt) {
+ completionJwt = response.jwt;
+ }
+ } catch (error) {
+ throw new Error(`Failed to upload payload ${i + 1}: ${error}`);
+ }
+ }
+
+ if (!completionJwt) {
+ throw new Error('Upload completed but no completion JWT received');
+ }
+
+ console.log('✅ All assets uploaded successfully');
+ return completionJwt;
+}
+
+async function main(): Promise {
+ try {
+ console.log('🚀 Starting Worker creation and deployment with static assets...');
+ console.log(`📁 Assets directory: ${config.assetsDirectory}`);
+
+ console.log('📝 Creating asset manifest...');
+ const manifest = createManifest(config.assetsDirectory);
+ const exampleFile = Object.keys(manifest)[0]?.replace(/^\//, '') || 'file.txt';
+
+ const scriptContent = generateWorkerScript(exampleFile);
+
+ let worker;
+ try {
+ worker = await client.workers.beta.workers.get(config.workerName, {
+ account_id: config.accountId,
+ });
+ console.log(`♻️ Worker ${config.workerName} already exists. Using it.`);
+ } catch (error) {
+ if (!(error instanceof Cloudflare.NotFoundError)) { throw error; }
+ console.log(`✏️ Creating Worker ${config.workerName}...`);
+ worker = await client.workers.beta.workers.create({
+ account_id: config.accountId,
+ name: config.workerName,
+ subdomain: {
+ enabled: config.subdomain !== undefined,
+ },
+ observability: {
+ enabled: true,
+ },
+ });
+ }
+
+ console.log(`⚙️ Worker id: ${worker.id}`);
+ console.log('🔄 Starting asset upload session...');
+
+ const uploadResponse = await client.workers.scripts.assets.upload.create(
+ config.workerName,
+ {
+ account_id: config.accountId,
+ manifest,
+ }
+ );
+
+ const { buckets, jwt: uploadJwt } = uploadResponse;
+
+ if (!uploadJwt || !buckets) {
+ throw new Error('Failed to start asset upload session');
+ }
+
+ let completionJwt: string;
+
+ if (buckets.length === 0) {
+ console.log('✅ No new assets to upload!');
+ // Use the initial upload JWT as completion JWT when no uploads are needed
+ completionJwt = uploadJwt;
+ } else {
+ const payloads = await createUploadPayloads(
+ buckets,
+ manifest,
+ config.assetsDirectory
+ );
+
+ completionJwt = await uploadAssets(
+ payloads,
+ uploadJwt,
+ config.accountId
+ );
+ }
+
+ console.log('✏️ Creating Worker version...');
+
+ // Create a new version with assets
+ const version = await client.workers.beta.workers.versions.create(worker.id, {
+ account_id: config.accountId,
+ main_module: SCRIPT_FILENAME,
+ compatibility_date: new Date().toISOString().split('T')[0]!,
+ bindings: [
+ {
+ type: 'assets',
+ name: 'ASSETS',
+ },
+ ],
+ assets: {
+ jwt: completionJwt,
+ },
+ modules: [
+ {
+ name: SCRIPT_FILENAME,
+ content_type: 'application/javascript+module',
+ content_base64: Buffer.from(scriptContent).toString('base64'),
+ },
+ ],
+ });
+
+ console.log('🚚 Creating Worker deployment...');
+
+ // Create a deployment and point all traffic to the version we created
+ await client.workers.scripts.deployments.create(config.workerName, {
+ account_id: config.accountId,
+ strategy: 'percentage',
+ versions: [
+ {
+ percentage: 100,
+ version_id: version.id,
+ },
+ ],
+ });
+
+ console.log('✅ Deployment successful!');
+
+ if (config.subdomain) {
+ console.log(`
+🌍 Your Worker is live!
+📍 Base URL: https://${config.workerName}.${config.subdomain}.workers.dev/
+📄 Try accessing: https://${config.workerName}.${config.subdomain}.workers.dev/${exampleFile}
+`);
+ } else {
+ console.log(`
+⚠️ Set up a route, custom domain, or workers.dev subdomain to access your Worker.
+Add CLOUDFLARE_SUBDOMAIN to your environment variables to set one up automatically.
+`);
+ }
+ } catch (error) {
+ console.error('❌ Deployment failed:', error);
+ exit(1);
+ }
+}
+
+main();
+```
+
+
diff --git a/src/content/docs/workers/tutorials/deploy-an-express-app.mdx b/src/content/docs/workers/tutorials/deploy-an-express-app.mdx
index 63a565491ae..9a516b3ef59 100644
--- a/src/content/docs/workers/tutorials/deploy-an-express-app.mdx
+++ b/src/content/docs/workers/tutorials/deploy-an-express-app.mdx
@@ -10,12 +10,7 @@ description: >-
Learn how to deploy an Express.js application on Cloudflare Workers.
---
-import {
- Render,
- WranglerConfig,
- PackageManagers,
- GitHubCode,
-} from "~/components";
+import { Render, WranglerConfig, PackageManagers } from "~/components";
In this tutorial, you will learn how to deploy an [Express.js](https://expressjs.com/) application on Cloudflare Workers using the [Cloudflare Workers platform](/workers/) and [D1 database](/d1/). You will build a Members Registry API with basic Create, Read, Update, and Delete (CRUD) operations. You will use D1 as the database for storing and retrieving member data.
@@ -134,16 +129,21 @@ The binding will be added to your Wrangler configuration file.
Create a directory called `schemas` in your project root, and inside it, create a file called `schema.sql`:
-
+
+```ts
+export class MyWorkflow extends WorkflowEntrypoint {
+ private db!: DatabaseService;
+
+ async run(event: WorkflowEvent, step: WorkflowStep) {
+ this.db = new DatabaseService(this.env.DB);
+ const { imageKey } = event.payload;
+
+ await step.do('Insert image name into database', async () => {
+ await this.db.insertImage(imageKey, event.instanceId);
+ });
+
+ const waitForApproval = await step.waitForEvent('Wait for AI Image tagging approval', {
+ type: 'approval-for-ai-tagging',
+ timeout: '5 minute',
+ });
+
+ const approvalPayload = waitForApproval.payload as ApprovalRequest;
+ if (approvalPayload?.approved) {
+ const aiTags = await step.do('Generate AI tags', async () => {
+ const image = await this.env.workflow_demo_bucket.get(imageKey);
+ if (!image) throw new Error('Image not found');
+
+ const arrayBuffer = await image.arrayBuffer();
+ const uint8Array = new Uint8Array(arrayBuffer);
+
+ const input = {
+ image: Array.from(uint8Array),
+ prompt: AI_CONFIG.PROMPT,
+ max_tokens: AI_CONFIG.MAX_TOKENS,
+ };
+
+ const response = await this.env.AI.run(AI_CONFIG.MODEL, input);
+ return response.description;
+ });
+
+ await step.do('Update DB with AI tags', async () => {
+ await this.db.updateImageTags(event.instanceId, aiTags);
+ });
+ }
+ }
+}
+```
+
+
## Workflow wrangler.jsonc
diff --git a/src/mdx-components.ts b/src/mdx-components.ts
index bff2deb24ed..99cf191283e 100644
--- a/src/mdx-components.ts
+++ b/src/mdx-components.ts
@@ -33,7 +33,6 @@ import YouTube from "./components/cf/YouTube.astro";
import Example from "./components/cf/Example.astro";
import Markdown from "./components/cf/Markdown.astro";
import CURL from "./components/cf/CURL.astro";
-import GitHubCode from "./components/cf/GitHubCode.astro";
import Width from "./components/cf/Width.astro";
import RuleID from "./components/cf/RuleID.astro";
import PublicStats from "./components/cf/PublicStats.astro";
@@ -65,7 +64,6 @@ export const components = {
Feature,
FeatureTable,
FileTree,
- GitHubCode,
Glossary,
GlossaryDefinition,
GlossaryTooltip,
diff --git a/src/util/api.ts b/src/util/api.ts
index b6927f55efb..beb3b1f3df7 100644
--- a/src/util/api.ts
+++ b/src/util/api.ts
@@ -4,8 +4,8 @@
* CF source: cloudflare-docs/src/util/api.ts — 1:1 port.
*
* Fetches the Cloudflare API OpenAPI document from the gh-code worker at a
- * PINNED commit (same reproducibility model as cf/GitHubCode.astro) and
- * dereferences all `$ref`s. Memoized at module scope so the fetch + deref run
+ * PINNED commit and dereferences all `$ref`s. Memoized at module scope so the
+ * fetch + deref run
* once per build, not per component instance.
*
* Reproducibility (migration WS9): the COMMIT below MUST match upstream's pin
diff --git a/src/util/github.ts b/src/util/github.ts
deleted file mode 100644
index 32ae1362b2e..00000000000
--- a/src/util/github.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-export async function fetchWithToken(
- req: Parameters[0],
- init?: Parameters[1],
-) {
- if (!import.meta.env.GITHUB_TOKEN) {
- const res = await fetch(req);
-
- if (res.status === 403 || res.status === 429) {
- throw new Error(
- `A request to the GitHub API (${res.url}) was made without a token and was rate limited.\nIf you have the "gh" CLI installed, you can get a token like so: "GITHUB_TOKEN=$(gh auth token) npx astro dev"`,
- );
- }
-
- return res;
- }
-
- const request = new Request(req, init);
-
- return fetch(request, {
- ...request,
- headers: {
- ...request.headers,
- Authorization: `Bearer ${import.meta.env.GITHUB_TOKEN}`,
- },
- });
-}