[C3] add final commit to pages projects

.changeset/nasty-dolphins-prove.md

@@ -0,0 +1,11 @@
+---
+"create-cloudflare": minor
+---
+
+add final commit when generating Pages projects
+
+before after the user would have completed the creation of a Pages project
+they would find the Cloudflare added/modified files uncommitted, instead of
+leaving these uncommitted this change adds an extra commit (on top of the
+framework specific) which also contains some useful information about the
+project

packages/create-cloudflare/e2e-tests/pages.test.ts

@@ -14,6 +14,7 @@
 
 type FrameworkTestConfig = RunnerConfig & {
 	expectResponseToContain: string;
+	testCommitMessage: boolean;
 };
 
 describe(`E2E: Web frameworks`, () => {
@@ -89,7 +90,10 @@
 		return { output };
 	};
 
-	const runCliWithDeploy = async (framework: string) => {
+	const runCliWithDeploy = async (
+		framework: string,
+		testCommitMessage: boolean
+	) => {
 		const { argv, overrides, promptHandlers, expectResponseToContain } =
 			frameworkTests[framework];
 
@@ -119,15 +123,21 @@
 			body,
 			`(${framework}) Deployed page (${projectUrl}) didn't contain expected string: "${expectResponseToContain}"`
 		).toContain(expectResponseToContain);
+
+		if (testCommitMessage) {
+			await testDeploymentCommitMessage(getName(framework), framework);
+		}
 	};
 
 	// These are ordered based on speed and reliability for ease of debugging
 	const frameworkTests: Record<string, FrameworkTestConfig> = {
 		astro: {
 			expectResponseToContain: "Hello, Astronaut!",
+			testCommitMessage: true,
 		},
 		hono: {
 			expectResponseToContain: "Hello Hono!",
+			testCommitMessage: false,
 		},
 		qwik: {
 			expectResponseToContain: "Welcome to Qwik",
@@ -137,9 +147,11 @@
 					input: [keys.enter],
 				},
 			],
+			testCommitMessage: true,
 		},
 		remix: {
 			expectResponseToContain: "Welcome to Remix",
+			testCommitMessage: true,
 		},
 		next: {
 			expectResponseToContain: "Create Next App",
@@ -149,6 +161,7 @@
 					input: ["y"],
 				},
 			],
+			testCommitMessage: true,
 		},
 		nuxt: {
 			expectResponseToContain: "Welcome to Nuxt!",
@@ -157,9 +170,11 @@
 					build: "NITRO_PRESET=cloudflare-pages nuxt build",
 				},
 			},
+			testCommitMessage: true,
 		},
 		react: {
 			expectResponseToContain: "React App",
+			testCommitMessage: true,
 		},
 		solid: {
 			expectResponseToContain: "Hello world",
@@ -177,6 +192,7 @@
 					input: [keys.enter],
 				},
 			],
+			testCommitMessage: true,
 		},
 		svelte: {
 			expectResponseToContain: "SvelteKit app",
@@ -194,16 +210,18 @@
 					input: [keys.enter],
 				},
 			],
+			testCommitMessage: true,
 		},
 		vue: {
 			expectResponseToContain: "Vite App",
+			testCommitMessage: true,
 		},
 	};
 
 	test.concurrent.each(Object.keys(frameworkTests))(
 		"%s",
 		async (name) => {
-			await runCliWithDeploy(name);
+			await runCliWithDeploy(name, frameworkTests[name].testCommitMessage);
 		},
 		{ retry: 3 }
 	);
@@ -212,3 +230,48 @@
 		await runCli("hono", { argv: ["--wrangler-defaults"] });
 	});
 });
+
+const testDeploymentCommitMessage = async (
+	projectName: string,
+	framework: string
+) => {
+	// Note: we cannot simply run git and check the result since the commit can be part of the
+	//       deployment even without git, so instead we fetch the deployment info from the pages api
+	const response = await fetch(
+		`https://api.cloudflare.com/client/v4/accounts/${process.env.CLOUDFLARE_ACCOUNT_ID}/pages/projects`,
+		{
+			headers: {
+				Authorization: `Bearer ${process.env.CLOUDFLARE_API_TOKEN}`,
+			},
+		}
+	);
+
+	const result = (
+		(await response.json()) as {
+			result: {
+				name: string;
+				latest_deployment?: {
+					deployment_trigger: {
+						metadata?: {
+							commit_message: string;
+						};
+					};
+				};
+			}[];
+		}
+	).result;
+
+	const projectLatestCommitMessage = result.find(
+		(project) => project.name === projectName
+	)?.latest_deployment?.deployment_trigger?.metadata?.commit_message;
+	expect(projectLatestCommitMessage).toMatch(
+		/^Initialize web application via create-cloudflare CLI/
+	);
+	// TODO: add back checks the following when the commit message doesn't
+	// get truncated at 128 characters
+	// expect(projectLatestCommitMessage).toContain(
+	// 	`C3 = create-cloudflare@${version}`
+	// );
+	// expect(projectLatestCommitMessage).toContain(`project name = ${projectName}`);
+	// expect(projectLatestCommitMessage).toContain(`framework = ${framework}`);
+};

packages/create-cloudflare/src/common.ts

@@ -1,6 +1,7 @@
 import { existsSync, mkdirSync, readdirSync } from "fs";
 import { basename, dirname, resolve } from "path";
 import { chdir } from "process";
+import { getFrameworkCli } from "frameworks/index";
 import {
 	crash,
 	endSection,
@@ -23,10 +24,12 @@ import {
 import { inputPrompt, processArgument, spinner } from "helpers/interactive";
 import { detectPackageManager } from "helpers/packages";
 import { poll } from "helpers/poll";
+import { version as wranglerVersion } from "wrangler/package.json";
+import { version } from "../package.json";
 import { C3_DEFAULTS } from "./cli";
 import type { C3Args, PagesGeneratorContext } from "types";
 
-const { npm } = detectPackageManager();
+const { name, npm } = detectPackageManager();
 
 export const validateProjectDirectory = (relativePath: string) => {
 	const path = resolve(relativePath);
@@ -47,15 +50,15 @@ export const setupProjectDirectory = (args: C3Args) => {
 	}
 
 	const directory = dirname(path);
-	const name = basename(path);
+	const pathBasename = basename(path);
 
 	// If the target is a nested directory, create the parent
 	mkdirSync(directory, { recursive: true });
 
 	// Change to the parent directory
 	chdir(directory);
 
-	return { name, path };
+	return { name: pathBasename, path };
 };
 
 export const offerToDeploy = async (ctx: PagesGeneratorContext) => {
@@ -87,15 +90,36 @@ export const runDeploy = async (ctx: PagesGeneratorContext) => {
 		return;
 	}
 
-	const deployCmd = `${npm} run ${
-		ctx.framework?.config.deployCommand ?? "deploy"
-	}`;
+	const baseDeployCmd = [
+		npm,
+		"run",
+		ctx.framework?.config.deployCommand ?? "deploy",
+	];
+
+	const insideGitRepo = await isInsideGitRepo(ctx.project.path);
+
+	const deployCmd = [
+		...baseDeployCmd,
+		// Important: the following assumes that all framework deploy commands terminate with `wrangler pages deploy`
+		...(ctx.framework?.commitMessage && !insideGitRepo
+			? [
+					...(name === "npm" ? ["--"] : []),
+					`--commit-message="${ctx.framework.commitMessage.replaceAll(
+						'"',
+						'\\"'
+					)}"`,
+			  ]
+			: []),
+	];
+
 	const result = await runCommand(deployCmd, {
 		silent: true,
 		cwd: ctx.project.path,
 		env: { CLOUDFLARE_ACCOUNT_ID: ctx.account.id, NODE_ENV: "production" },
-		startText: `Deploying your application`,
-		doneText: `${brandColor("deployed")} ${dim(`via \`${deployCmd}\``)}`,
+		startText: "Deploying your application",
+		doneText: `${brandColor("deployed")} ${dim(
+			`via \`${baseDeployCmd.join(" ")}\``
+		)}`,
 	});
 
 	const deployedUrlRegex = /https:\/\/.+\.(pages|workers)\.dev/;
@@ -130,10 +154,12 @@ export const chooseAccount = async (ctx: PagesGeneratorContext) => {
 		s.stop(
 			`${brandColor("account")} ${dim("more than one account available")}`
 		);
-		const accountOptions = Object.entries(accounts).map(([name, id]) => ({
-			label: name,
-			value: id,
-		}));
+		const accountOptions = Object.entries(accounts).map(
+			([accountName, id]) => ({
+				label: accountName,
+				value: id,
+			})
+		);
 
 		accountId = await inputPrompt({
 			type: "select",
@@ -144,7 +170,7 @@ export const chooseAccount = async (ctx: PagesGeneratorContext) => {
 		});
 	}
 	const accountName = Object.keys(accounts).find(
-		(name) => accounts[name] == accountId
+		(account) => accounts[account] == accountId
 	) as string;
 
 	ctx.account = { id: accountId, name: accountName };
@@ -250,33 +276,89 @@ export const offerGit = async (ctx: PagesGeneratorContext) => {
 };
 
 export const gitCommit = async (ctx: PagesGeneratorContext) => {
-	if (!ctx.args.git) return;
+	// Note: createCommitMessage stores the message in ctx so that it can
+	//       be used later even if we're not in a git repository, that's why
+	//       we unconditionally run this command here
+	const commitMessage = await createCommitMessage(ctx);
+
+	if (!(await isGitInstalled()) || !(await isInsideGitRepo(ctx.project.path)))
+		return;
 
 	await runCommands({
 		silent: true,
 		cwd: ctx.project.path,
-		commands: [
-			"git add .",
-			["git", "commit", "-m", "Initial commit (by Create-Cloudflare CLI)"],
-		],
+		commands: ["git add .", ["git", "commit", "-m", commitMessage]],
 		startText: "Committing new files",
-		doneText: `${brandColor("git")} ${dim(`initial commit`)}`,
+		doneText: `${brandColor("git")} ${dim(`commit`)}`,
 	});
 };
 
+const createCommitMessage = async (ctx: PagesGeneratorContext) => {
+	if (!ctx.framework) return "Initial commit (by create-cloudflare CLI)";
+
+	const header = "Initialize web application via create-cloudflare CLI";
+
+	const packageManager = detectPackageManager();
+
+	const gitVersion = await getGitVersion();
+	const insideRepo = await isInsideGitRepo(ctx.project.path);
+
+	const details = [
+		{ key: "C3", value: `create-cloudflare@${version}` },
+		{ key: "project name", value: ctx.project.name },
+		{ key: "framework", value: ctx.framework.name },
+		{ key: "framework cli", value: getFrameworkCli(ctx) },
+		{
+			key: "package manager",
+			value: `${packageManager.name}@${packageManager.version}`,
+		},
+		{
+			key: "wrangler",
+			value: `wrangler@${wranglerVersion}`,
+		},
+		{
+			key: "git",
+			value: insideRepo ? gitVersion : "N/A",
+		},
+	];
+
+	const body = `Details:\n${details
+		.map(({ key, value }) => `  ${key} = ${value}`)
+		.join("\n")}\n`;
+
+	const commitMessage = `${header}\n\n${body}\n`;
+
+	if (ctx.type !== "workers") {
+		ctx.framework.commitMessage = commitMessage;
+	}
+
+	return commitMessage;
+};
+
 /**
- * Check whether git is available on the user's machine.
+ * Return the version of git on the user's machine, or null if git is not available.
  */
-export async function isGitInstalled() {
+async function getGitVersion() {
 	try {
-		await runCommand("git -v", { useSpinner: false, silent: true });
-
-		return true;
+		const rawGitVersion = await runCommand("git --version", {
+			useSpinner: false,
+			silent: true,
+		});
+		// let's remove the "git version " prefix as it isn't really helpful
+		const gitVersion = rawGitVersion.replace(/^git\s+version\s+/, "");
+		return gitVersion;
 	} catch {
-		return false;
+		return null;
 	}
 }
 
+/**
+ * Check whether git is available on the user's machine.
+ */
+async function isGitInstalled() {
+	return (await getGitVersion()) !== null;
+}
+
 /**
  * Check whether the given current working directory is within a git repository
  * by looking for a `.git` directory in this or an ancestor directory.