create-cloudflare 0.0.0-dfbf03f87 → 0.0.0-dfea523ea

package/templates/next/pages/c3.ts

@@ -0,0 +1,225 @@
+import { join } from "path";
+import { updateStatus, warn } from "@cloudflare/cli";
+import { brandColor, dim } from "@cloudflare/cli/colors";
+import { inputPrompt, spinner } from "@cloudflare/cli/interactive";
+import { runFrameworkGenerator } from "frameworks/index";
+import {
+	copyFile,
+	probePaths,
+	readFile,
+	readJSON,
+	usesEslint,
+	usesTypescript,
+	writeFile,
+	writeJSON,
+} from "helpers/files";
+import { detectPackageManager } from "helpers/packageManagers";
+import { installPackages } from "helpers/packages";
+import { getTemplatePath } from "../../../src/templates";
+import type { TemplateConfig } from "../../../src/templates";
+import type { C3Context } from "types";
+
+const { npm, npx } = detectPackageManager();
+
+const generate = async (ctx: C3Context) => {
+	const projectName = ctx.project.name;
+
+	await runFrameworkGenerator(ctx, [projectName]);
+
+	const wranglerConfig = readFile(join(getTemplatePath(ctx), "wrangler.jsonc"));
+	writeFile(join(ctx.project.path, "wrangler.jsonc"), wranglerConfig);
+	updateStatus("Created wrangler.jsonc file");
+};
+
+const updateNextConfig = (usesTs: boolean) => {
+	const s = spinner();
+
+	const configFile = `next.config.${usesTs ? "ts" : "mjs"}`;
+	s.start(`Updating \`${configFile}\``);
+
+	const configContent = readFile(configFile);
+
+	const updatedConfigFile =
+		`import { setupDevPlatform } from '@cloudflare/next-on-pages/next-dev';
+
+		// 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\`). This function is only necessary during development and
+		// has no impact outside of that. For more information see:
+		// https://github.com/cloudflare/next-on-pages/blob/main/internal-packages/next-dev/README.md
+		setupDevPlatform().catch(console.error);
+
+		`.replace(/\n\t*/g, "\n") + configContent;
+
+	writeFile(configFile, updatedConfigFile);
+
+	s.stop(`${brandColor(`updated`)} ${dim(`\`${configFile}\``)}`);
+};
+
+const configure = async (ctx: C3Context) => {
+	const projectPath = ctx.project.path;
+
+	// Add a compatible function handler example
+	const path = probePaths([
+		`${projectPath}/pages/api`,
+		`${projectPath}/src/pages/api`,
+		`${projectPath}/src/app/api`,
+		`${projectPath}/app/api`,
+		`${projectPath}/src/app`,
+		`${projectPath}/app`,
+	]);
+
+	if (!path) {
+		throw new Error("Could not find the `/api` or `/app` directory");
+	}
+
+	const usesTs = usesTypescript(ctx);
+
+	if (usesTs) {
+		copyFile(
+			join(getTemplatePath(ctx), "env.d.ts"),
+			join(projectPath, "env.d.ts"),
+		);
+		updateStatus("Created an env.d.ts file");
+	}
+
+	const installEslintPlugin = await shouldInstallNextOnPagesEslintPlugin(ctx);
+
+	if (installEslintPlugin) {
+		await writeEslintrc(ctx);
+	}
+
+	updateNextConfig(usesTs);
+
+	copyFile(
+		join(getTemplatePath(ctx), "README.md"),
+		join(projectPath, "README.md"),
+	);
+	updateStatus("Updated the README file");
+
+	await addDevDependencies(installEslintPlugin);
+};
+
+export const shouldInstallNextOnPagesEslintPlugin = async (
+	ctx: C3Context,
+): Promise<boolean> => {
+	const eslintUsage = usesEslint(ctx);
+
+	if (!eslintUsage.used) {
+		return false;
+	}
+
+	if (eslintUsage.configType !== ".eslintrc.json") {
+		warn(
+			`Expected .eslintrc.json from Next.js scaffolding but found ${eslintUsage.configType} instead`,
+		);
+		return false;
+	}
+
+	return await inputPrompt({
+		type: "confirm",
+		question: "Do you want to use the next-on-pages eslint-plugin?",
+		label: "eslint-plugin",
+		defaultValue: true,
+	});
+};
+
+export const writeEslintrc = async (ctx: C3Context): Promise<void> => {
+	const eslintConfig = readJSON(`${ctx.project.path}/.eslintrc.json`) as {
+		plugins: string[];
+		extends: string | string[];
+	};
+
+	eslintConfig.plugins ??= [];
+	eslintConfig.plugins.push("eslint-plugin-next-on-pages");
+
+	if (typeof eslintConfig.extends === "string") {
+		eslintConfig.extends = [eslintConfig.extends];
+	}
+	eslintConfig.extends ??= [];
+	eslintConfig.extends.push("plugin:eslint-plugin-next-on-pages/recommended");
+
+	writeJSON(`${ctx.project.path}/.eslintrc.json`, eslintConfig);
+};
+
+const addDevDependencies = async (installEslintPlugin: boolean) => {
+	const packages = [
+		"@cloudflare/next-on-pages@1",
+		"@cloudflare/workers-types",
+		"vercel",
+		...(installEslintPlugin ? ["eslint-plugin-next-on-pages"] : []),
+	];
+	await installPackages(packages, {
+		dev: true,
+		startText: "Adding the Cloudflare Pages adapter",
+		doneText: `${brandColor(`installed`)} ${dim(packages.join(", "))}`,
+	});
+};
+
+export default {
+	configVersion: 1,
+	id: "next",
+	frameworkCli: "create-next-app",
+	platform: "pages",
+	hidden: true,
+	displayName: "Next.js",
+	path: "templates/next/pages",
+	generate,
+	configure,
+	copyFiles: {
+		async selectVariant(ctx) {
+			const isApp = probePaths([
+				`${ctx.project.path}/src/app`,
+				`${ctx.project.path}/app`,
+			]);
+
+			const isTypescript = usesTypescript(ctx);
+
+			const dir = isApp ? "app" : "pages";
+			return `${dir}/${isTypescript ? "ts" : "js"}`;
+		},
+		destinationDir(ctx) {
+			const srcPath = probePaths([`${ctx.project.path}/src`]);
+			return srcPath ? "./src" : "./";
+		},
+		variants: {
+			"app/ts": {
+				path: "./app/ts",
+			},
+			"app/js": {
+				path: "./app/js",
+			},
+			"pages/ts": {
+				path: "./pages/ts",
+			},
+			"pages/js": {
+				path: "./pages/js",
+			},
+		},
+	},
+	transformPackageJson: async (_, ctx) => {
+		const isNpm = npm === "npm";
+		const isBun = npm === "bun";
+		const isNpmOrBun = isNpm || isBun;
+		const nextOnPagesScope = isNpmOrBun ? "@cloudflare/" : "";
+		const nextOnPagesCommand = `${nextOnPagesScope}next-on-pages`;
+		const pmCommand = isNpmOrBun ? npx : npm;
+		const pagesBuildRunCommand = `${
+			isNpm ? "npm run" : isBun ? "bun" : pmCommand
+		} pages:build`;
+		return {
+			scripts: {
+				"pages:build": `${pmCommand} ${nextOnPagesCommand}`,
+				preview: `${pagesBuildRunCommand} && wrangler pages dev`,
+				deploy: `${pagesBuildRunCommand} && wrangler pages deploy`,
+				...(usesTypescript(ctx) && {
+					"cf-typegen": `wrangler types --env-interface CloudflareEnv env.d.ts`,
+				}),
+			},
+		};
+	},
+	devScript: "dev",
+	previewScript: "preview",
+	deployScript: "deploy",
+	compatibilityFlags: ["nodejs_compat"],
+} as TemplateConfig;

package/{templates-experimental/next → templates/next/workers}/c3.ts

@@ -3,7 +3,7 @@ import { spinner } from "@cloudflare/cli/interactive";
 import { runFrameworkGenerator } from "frameworks/index";
 import { readFile, usesTypescript, writeFile } from "helpers/files";
 import { installPackages } from "helpers/packages";
-import type { TemplateConfig } from "../../src/templates";
+import type { TemplateConfig } from "../../../src/templates";
 import type { C3Context } from "types";
 
 const generate = async (ctx: C3Context) => {
@@ -12,7 +12,7 @@ const generate = async (ctx: C3Context) => {
 
 const configure = async (ctx: C3Context) => {
 	const packages = [
-		"@opennextjs/cloudflare@0.5.x",
+		"@opennextjs/cloudflare@~1.0.0-beta.0 || ^1.0.0",
 		"@cloudflare/workers-types",
 	];
 	await installPackages(packages, {
@@ -51,11 +51,10 @@ export default {
 	configVersion: 1,
 	id: "next",
 	frameworkCli: "create-next-app",
-	// TODO: Stop using a pinned version when the template graduates.
-	frameworkCliPinnedVersion: "~15.2.2",
+	frameworkCliPinnedVersion: "~15.2.4",
 	platform: "workers",
 	displayName: "Next.js (using Node.js compat + Workers Assets)",
-	path: "templates-experimental/next",
+	path: "templates/next/workers",
 	copyFiles: {
 		path: "./templates",
 	},
@@ -63,8 +62,8 @@ export default {
 	configure,
 	transformPackageJson: async () => ({
 		scripts: {
-			deploy: `opennextjs-cloudflare && wrangler deploy`,
-			preview: `opennextjs-cloudflare && wrangler dev`,
+			deploy: `opennextjs-cloudflare build && opennextjs-cloudflare deploy`,
+			preview: `opennextjs-cloudflare build && opennextjs-cloudflare preview`,
 			"cf-typegen": `wrangler types --env-interface CloudflareEnv cloudflare-env.d.ts`,
 		},
 	}),

package/templates/next/workers/templates/open-next.config.ts

@@ -0,0 +1,9 @@
+import { defineCloudflareConfig } from "@opennextjs/cloudflare";
+
+export default defineCloudflareConfig({
+  // Uncomment to enable R2 cache,
+  // It should be imported as:
+  // `import r2IncrementalCache from "@opennextjs/cloudflare/overrides/incremental-cache/r2-incremental-cache";`
+  // See https://opennext.js.org/cloudflare/caching for more details
+  // incrementalCache: r2IncrementalCache,
+});

package/{templates-experimental/next → templates/next/workers}/templates/wrangler.jsonc

@@ -1,7 +1,7 @@
 {
   "name": "<app-name>",
   "main": ".open-next/worker.js",
-  "compatibility_date": "2024-09-26",
+  "compatibility_date": "2025-03-01",
   "compatibility_flags": [
     "nodejs_compat"
   ],

package/templates/nuxt/pages/c3.ts

@@ -125,6 +125,7 @@ const config: TemplateConfig = {
 	id: "nuxt",
 	frameworkCli: "nuxi",
 	platform: "pages",
+	hidden: true,
 	displayName: "Nuxt",
 	copyFiles: {
 		path: "./templates",

package/templates/openapi/c3.ts

@@ -1,4 +1,6 @@
-export default {
+import type { TemplateConfig } from "../../src/templates";
+
+const config: TemplateConfig = {
 	configVersion: 1,
 	id: "openapi",
 	displayName: "API starter (OpenAPI compliant)",
@@ -8,3 +10,5 @@ export default {
 		path: "./ts",
 	},
 };
+
+export default config;

package/templates/pre-existing/c3.ts

@@ -6,6 +6,7 @@ import { processArgument } from "helpers/args";
 import { runCommand } from "helpers/command";
 import { detectPackageManager } from "helpers/packageManagers";
 import { chooseAccount, wranglerLogin } from "../../src/wrangler/accounts";
+import type { TemplateConfig } from "../../src/templates";
 import type { C3Context } from "types";
 
 export async function copyExistingWorkerFiles(ctx: C3Context) {
@@ -31,7 +32,7 @@ export async function copyExistingWorkerFiles(ctx: C3Context) {
 	await runCommand(
 		[
 			...dlx,
-			"wrangler@3",
+			"wrangler@latest",
 			"init",
 			"--from-dash",
 			ctx.args.existingScript,
@@ -63,10 +64,11 @@ export async function copyExistingWorkerFiles(ctx: C3Context) {
 	);
 }
 
-export default {
+const config: TemplateConfig = {
 	configVersion: 1,
 	id: "pre-existing",
 	displayName: "Pre-existing Worker (from Dashboard)",
+	description: "Fetch a Worker initialized from the Cloudflare dashboard.",
 	platform: "workers",
 	hidden: true,
 	copyFiles: {
@@ -79,6 +81,8 @@ export default {
 	}),
 };
 
+export default config;
+
 export interface ConfigureParams {
 	login: (ctx: C3Context) => Promise<boolean>;
 	chooseAccount: (ctx: C3Context) => Promise<void>;

package/templates/queues/c3.ts

@@ -1,4 +1,6 @@
-export default {
+import type { TemplateConfig } from "../../src/templates";
+
+const config: TemplateConfig = {
 	configVersion: 1,
 	id: "queues",
 	displayName: "Queue consumer & producer Worker",
@@ -26,3 +28,5 @@ export default {
 		],
 	},
 };
+
+export default config;

package/templates/qwik/pages/c3.ts

@@ -129,6 +129,7 @@ const config: TemplateConfig = {
 	frameworkCli: "create-qwik",
 	displayName: "Qwik",
 	platform: "pages",
+	hidden: true,
 	copyFiles: {
 		path: "./templates",
 	},

package/templates/react/pages/c3.ts

@@ -47,6 +47,7 @@ const config: TemplateConfig = {
 	frameworkCli: "create-vite",
 	displayName: "React",
 	platform: "pages",
+	hidden: true,
 	path: "templates/react/pages",
 	generate,
 	transformPackageJson: async () => ({

package/templates/react/workers/js/src/App.jsx

@@ -45,7 +45,7 @@ function App() {
           Name from API is: {name}
         </button>
         <p>
-          Edit <code>api/index.js</code> to change the name
+          Edit <code>worker/index.js</code> to change the name
         </p>
       </div>
       <p className='read-the-docs'>

package/templates/react/workers/js/{api → worker}/index.js

@@ -8,6 +8,6 @@ export default {
       });
     }
 
-    return env.ASSETS.fetch(request);
+		return new Response(null, { status: 404 });
   },
 }

package/templates/react/workers/js/wrangler.jsonc

@@ -1,8 +1,8 @@
 {
 	"name": "<TBD>",
-	"main": "api/index.js",
+	"main": "worker/index.js",
 	"compatibility_date": "<TBD>",
-	"assets": { "not_found_handling": "single-page-application", "binding": "ASSETS" },
+	"assets": { "not_found_handling": "single-page-application" },
 	"observability": {
 		"enabled": true
 	}

package/templates/react/workers/ts/src/App.tsx

@@ -45,7 +45,7 @@ function App() {
           Name from API is: {name}
         </button>
         <p>
-          Edit <code>api/index.ts</code> to change the name
+          Edit <code>worker/index.ts</code> to change the name
         </p>
       </div>
       <p className='read-the-docs'>

package/templates/react/workers/ts/tsconfig.worker.json

@@ -4,5 +4,5 @@
     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.worker.tsbuildinfo",
     "types": ["@cloudflare/workers-types/2023-07-01", "./worker-configuration.d.ts", "vite/client"],
   },
-  "include": ["api"],
+  "include": ["worker"],
 }

package/templates/react/workers/ts/{api → worker}/index.ts

@@ -1,5 +1,5 @@
 export default {
-  fetch(request, env) {
+  fetch(request) {
     const url = new URL(request.url);
 
     if (url.pathname.startsWith("/api/")) {
@@ -7,7 +7,6 @@ export default {
         name: "Cloudflare",
       });
     }
-
-    return env.ASSETS.fetch(request);
+		return new Response(null, { status: 404 });
   },
 } satisfies ExportedHandler<Env>;

package/templates/react/workers/ts/wrangler.jsonc

@@ -1,8 +1,8 @@
 {
 	"name": "<TBD>",
-	"main": "api/index.ts",
+	"main": "worker/index.ts",
 	"compatibility_date": "<TBD>",
-	"assets": { "not_found_handling": "single-page-application", "binding": "ASSETS" },
+	"assets": { "not_found_handling": "single-page-application" },
 	"observability": {
 		"enabled": true
 	}

package/templates/remix/pages/c3.ts

@@ -47,6 +47,7 @@ const config: TemplateConfig = {
 	id: "remix",
 	frameworkCli: "create-remix",
 	platform: "pages",
+	hidden: true,
 	displayName: "Remix",
 	copyFiles: {
 		path: "./templates",

package/templates/scheduled/c3.ts

@@ -1,4 +1,6 @@
-export default {
+import type { TemplateConfig } from "../../src/templates";
+
+const config: TemplateConfig = {
 	configVersion: 1,
 	id: "scheduled",
 	displayName: "Scheduled Worker (Cron Trigger)",
@@ -16,3 +18,5 @@ export default {
 		},
 	},
 };
+
+export default config;

package/templates/scheduled/ts/src/index.ts

@@ -16,6 +16,13 @@
  */
 
 export default {
+	async fetch(req) {
+		const url = new URL(req.url);
+		url.pathname = '/__scheduled';
+		url.searchParams.append('cron', '* * * * *');
+		return new Response(`To test the scheduled handler, ensure you have used the "--test-scheduled" then try running "curl ${url.href}".`);
+	},
+
 	// The scheduled handler is invoked at the interval set in our wrangler.jsonc's
 	// [[triggers]] configuration.
 	async scheduled(event, env, ctx): Promise<void> {

package/templates/svelte/pages/c3.ts

@@ -130,6 +130,7 @@ const config: TemplateConfig = {
 	frameworkCli: "sv",
 	displayName: "SvelteKit",
 	platform: "pages",
+	hidden: true,
 	copyFiles: {
 		path: "./templates",
 	},

package/templates/vue/pages/c3.ts

@@ -15,6 +15,7 @@ const config: TemplateConfig = {
 	frameworkCli: "create-vue",
 	displayName: "Vue",
 	platform: "pages",
+	hidden: true,
 	path: "templates/pages/vue",
 	generate,
 	transformPackageJson: async () => ({

package/templates/vue/workers/js/server/index.js

@@ -1,5 +1,5 @@
 export default {
-	fetch(request, env) {
+	fetch(request) {
 		const url = new URL(request.url);
 
 		if (url.pathname.startsWith("/api/")) {
@@ -8,6 +8,6 @@ export default {
 			});
 		}
 
-		return env.ASSETS.fetch(request);
+		return new Response(null, { status: 404 });
 	},
 };

package/templates/vue/workers/js/wrangler.jsonc

@@ -4,7 +4,6 @@
 	"main": "server/index.ts",
 	"assets": {
 		"not_found_handling": "single-page-application",
-		"binding": "ASSETS"
 	},
 	"observability": {
 		"enabled": true

package/templates/vue/workers/ts/server/index.ts

@@ -1,5 +1,5 @@
 export default {
-	fetch(request, env) {
+	fetch(request) {
 		const url = new URL(request.url);
 
 		if (url.pathname.startsWith("/api/")) {
@@ -7,7 +7,6 @@ export default {
 				name: "Cloudflare",
 			});
 		}
-
-		return env.ASSETS.fetch(request);
+		return new Response(null, { status: 404 });
 	},
 } satisfies ExportedHandler<Env>;

package/templates/vue/workers/ts/wrangler.jsonc

@@ -4,7 +4,6 @@
 	"main": "server/index.ts",
 	"assets": {
 		"not_found_handling": "single-page-application",
-		"binding": "ASSETS"
 	},
 	"observability": {
 		"enabled": true

package/templates-experimental/next/templates/open-next.config.ts

@@ -1,6 +0,0 @@
-import { defineCloudflareConfig } from "@opennextjs/cloudflare";
-import kvIncrementalCache from "@opennextjs/cloudflare/kv-cache";
-
-export default defineCloudflareConfig({
-  incrementalCache: kvIncrementalCache,
-});