Support Vike in autoconfig (#11549)

dario-piotrowicz · web-flow · commit d059f69706bc · 2025-12-18T14:59:55.000Z
diff --git a/.changeset/big-crabs-agree.md b/.changeset/big-crabs-agree.md
@@ -0,0 +1,5 @@
+---
+"create-cloudflare": minor
+---
+
+Support Vike in `--experimental` mode
diff --git a/.changeset/tiny-tires-write.md b/.changeset/tiny-tires-write.md
@@ -0,0 +1,5 @@
+---
+"wrangler": minor
+---
+
+Support Vike in autoconfig
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -54,6 +54,7 @@
 		"Untriaged",
 		"userconfig",
 		"versionless",
+		"vike",
 		"wasmvalue",
 		"weakmap",
 		"weakset",
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 svelte -- --types=ts
 					    pnpm create cloudflare --framework svelte -- --types=ts
 					    Allowed Values:
-					      analog, angular, astro, docusaurus, gatsby, next, nuxt, qwik, react, react-router, redwood, solid, svelte, tanstack-start, vue
+					      analog, angular, astro, docusaurus, gatsby, next, nuxt, qwik, react, react-router, redwood, solid, svelte, tanstack-start, vike, vue
 					  --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
@@ -992,6 +992,28 @@ function getExperimentalFrameworkTestConfig(
 			nodeCompat: true,
 			verifyTypes: false,
 		},
+		{
+			name: "vike",
+			testCommitMessage: true,
+			timeout: LONG_TIMEOUT,
+			unsupportedOSs: ["win32"],
+			verifyDeploy: {
+				route: "/",
+				expectedText: "Vike",
+			},
+			verifyPreview: {
+				route: "/",
+				expectedText: "Vike",
+			},
+			nodeCompat: false,
+			promptHandlers: [
+				{
+					matcher: /Select a UI framework:/,
+					input: [keys.enter],
+				},
+			],
+			verifyTypes: false,
+		},
 	];
 }
 
diff --git a/packages/create-cloudflare/src/templates.ts b/packages/create-cloudflare/src/templates.ts
@@ -46,6 +46,7 @@ import solidTemplate from "templates/solid/c3";
 import svelteTemplate from "templates/svelte/c3";
 import tanStackStartTemplate from "templates/tanstack-start/c3";
 import vikeTemplate from "templates/vike/c3";
+import vikeExperimentalTemplate from "templates/vike/experimental-c3";
 import vueTemplate from "templates/vue/c3";
 import wakuTemplate from "templates/waku/c3";
 import { isInsideGitRepo } from "./git";
@@ -252,6 +253,7 @@ export function getFrameworkMap({ experimental = false }): TemplateMap {
 			solid: solidTemplate,
 			svelte: svelteTemplate,
 			"tanstack-start": tanStackStartTemplate,
+			vike: vikeExperimentalTemplate,
 			vue: vueTemplate,
 		};
 	} else {
diff --git a/packages/create-cloudflare/templates/vike/experimental-c3.ts b/packages/create-cloudflare/templates/vike/experimental-c3.ts
@@ -0,0 +1,30 @@
+import { logRaw } from "@cloudflare/cli";
+import { runFrameworkGenerator } from "frameworks/index";
+import type { TemplateConfig } from "../../src/templates";
+import type { C3Context } from "types";
+
+const generate = async (ctx: C3Context) => {
+	await runFrameworkGenerator(ctx, [
+		ctx.project.name,
+		// Note: the vike create CLI supports a `--cloudflare` argument for creating cloudflare-ready
+		//       projects, that works great but here we don't want to use that because we do want to
+		//       exercise the general autoconfig/`wrangler setup` functionality (which amongst other
+		//       things lets up ensure that we can support the migration of existing vike projects)
+		"--no-git",
+	]);
+
+	logRaw(""); // newline
+};
+
+const config: TemplateConfig = {
+	configVersion: 1,
+	id: "vike",
+	platform: "workers",
+	frameworkCli: "create-vike",
+	displayName: "Vike",
+	generate,
+	devScript: "dev",
+	deployScript: "deploy",
+	previewScript: "preview",
+};
+export default config;
diff --git a/packages/wrangler/src/__tests__/autoconfig/get-installed-package-version.test.ts b/packages/wrangler/src/__tests__/autoconfig/get-installed-package-version.test.ts
@@ -1,6 +1,6 @@
 import { seed } from "@cloudflare/workers-utils/test-helpers";
 import { describe, expect, test } from "vitest";
-import { getInstalledPackageVersion } from "../../autoconfig/frameworks";
+import { getInstalledPackageVersion } from "../../autoconfig/frameworks/utils/packages";
 import { runInTempDir } from "../helpers/run-in-tmp";
 
 describe("getInstalledPackageVersion()", () => {
diff --git a/packages/wrangler/src/__tests__/deploy.test.ts b/packages/wrangler/src/__tests__/deploy.test.ts
@@ -31,8 +31,8 @@ import {
 	vi,
 } from "vitest";
 import { getDetailsForAutoConfig } from "../autoconfig/details";
-import { getInstalledPackageVersion } from "../autoconfig/frameworks";
 import { Static } from "../autoconfig/frameworks/static";
+import { getInstalledPackageVersion } from "../autoconfig/frameworks/utils/packages";
 import { runAutoConfig } from "../autoconfig/run";
 import { printBundleSize } from "../deployment-bundle/bundle-reporter";
 import { clearOutputFilePath } from "../output";
@@ -121,8 +121,8 @@ vi.mock("../package-manager", async (importOriginal) => ({
 
 vi.mock("../autoconfig/details");
 vi.mock("../autoconfig/run");
-
 vi.mock("../autoconfig/frameworks");
+vi.mock("../autoconfig/frameworks/utils/packages");
 vi.mock("../autoconfig/c3-vendor/command");
 
 describe("deploy", () => {
diff --git a/packages/wrangler/src/autoconfig/frameworks/analog.ts b/packages/wrangler/src/autoconfig/frameworks/analog.ts
@@ -7,7 +7,8 @@ import * as recast from "recast";
 import semiver from "semiver";
 import { getDevCompatibilityDate } from "../../utils/compatibility-date";
 import { mergeObjectProperties, transformFile } from "../c3-vendor/codemod";
-import { Framework, getInstalledPackageVersion } from ".";
+import { getInstalledPackageVersion } from "./utils/packages";
+import { Framework } from ".";
 import type { ConfigurationOptions, ConfigurationResults } from ".";
 
 export class Analog extends Framework {
diff --git a/packages/wrangler/src/autoconfig/frameworks/get-framework.ts b/packages/wrangler/src/autoconfig/frameworks/get-framework.ts
@@ -10,6 +10,7 @@ import { SolidStart } from "./solid-start";
 import { Static } from "./static";
 import { SvelteKit } from "./sveltekit";
 import { TanstackStart } from "./tanstack";
+import { Vike } from "./vike";
 import { Vite } from "./vite";
 import type { Framework } from ".";
 
@@ -42,6 +43,8 @@ export function getFramework(detectedFramework?: {
 			return new NextJs(detectedFramework.name);
 		case "hono":
 			return new Hono(detectedFramework.name);
+		case "vike":
+			return new Vike(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
@@ -1,5 +1,3 @@
-import { parsePackageJSON, readFileSync } from "@cloudflare/workers-utils";
-import { findUpSync } from "find-up";
 import type { RawConfig } from "@cloudflare/workers-utils";
 
 export type ConfigurationOptions = {
@@ -37,29 +35,3 @@ export abstract class Framework {
 
 	autoConfigSupported = true;
 }
-
-// Make a best-effort attempt to find the exact version of the installed package
-export function getInstalledPackageVersion(
-	packageName: string,
-	projectPath: string,
-	opts: {
-		stopAtProjectPath?: boolean;
-	} = {}
-): string | undefined {
-	try {
-		const packagePath = require.resolve(packageName, {
-			paths: [projectPath],
-		});
-		const packageJsonPath = findUpSync("package.json", {
-			cwd: packagePath,
-			stopAt: opts.stopAtProjectPath === true ? projectPath : undefined,
-		});
-		if (packageJsonPath) {
-			const packageJson = parsePackageJSON(
-				readFileSync(packageJsonPath),
-				packageJsonPath
-			);
-			return packageJson.version;
-		}
-	} catch {}
-}
diff --git a/packages/wrangler/src/autoconfig/frameworks/react-router.ts b/packages/wrangler/src/autoconfig/frameworks/react-router.ts
@@ -8,8 +8,9 @@ import dedent from "ts-dedent";
 import { logger } from "../../logger";
 import { transformFile } from "../c3-vendor/codemod";
 import { installPackages } from "../c3-vendor/packages";
+import { getInstalledPackageVersion } from "./utils/packages";
 import { transformViteConfig } from "./utils/vite-config";
-import { Framework, getInstalledPackageVersion } from ".";
+import { Framework } from ".";
 import type { ConfigurationOptions, ConfigurationResults } from ".";
 
 const b = recast.types.builders;
diff --git a/packages/wrangler/src/autoconfig/frameworks/utils/packages.ts b/packages/wrangler/src/autoconfig/frameworks/utils/packages.ts
@@ -0,0 +1,71 @@
+import { parsePackageJSON, readFileSync } from "@cloudflare/workers-utils";
+import { findUpSync } from "find-up";
+
+/**
+ * Checks wether a package is installed in a target project or not
+ *
+ * @param packageName the name of the target package
+ * @param projectPath the path of the project to check
+ * @returns true if the package is installed, false otherwise
+ */
+export function isPackageInstalled(
+	packageName: string,
+	projectPath: string
+): boolean {
+	return !!getPackagePath(packageName, projectPath);
+}
+
+/**
+ * Gets the exact version of a package installed by a project (or undefined if the package is not installed)
+
+ * @param packageName the name of the target package
+ * @param projectPath the path of the project to check
+ * @param opts.stopAtProjectPath flag indicating whether the function should stop looking for the package at the project's path
+ * @returns the version of the package if the package is installed, undefined otherwise
+ */
+export function getInstalledPackageVersion(
+	packageName: string,
+	projectPath: string,
+	opts: {
+		stopAtProjectPath?: boolean;
+	} = {}
+): string | undefined {
+	try {
+		const packagePath = getPackagePath(packageName, projectPath);
+		if (!packagePath) {
+			return undefined;
+		}
+		const packageJsonPath = findUpSync("package.json", {
+			cwd: packagePath,
+			stopAt: opts.stopAtProjectPath === true ? projectPath : undefined,
+		});
+		if (!packageJsonPath) {
+			return undefined;
+		}
+		const packageJson = parsePackageJSON(
+			readFileSync(packageJsonPath),
+			packageJsonPath
+		);
+		return packageJson.version;
+	} catch {}
+}
+
+/**
+ * Gets the path for a package installed by a project (or undefined if the package is not installed)
+
+ * @param packageName the name of the target package
+ * @param projectPath the path of the project
+ * @returns the path for the package if the package is installed, undefined otherwise
+ */
+function getPackagePath(
+	packageName: string,
+	projectPath: string
+): string | undefined {
+	try {
+		return require.resolve(packageName, {
+			paths: [projectPath],
+		});
+	} catch {
+		return undefined;
+	}
+}
diff --git a/packages/wrangler/src/autoconfig/frameworks/vike.ts b/packages/wrangler/src/autoconfig/frameworks/vike.ts
diff --git a/packages/wrangler/src/deploy/open-next.ts b/packages/wrangler/src/deploy/open-next.ts

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