Support Qwik in autoconfig (#11472)

dario-piotrowicz · web-flow · commit ce295bffdc7a · 2025-12-03T16:47:57.000Z
* Support Qwik in autoconfig

* remove unnecessary src/entry.cloudflare-pages.tsx step
diff --git a/.changeset/famous-wasps-read.md b/.changeset/famous-wasps-read.md
@@ -0,0 +1,5 @@
+---
+"create-cloudflare": patch
+---
+
+Support Qwik in `--experimental` mode
diff --git a/.changeset/forty-glasses-think.md b/.changeset/forty-glasses-think.md
@@ -0,0 +1,5 @@
+---
+"wrangler": minor
+---
+
+Support Qwik projects in autoconfig
diff --git a/.changeset/sweet-adults-open.md b/.changeset/sweet-adults-open.md
@@ -0,0 +1,7 @@
+---
+"create-cloudflare": patch
+---
+
+fix: remove unnecessary step in qwik templates
+
+The step that modifies the `src/entry.cloudflare-pages.tsx` file doesn't seem to change the file in any way anymore, so it's been removed
diff --git a/packages/create-cloudflare/e2e/tests/cli/cli.test.ts b/packages/create-cloudflare/e2e/tests/cli/cli.test.ts
@@ -555,7 +555,7 @@ describe("Create Cloudflare CLI", () => {
 					    npm create cloudflare -- --framework next -- --ts
 					    pnpm create cloudflare --framework next -- --ts
 					    Allowed Values:
-					      gatsby, svelte, docusaurus, astro, tanstack-start, angular, solid
+					      gatsby, svelte, docusaurus, astro, tanstack-start, angular, solid, qwik
 					  --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:
diff --git a/packages/create-cloudflare/e2e/tests/frameworks/test-config.ts b/packages/create-cloudflare/e2e/tests/frameworks/test-config.ts
@@ -793,6 +793,31 @@ function getExperimentalFrameworkTestConfig(
 			nodeCompat: true,
 			verifyTypes: false,
 		},
+		{
+			name: "qwik:workers",
+			argv: ["--platform", "workers"],
+			promptHandlers: [
+				{
+					matcher: /Yes looks good, finish update/,
+					input: [keys.enter],
+				},
+			],
+			flags: [],
+			testCommitMessage: true,
+			unsupportedOSs: ["win32"],
+			unsupportedPms: ["yarn"],
+			verifyDeploy: {
+				route: "/",
+				expectedText: "Welcome to Qwik",
+			},
+			verifyPreview: {
+				previewArgs: ["--inspector-port=0"],
+				route: "/",
+				expectedText: "Welcome to Qwik",
+			},
+			nodeCompat: true,
+			verifyTypes: false,
+		},
 	];
 }
 
diff --git a/packages/create-cloudflare/src/templates.ts b/packages/create-cloudflare/src/templates.ts
@@ -243,6 +243,7 @@ export function getFrameworkMap({ experimental = false }): TemplateMap {
 			"tanstack-start": tanStackStartTemplate,
 			angular: angularTemplate,
 			solid: solidTemplate,
+			qwik: qwikTemplate,
 		};
 	} else {
 		return {
diff --git a/packages/create-cloudflare/templates/qwik/pages/c3.ts b/packages/create-cloudflare/templates/qwik/pages/c3.ts
@@ -24,7 +24,6 @@ const configure = async (ctx: C3Context) => {
 	await runCommand(cmd);
 
 	addBindingsProxy(ctx);
-	populateCloudflareEnv();
 };
 
 const addBindingsProxy = (ctx: C3Context) => {
@@ -89,40 +88,6 @@ const addBindingsProxy = (ctx: C3Context) => {
 	s.stop(`${brandColor("updated")} \`vite.config.ts\``);
 };
 
-const populateCloudflareEnv = () => {
-	const entrypointPath = "src/entry.cloudflare-pages.tsx";
-
-	const s = spinner();
-	s.start(`Updating \`${entrypointPath}\``);
-
-	transformFile(entrypointPath, {
-		visitTSInterfaceDeclaration: function (n) {
-			const b = recast.types.builders;
-			const id = n.node.id as recast.types.namedTypes.Identifier;
-			if (id.name !== "QwikCityPlatform") {
-				this.traverse(n);
-			}
-
-			const newBody = [
-				["env", "Env"],
-				// Qwik doesn't supply `cf` to the platform object. Should they do so, uncomment this
-				// ["cf", "CfProperties"],
-			].map(([varName, type]) =>
-				b.tsPropertySignature(
-					b.identifier(varName),
-					b.tsTypeAnnotation(b.tsTypeReference(b.identifier(type))),
-				),
-			);
-
-			n.node.body.body = newBody;
-
-			return false;
-		},
-	});
-
-	s.stop(`${brandColor("updated")} \`${entrypointPath}\``);
-};
-
 const config: TemplateConfig = {
 	configVersion: 1,
 	id: "qwik",
diff --git a/packages/create-cloudflare/templates/qwik/workers/c3.ts b/packages/create-cloudflare/templates/qwik/workers/c3.ts
@@ -27,7 +27,6 @@ const configure = async (ctx: C3Context) => {
 	removeFile("./public/_routes.json");
 
 	addBindingsProxy(ctx);
-	populateCloudflareEnv();
 };
 
 const addBindingsProxy = (ctx: C3Context) => {
@@ -92,40 +91,6 @@ const addBindingsProxy = (ctx: C3Context) => {
 	s.stop(`${brandColor("updated")} \`vite.config.ts\``);
 };
 
-const populateCloudflareEnv = () => {
-	const entrypointPath = "src/entry.cloudflare-pages.tsx";
-
-	const s = spinner();
-	s.start(`Updating \`${entrypointPath}\``);
-
-	transformFile(entrypointPath, {
-		visitTSInterfaceDeclaration: function (n) {
-			const b = recast.types.builders;
-			const id = n.node.id as recast.types.namedTypes.Identifier;
-			if (id.name !== "QwikCityPlatform") {
-				this.traverse(n);
-			}
-
-			const newBody = [
-				["env", "Env"],
-				// Qwik doesn't supply `cf` to the platform object. Should they do so, uncomment this
-				// ["cf", "CfProperties"],
-			].map(([varName, type]) =>
-				b.tsPropertySignature(
-					b.identifier(varName),
-					b.tsTypeAnnotation(b.tsTypeReference(b.identifier(type))),
-				),
-			);
-
-			n.node.body.body = newBody;
-
-			return false;
-		},
-	});
-
-	s.stop(`${brandColor("updated")} \`${entrypointPath}\``);
-};
-
 const config: TemplateConfig = {
 	configVersion: 1,
 	id: "qwik",
diff --git a/packages/wrangler/src/autoconfig/frameworks/get-framework.ts b/packages/wrangler/src/autoconfig/frameworks/get-framework.ts
@@ -1,5 +1,6 @@
 import { Angular } from "./angular";
 import { Astro } from "./astro";
+import { Qwik } from "./qwik";
 import { SolidStart } from "./solid-start";
 import { Static } from "./static";
 import { SvelteKit } from "./sveltekit";
@@ -21,6 +22,8 @@ export function getFramework(detectedFramework?: {
 			return new Angular(detectedFramework.name);
 		case "solid-start":
 			return new SolidStart(detectedFramework.name);
+		case "qwik":
+			return new Qwik(detectedFramework.name);
 		default:
 			return new Static(detectedFramework?.name);
 	}
diff --git a/packages/wrangler/src/autoconfig/frameworks/index.ts b/packages/wrangler/src/autoconfig/frameworks/index.ts
@@ -7,18 +7,21 @@ export type ConfigurationOptions = {
 	dryRun: boolean;
 };
 
+export type PackageJsonScriptsOverrides = {
+	preview?: string; // default is `npm run build && wrangler dev`
+	deploy?: string; // default is `npm run build && wrangler deploy`
+	typegen?: string; // default is `wrangler types`
+};
+
 export type ConfigurationResults = {
 	wranglerConfig: RawConfig;
+	// Scripts to override in the package.json. Most frameworks should not need to do this, as their default detected build command will be sufficient
+	packageJsonScriptsOverrides?: PackageJsonScriptsOverrides;
 };
 
 export abstract class Framework {
 	constructor(public name: string = "Static") {}
 
-	// Override commands used to configure the project. Most frameworks should not need to do this, as their default detected build command will be sufficient
-	preview?: string; // default is `npm run build && wrangler dev`
-	deploy?: string; // default is `npm run build && wrangler deploy`
-	typegen?: string; // default is `wrangler types`
-
 	/** Some frameworks (i.e. Nuxt) don't need additional configuration */
 	get configured() {
 		return false;
diff --git a/packages/wrangler/src/autoconfig/frameworks/qwik.ts b/packages/wrangler/src/autoconfig/frameworks/qwik.ts
@@ -0,0 +1,142 @@
+import { writeFile } from "node:fs/promises";
+import { endSection } from "@cloudflare/cli";
+import { brandColor } from "@cloudflare/cli/colors";
+import { spinner } from "@cloudflare/cli/interactive";
+import * as recast from "recast";
+import * as typescriptParser from "recast/parsers/typescript";
+import { getPackageManager } from "../../package-manager";
+import { transformFile } from "../c3-vendor/codemod";
+import { quoteShellArgs, runCommand } from "../c3-vendor/command";
+import { usesTypescript } from "../uses-typescript";
+import { Framework } from ".";
+import type { ConfigurationOptions, ConfigurationResults } from ".";
+import type { Program } from "esprima";
+
+export class Qwik extends Framework {
+	async configure({
+		projectPath,
+		dryRun,
+	}: ConfigurationOptions): Promise<ConfigurationResults> {
+		const packageManager = await getPackageManager();
+
+		if (!dryRun) {
+			// Add the pages integration
+			const cmd = [
+				// For some reason `pnpx qwik add` fails for qwik so we use `pnpm qwik add` instead.
+				packageManager.type === "pnpm"
+					? packageManager.type
+					: packageManager.npx,
+				"qwik",
+				"add",
+				"cloudflare-pages",
+			];
+			endSection(`Running ${quoteShellArgs(cmd)}`);
+			await runCommand(cmd);
+
+			addBindingsProxy(projectPath);
+
+			await addAssetsIgnoreFile(projectPath);
+		}
+		return {
+			wranglerConfig: {
+				main: "./dist/_worker.js",
+				compatibility_flags: ["nodejs_compat", "global_fetch_strictly_public"],
+				assets: {
+					binding: "ASSET",
+					directory: "./dist",
+				},
+			},
+			packageJsonScriptsOverrides: {
+				preview: `${packageManager.type} run build && wrangler dev`,
+				deploy: `${packageManager.type} run build && wrangler deploy`,
+			},
+		};
+	}
+
+	configurationDescription =
+		'Configuring project for Qwik with "qwik add cloudflare-pages"';
+}
+
+function addBindingsProxy(projectPath: string) {
+	// Qwik only has a typescript template atm.
+	// This check is an extra precaution
+	if (!usesTypescript(projectPath)) {
+		return;
+	}
+
+	const s = spinner();
+	s.start("Updating `vite.config.ts`");
+
+	const b = recast.types.builders;
+
+	const getPlatformProxyTsAstNodes = (
+		recast.parse(
+			`
+				let platform = {};
+
+				if (process.env.NODE_ENV === 'development') {
+					const { getPlatformProxy } = await import('wrangler');
+					platform = await getPlatformProxy();
+				}
+			`,
+			{ parser: typescriptParser }
+		).program as Program
+	).body;
+
+	transformFile("vite.config.ts", {
+		// Insert the env declaration after the last import (but before the rest of the body)
+		visitProgram: function (n) {
+			const lastImportIndex = n.node.body.findLastIndex(
+				(t) => t.type === "ImportDeclaration"
+			);
+			const lastImport = n.get("body", lastImportIndex);
+			lastImport.insertAfter(...getPlatformProxyTsAstNodes);
+
+			return this.traverse(n);
+		},
+		// Pass the `platform` object from the declaration to the `qwikCity` plugin
+		visitCallExpression: function (n) {
+			const callee = n.node.callee as recast.types.namedTypes.Identifier;
+			if (callee.name !== "qwikCity") {
+				return this.traverse(n);
+			}
+
+			// The config object passed to `qwikCity`
+			const configArgument = n.node.arguments[0] as
+				| recast.types.namedTypes.ObjectExpression
+				| undefined;
+
+			const platformPropery = b.objectProperty.from({
+				key: b.identifier("platform"),
+				value: b.identifier("platform"),
+				shorthand: true,
+			});
+
+			if (!configArgument) {
+				n.node.arguments = [b.objectExpression([platformPropery])];
+
+				return false;
+			}
+
+			if (configArgument.type !== "ObjectExpression") {
+				throw new Error("Failed to update `vite.config.ts`");
+			}
+
+			// Add the `platform` object to the object
+			configArgument.properties.push(platformPropery);
+
+			return false;
+		},
+	});
+
+	s.stop(`${brandColor("updated")} \`vite.config.ts\``);
+}
+
+async function addAssetsIgnoreFile(projectPath: string) {
+	const toAdd = ["_worker.js", "_routes.json", "_headers", "_redirects"];
+
+	await writeFile(
+		`${projectPath}/public/.assetsignore`,
+		`${toAdd.join("\n")}\n`
+	);
+}
diff --git a/packages/wrangler/src/autoconfig/run.ts b/packages/wrangler/src/autoconfig/run.ts

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"create-cloudflare": patch
 +---
++
 +Support Qwik in `--experimental` mode