create-cloudflare 0.0.0-a6a4e8a4 → 0.0.0-a6cfaa2bd

package/templates/hello-world-workflows/js/src/index.js

@@ -0,0 +1,129 @@
+import { WorkflowEntrypoint } from "cloudflare:workers";
+
+/**
+ * Welcome to Cloudflare Workers! This is your first Workflows application.
+ *
+ * - Run `npm run dev` in your terminal to start a development server
+ * - Open a browser tab at http://localhost:8787/ to see your Workflow in action
+ * - Run `npm run deploy` to publish your application
+ *
+ * Learn more at https://developers.cloudflare.com/workflows
+ */
+ 
+/**
+ * @typedef {Object} Env
+ * @property {Workflow} MY_WORKFLOW
+ */
+
+/**
+ * @typedef {Object} Params
+ * @property {string} email
+ * @property {Record<string, string>} metadata
+ */
+
+export class MyWorkflow extends WorkflowEntrypoint {
+	/**
+	 * @param {Env} env
+	 */
+	constructor(env) {
+		this.env = env;
+	}
+
+	/**
+	 * @param {WorkflowEvent<Params>} event
+	 * @param {WorkflowStep} step
+	 */
+	async run(event, step) {
+		// Can access bindings on `this.env`
+		// Can access params on `event.payload`
+		
+		const files = await step.do("my first step", async () => {
+			// Fetch a list of files from $SOME_SERVICE
+			return {
+				inputParams: event,
+				files: [
+					"doc_7392_rev3.pdf",
+					"report_x29_final.pdf",
+					"memo_2024_05_12.pdf",
+					"file_089_update.pdf",
+					"proj_alpha_v2.pdf",
+					"data_analysis_q2.pdf",
+					"notes_meeting_52.pdf",
+					"summary_fy24_draft.pdf",
+				],
+			};
+		});
+
+		// You can optionally have a Workflow wait for additional data,
+		// human approval or an external webhook or HTTP request before progressing.
+		// You can submit data via HTTP POST to /accounts/{account_id}/workflows/{workflow_name}/instances/{instance_id}/events/{eventName}
+		const waitForApproval = await step.waitForEvent("request-approval", {
+			type: "approval", // define an optional key to switch on
+			timeout: "1 minute", // keep it short for the example!
+		});
+
+		const apiResponse = await step.do("some other step", async () => {
+			let resp = await fetch("https://api.cloudflare.com/client/v4/ips");
+			return await resp.json();
+		});
+
+		await step.sleep("wait on something", "1 minute");
+
+		await step.do(
+			"make a call to write that could maybe, just might, fail",
+      // Define a retry strategy
+			/** @type {Object} */ ({
+				retries: {
+					limit: 5,
+					delay: "5 second",
+					backoff: "exponential",
+				},
+				timeout: "15 minutes",
+			}),
+			async () => {
+				// Do stuff here, with access to the state from our previous steps
+				if (Math.random() > 0.5) {
+					throw new Error("API call to $STORAGE_SYSTEM failed");
+				}
+			},
+		);
+	}
+}
+
+export default {
+	/**
+	 * @param {Request} req
+	 * @param {Env} env
+	 * @returns {Promise<Response>}
+	 */
+	async fetch(req, env) {
+		let url = new URL(req.url);
+
+		if (url.pathname.startsWith("/favicon")) {
+			return Response.json({}, { status: 404 });
+		}
+
+		// Get the status of an existing instance, if provided
+		// GET /?instanceId=<id here>
+		let id = url.searchParams.get("instanceId");
+		if (id) {
+			let instance = await env.MY_WORKFLOW.get(id);
+			return Response.json({
+				status: await instance.status(),
+			});
+		}
+
+		// Spawn a new instance and return the ID and status
+		let instance = await env.MY_WORKFLOW.create();
+		// You can also set the ID to match an ID in your own system
+		// and pass an optional payload to the Workflow
+		// let instance = await env.MY_WORKFLOW.create({
+		// 	id: 'id-from-your-system',
+		// 	params: { payload: 'to send' },
+		// });
+		return Response.json({
+			id: instance.id,
+			details: await instance.status(),
+		});
+	},
+};

package/templates/hello-world-workflows/js/wrangler.jsonc

@@ -0,0 +1,17 @@
+{
+	"name": "<TBD>",
+	"main": "src/index.js",
+	"compatibility_date": "<TBD>",
+
+	"observability": {
+		"enabled": true,
+		"head_sampling_rate": 1,
+	},
+	"workflows": [
+		{
+			"name": "<TBD>",
+			"binding": "MY_WORKFLOW",
+			"class_name": "MyWorkflow",
+		},
+	],
+}

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

@@ -0,0 +1,15 @@
+{
+	"name": "<TBD>",
+	"version": "0.0.0",
+	"private": true,
+	"scripts": {
+		"deploy": "wrangler deploy",
+		"start": "wrangler dev",
+		"dev": "wrangler dev",
+		"cf-typegen": "wrangler types"
+	},
+	"devDependencies": {
+		"typescript": "^5.0.4",
+		"wrangler": "^4.6.0"
+	}
+}

package/templates/hello-world-workflows/ts/src/index.ts

@@ -0,0 +1,111 @@
+import {
+	WorkflowEntrypoint,
+	WorkflowEvent,
+	WorkflowStep,
+} from "cloudflare:workers";
+
+/**
+ * Welcome to Cloudflare Workers! This is your first Workflows application.
+ *
+ * - Run `npm run dev` in your terminal to start a development server
+ * - Open a browser tab at http://localhost:8787/ to see your Workflow in action
+ * - Run `npm run deploy` to publish your application
+ *
+ * Learn more at https://developers.cloudflare.com/workflows
+ */
+ 
+// User-defined params passed to your Workflow
+type Params = {
+	email: string;
+	metadata: Record<string, string>;
+};
+
+export class MyWorkflow extends WorkflowEntrypoint<Env, Params> {
+	async run(event: WorkflowEvent<Params>, step: WorkflowStep) {
+		// Can access bindings on `this.env`
+		// Can access params on `event.payload`
+
+		const files = await step.do("my first step", async () => {
+			// Fetch a list of files from $SOME_SERVICE
+			return {
+				inputParams: event,
+				files: [
+					"doc_7392_rev3.pdf",
+					"report_x29_final.pdf",
+					"memo_2024_05_12.pdf",
+					"file_089_update.pdf",
+					"proj_alpha_v2.pdf",
+					"data_analysis_q2.pdf",
+					"notes_meeting_52.pdf",
+					"summary_fy24_draft.pdf",
+				],
+			};
+		});
+
+		// You can optionally have a Workflow wait for additional data,
+		// human approval or an external webhook or HTTP request, before progressing.
+		// You can submit data via HTTP POST to /accounts/{account_id}/workflows/{workflow_name}/instances/{instance_id}/events/{eventName}
+		const waitForApproval = await step.waitForEvent("request-approval", {
+			type: "approval", // define an optional key to switch on
+			timeout: "1 minute", // keep it short for the example!
+		});
+
+		const apiResponse = await step.do("some other step", async () => {
+			let resp = await fetch("https://api.cloudflare.com/client/v4/ips");
+			return await resp.json<any>();
+		});
+
+		await step.sleep("wait on something", "1 minute");
+
+		await step.do(
+			"make a call to write that could maybe, just might, fail",
+			// Define a retry strategy
+			{
+				retries: {
+					limit: 5,
+					delay: "5 second",
+					backoff: "exponential",
+				},
+				timeout: "15 minutes",
+			},
+			async () => {
+				// Do stuff here, with access to the state from our previous steps
+				if (Math.random() > 0.5) {
+					throw new Error("API call to $STORAGE_SYSTEM failed");
+				}
+			},
+		);
+	}
+}
+export default {
+	async fetch(req: Request, env: Env): Promise<Response> {
+		let url = new URL(req.url);
+
+		if (url.pathname.startsWith("/favicon")) {
+			return Response.json({}, { status: 404 });
+		}
+
+		// Get the status of an existing instance, if provided
+		// GET /?instanceId=<id here>
+		let id = url.searchParams.get("instanceId");
+		if (id) {
+			let instance = await env.MY_WORKFLOW.get(id);
+			return Response.json({
+				status: await instance.status(),
+			});
+		}
+
+		// Spawn a new instance and return the ID and status
+		let instance = await env.MY_WORKFLOW.create();
+		// You can also set the ID to match an ID in your own system
+		// and pass an optional payload to the Workflow
+		// let instance = await env.MY_WORKFLOW.create({
+		// 	id: 'id-from-your-system',
+		// 	params: { payload: 'to send' },
+		// });
+		return Response.json({
+			id: instance.id,
+			details: await instance.status(),
+		});
+	},
+};

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

@@ -0,0 +1,40 @@
+{
+	"compilerOptions": {
+		/* Visit https://aka.ms/tsconfig.json to read more about this file */
+
+		/* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
+		"target": "es2021",
+		/* Specify a set of bundled library declaration files that describe the target runtime environment. */
+		"lib": ["es2021"],
+		/* Specify what JSX code is generated. */
+		"jsx": "react-jsx",
+
+		/* Specify what module code is generated. */
+		"module": "es2022",
+		/* Specify how TypeScript looks up a file from a given module specifier. */
+		"moduleResolution": "node",
+		/* Enable importing .json files */
+		"resolveJsonModule": true,
+
+		/* Allow JavaScript files to be a part of your program. Use the `checkJS` option to get errors from these files. */
+		"allowJs": true,
+		/* Enable error reporting in type-checked JavaScript files. */
+		"checkJs": false,
+
+		/* Disable emitting files from a compilation. */
+		"noEmit": true,
+
+		/* Ensure that each file can be safely transpiled without relying on other imports. */
+		"isolatedModules": true,
+		/* Allow 'import x from y' when a module doesn't have a default export. */
+		"allowSyntheticDefaultImports": true,
+		/* Ensure that casing is correct in imports. */
+		"forceConsistentCasingInFileNames": true,
+
+		/* Enable all strict type-checking options. */
+		"strict": true,
+
+		/* Skip type checking all .d.ts files. */
+		"skipLibCheck": true
+	}
+}

package/templates/hello-world-workflows/ts/wrangler.jsonc

@@ -0,0 +1,17 @@
+{
+	"name": "<TBD>",
+	"main": "src/index.ts",
+	"compatibility_date": "<TBD>",
+
+	"observability": {
+		"enabled": true,
+		"head_sampling_rate": 1,
+	},
+	"workflows": [
+		{
+			"name": "<TBD>",
+			"binding": "MY_WORKFLOW",
+			"class_name": "MyWorkflow",
+		},
+	],
+}

package/templates/hono/c3.ts

@@ -0,0 +1,9 @@
+import pages from "./pages/c3";
+import workers from "./workers/c3";
+import type { MultiPlatformTemplateConfig } from "../../src/templates";
+
+const config: MultiPlatformTemplateConfig = {
+	displayName: "Hono",
+	platformVariants: { pages, workers },
+};
+export default config;

package/templates/hono/pages/c3.ts

@@ -0,0 +1,47 @@
+import { logRaw } from "@cloudflare/cli";
+import { runFrameworkGenerator } from "frameworks/index";
+import { detectPackageManager } from "helpers/packageManagers";
+import type { TemplateConfig } from "../../../src/templates";
+import type { C3Context } from "types";
+
+const generate = async (ctx: C3Context) => {
+	const { name: pm } = detectPackageManager();
+
+	await runFrameworkGenerator(ctx, [
+		ctx.project.name,
+		"--template",
+		"cloudflare-pages",
+		"--install",
+		"--pm",
+		pm,
+	]);
+
+	logRaw(""); // newline
+};
+
+const envInterfaceName = "CloudflareBindings";
+
+const config: TemplateConfig = {
+	configVersion: 1,
+	id: "hono",
+	frameworkCli: "create-hono",
+	displayName: "Hono",
+	copyFiles: {
+		path: "./templates",
+	},
+	path: "templates/hono/pages",
+	platform: "pages",
+	hidden: true,
+	generate,
+	transformPackageJson: async () => ({
+		scripts: {
+			"cf-typegen": `wrangler types --env-interface ${envInterfaceName}`,
+			preview: "vite build && wrangler pages dev",
+		},
+	}),
+	devScript: "dev",
+	deployScript: "deploy",
+	previewScript: "preview",
+	envInterfaceName,
+};
+export default config;

package/templates/hono/pages/templates/src/index.tsx

@@ -0,0 +1,12 @@
+import { Hono } from 'hono'
+import { renderer } from './renderer'
+
+const app = new Hono<{ Bindings: CloudflareBindings }>();
+
+app.use(renderer)
+
+app.get('/', (c) => {
+  return c.render(<h1>Hello!</h1>)
+})
+
+export default app

package/templates/hono/pages/templates/wrangler.jsonc

@@ -0,0 +1,8 @@
+{
+  "name": "<TBD>",
+  "compatibility_date": "<TBD>",
+	"pages_build_output_dir": "./dist",
+  "observability": {
+    "enabled": true
+  }
+}

package/templates/hono/workers/c3.ts

@@ -0,0 +1,44 @@
+import { logRaw } from "@cloudflare/cli";
+import { runFrameworkGenerator } from "frameworks/index";
+import { detectPackageManager } from "helpers/packageManagers";
+import type { TemplateConfig } from "../../../src/templates";
+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 envInterfaceName = "CloudflareBindings";
+const config: TemplateConfig = {
+	configVersion: 1,
+	id: "hono",
+	frameworkCli: "create-hono",
+	displayName: "Hono",
+	copyFiles: {
+		path: "./templates",
+	},
+	platform: "workers",
+	path: "templates/hono/workers",
+	generate,
+	transformPackageJson: async () => ({
+		scripts: {
+			"cf-typegen": `wrangler types --env-interface ${envInterfaceName}`,
+		},
+	}),
+	devScript: "dev",
+	deployScript: "deploy",
+	previewScript: "dev",
+	envInterfaceName,
+};
+export default config;

package/templates/hono/workers/templates/public/index.html

@@ -0,0 +1,19 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>Hello, World!</title>
+	</head>
+	<body>
+		<h1 id="heading"></h1>
+		<script>
+			fetch('/message')
+				.then((resp) => resp.text())
+				.then((text) => {
+					const h1 = document.getElementById('heading');
+					h1.textContent = text;
+				});
+		</script>
+	</body>
+</html>

package/templates/hono/workers/templates/src/index.ts

@@ -0,0 +1,9 @@
+import { Hono } from "hono";
+
+const app = new Hono<{ Bindings: CloudflareBindings }>();
+
+app.get("/message", (c) => {
+  return c.text("Hello Hono!");
+});
+
+export default app;

package/templates/hono/workers/templates/wrangler.jsonc

@@ -0,0 +1,9 @@
+{
+  "name": "<TBD>",
+  "main": "src/index.ts",
+  "compatibility_date": "<TBD>",
+  "assets": {
+    "binding": "ASSETS",
+    "directory": "./public"
+  }
+}

package/templates/next/c3.ts

@@ -0,0 +1,9 @@
+import pages from "./pages/c3";
+import workers from "./workers/c3";
+import type { MultiPlatformTemplateConfig } from "../../src/templates";
+
+const config: MultiPlatformTemplateConfig = {
+	displayName: "Next.js",
+	platformVariants: { pages, workers },
+};
+export default config;

package/templates/next/pages/README.md

@@ -0,0 +1,67 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`c3`](https://developers.cloudflare.com/pages/get-started/c3).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+## Cloudflare integration
+
+Besides the `dev` script mentioned above `c3` has added a few extra scripts that allow you to integrate the application with the [Cloudflare Pages](https://pages.cloudflare.com/) environment, these are:
+  - `pages:build` to build the application for Pages using the [`@cloudflare/next-on-pages`](https://github.com/cloudflare/next-on-pages) CLI
+  - `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/main/internal-packages/next-dev/README.md#recommended-development-workflow))
+
+### Bindings
+
+Cloudflare [Bindings](https://developers.cloudflare.com/pages/functions/bindings/) are what allows you to interact with resources available in the Cloudflare Platform.
+
+You can use bindings during development, when previewing locally your application and of course in the deployed application:
+
+- To use bindings in dev mode you need to define them in the `next.config.js` file under `setupDevBindings`, this mode uses the `next-dev` `@cloudflare/next-on-pages` submodule. For more details see its [documentation](https://github.com/cloudflare/next-on-pages/blob/05b6256/internal-packages/next-dev/README.md).
+
+- To use bindings in the preview mode you need to add them to the `pages:preview` script accordingly to the `wrangler pages dev` command. For more details see its [documentation](https://developers.cloudflare.com/workers/wrangler/commands/#dev-1) or the [Pages Bindings documentation](https://developers.cloudflare.com/pages/functions/bindings/).
+
+- To use bindings in the deployed application you will need to configure them in the Cloudflare [dashboard](https://dash.cloudflare.com/). For more details see the  [Pages Bindings documentation](https://developers.cloudflare.com/pages/functions/bindings/).
+
+#### KV Example
+
+`c3` has added for you an example showing how you can use a KV binding.
+
+In order to enable the example:
+- Search for javascript/typescript lines containing the following comment:
+  ```ts
+  // KV Example:
+  ```
+  and uncomment the commented lines below it (also uncomment the relevant imports).
+- In the `wrangler.jsonc` file add the following configuration line:
+  ```
+  "kv_namespaces": [{ "binding": "MY_KV_NAMESPACE", "id": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx" }],
+  ```
+- If you're using TypeScript run the `cf-typegen` script to update the `env.d.ts` file:
+  ```bash
+  npm run cf-typegen
+  # or
+  yarn cf-typegen
+  # or
+  pnpm cf-typegen
+  # or
+  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.
+
+Finally, if you also want to see the example work in the deployed application make sure to add a `MY_KV_NAMESPACE` binding to your Pages application in its [dashboard kv bindings settings section](https://dash.cloudflare.com/?to=/:account/pages/view/:pages-project/settings/functions#kv_namespace_bindings_section). After having configured it make sure to re-deploy your application.

package/templates/next/pages/app/js/app/api/hello/route.js

@@ -0,0 +1,21 @@
+// import { getRequestContext } from '@cloudflare/next-on-pages'
+
+export const runtime = 'edge'
+
+export async function GET() {
+  const responseText = 'Hello World'
+
+  // In the edge runtime you can use Bindings that are available in your application
+  // (for more details see:
+  //    - https://developers.cloudflare.com/pages/framework-guides/deploy-a-nextjs-site/#use-bindings-in-your-nextjs-application
+  //    - https://developers.cloudflare.com/pages/functions/bindings/
+  // )
+  //
+  // KV Example:
+  // const myKv = getRequestContext().env.MY_KV_NAMESPACE
+  // await myKv.put('suffix', ' from a KV store!')
+  // const suffix = await myKv.get('suffix')
+  // return new Response(responseText + suffix)
+
+  return new Response(responseText)
+}

package/templates/next/pages/app/js/app/not-found.js

@@ -0,0 +1,58 @@
+export const runtime = "edge";
+
+export default function NotFound() {
+  return (
+    <>
+      <title>404: This page could not be found.</title>
+      <div style={styles.error}>
+        <div>
+          <style
+            dangerouslySetInnerHTML={{
+              __html: `body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}`,
+            }}
+          />
+          <h1 className="next-error-h1" style={styles.h1}>
+            404
+          </h1>
+          <div style={styles.desc}>
+            <h2 style={styles.h2}>This page could not be found.</h2>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
+
+const styles = {
+  error: {
+    fontFamily:
+      'system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji"',
+    height: "100vh",
+    textAlign: "center",
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+
+  desc: {
+    display: "inline-block",
+  },
+
+  h1: {
+    display: "inline-block",
+    margin: "0 20px 0 0",
+    padding: "0 23px 0 0",
+    fontSize: 24,
+    fontWeight: 500,
+    verticalAlign: "top",
+    lineHeight: "49px",
+  },
+
+  h2: {
+    fontSize: 14,
+    fontWeight: 400,
+    lineHeight: "49px",
+    margin: 0,
+  },
+};