Use autoconfig in c3 (#11251)

* Support the WRANGLER_HIDE_BANNER environment variable across Wrangler & C3

* Reduce C3 framework test timeout. Previously it was 25 mins, now it should be 3 mins

* Remove dev server from C3 command. To make this consistent across frameworks we were injecting extra dev commands into package.json files, which meant that generated C3 projects often had both a `start` and a `develop` script.

* Reduce logging in package-manager detection

* Expand autoconfig & use it in C3 for gatsby

* Expand framework configuration and support dry-running

* Address comments

* Address comments

* longer timeout 😢

Author: penalosa

.changeset/eager-pans-hang.md

@@ -0,0 +1,21 @@
+---
+"wrangler": minor
+---
+
+When the `WRANGLER_HIDE_BANNER` environment variable is provided, Wrangler will no longer display a version banner. This applies to all commands.
+
+For instance, previously running `wrangler docs` would give the following output:
+
+```
+> wrangler docs
+ ⛅️ wrangler 4.47.0
+───────────────────
+Opening a link in your default browser: https://developers.cloudflare.com/workers/wrangler/commands/
+```
+
+With `WRANGLER_HIDE_BANNER`, this is now:
+
+```
+> WRANGLER_HIDE_BANNER=true wrangler docs
+Opening a link in your default browser: https://developers.cloudflare.com/workers/wrangler/commands/
+```

.changeset/ninety-monkeys-turn.md

@@ -0,0 +1,5 @@
+---
+"create-cloudflare": minor
+---
+
+When the `--experimental` flag is passed to `create-cloudflare`, use `wrangler setup` for configuring a project to work on Cloudflare rather than the existing `create-cloudflare` logic. Only Gatsby is supported right now, with more frameworks to be added in future. There should be no functional change to applications created via `create-cloudflare` when using the `--experimental` flag.

packages/create-cloudflare/e2e/helpers/framework-helpers.ts

@@ -283,9 +283,9 @@ export async function verifyPreviewScript(
 
 	try {
 		// Some frameworks take quite a long time to build the application (e.g. Docusaurus)
-		// so wait up to 5 mins for the dev-server to be ready.
+		// so wait some time for the dev-server to be ready.
 		await retry(
-			{ times: 300, sleepMs: 5000 },
+			{ times: 60, sleepMs: 5000 },
 			async () => await fetch(`http://localhost:${port}${verifyPreview.route}`),
 		);
 

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

@@ -464,7 +464,7 @@ describe("Create Cloudflare CLI", () => {
 				);
 				expect(normalizeOutput(output)).toMatchInlineSnapshot(`
 					"create-cloudflare <version>
-					  The create-cloudflare cli (also known as C3) is a command-line tool designed to help you set up and deploy new applications to Cloudflare. In addition to speed, it leverages officially developed templates for Workers and framework-specific setup guides to ensure each new application that you set up follows Cloudflare and any third-party best practices for deployment on the Cloudflare network.
+					  The create-cloudflare CLI (also known as C3) is a command-line tool designed to help you set up and deploy new applications to Cloudflare. In addition to speed, it leverages officially developed templates for Workers and framework-specific setup guides to ensure each new application that you set up follows Cloudflare and any third-party best practices for deployment on the Cloudflare network.
 					USAGE
 					  <USAGE>
 					OPTIONS
@@ -486,6 +486,8 @@ describe("Create Cloudflare CLI", () => {
 					    You may specify additional arguments to be passed directly to these underlying tools by adding them after a "--" argument, like so:
 					    npm create cloudflare -- --framework next -- --ts
 					    pnpm create cloudflare --framework next -- --ts
+					    Allowed Values:
+					      gatsby
 					  --platform=<value>
 					    Whether the application should be deployed to Pages or Workers. This is only applicable for Frameworks templates that support both Pages and Workers.
 					    Allowed Values:
@@ -536,7 +538,7 @@ describe("Create Cloudflare CLI", () => {
 				const { output } = await runC3(["--help"], [], logStream);
 				expect(normalizeOutput(output)).toMatchInlineSnapshot(`
 					"create-cloudflare <version>
-					  The create-cloudflare cli (also known as C3) is a command-line tool designed to help you set up and deploy new applications to Cloudflare. In addition to speed, it leverages officially developed templates for Workers and framework-specific setup guides to ensure each new application that you set up follows Cloudflare and any third-party best practices for deployment on the Cloudflare network.
+					  The create-cloudflare CLI (also known as C3) is a command-line tool designed to help you set up and deploy new applications to Cloudflare. In addition to speed, it leverages officially developed templates for Workers and framework-specific setup guides to ensure each new application that you set up follows Cloudflare and any third-party best practices for deployment on the Cloudflare network.
 					USAGE
 					  <USAGE>
 					OPTIONS

packages/create-cloudflare/e2e/tests/frameworks/test-config.ts

@@ -610,7 +610,29 @@ function getFrameworkTestConfig(pm: string): NamedFrameworkTestConfig[] {
  */
 function getExperimentalFrameworkTestConfig() {
 	return [
-		// None right now
+		{
+			name: "gatsby:workers",
+			argv: ["--platform", "workers"],
+			unsupportedPms: ["bun", "pnpm", "yarn"],
+			promptHandlers: [
+				{
+					matcher: /Would you like to use a template\?/,
+					input: ["n"],
+				},
+			],
+			testCommitMessage: true,
+			timeout: LONG_TIMEOUT,
+			verifyDeploy: {
+				route: "/",
+				expectedText: "Gatsby!",
+			},
+			verifyPreview: {
+				previewArgs: ["--inspector-port=0"],
+				route: "/",
+				expectedText: "Gatsby!",
+			},
+			nodeCompat: false,
+		},
 	];
 }
 

packages/create-cloudflare/src/__tests__/dialog.test.ts

@@ -125,7 +125,6 @@ describe("dialog helpers", () => {
 				Dash: https://dash.cloudflare.com/?to=/:account/workers/services/view/test-project
 
 				💻 Continue Developing
-				Start dev server: pnpm run start
 				Deploy again: pnpm run deploy
 
 				📖 Explore Documentation
@@ -160,7 +159,6 @@ describe("dialog helpers", () => {
 
 				💻 Continue Developing
 				Change directories: cd ../example
-				Start dev server: pnpm run start
 				Deploy: pnpm run deploy
 
 				📖 Explore Documentation

packages/create-cloudflare/src/cli.ts

@@ -144,7 +144,9 @@ const create = async (ctx: C3Context) => {
 		await template.generate(ctx);
 	}
 
-	await copyTemplateFiles(ctx);
+	if (!ctx.args.experimental) {
+		await copyTemplateFiles(ctx);
+	}
 	await updatePackageName(ctx);
 
 	chdir(ctx.project.path);
@@ -155,25 +157,37 @@ const create = async (ctx: C3Context) => {
 };
 
 const configure = async (ctx: C3Context) => {
-	startSection("Configuring your application for Cloudflare", "Step 2 of 3");
+	startSection(
+		"Configuring your application for Cloudflare via `wrangler setup`",
+		"Step 2 of 3",
+	);
 
+	// This is kept even in the autoconfig case because autoconfig will ultimately end up installing Wrangler anyway
+	// If we _didn't_ install Wrangler when using autoconfig we'd end up with a double install (one from `npx` and one from autoconfig)
 	await installWrangler();
 
-	// Note: This _must_ be called before the configure phase since
-	//       pre-existing workers assume its presence in their configure phase
-	await updateWranglerConfig(ctx);
+	if (ctx.args.experimental) {
+		const { npx } = detectPackageManager();
 
-	const { template } = ctx;
-	if (template.configure) {
-		await template.configure({ ...ctx });
-	}
+		await runCommand([npx, "wrangler", "setup", "--yes"]);
+	} else {
+		// Note: This _must_ be called before the configure phase since
+		//       pre-existing workers assume its presence in their configure phase
+		await updateWranglerConfig(ctx);
 
-	addWranglerToGitIgnore(ctx);
+		const { template } = ctx;
+		if (template.configure) {
+			await template.configure({ ...ctx });
+		}
+
+		addWranglerToGitIgnore(ctx);
 
-	await updatePackageScripts(ctx);
+		await updatePackageScripts(ctx);
 
-	await addTypes(ctx);
+		await addTypes(ctx);
+	}
 
+	// Autoconfig doesn't mess with version control, so C3 runs this after autoconfig
 	await offerGit(ctx);
 	await gitCommit(ctx);
 

packages/create-cloudflare/src/dialog.ts

@@ -65,11 +65,7 @@ export const printSummary = (ctx: C3Context) => {
 	const relativePath = relative(ctx.originalCWD, ctx.project.path);
 	const cdCommand = relativePath ? `cd ${relativePath}` : null;
 	const { npm } = detectPackageManager();
-	const devServerCommand = quoteShellArgs([
-		npm,
-		"run",
-		ctx.template.devScript ?? "start",
-	]);
+
 	const deployCommand = quoteShellArgs([
 		npm,
 		"run",
@@ -98,7 +94,6 @@ export const printSummary = (ctx: C3Context) => {
 	lines.push(
 		`💻 Continue Developing`,
 		...(cdCommand ? [`${gray("Change directories:")} ${blue(cdCommand)}`] : []),
-		`${gray("Start dev server:")} ${blue(devServerCommand)}`,
 		`${gray(ctx.deployment.url ? `Deploy again:` : "Deploy:")} ${blue(deployCommand)}`,
 		``,
 		`📖 Explore Documentation`,

packages/create-cloudflare/src/helpers/args.ts

@@ -44,7 +44,7 @@ export type ArgumentsDefinition = {
 
 export const cliDefinition: ArgumentsDefinition = {
 	intro: `
-    The create-cloudflare cli (also known as C3) is a command-line tool designed to help you set up and deploy new applications to Cloudflare. In addition to speed, it leverages officially developed templates for Workers and framework-specific setup guides to ensure each new application that you set up follows Cloudflare and any third-party best practices for deployment on the Cloudflare network.
+    The create-cloudflare CLI (also known as C3) is a command-line tool designed to help you set up and deploy new applications to Cloudflare. In addition to speed, it leverages officially developed templates for Workers and framework-specific setup guides to ensure each new application that you set up follows Cloudflare and any third-party best practices for deployment on the Cloudflare network.
   `,
 	positionals: [
 		{

packages/create-cloudflare/src/helpers/command.ts

@@ -56,11 +56,12 @@ export const runCommand = async (
 			// Don't send metrics data on any wrangler commands if telemetry is disabled in C3
 			// If telemetry is disabled separately for wrangler, wrangler will handle that
 			if (args[0] === "wrangler") {
+				opts.env ??= {};
 				const metrics = readMetricsConfig();
 				if (metrics.c3permission?.enabled === false) {
-					opts.env ??= {};
 					opts.env["WRANGLER_SEND_METRICS"] = "false";
 				}
+				opts.env["WRANGLER_HIDE_BANNER"] = "true";
 			}
 			const abortController = new AbortController();
 			const cmd = spawn(executable, [...args], {