vite dev support for SPA mode (#8556)

Author: GregBrimble

.changeset/eight-cars-fall.md

@@ -0,0 +1,7 @@
+---
+"miniflare": minor
+"wrangler": minor
+"@cloudflare/vite-plugin": patch
+---
+
+Add support for `assets_navigation_prefer_asset_serving` in Vite (`dev` and `preview`)

packages/miniflare/src/workers/core/entry.worker.ts

@@ -95,6 +95,14 @@ function getUserRequest(
 	// https://developers.cloudflare.com/fundamentals/reference/http-request-headers/#accept-encoding
 	request.headers.set("Accept-Encoding", "br, gzip");
 
+	// `miniflare.dispatchFetch(request)` strips any `sec-fetch-mode` header. This allows clients to
+	// send it over a `x-mf-sec-fetch-mode` header instead (currently required by `vite preview`)
+	const secFetchMode = request.headers.get("X-Mf-Sec-Fetch-Mode");
+	if (secFetchMode) {
+		request.headers.set("Sec-Fetch-Mode", secFetchMode);
+	}
+	request.headers.delete("X-Mf-Sec-Fetch-Mode");
+
 	if (rewriteHeadersFromOriginalUrl) {
 		request.headers.set("Host", url.host);
 	}

packages/vite-plugin-cloudflare/playground/spa-with-api/__tests__/spa-with-api.spec.ts

@@ -1,5 +1,7 @@
+import { createConnection } from "node:net";
 import { expect, test } from "vitest";
 import { page } from "../../__test-utils__";
+import { viteTestUrl } from "../../vitest-setup";
 
 test("returns the correct home page", async () => {
 	const content = await page.textContent("h1");
@@ -18,3 +20,42 @@ test("returns the response from the API", async () => {
 	const contentAfter = await button.innerText();
 	expect(contentAfter).toBe("Name from API is: Cloudflare");
 });
+
+test("returns the home page even for 404-y pages", async () => {
+	await page.goto(`${viteTestUrl}/foo`);
+	const content = await page.textContent("h1");
+	expect(content).toBe("Vite + React");
+});
+
+test("returns the home page even for API-y pages", async () => {
+	await page.goto(`${viteTestUrl}/api/`);
+	const content = await page.textContent("h1");
+	expect(content).toBe("Vite + React");
+});
+
+test("requests made with/without explicit 'sec-fetch-mode: navigate' header to delegate correctly", async () => {
+	const responseWithoutHeader = await fetch(`${viteTestUrl}/foo`);
+	expect(responseWithoutHeader.status).toBe(404);
+	expect(await responseWithoutHeader.text()).toEqual("nothing here");
+
+	// can't make `fetch`es with `sec-fetch-mode: navigate` header, so we're doing it raw
+	const { hostname, port } = new URL(viteTestUrl);
+	const socket = createConnection(parseInt(port), hostname, () => {
+		socket.write(
+			`GET /foo HTTP/1.1\r\nHost: ${hostname}\r\nSec-Fetch-Mode: navigate\r\n\r\n`
+		);
+	});
+
+	let responseWithoutHeaderContentBuffer = "";
+	socket.on("data", (data) => {
+		responseWithoutHeaderContentBuffer += data.toString();
+	});
+
+	const responseWithoutHeaderContent = await new Promise((resolve) =>
+		socket.on("close", () => {
+			resolve(responseWithoutHeaderContentBuffer);
+		})
+	);
+
+	expect(responseWithoutHeaderContent).toContain("Vite + React");
+});

packages/vite-plugin-cloudflare/playground/spa-with-api/api/index.ts

@@ -12,6 +12,6 @@ export default {
 			});
 		}
 
-		return env.ASSETS.fetch(request);
+		return new Response("nothing here", { status: 404 });
 	},
 } satisfies ExportedHandler<Env>;

packages/vite-plugin-cloudflare/playground/spa-with-api/wrangler.toml

@@ -1,4 +1,5 @@
 name = "api"
 main = "./api/index.ts"
 compatibility_date = "2024-12-30"
+compatibility_flags = ["assets_navigation_prefers_asset_serving"]
 assets = { not_found_handling = "single-page-application", binding = "ASSETS" }

packages/vite-plugin-cloudflare/src/asset-workers/asset-worker.ts

@@ -1,15 +1,14 @@
 // @ts-ignore
 import AssetWorker from "@cloudflare/workers-shared/dist/asset-worker.mjs";
 import { UNKNOWN_HOST } from "../shared";
-import type { WorkerEntrypoint } from "cloudflare:workers";
 
 interface Env {
 	__VITE_ASSET_EXISTS__: Fetcher;
 	__VITE_FETCH_ASSET__: Fetcher;
 }
 
-export default class CustomAssetWorker extends (AssetWorker as typeof WorkerEntrypoint<Env>) {
-	override async fetch(request: Request): Promise<Response> {
+export default class CustomAssetWorker extends AssetWorker {
+	async fetch(request: Request): Promise<Response> {
 		const response = await super.fetch!(request);
 		const modifiedResponse = new Response(response.body, response);
 		modifiedResponse.headers.delete("ETag");
@@ -21,7 +20,9 @@ export default class CustomAssetWorker extends (AssetWorker as typeof WorkerEntr
 		eTag: string
 	): Promise<{ readableStream: ReadableStream; contentType: string }> {
 		const url = new URL(eTag, UNKNOWN_HOST);
-		const response = await this.env.__VITE_FETCH_ASSET__.fetch(url);
+		const response = await (
+			this as typeof AssetWorker as { env: Env }
+		).env.__VITE_FETCH_ASSET__.fetch(url);
 
 		if (!response.body) {
 			throw new Error(`Unexpected error. No HTML found for ${eTag}.`);
@@ -32,9 +33,20 @@ export default class CustomAssetWorker extends (AssetWorker as typeof WorkerEntr
 	async unstable_exists(pathname: string): Promise<string | null> {
 		// We need this regex to avoid getting `//` as a pathname, which results in an invalid URL. Should this be fixed upstream?
 		const url = new URL(pathname.replace(/^\/{2,}/, "/"), UNKNOWN_HOST);
-		const response = await this.env.__VITE_ASSET_EXISTS__.fetch(url);
+		const response = await (
+			this as typeof AssetWorker as { env: Env }
+		).env.__VITE_ASSET_EXISTS__.fetch(url);
 		const exists = await response.json();
 
 		return exists ? pathname : null;
 	}
+	async unstable_canFetch(request: Request) {
+		// the 'sec-fetch-mode: navigate' header is stripped by something on its way into this worker
+		// so we restore it from 'x-mf-sec-fetch-mode'
+		const secFetchMode = request.headers.get("X-Mf-Sec-Fetch-Mode");
+		if (secFetchMode) {
+			request.headers.set("Sec-Fetch-Mode", secFetchMode);
+		}
+		return await super.unstable_canFetch(request);
+	}
 }

packages/vite-plugin-cloudflare/src/miniflare-options.ts

@@ -203,6 +203,21 @@ export function getDevMiniflareOptions(
 			? resolvedPluginConfig.config.assets
 			: entryWorkerConfig?.assets;
 
+	const compatibilityOptions =
+		resolvedPluginConfig.type === "assets-only"
+			? {
+					compatibility_date: resolvedPluginConfig.config.compatibility_date,
+					compatibility_flags: resolvedPluginConfig.config.compatibility_flags,
+				}
+			: {
+					...(entryWorkerConfig?.compatibility_date
+						? { compatibility_date: entryWorkerConfig?.compatibility_date }
+						: {}),
+					...(entryWorkerConfig?.compatibility_flags
+						? { compatibility_flags: entryWorkerConfig?.compatibility_flags }
+						: {}),
+				};
+
 	const assetWorkers: Array<WorkerOptions> = [
 		{
 			name: ROUTER_WORKER_NAME,
@@ -242,6 +257,7 @@ export function getDevMiniflareOptions(
 			],
 			bindings: {
 				CONFIG: {
+					...compatibilityOptions,
 					...(assetsConfig?.html_handling
 						? { html_handling: assetsConfig.html_handling }
 						: {}),

packages/vite-plugin-cloudflare/src/utils.ts

@@ -22,6 +22,11 @@ export function getRouterWorker(miniflare: Miniflare) {
 }
 
 export function toMiniflareRequest(request: Request): MiniflareRequest {
+	// Undici sets the `Sec-Fetch-Mode` header to `cors` so we capture it in a custom header to be converted back later.
+	const secFetchMode = request.headers.get("Sec-Fetch-Mode");
+	if (secFetchMode) {
+		request.headers.set("X-Mf-Sec-Fetch-Mode", secFetchMode);
+	}
 	return new MiniflareRequest(request.url, {
 		method: request.method,
 		headers: [["accept-encoding", "identity"], ...request.headers],

packages/wrangler/src/assets.ts

@@ -436,7 +436,8 @@ export function getAssetsOptions(
 		html_handling: config.assets?.html_handling,
 		not_found_handling: config.assets?.not_found_handling,
 		// The _redirects and _headers files are parsed in Miniflare in dev and parsing is not required for deploy
-		// Similarly, `compatibility_date` and `compatibility_flags` are populated by Miniflare from the Worker definition and also are not required for deploy
+		compatibility_date: config.compatibility_date,
+		compatibility_flags: config.compatibility_flags,
 	};
 
 	return {