Support HTTPS and HTTP/2 (#9152)

jamesopstad · web-flow · commit dca41638c93f · 2025-05-08T10:28:16.000+01:00
diff --git a/.changeset/cold-emus-jog.md b/.changeset/cold-emus-jog.md
@@ -0,0 +1,5 @@
+---
+"@cloudflare/vite-plugin": minor
+---
+
+Support HTTPS and HTTP/2. Configuring [`server.https`](https://vite.dev/config/server-options#server-https) and/or [`preview.https`](https://vite.dev/config/preview-options#preview-https) in your Vite config now works as expected. This was previously broken because Undici would add a `transfer-encoding` header for streamed responses. We now remove this header if the request uses HTTP/2.
diff --git a/packages/vite-plugin-cloudflare/package.json b/packages/vite-plugin-cloudflare/package.json
@@ -43,7 +43,7 @@
 	},
 	"dependencies": {
 		"@cloudflare/unenv-preset": "workspace:*",
-		"@hattip/adapter-node": "^0.0.49",
+		"@mjackson/node-fetch-server": "^0.6.1",
 		"@rollup/plugin-replace": "^6.0.1",
 		"get-port": "^7.1.0",
 		"miniflare": "workspace:*",
diff --git a/packages/vite-plugin-cloudflare/playground/spa-with-api/__tests__/https/spa-with-api.spec.ts b/packages/vite-plugin-cloudflare/playground/spa-with-api/__tests__/https/spa-with-api.spec.ts
@@ -0,0 +1,7 @@
+import { expect, test } from "vitest";
+import { page } from "../../../__test-utils__";
+
+test("returns the correct home page", async () => {
+	const content = await page.textContent("h1");
+	expect(content).toBe("Vite + React");
+});
diff --git a/packages/vite-plugin-cloudflare/playground/spa-with-api/package.json b/packages/vite-plugin-cloudflare/playground/spa-with-api/package.json
@@ -5,10 +5,13 @@
 	"scripts": {
 		"build": "vite build --app",
 		"build:custom-output-directories": "vite build --app -c ./vite.config.custom-output-directories.ts",
+		"build:https": "vite build --app -c ./vite.config.https.ts",
 		"check:types": "tsc --build",
 		"dev": "vite dev",
+		"dev:https": "vite dev -c ./vite.config.https.ts",
 		"preview": "vite preview",
-		"preview:custom-output-directories": "vite preview -c ./vite.config.custom-output-directories.ts"
+		"preview:custom-output-directories": "vite preview -c ./vite.config.custom-output-directories.ts",
+		"preview:https": "vite preview -c ./vite.config.https.ts"
 	},
 	"dependencies": {
 		"react": "^19.0.0",
@@ -20,6 +23,7 @@
 		"@cloudflare/workers-types": "^4.20250508.0",
 		"@types/react": "^19.0.0",
 		"@types/react-dom": "^19.0.0",
+		"@vitejs/plugin-basic-ssl": "^2.0.0",
 		"@vitejs/plugin-react": "^4.3.4",
 		"typescript": "catalog:default",
 		"vite": "catalog:vite-plugin",
diff --git a/packages/vite-plugin-cloudflare/playground/spa-with-api/tsconfig.node.json b/packages/vite-plugin-cloudflare/playground/spa-with-api/tsconfig.node.json
@@ -1,4 +1,9 @@
 {
 	"extends": ["@cloudflare/workers-tsconfig/base.json"],
-	"include": ["vite.config.ts", "__tests__"]
+	"include": [
+		"vite.config.ts",
+		"vite.config.custom-output-directories.ts",
+		"vite.config.https.ts",
+		"__tests__"
+	]
 }
diff --git a/packages/vite-plugin-cloudflare/playground/spa-with-api/vite.config.https.ts b/packages/vite-plugin-cloudflare/playground/spa-with-api/vite.config.https.ts
@@ -0,0 +1,12 @@
+import { cloudflare } from "@cloudflare/vite-plugin";
+import basicSsl from "@vitejs/plugin-basic-ssl";
+import react from "@vitejs/plugin-react";
+import { defineConfig } from "vite";
+
+export default defineConfig({
+	plugins: [
+		react(),
+		cloudflare({ inspectorPort: false, persistState: false }),
+		basicSsl(),
+	],
+});
diff --git a/packages/vite-plugin-cloudflare/playground/streaming/__tests__/base-tests.ts b/packages/vite-plugin-cloudflare/playground/streaming/__tests__/base-tests.ts
@@ -0,0 +1,12 @@
+import { expect, test, vi } from "vitest";
+import { page } from "../../__test-utils__";
+
+test("renders HTML stream", async () => {
+	const heading = await page.textContent("h1");
+	expect(heading).toBe("Streaming example");
+	const finalChunk = await vi.waitUntil(() => page.textContent("#two"), {
+		timeout: 5000,
+		interval: 500,
+	});
+	expect(finalChunk).toBe("Chunk after 2 seconds");
+});
diff --git a/packages/vite-plugin-cloudflare/playground/streaming/__tests__/https/streaming.spec.ts b/packages/vite-plugin-cloudflare/playground/streaming/__tests__/https/streaming.spec.ts
@@ -0,0 +1 @@
+import "../base-tests";
diff --git a/packages/vite-plugin-cloudflare/playground/streaming/__tests__/streaming.spec.ts b/packages/vite-plugin-cloudflare/playground/streaming/__tests__/streaming.spec.ts
@@ -0,0 +1 @@
+import "./base-tests";
diff --git a/packages/vite-plugin-cloudflare/playground/streaming/package.json b/packages/vite-plugin-cloudflare/playground/streaming/package.json
@@ -0,0 +1,23 @@
+{
+	"name": "@playground/streaming",
+	"private": true,
+	"type": "module",
+	"scripts": {
+		"build": "vite build",
+		"build:https": "vite build -c ./vite.config.https.ts",
+		"check:types": "tsc --build",
+		"dev": "vite dev",
+		"dev:https": "vite dev -c ./vite.config.https.ts",
+		"preview": "vite preview",
+		"preview:https": "vite preview -c ./vite.config.https.ts"
+	},
+	"devDependencies": {
+		"@cloudflare/vite-plugin": "workspace:*",
+		"@cloudflare/workers-tsconfig": "workspace:*",
+		"@cloudflare/workers-types": "^4.20250507.0",
+		"@vitejs/plugin-basic-ssl": "^2.0.0",
+		"typescript": "catalog:default",
+		"vite": "catalog:vite-plugin",
+		"wrangler": "workspace:*"
+	}
+}
diff --git a/packages/vite-plugin-cloudflare/playground/streaming/src/index.ts b/packages/vite-plugin-cloudflare/playground/streaming/src/index.ts
@@ -0,0 +1,50 @@
+function sleep(ms: number) {
+	return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+async function streamResponse(writable: WritableStream) {
+	const writer = writable.getWriter();
+	const encoder = new TextEncoder();
+
+	await writer.write(
+		encoder.encode(`
+<!DOCTYPE html>
+<html>
+<head>
+	<title>Streaming example</title>
+</head>
+<body>
+	<h1>Streaming example</h1>
+	<p>Loading content...</p>
+		`)
+	);
+
+	await sleep(1000);
+	await writer.write(encoder.encode(`<p id="one">Chunk after 1 second`));
+	await sleep(1000);
+	await writer.write(
+		encoder.encode(`
+	<p id="two">Chunk after 2 seconds</p>
+</body></html>
+		`)
+	);
+	await writer.close();
+}
+
+export default {
+	async fetch(request, env) {
+		const url = new URL(request.url);
+
+		if (url.pathname === "/") {
+			const { readable, writable } = new TransformStream();
+
+			streamResponse(writable);
+
+			return new Response(readable, {
+				headers: { "Content-Type": "text/html; charset=UTF-8" },
+			});
+		} else {
+			return new Response(null, { status: 404 });
+		}
+	},
+} satisfies ExportedHandler;
diff --git a/packages/vite-plugin-cloudflare/playground/streaming/tsconfig.json b/packages/vite-plugin-cloudflare/playground/streaming/tsconfig.json
@@ -0,0 +1,7 @@
+{
+	"files": [],
+	"references": [
+		{ "path": "./tsconfig.node.json" },
+		{ "path": "./tsconfig.worker.json" }
+	]
+}
diff --git a/packages/vite-plugin-cloudflare/playground/streaming/tsconfig.node.json b/packages/vite-plugin-cloudflare/playground/streaming/tsconfig.node.json
@@ -0,0 +1,4 @@
+{
+	"extends": ["@cloudflare/workers-tsconfig/base.json"],
+	"include": ["vite.config.ts", "vite.config.https.ts", "__tests__"]
+}
diff --git a/packages/vite-plugin-cloudflare/playground/streaming/tsconfig.worker.json b/packages/vite-plugin-cloudflare/playground/streaming/tsconfig.worker.json
@@ -0,0 +1,4 @@
+{
+	"extends": ["@cloudflare/workers-tsconfig/worker.json"],
+	"include": ["src"]
+}
diff --git a/packages/vite-plugin-cloudflare/playground/streaming/turbo.json b/packages/vite-plugin-cloudflare/playground/streaming/turbo.json
@@ -0,0 +1,9 @@
+{
+	"$schema": "http://turbo.build/schema.json",
+	"extends": ["//"],
+	"tasks": {
+		"build": {
+			"outputs": ["dist/**"]
+		}
+	}
+}
diff --git a/packages/vite-plugin-cloudflare/playground/streaming/vite.config.https.ts b/packages/vite-plugin-cloudflare/playground/streaming/vite.config.https.ts
@@ -0,0 +1,10 @@
+import { cloudflare } from "@cloudflare/vite-plugin";
+import basicSsl from "@vitejs/plugin-basic-ssl";
+import { defineConfig } from "vite";
+
+export default defineConfig({
+	plugins: [
+		cloudflare({ inspectorPort: false, persistState: false }),
+		basicSsl(),
+	],
+});
diff --git a/packages/vite-plugin-cloudflare/playground/streaming/vite.config.ts b/packages/vite-plugin-cloudflare/playground/streaming/vite.config.ts
@@ -0,0 +1,6 @@
+import { cloudflare } from "@cloudflare/vite-plugin";
+import { defineConfig } from "vite";
+
+export default defineConfig({
+	plugins: [cloudflare({ inspectorPort: false, persistState: false })],
+});
diff --git a/packages/vite-plugin-cloudflare/playground/streaming/wrangler.jsonc b/packages/vite-plugin-cloudflare/playground/streaming/wrangler.jsonc
@@ -0,0 +1,5 @@
+{
+	"name": "worker",
+	"main": "./src/index.ts",
+	"compatibility_date": "2024-09-09",
+}
diff --git a/packages/vite-plugin-cloudflare/playground/vitest-setup.ts b/packages/vite-plugin-cloudflare/playground/vitest-setup.ts
@@ -96,7 +96,8 @@ beforeAll(async (s) => {
 	}
 
 	browser = await chromium.connect(wsEndpoint);
-	page = await browser.newPage();
+	// `@vitejs/plugin-basic-ssl` requires a manual confirmation step in the browser so we enable `ignoreHTTPSErrors` to bypass this
+	page = await browser.newPage({ ignoreHTTPSErrors: true });
 
 	const globalConsole = console;
 	const warn = globalConsole.warn;
diff --git a/packages/vite-plugin-cloudflare/src/index.ts b/packages/vite-plugin-cloudflare/src/index.ts
@@ -2,7 +2,7 @@ import assert from "node:assert";
 import * as fs from "node:fs";
 import * as fsp from "node:fs/promises";
 import * as path from "node:path";
-import { createMiddleware } from "@hattip/adapter-node";
+import { createRequest, sendResponse } from "@mjackson/node-fetch-server";
 import replace from "@rollup/plugin-replace";
 import MagicString from "magic-string";
 import { Miniflare } from "miniflare";
@@ -354,18 +354,6 @@ export function cloudflare(pluginConfig: PluginConfig = {}): vite.Plugin[] {
 
 				await initRunners(resolvedPluginConfig, viteDevServer, miniflare);
 
-				const middleware = createMiddleware(
-					async ({ request }) => {
-						assert(miniflare, `Miniflare not defined`);
-						const routerWorker = await getRouterWorker(miniflare);
-
-						return routerWorker.fetch(toMiniflareRequest(request), {
-							redirect: "manual",
-						}) as any;
-					},
-					{ alwaysCallNext: false }
-				);
-
 				// The HTTP server is not available in middleware mode
 				if (viteDevServer.httpServer) {
 					handleWebSocket(viteDevServer.httpServer, async () => {
@@ -377,8 +365,29 @@ export function cloudflare(pluginConfig: PluginConfig = {}): vite.Plugin[] {
 				}
 
 				return () => {
-					viteDevServer.middlewares.use((req, res, next) => {
-						middleware(req, res, next);
+					viteDevServer.middlewares.use(async (req, res, next) => {
+						try {
+							assert(miniflare, `Miniflare not defined`);
+							const routerWorker = await getRouterWorker(miniflare);
+
+							const request = createRequest(req, res);
+							const response = await routerWorker.fetch(
+								toMiniflareRequest(request),
+								{
+									redirect: "manual",
+								}
+							);
+
+							// Vite uses HTTP/2 when `server.https` is enabled
+							if (req.httpVersionMajor === 2) {
+								// HTTP/2 disallows use of the `transfer-encoding` header
+								response.headers.delete("transfer-encoding");
+							}
+
+							await sendResponse(res, response as any);
+						} catch (error) {
+							next(error);
+						}
 					});
 				};
 			},
@@ -399,23 +408,30 @@ export function cloudflare(pluginConfig: PluginConfig = {}): vite.Plugin[] {
 					)
 				);
 
-				const middleware = createMiddleware(
-					({ request }) => {
-						return miniflare.dispatchFetch(toMiniflareRequest(request), {
-							redirect: "manual",
-						}) as any;
-					},
-					{ alwaysCallNext: false }
-				);
-
 				handleWebSocket(
 					vitePreviewServer.httpServer,
 					() => miniflare.dispatchFetch
 				);
 
 				// In preview mode we put our middleware at the front of the chain so that all assets are handled in Miniflare
-				vitePreviewServer.middlewares.use((req, res, next) => {
-					middleware(req, res, next);
+				vitePreviewServer.middlewares.use(async (req, res, next) => {
+					try {
+						const request = createRequest(req, res);
+						const response = await miniflare.dispatchFetch(
+							toMiniflareRequest(request),
+							{ redirect: "manual" }
+						);
+
+						// Vite uses HTTP/2 when `preview.https` is enabled
+						if (req.httpVersionMajor === 2) {
+							// HTTP/2 disallows use of the `transfer-encoding` header
+							response.headers.delete("transfer-encoding");
+						}
+
+						await sendResponse(res, response as any);
+					} catch (error) {
+						next(error);
+					}
 				});
 			},
 		},
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"@cloudflare/vite-plugin": minor
 +---
++
 +Support HTTPS and HTTP/2. Configuring [`server.https`](https://vite.dev/config/server-options#server-https) and/or [`preview.https`](https://vite.dev/config/preview-options#preview-https) in your Vite config now works as expected. This was previously broken because Undici would add a `transfer-encoding` header for streamed responses. We now remove this header if the request uses HTTP/2.
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,9 @@`
`1`	`1`	`{`
`2`	`2`	`"extends": ["@cloudflare/workers-tsconfig/base.json"],`
`3`		`- "include": ["vite.config.ts", "__tests__"]`
	`3`	`+ "include": [`
	`4`	`+ "vite.config.ts",`
	`5`	`+ "vite.config.custom-output-directories.ts",`
	`6`	`+ "vite.config.https.ts",`
	`7`	`+ "__tests__"`
	`8`	`+ ]`
`4`	`9`	`}`