create-cloudflare 0.0.0-ce6d4bc4 → 0.0.0-ce7cb9ab2

package/templates/next/c3.ts

@@ -1,196 +1,9 @@
-import { join } from "path";
-import { crash, updateStatus, warn } from "@cloudflare/cli";
-import { processArgument } from "@cloudflare/cli/args";
-import { brandColor, dim } from "@cloudflare/cli/colors";
-import { installPackages, runFrameworkGenerator } from "helpers/command";
-import {
-	compatDateFlag,
-	copyFile,
-	probePaths,
-	readJSON,
-	usesEslint,
-	usesTypescript,
-	writeJSON,
-} from "helpers/files";
-import { detectPackageManager } from "helpers/packages";
-import { getTemplatePath } from "../../src/templates";
-import type { TemplateConfig } from "../../src/templates";
-import type { C3Args, C3Context } from "types";
+import pages from "./pages/c3";
+import workers from "./workers/c3";
+import type { MultiPlatformTemplateConfig } from "../../src/templates";
 
-const { npm, npx } = detectPackageManager();
-
-const generate = async (ctx: C3Context) => {
-	const projectName = ctx.project.name;
-
-	await runFrameworkGenerator(ctx, [projectName]);
-};
-
-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) {
-		crash("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);
-	}
-
-	copyFile(
-		join(getTemplatePath(ctx), "next.config.mjs"),
-		join(projectPath, "next.config.mjs")
-	);
-	updateStatus("Updated the next.config.mjs file");
-
-	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 processArgument(ctx.args, "eslint-plugin" as keyof C3Args, {
-		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`);
-
-	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(", "))}`,
-	});
+const config: MultiPlatformTemplateConfig = {
+	displayName: "Next.js",
+	platformVariants: { pages, workers },
 };
-
-export default {
-	configVersion: 1,
-	id: "next",
-	platform: "pages",
-	displayName: "Next",
-	devScript: "dev",
-	previewScript: "pages:preview",
-	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 () => {
-		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}`,
-				"pages:preview": `${pagesBuildRunCommand} && wrangler pages dev .vercel/output/static ${await compatDateFlag()} --compatibility-flag=nodejs_compat`,
-				"pages:deploy": `${pagesBuildRunCommand} && wrangler pages deploy .vercel/output/static`,
-			},
-		};
-	},
-	testFlags: [
-		"--typescript",
-		"--no-install",
-		"--eslint",
-		"--tailwind",
-		"--src-dir",
-		"--app",
-		"--import-alias",
-		"@/*",
-	],
-	compatibilityFlags: ["nodejs_compat"],
-} as TemplateConfig;
+export default config;

package/templates/next/{README.md → pages/README.md}

@@ -20,10 +20,10 @@ Open [http://localhost:3000](http://localhost:3000) with your browser to see the
 
 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
-  - `pages:preview` to locally preview your Pages application using the [Wrangler](https://developers.cloudflare.com/workers/wrangler/) CLI
-  - `pages:deploy` to deploy your Pages application using the [Wrangler](https://developers.cloudflare.com/workers/wrangler/) 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/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
 
@@ -39,19 +39,29 @@ You can use bindings during development, when previewing locally your applicatio
 
 #### 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 lines containing the following comment:
-```ts
-// KV Example:
-```
-
-and uncomment the commented lines below it.
-
-After doing this you can run the `dev` script and visit the `/api/hello` route to see the example in action.
-
-To then enable such example also in preview mode add a `kv` in the `pages:preview` script like so:
-```diff
--    "pages:preview": "npm run pages:build && wrangler pages dev .vercel/output/static --compatibility-date=2023-12-18 --compatibility-flag=nodejs_compat",
-+    "pages:preview": "npm run pages:build && wrangler pages dev .vercel/output/static --compatibility-date=2023-12-18 --compatibility-flag=nodejs_compat --kv MY_KV",
-```
-
-Finally, if you also want to see the example work in the deployed application make sure to add a `MY_KV` 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.
+`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/{app → pages/app}/js/app/api/hello/route.js

@@ -1,7 +1,9 @@
+// import { getRequestContext } from '@cloudflare/next-on-pages'
+
 export const runtime = 'edge'
 
-export async function GET(request) {
-  let responseText = 'Hello World'
+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:
@@ -10,10 +12,10 @@ export async function GET(request) {
   // )
   //
   // KV Example:
-  // const myKv = process.env.MY_KV
+  // const myKv = getRequestContext().env.MY_KV_NAMESPACE
   // await myKv.put('suffix', ' from a KV store!')
   // const suffix = await myKv.get('suffix')
-  // responseText += suffix
+  // return new Response(responseText + suffix)
 
   return new Response(responseText)
 }

package/templates/next/{app → pages/app}/ts/app/api/hello/route.ts

@@ -1,9 +1,9 @@
-import type { NextRequest } from 'next/server'
+// import { getRequestContext } from '@cloudflare/next-on-pages'
 
 export const runtime = 'edge'
 
-export async function GET(request: NextRequest) {
-  let responseText = 'Hello World'
+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:
@@ -12,10 +12,10 @@ export async function GET(request: NextRequest) {
   // )
   //
   // KV Example:
-  // const myKv = process.env.MY_KV
+  // const myKv = getRequestContext().env.MY_KV_NAMESPACE
   // await myKv.put('suffix', ' from a KV store!')
   // const suffix = await myKv.get('suffix')
-  // responseText += suffix
+  // return new Response(responseText + suffix)
 
   return new Response(responseText)
 }

package/templates/next/pages/c3.ts

@@ -0,0 +1,221 @@
+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);
+
+	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",
+		"vercel",
+		...(installEslintPlugin ? ["eslint-plugin-next-on-pages"] : []),
+	];
+	await installPackages(packages, {
+		dev: true,
+		startText: "Adding the Cloudflare Pages adapter",
+		doneText: `${brandColor(`installed`)} ${dim(packages.join(", "))}`,
+	});
+};
+
+const envInterfaceName = "CloudflareEnv";
+const typesPath = "./env.d.ts";
+
+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 ${envInterfaceName} ${typesPath}`,
+				}),
+			},
+		};
+	},
+	devScript: "dev",
+	previewScript: "preview",
+	deployScript: "deploy",
+	compatibilityFlags: ["nodejs_compat"],
+	typesPath,
+	envInterfaceName,
+} as TemplateConfig;

package/templates/next/pages/{js → pages/js}/pages/api/hello.js

@@ -1,3 +1,5 @@
+import { getRequestContext } from '@cloudflare/next-on-pages'
+
 export const config = {
   runtime: 'edge',
 }
@@ -12,7 +14,7 @@ export default async function handler(req) {
   // )
   //
   // KV Example:
-  // const myKv = process.env.MY_KV
+  // const myKv = getRequestContext().env.MY_KV_NAMESPACE
   // await myKv.put('suffix', ' from a KV store!')
   // const suffix = await myKv.get('suffix')
   // responseText += suffix

package/templates/next/pages/{ts → pages/ts}/pages/api/hello.ts

@@ -1,4 +1,5 @@
 import type { NextRequest } from 'next/server'
+import { getRequestContext } from '@cloudflare/next-on-pages'
 
 export const config = {
   runtime: 'edge',
@@ -14,7 +15,7 @@ export default async function handler(req: NextRequest) {
   // )
   //
   // KV Example:
-  // const myKv = process.env.MY_KV
+  // const myKv = getRequestContext().env.MY_KV_NAMESPACE
   // await myKv.put('suffix', ' from a KV store!')
   // const suffix = await myKv.get('suffix')
   // responseText += suffix

package/templates/next/pages/wrangler.jsonc

@@ -0,0 +1,8 @@
+{
+  "name": "<TBD>",
+  "compatibility_date": "<TBD>",
+  "compatibility_flags": [
+    "nodejs_compat"
+  ],
+  "pages_build_output_dir": ".vercel/output/static"
+}

package/templates/next/workers/c3.ts

@@ -0,0 +1,71 @@
+import { brandColor, dim } from "@cloudflare/cli/colors";
+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 { C3Context } from "types";
+
+const generate = async (ctx: C3Context) => {
+	await runFrameworkGenerator(ctx, [ctx.project.name]);
+};
+
+const configure = async (ctx: C3Context) => {
+	await installPackages(["@opennextjs/cloudflare@^1.0.2"], {
+		startText: "Adding the Cloudflare adapter",
+		doneText: `${brandColor(`installed`)} @opennextjs/cloudflare)}`,
+	});
+
+	const usesTs = usesTypescript(ctx);
+
+	updateNextConfig(usesTs);
+};
+
+const updateNextConfig = (usesTs: boolean) => {
+	const s = spinner();
+
+	const configFile = `next.config.${usesTs ? "ts" : "mjs"}`;
+	s.start(`Updating \`${configFile}\``);
+
+	const configContent = readFile(configFile);
+
+	const updatedConfigFile =
+		configContent +
+		`
+		// added by create cloudflare to enable calling \`getCloudflareContext()\` in \`next dev\`
+		import { initOpenNextCloudflareForDev } from '@opennextjs/cloudflare';
+		initOpenNextCloudflareForDev();
+		`.replace(/\n\t*/g, "\n");
+
+	writeFile(configFile, updatedConfigFile);
+
+	s.stop(`${brandColor(`updated`)} ${dim(`\`${configFile}\``)}`);
+};
+
+const envInterfaceName = "CloudflareEnv";
+const typesPath = "./cloudflare-env.d.ts";
+export default {
+	configVersion: 1,
+	id: "next",
+	frameworkCli: "create-next-app",
+	platform: "workers",
+	displayName: "Next.js",
+	path: "templates/next/workers",
+	copyFiles: {
+		path: "./templates",
+	},
+	generate,
+	configure,
+	transformPackageJson: async () => ({
+		scripts: {
+			deploy: `opennextjs-cloudflare build && opennextjs-cloudflare deploy`,
+			preview: `opennextjs-cloudflare build && opennextjs-cloudflare preview`,
+			"cf-typegen": `wrangler types --env-interface ${envInterfaceName} ${typesPath}`,
+		},
+	}),
+	devScript: "dev",
+	previewScript: "preview",
+	deployScript: "deploy",
+	typesPath,
+	envInterfaceName,
+} as TemplateConfig;

package/templates/next/workers/templates/.dev.vars

@@ -0,0 +1,2 @@
+# Load .env.development* files when running `wrangler dev`
+NEXTJS_ENV=development