create-cloudflare 0.0.0-bd00dc82 → 0.0.0-bd7d79a2c

package/templates/hello-world/ts/tsconfig.json

@@ -13,7 +13,7 @@
 		/* Language and Environment */
 		"target": "es2021" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
 		"lib": ["es2021"] /* Specify a set of bundled library declaration files that describe the target runtime environment. */,
-		"jsx": "react" /* Specify what JSX code is generated. */,
+		"jsx": "react-jsx" /* Specify what JSX code is generated. */,
 		// "experimentalDecorators": true,                   /* Enable experimental support for TC39 stage 2 draft decorators. */
 		// "emitDecoratorMetadata": true,                    /* Emit design-type metadata for decorated declarations in source files. */
 		// "jsxFactory": "",                                 /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h' */
@@ -98,5 +98,6 @@
 		// "skipDefaultLibCheck": true,                      /* Skip type checking .d.ts files that are included with TypeScript. */
 		"skipLibCheck": true /* Skip type checking all .d.ts files. */
 	},
-	"exclude": ["test"]
+	"exclude": ["test"],
+	"include": ["worker-configuration.d.ts", "src/**/*.ts"]
 }

package/templates/hello-world/ts/vitest.config.mts

@@ -0,0 +1,11 @@
+import { defineWorkersConfig } from '@cloudflare/vitest-pool-workers/config';
+
+export default defineWorkersConfig({
+	test: {
+		poolOptions: {
+			workers: {
+				wrangler: { configPath: './wrangler.toml' },
+			},
+		},
+	},
+});

package/templates/hello-world/ts/worker-configuration.d.ts

@@ -0,0 +1,4 @@
+// Generated by Wrangler
+// After adding bindings to `wrangler.toml`, regenerate this interface via `npm run cf-typegen`
+interface Env {
+}

package/templates/hello-world/ts/wrangler.toml

@@ -1,11 +1,21 @@
+#:schema node_modules/wrangler/config-schema.json
 name = "<TBD>"
 main = "src/index.ts"
 compatibility_date = "<TBD>"
 compatibility_flags = ["nodejs_compat"]
 
+# Automatically place your workloads in an optimal location to minimize latency.
+# If you are running back-end logic in a Worker, running it closer to your back-end infrastructure
+# rather than the end user may result in better performance.
+# Docs: https://developers.cloudflare.com/workers/configuration/smart-placement/#smart-placement
+# [placement]
+# mode = "smart"
+
 # Variable bindings. These are arbitrary, plaintext strings (similar to environment variables)
+# Docs:
+# - https://developers.cloudflare.com/workers/wrangler/configuration/#environment-variables
 # Note: Use secrets to store sensitive data.
-# Docs: https://developers.cloudflare.com/workers/wrangler/configuration/#environment-variables
+# - https://developers.cloudflare.com/workers/configuration/secrets/
 # [vars]
 # MY_VARIABLE = "production_value"
 

package/templates/hello-world-durable-object/c3.ts

@@ -1,7 +1,9 @@
 export default {
 	configVersion: 1,
 	id: "hello-world-durable-object",
-	displayName: '"Hello World" Durable Object',
+	displayName: "Hello World Worker Using Durable Objects",
+	description:
+		"Get started with a basic stateful app to build projects like real-time chats, collaborative apps, and multiplayer games",
 	platform: "workers",
 	copyFiles: {
 		variants: {

package/templates/hello-world-durable-object/js/package.json

@@ -8,6 +8,6 @@
 		"start": "wrangler dev"
 	},
 	"devDependencies": {
-		"wrangler": "^3.0.0"
+		"wrangler": "^3.60.3"
 	}
 }

package/templates/hello-world-durable-object/js/src/index.js

@@ -1,3 +1,5 @@
+import { DurableObject } from "cloudflare:workers";
+
 /**
  * Welcome to Cloudflare Workers! This is your first Durable Objects application.
  *
@@ -16,25 +18,27 @@
  */
 
 /** A Durable Object's behavior is defined in an exported Javascript class */
-export class MyDurableObject {
+export class MyDurableObject extends DurableObject {
 	/**
 	 * The constructor is invoked once upon creation of the Durable Object, i.e. the first call to
-	 * 	`DurableObjectStub::get` for a given identifier
+	 * 	`DurableObjectStub::get` for a given identifier (no-op constructors can be omitted)
 	 *
-	 * @param {DurableObjectState} state - The interface for interacting with Durable Object state
+	 * @param {DurableObjectState} ctx - The interface for interacting with Durable Object state
 	 * @param {Env} env - The interface to reference bindings declared in wrangler.toml
 	 */
-	constructor(state, env) {}
+	constructor(ctx, env) {
+		super(ctx, env);
+	}
 
 	/**
-	 * The Durable Object fetch handler will be invoked when a Durable Object instance receives a
-	 * 	request from a Worker via an associated stub
+	 * The Durable Object exposes an RPC method sayHello which will be invoked when when a Durable
+	 *  Object instance receives a request from a Worker via the same method invocation on the stub
 	 *
-	 * @param {Request} request - The request submitted to a Durable Object instance from a Worker
-	 * @returns {Promise<Response>} The response to be sent back to the Worker
+	 * @param {string} name - The name provided to a Durable Object instance from a Worker
+	 * @returns {Promise<string>} The greeting to be sent back to the Worker
 	 */
-	async fetch(request) {
-		return new Response('Hello World');
+	async sayHello(name) {
+		return `Hello, ${name}!`;
 	}
 }
 
@@ -56,10 +60,10 @@ export default {
 		// The Durable Object constructor will be invoked upon the first call for a given id
 		let stub = env.MY_DURABLE_OBJECT.get(id);
 
-		// We call `fetch()` on the stub to send a request to the Durable Object instance
-		// The Durable Object instance will invoke its fetch handler to handle the request
-		let response = await stub.fetch(request);
+		// We call the `sayHello()` RPC method on the stub to invoke the method on the remote
+		// Durable Object instance
+		let greeting = await stub.sayHello("world");
 
-		return response;
+		return new Response(greeting);
 	},
 };

package/templates/hello-world-durable-object/js/wrangler.toml

@@ -1,10 +1,20 @@
+#:schema node_modules/wrangler/config-schema.json
 name = "<TBD>"
-main = "src/index.ts"
+main = "src/index.js"
 compatibility_date = "<TBD>"
 
+# Automatically place your workloads in an optimal location to minimize latency.
+# If you are running back-end logic in a Worker, running it closer to your back-end infrastructure
+# rather than the end user may result in better performance.
+# Docs: https://developers.cloudflare.com/workers/configuration/smart-placement/#smart-placement
+# [placement]
+# mode = "smart"
+
 # Variable bindings. These are arbitrary, plaintext strings (similar to environment variables)
+# Docs:
+# - https://developers.cloudflare.com/workers/wrangler/configuration/#environment-variables
 # Note: Use secrets to store sensitive data.
-# Docs: https://developers.cloudflare.com/workers/wrangler/configuration/#environment-variables
+# - https://developers.cloudflare.com/workers/configuration/secrets/
 # [vars]
 # MY_VARIABLE = "production_value"
 

package/templates/hello-world-durable-object/ts/package.json

@@ -5,11 +5,11 @@
 	"scripts": {
 		"deploy": "wrangler deploy",
 		"dev": "wrangler dev",
-		"start": "wrangler dev"
+		"start": "wrangler dev",
+		"cf-typegen": "wrangler types"
 	},
 	"devDependencies": {
-		"@cloudflare/workers-types": "^4.20231218.0",
-		"typescript": "^5.0.4",
-		"wrangler": "^3.0.0"
+		"typescript": "^5.5.2",
+		"wrangler": "^3.60.3"
 	}
 }

package/templates/hello-world-durable-object/ts/src/index.ts

@@ -1,3 +1,5 @@
+import { DurableObject } from "cloudflare:workers";
+
 /**
  * Welcome to Cloudflare Workers! This is your first Durable Objects application.
  *
@@ -5,9 +7,13 @@
  * - Open a browser tab at http://localhost:8787/ to see your Durable Object in action
  * - Run `npm run deploy` to publish your application
  *
+ * Bind resources to your worker in `wrangler.toml`. After adding bindings, a type definition for the
+ * `Env` object can be regenerated with `npm run cf-typegen`.
+ *
  * Learn more at https://developers.cloudflare.com/durable-objects
  */
 
+
 /**
  * Associate bindings declared in wrangler.toml with the TypeScript type system
  */
@@ -16,7 +22,7 @@ export interface Env {
 	// MY_KV_NAMESPACE: KVNamespace;
 	//
 	// Example binding to Durable Object. Learn more at https://developers.cloudflare.com/workers/runtime-apis/durable-objects/
-	MY_DURABLE_OBJECT: DurableObjectNamespace;
+	MY_DURABLE_OBJECT: DurableObjectNamespace<MyDurableObject>;
 	//
 	// Example binding to R2. Learn more at https://developers.cloudflare.com/workers/runtime-apis/r2/
 	// MY_BUCKET: R2Bucket;
@@ -29,25 +35,27 @@ export interface Env {
 }
 
 /** A Durable Object's behavior is defined in an exported Javascript class */
-export class MyDurableObject {
+export class MyDurableObject extends DurableObject {
 	/**
 	 * The constructor is invoked once upon creation of the Durable Object, i.e. the first call to
-	 * 	`DurableObjectStub::get` for a given identifier
+	 * 	`DurableObjectStub::get` for a given identifier (no-op constructors can be omitted)
 	 *
-	 * @param state - The interface for interacting with Durable Object state
+	 * @param ctx - The interface for interacting with Durable Object state
 	 * @param env - The interface to reference bindings declared in wrangler.toml
 	 */
-	constructor(state: DurableObjectState, env: Env) {}
+	constructor(ctx: DurableObjectState, env: Env) {
+		super(ctx, env);
+	}
 
 	/**
-	 * The Durable Object fetch handler will be invoked when a Durable Object instance receives a
-	 * 	request from a Worker via an associated stub
+	 * The Durable Object exposes an RPC method sayHello which will be invoked when when a Durable
+	 *  Object instance receives a request from a Worker via the same method invocation on the stub
 	 *
-	 * @param request - The request submitted to a Durable Object instance from a Worker
-	 * @returns The response to be sent back to the Worker
+	 * @param name - The name provided to a Durable Object instance from a Worker
+	 * @returns The greeting to be sent back to the Worker
 	 */
-	async fetch(request: Request): Promise<Response> {
-		return new Response('Hello World');
+	async sayHello(name: string): Promise<string> {
+		return `Hello, ${name}!`;
 	}
 }
 
@@ -60,19 +68,19 @@ export default {
 	 * @param ctx - The execution context of the Worker
 	 * @returns The response to be sent back to the client
 	 */
-	async fetch(request: Request, env: Env, ctx: ExecutionContext): Promise<Response> {
+	async fetch(request, env, ctx): Promise<Response> {
 		// We will create a `DurableObjectId` using the pathname from the Worker request
 		// This id refers to a unique instance of our 'MyDurableObject' class above
 		let id: DurableObjectId = env.MY_DURABLE_OBJECT.idFromName(new URL(request.url).pathname);
 
 		// This stub creates a communication channel with the Durable Object instance
 		// The Durable Object constructor will be invoked upon the first call for a given id
-		let stub: DurableObjectStub = env.MY_DURABLE_OBJECT.get(id);
+		let stub = env.MY_DURABLE_OBJECT.get(id);
 
-		// We call `fetch()` on the stub to send a request to the Durable Object instance
-		// The Durable Object instance will invoke its fetch handler to handle the request
-		let response = await stub.fetch(request);
+		// We call the `sayHello()` RPC method on the stub to invoke the method on the remote
+		// Durable Object instance
+		let greeting = await stub.sayHello("world");
 
-		return response;
+		return new Response(greeting);
 	},
-};
+} satisfies ExportedHandler<Env>;

package/templates/hello-world-durable-object/ts/tsconfig.json

@@ -13,7 +13,7 @@
 		/* Language and Environment */
 		"target": "es2021" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
 		"lib": ["es2021"] /* Specify a set of bundled library declaration files that describe the target runtime environment. */,
-		"jsx": "react" /* Specify what JSX code is generated. */,
+		"jsx": "react-jsx" /* Specify what JSX code is generated. */,
 		// "experimentalDecorators": true,                   /* Enable experimental support for TC39 stage 2 draft decorators. */
 		// "emitDecoratorMetadata": true,                    /* Emit design-type metadata for decorated declarations in source files. */
 		// "jsxFactory": "",                                 /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h' */

package/templates/hello-world-durable-object/ts/worker-configuration.d.ts

@@ -0,0 +1,6 @@
+// Generated by Wrangler
+// After adding bindings to `wrangler.toml`, regenerate this interface via `npm run cf-typegen`
+interface Env {
+	MY_DURABLE_OBJECT: DurableObjectNamespace;
+}
+

package/templates/hello-world-durable-object/ts/wrangler.toml

@@ -1,10 +1,20 @@
+#:schema node_modules/wrangler/config-schema.json
 name = "<TBD>"
 main = "src/index.ts"
 compatibility_date = "<TBD>"
 
+# Automatically place your workloads in an optimal location to minimize latency.
+# If you are running back-end logic in a Worker, running it closer to your back-end infrastructure
+# rather than the end user may result in better performance.
+# Docs: https://developers.cloudflare.com/workers/configuration/smart-placement/#smart-placement
+# [placement]
+# mode = "smart"
+
 # Variable bindings. These are arbitrary, plaintext strings (similar to environment variables)
+# Docs:
+# - https://developers.cloudflare.com/workers/wrangler/configuration/#environment-variables
 # Note: Use secrets to store sensitive data.
-# Docs: https://developers.cloudflare.com/workers/wrangler/configuration/#environment-variables
+# - https://developers.cloudflare.com/workers/configuration/secrets/
 # [vars]
 # MY_VARIABLE = "production_value"
 
@@ -38,13 +48,13 @@ compatibility_date = "<TBD>"
 
 # Bind a Durable Object. Durable objects are a scale-to-zero compute primitive based on the actor model.
 # Durable Objects can live for as long as needed. Use these when you need a long-running "server", such as in realtime apps.
-# Docs: https://developers.cloudflare.com/workers/runtime-apis/durable-objects
+# Docs: https://developers.cloudflare.com/workers/wrangler/configuration/#durable-objects
 [[durable_objects.bindings]]
 name = "MY_DURABLE_OBJECT"
 class_name = "MyDurableObject"
 
 # Durable Object migrations.
-# Docs: https://developers.cloudflare.com/workers/learning/using-durable-objects#configure-durable-object-classes-with-migrations
+# Docs: https://developers.cloudflare.com/workers/wrangler/configuration/#migrations
 [[migrations]]
 tag = "v1"
 new_classes = ["MyDurableObject"]
@@ -95,4 +105,3 @@ new_classes = ["MyDurableObject"]
 # [[vectorize]]
 # binding = "MY_INDEX"
 # index_name = "my-index"
-

package/templates/hono/c3.ts

@@ -1,24 +1,67 @@
 import { logRaw } from "@cloudflare/cli";
+import { brandColor, dim } from "@cloudflare/cli/colors";
+import { spinner } from "@cloudflare/cli/interactive";
 import { runFrameworkGenerator } from "frameworks/index";
+import { loadTemplateSnippets, transformFile } from "helpers/codemod";
+import { detectPackageManager } from "helpers/packageManagers";
 import type { TemplateConfig } from "../../src/templates";
+import type * as recast from "recast";
 import type { C3Context } from "types";
 
 const generate = async (ctx: C3Context) => {
+	const { name: pm } = detectPackageManager();
+
 	await runFrameworkGenerator(ctx, [
 		ctx.project.name,
 		"--template",
 		"cloudflare-workers",
+		"--install",
+		"--pm",
+		pm,
 	]);
 
 	logRaw(""); // newline
 };
 
+const configure = async (ctx: C3Context) => {
+	const indexFile = "src/index.ts";
+
+	const s = spinner();
+	s.start(`Updating \`${indexFile}\``);
+
+	const snippets = loadTemplateSnippets(ctx);
+
+	transformFile(indexFile, {
+		visitVariableDeclarator(n) {
+			if (n.node.id.type === "Identifier" && n.node.id.name === "app") {
+				n.node.init = snippets
+					.appDeclarationTs[0] as recast.types.namedTypes.NewExpression;
+
+				return false;
+			}
+		},
+	});
+
+	s.stop(`${brandColor("updated")} \`${dim(indexFile)}\``);
+};
+
 const config: TemplateConfig = {
 	configVersion: 1,
 	id: "hono",
 	displayName: "Hono",
+	copyFiles: {
+		path: "./templates",
+	},
 	platform: "workers",
 	generate,
+	configure,
+	transformPackageJson: async () => ({
+		scripts: {
+			dev: "wrangler dev",
+			deploy: "wrangler deploy --minify",
+			"cf-typegen": "wrangler types --env-interface CloudflareBindings",
+		},
+	}),
 	devScript: "dev",
 	deployScript: "deploy",
 };

package/templates/hono/snippets/appDeclaration.ts

@@ -0,0 +1 @@
+new Hono<{ Bindings: CloudflareBindings }>()

package/templates/hono/templates/worker-configuration.d.ts

@@ -0,0 +1,4 @@
+// Generated by Wrangler
+// After adding bindings to `wrangler.toml`, regenerate this interface via `npm run cf-typegen`
+interface CloudflareBindings {
+}

package/templates/hono/templates/wrangler.toml

@@ -0,0 +1,107 @@
+#:schema node_modules/wrangler/config-schema.json
+name = "<TBD>"
+main = "src/index.ts"
+compatibility_date = "<TBD>"
+
+# Automatically place your workloads in an optimal location to minimize latency.
+# If you are running back-end logic in a Worker, running it closer to your back-end infrastructure
+# rather than the end user may result in better performance.
+# Docs: https://developers.cloudflare.com/workers/configuration/smart-placement/#smart-placement
+# [placement]
+# mode = "smart"
+
+# Variable bindings. These are arbitrary, plaintext strings (similar to environment variables)
+# Docs:
+# - https://developers.cloudflare.com/workers/wrangler/configuration/#environment-variables
+# Note: Use secrets to store sensitive data.
+# - https://developers.cloudflare.com/workers/configuration/secrets/
+# [vars]
+# MY_VARIABLE = "production_value"
+
+# Bind the Workers AI model catalog. Run machine learning models, powered by serverless GPUs, on Cloudflare’s global network
+# Docs: https://developers.cloudflare.com/workers/wrangler/configuration/#workers-ai
+# [ai]
+# binding = "AI"
+
+# Bind an Analytics Engine dataset. Use Analytics Engine to write analytics within your Pages Function.
+# Docs: https://developers.cloudflare.com/workers/wrangler/configuration/#analytics-engine-datasets
+# [[analytics_engine_datasets]]
+# binding = "MY_DATASET"
+
+# Bind a headless browser instance running on Cloudflare's global network.
+# Docs: https://developers.cloudflare.com/workers/wrangler/configuration/#browser-rendering
+# [browser]
+# binding = "MY_BROWSER"
+
+# Bind a D1 database. D1 is Cloudflare’s native serverless SQL database.
+# Docs: https://developers.cloudflare.com/workers/wrangler/configuration/#d1-databases
+# [[d1_databases]]
+# binding = "MY_DB"
+# database_name = "my-database"
+# database_id = "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
+
+# Bind a dispatch namespace. Use Workers for Platforms to deploy serverless functions programmatically on behalf of your customers.
+# Docs: https://developers.cloudflare.com/workers/wrangler/configuration/#dispatch-namespace-bindings-workers-for-platforms
+# [[dispatch_namespaces]]
+# binding = "MY_DISPATCHER"
+# namespace = "my-namespace"
+
+# Bind a Durable Object. Durable objects are a scale-to-zero compute primitive based on the actor model.
+# Durable Objects can live for as long as needed. Use these when you need a long-running "server", such as in realtime apps.
+# Docs: https://developers.cloudflare.com/workers/wrangler/configuration/#durable-objects
+# [[durable_objects.bindings]]
+# name = "MY_DURABLE_OBJECT"
+# class_name = "MyDurableObject"
+
+# Durable Object migrations.
+# Docs: https://developers.cloudflare.com/workers/wrangler/configuration/#migrations
+# [[migrations]]
+# tag = "v1"
+# new_classes = ["MyDurableObject"]
+
+# Bind a Hyperdrive configuration. Use to accelerate access to your existing databases from Cloudflare Workers.
+# Docs: https://developers.cloudflare.com/workers/wrangler/configuration/#hyperdrive
+# [[hyperdrive]]
+# binding = "MY_HYPERDRIVE"
+# id = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
+
+# Bind a KV Namespace. Use KV as persistent storage for small key-value pairs.
+# Docs: https://developers.cloudflare.com/workers/wrangler/configuration/#kv-namespaces
+# [[kv_namespaces]]
+# binding = "MY_KV_NAMESPACE"
+# id = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
+
+# Bind an mTLS certificate. Use to present a client certificate when communicating with another service.
+# Docs: https://developers.cloudflare.com/workers/wrangler/configuration/#mtls-certificates
+# [[mtls_certificates]]
+# binding = "MY_CERTIFICATE"
+# certificate_id = "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
+
+# Bind a Queue producer. Use this binding to schedule an arbitrary task that may be processed later by a Queue consumer.
+# Docs: https://developers.cloudflare.com/workers/wrangler/configuration/#queues
+# [[queues.producers]]
+# binding = "MY_QUEUE"
+# queue = "my-queue"
+
+# Bind a Queue consumer. Queue Consumers can retrieve tasks scheduled by Producers to act on them.
+# Docs: https://developers.cloudflare.com/workers/wrangler/configuration/#queues
+# [[queues.consumers]]
+# queue = "my-queue"
+
+# Bind an R2 Bucket. Use R2 to store arbitrarily large blobs of data, such as files.
+# Docs: https://developers.cloudflare.com/workers/wrangler/configuration/#r2-buckets
+# [[r2_buckets]]
+# binding = "MY_BUCKET"
+# bucket_name = "my-bucket"
+
+# Bind another Worker service. Use this binding to call another Worker without network overhead.
+# Docs: https://developers.cloudflare.com/workers/wrangler/configuration/#service-bindings
+# [[services]]
+# binding = "MY_SERVICE"
+# service = "my-service"
+
+# Bind a Vectorize index. Use to store and query vector embeddings for semantic search, classification and other vector search use-cases.
+# Docs: https://developers.cloudflare.com/workers/wrangler/configuration/#vectorize-indexes
+# [[vectorize]]
+# binding = "MY_INDEX"
+# index_name = "my-index"

package/templates/next/README.md

@@ -23,7 +23,7 @@ Besides the `dev` script mentioned above `c3` has added a few extra scripts that
   - `preview` to locally preview your Pages application using the [Wrangler](https://developers.cloudflare.com/workers/wrangler/) CLI
   - `deploy` to deploy your Pages application using the [Wrangler](https://developers.cloudflare.com/workers/wrangler/) CLI
 
-> __Note:__ while the `dev` script is optimal for local development you should preview your Pages application as well (periodically or before deployments) in order to make sure that it can properly work in the Pages environment (for more details see the [`@cloudflare/next-on-pages` recommended workflow](https://github.com/cloudflare/next-on-pages/blob/05b6256/internal-packages/next-dev/README.md#recommended-workflow))
+> __Note:__ while the `dev` script is optimal for local development you should preview your Pages application as well (periodically or before deployments) in order to make sure that it can properly work in the Pages environment (for more details see the [`@cloudflare/next-on-pages` recommended workflow](https://github.com/cloudflare/next-on-pages/blob/main/internal-packages/next-dev/README.md#recommended-development-workflow))
 
 ### Bindings
 
@@ -52,15 +52,15 @@ In order to enable the example:
   ```
   # KV Example:
   ```
-- If you're using TypeScript run the `build-cf-types` script to update the `env.d.ts` file:
+- If you're using TypeScript run the `cf-typegen` script to update the `env.d.ts` file:
   ```bash
-  npm run build-cf-types
+  npm run cf-typegen
   # or
-  yarn build-cf-types
+  yarn cf-typegen
   # or
-  pnpm build-cf-types
+  pnpm cf-typegen
   # or
-  bun build-cf-types
+  bun cf-typegen
   ```
 
 After doing this you can run the `dev` or `preview` script and visit the `/api/hello` route to see the example in action.

package/templates/next/c3.ts

@@ -35,7 +35,7 @@ const generate = async (ctx: C3Context) => {
 	//       (instead of making it a special case which needs extra care)
 	const newTomlContent = wranglerToml.replace(
 		/#\s+\[\[kv_namespaces\]\]\n#\s+binding\s+=\s+"MY_KV_NAMESPACE"\n#\s+id\s+=\s+"[a-zA-Z0-9]+?"/,
-		($1) => `# KV Example:\n${$1}`
+		($1) => `# KV Example:\n${$1}`,
 	);
 
 	if (!/# KV Example/.test(newTomlContent)) {
@@ -63,7 +63,7 @@ const updateNextConfig = () => {
 
 		// Here we use the @cloudflare/next-on-pages next-dev module to allow us to use bindings during local development
 		// (when running the application with \`next dev\`), for more information see:
-		// https://github.com/cloudflare/next-on-pages/blob/5712c57ea7/internal-packages/next-dev/README.md
+		// https://github.com/cloudflare/next-on-pages/blob/main/internal-packages/next-dev/README.md
 		if (process.env.NODE_ENV === 'development') {
 		  await setupDevPlatform();
 		}
@@ -97,7 +97,7 @@ const configure = async (ctx: C3Context) => {
 	if (usesTs) {
 		copyFile(
 			join(getTemplatePath(ctx), "env.d.ts"),
-			join(projectPath, "env.d.ts")
+			join(projectPath, "env.d.ts"),
 		);
 		updateStatus("Created an env.d.ts file");
 	}
@@ -112,7 +112,7 @@ const configure = async (ctx: C3Context) => {
 
 	copyFile(
 		join(getTemplatePath(ctx), "README.md"),
-		join(projectPath, "README.md")
+		join(projectPath, "README.md"),
 	);
 	updateStatus("Updated the README file");
 
@@ -120,15 +120,17 @@ const configure = async (ctx: C3Context) => {
 };
 
 export const shouldInstallNextOnPagesEslintPlugin = async (
-	ctx: C3Context
+	ctx: C3Context,
 ): Promise<boolean> => {
 	const eslintUsage = usesEslint(ctx);
 
-	if (!eslintUsage.used) return false;
+	if (!eslintUsage.used) {
+		return false;
+	}
 
 	if (eslintUsage.configType !== ".eslintrc.json") {
 		warn(
-			`Expected .eslintrc.json from Next.js scaffolding but found ${eslintUsage.configType} instead`
+			`Expected .eslintrc.json from Next.js scaffolding but found ${eslintUsage.configType} instead`,
 		);
 		return false;
 	}
@@ -221,10 +223,10 @@ export default {
 		return {
 			scripts: {
 				"pages:build": `${pmCommand} ${nextOnPagesCommand}`,
-				preview: `${pagesBuildRunCommand} && wrangler pages dev .vercel/output/static`,
-				deploy: `${pagesBuildRunCommand} && wrangler pages deploy .vercel/output/static`,
+				preview: `${pagesBuildRunCommand} && wrangler pages dev`,
+				deploy: `${pagesBuildRunCommand} && wrangler pages deploy`,
 				...(usesTypescript(ctx) && {
-					"build-cf-types": `wrangler types --env-interface CloudflareEnv env.d.ts`,
+					"cf-typegen": `wrangler types --env-interface CloudflareEnv env.d.ts`,
 				}),
 			},
 		};