feat(wrangler): Add wrangler.toml support in pages dev (#5284)

As we are adding `wrangler.toml` support for Pages, we want to ensure that `wrangler pages dev` works with a configuration file. This commit adds `wrangler.toml` support for local development using `pages dev`. Co-authored-by: Carmen Popoviciu <cpopoviciu@cloudflare.com>
cloudflare · Mar 26, 2024 · f5e2367 · f5e2367
1 parent 904f91a
commit f5e2367
Show file tree

Hide file tree

Showing 32 changed files with 1,119 additions and 297 deletions.
diff --git a/.changeset/silly-countries-notice.md b/.changeset/silly-countries-notice.md
@@ -0,0 +1,7 @@
+---
+"wrangler": minor
+---
+
+feat: Add `wrangler.toml` support in `wrangler pages dev`
+
+As we are adding `wrangler.toml` support for Pages, we want to ensure that `wrangler pages dev` works with a configuration file.
diff --git a/fixtures/pages-functions-with-config-file-app/README.md b/fixtures/pages-functions-with-config-file-app/README.md
@@ -0,0 +1,29 @@
+# ⚡️ pages-functions-with-config-file-app
+
+`pages-functions-with-config-file-app` is a test fixture that sets up a ⚡️Pages⚡️ Functions project, with a `wrangler.toml` [configuration file](hhttps://developers.cloudflare.com/workers/wrangler/configuration). The purpose of this fixture is to demonstrate that `wrangler pages dev` can take configuration from a `wrangler.toml` file.
+
+## Local dev
+
+To test this fixture run `wrangler pages dev` in the fixture folder:
+
+```bash
+# cd into the test fixture folder
+cd fixtures/pages-functions-with-config-file-app
+
+# Start local dev server
+npx wrangler pages dev
+```
+
+Once the local dev server was started, you should see the configuration specified in the `wrangler.toml` at the root of the fixture folder, affect the generated Worker.
+
+## Run tests
+
+```bash
+# cd into the test fixture folder
+cd fixtures/pages-functions-with-config-file-app
+
+# Run tests
+npm run test
+```
+
+You can still override what is in the wrangler.toml by adding command line args: wrangler pages dev --binding=KEY:VALUE
diff --git a/fixtures/pages-functions-with-config-file-app/functions/celebrate.ts b/fixtures/pages-functions-with-config-file-app/functions/celebrate.ts
@@ -0,0 +1,11 @@
+export async function onRequest(context) {
+	return new Response(
+		`[/celebrate]:\n` +
+			`🎵 🎵 🎵\n` +
+			`You can turn this world around\n` +
+			`And bring back all of those happy days\n` +
+			`Put your troubles down\n` +
+			`It's time to ${context.env.VAR2}\n` +
+			`🎵 🎵 🎵`
+	);
+}
diff --git a/fixtures/pages-functions-with-config-file-app/functions/holiday.ts b/fixtures/pages-functions-with-config-file-app/functions/holiday.ts
@@ -0,0 +1,11 @@
+export async function onRequest(context) {
+	return new Response(
+		`[/holiday]:\n` +
+			`🎵 🎵 🎵\n` +
+			`If we took a ${context.env.VAR1}\n` +
+			`Took some time to ${context.env.VAR2}\n` +
+			`Just one day out of life\n` +
+			`It would be, it would be so nice\n` +
+			`🎵 🎵 🎵`
+	);
+}
diff --git a/fixtures/pages-functions-with-config-file-app/package.json b/fixtures/pages-functions-with-config-file-app/package.json
@@ -0,0 +1,20 @@
+{
+	"name": "pages-functions-with-config-file-app",
+	"private": true,
+	"sideEffects": false,
+	"scripts": {
+		"check:type": "tsc",
+		"dev": "npx wrangler pages dev",
+		"test": "vitest run",
+		"test:watch": "vitest",
+		"type:tests": "tsc -p ./tests/tsconfig.json"
+	},
+	"devDependencies": {
+		"@cloudflare/workers-tsconfig": "workspace:*",
+		"undici": "^5.28.3",
+		"wrangler": "workspace:*"
+	},
+	"engines": {
+		"node": ">=16.13"
+	}
+}
diff --git a/fixtures/pages-functions-with-config-file-app/public/_routes.json b/fixtures/pages-functions-with-config-file-app/public/_routes.json
@@ -0,0 +1,5 @@
+{
+	"version": 1,
+	"include": ["/celebrate"],
+	"exclude": ["/holiday"]
+}
diff --git a/fixtures/pages-functions-with-config-file-app/public/index.html b/fixtures/pages-functions-with-config-file-app/public/index.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+	<body>
+		<h1>Celebrate! Pages now supports 'wrangler.toml' 🎉</h1>
+	</body>
+</html>
diff --git a/fixtures/pages-functions-with-config-file-app/tests/index.test.ts b/fixtures/pages-functions-with-config-file-app/tests/index.test.ts
@@ -0,0 +1,48 @@
+import { resolve } from "node:path";
+import { fetch } from "undici";
+import { afterAll, beforeAll, describe, it } from "vitest";
+import { runWranglerPagesDev } from "../../shared/src/run-wrangler-long-lived";
+
+describe("Pages Functions with wrangler.toml", () => {
+	let ip: string, port: number, stop: (() => Promise<unknown>) | undefined;
+
+	beforeAll(async () => {
+		({ ip, port, stop } = await runWranglerPagesDev(
+			resolve(__dirname, ".."),
+			undefined,
+			["--port=0", "--inspector-port=0"]
+		));
+	});
+
+	afterAll(async () => {
+		await stop?.();
+	});
+
+	it("should render static pages", async ({ expect }) => {
+		const response = await fetch(`http://${ip}:${port}`);
+		const text = await response.text();
+		expect(text).toContain("Celebrate! Pages now supports 'wrangler.toml' 🎉");
+	});
+
+	it("should correctly apply the routing rules provided in the custom _routes.json file", async ({
+		expect,
+	}) => {
+		// matches `/celebrate` include rule
+		let response = await fetch(`http://${ip}:${port}/celebrate`);
+		let text = await response.text();
+		expect(text).toEqual(
+			`[/celebrate]:\n` +
+				`🎵 🎵 🎵\n` +
+				`You can turn this world around\n` +
+				`And bring back all of those happy days\n` +
+				`Put your troubles down\n` +
+				`It's time to celebrate\n` +
+				`🎵 🎵 🎵`
+		);
+
+		// matches `/holiday` exclude rule
+		response = await fetch(`http://${ip}:${port}/holiday`);
+		text = await response.text();
+		expect(text).toContain("Celebrate! Pages now supports 'wrangler.toml' 🎉");
+	});
+});
diff --git a/fixtures/pages-functions-with-config-file-app/tests/tsconfig.json b/fixtures/pages-functions-with-config-file-app/tests/tsconfig.json
@@ -0,0 +1,8 @@
+{
+	"extends": "@cloudflare/workers-tsconfig/tsconfig.json",
+	"compilerOptions": {
+		"types": ["node"],
+		"esModuleInterop": true
+	},
+	"include": ["**/*.ts", "../../../node-types.d.ts"]
+}
diff --git a/fixtures/pages-functions-with-config-file-app/tsconfig.json b/fixtures/pages-functions-with-config-file-app/tsconfig.json
@@ -0,0 +1,11 @@
+{
+	"compilerOptions": {
+		"target": "ES2020",
+		"module": "CommonJS",
+		"lib": ["ES2020"],
+		"types": ["@cloudflare/workers-types"],
+		"moduleResolution": "node",
+		"noEmit": true
+	},
+	"include": ["functions"]
+}
diff --git a/fixtures/pages-functions-with-config-file-app/vitest.config.ts b/fixtures/pages-functions-with-config-file-app/vitest.config.ts
@@ -0,0 +1,9 @@
+import { defineProject, mergeConfig } from "vitest/config";
+import configShared from "../../vitest.shared";
+
+export default mergeConfig(
+	configShared,
+	defineProject({
+		test: {},
+	})
+);
diff --git a/fixtures/pages-functions-with-config-file-app/wrangler.toml b/fixtures/pages-functions-with-config-file-app/wrangler.toml
@@ -0,0 +1,8 @@
+pages_build_output_dir = "./public"
+name = "pages-with-config-file-app"
+compatibility_date = "2024-01-01"
+#compatibility_flags = []
+
+[vars]
+VAR1 = "holiday"
+VAR2 = "celebrate"
diff --git a/fixtures/pages-workerjs-with-config-file-app/README.md b/fixtures/pages-workerjs-with-config-file-app/README.md
@@ -0,0 +1,27 @@
+# ⚡️ pages-workerjs-with-config-file-app
+
+`pages-workerjs-with-config-file-app` is a test fixture that sets up an [Advanced Mode](https://developers.cloudflare.com/pages/platform/functions/#advanced-mode) ⚡️Pages⚡️ project with a `wrangler.toml` [configuration file](hhttps://developers.cloudflare.com/workers/wrangler/configuration). he purpose of this fixture is to demonstrate that `wrangler pages dev` can take configuration from a `wrangler.toml` file.
+
+## Local dev
+
+To test this fixture run `wrangler pages dev` in the fixture folder:
+
+```bash
+# cd into the test fixture folder
+cd fixtures/pages-workerjs-with-config-file-app
+
+# Start local dev server
+npx wrangler pages dev
+```
+
+Once the local dev server was started, you should see the configuration specified in the `wrangler.toml` at the root of the fixture folder, affect the generated Worker.
+
+## Run tests
+
+```bash
+# cd into the test fixture folder
+cd fixtures/pages-workerjs-with-config-file-app
+
+# Run tests
+npm run test
+```
diff --git a/fixtures/pages-workerjs-with-config-file-app/package.json b/fixtures/pages-workerjs-with-config-file-app/package.json
@@ -0,0 +1,20 @@
+{
+	"name": "pages-workerjs-with-config-file-app",
+	"private": true,
+	"sideEffects": false,
+	"scripts": {
+		"check:type": "tsc",
+		"dev": "npx wrangler pages dev",
+		"test": "vitest run",
+		"test:watch": "vitest",
+		"type:tests": "tsc -p ./tests/tsconfig.json"
+	},
+	"devDependencies": {
+		"undici": "^5.28.3",
+		"wrangler": "workspace:*",
+		"@cloudflare/workers-tsconfig": "workspace:*"
+	},
+	"engines": {
+		"node": ">=16.13"
+	}
+}
diff --git a/fixtures/pages-workerjs-with-config-file-app/public/_routes.json b/fixtures/pages-workerjs-with-config-file-app/public/_routes.json
@@ -0,0 +1,5 @@
+{
+	"version": 1,
+	"include": ["/holiday", "/celebrate"],
+	"exclude": []
+}
diff --git a/fixtures/pages-workerjs-with-config-file-app/public/_worker.js b/fixtures/pages-workerjs-with-config-file-app/public/_worker.js
@@ -0,0 +1,37 @@
+export default {
+	async fetch(request, env) {
+		const url = new URL(request.url);
+
+		if (url.pathname === "/holiday") {
+			return new Response(
+				`[/holiday]:\n` +
+					`🎶 🎶 🎶\n` +
+					`If we took a ${env.VAR2}\n` +
+					`Took some time to ${env.VAR1}\n` +
+					`Just one day out of life\n` +
+					`It would be, it would be so nice 🎉\n` +
+					`🎶 🎶 🎶`
+			);
+		}
+
+		if (url.pathname === "/celebrate") {
+			return new Response(
+				`[/celebrate]:\n` +
+					`🎶 🎶 🎶\n` +
+					`Everybody spread the word\n` +
+					`We're gonna have a ${env.VAR3}\n` +
+					`All across the world\n` +
+					`In every nation\n` +
+					`🎶 🎶 🎶`
+			);
+		}
+
+		if (url.pathname === "/oh-yeah") {
+			return new Response(
+				`[/oh-yeah]: 🎶 🎶 🎶 ${env.VAR2} (ooh yeah, ooh yeah)🎶 🎶 🎶`
+			);
+		}
+
+		return env.ASSETS.fetch(request);
+	},
+};
diff --git a/fixtures/pages-workerjs-with-config-file-app/public/index.html b/fixtures/pages-workerjs-with-config-file-app/public/index.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+	<body>
+		<h1>🪩 Holiday! Celebrate! Pages supports 'wrangler.toml' 🪩</h1>
+	</body>
+</html>
diff --git a/fixtures/pages-workerjs-with-config-file-app/tests/index.test.ts b/fixtures/pages-workerjs-with-config-file-app/tests/index.test.ts
@@ -0,0 +1,65 @@
+import { resolve } from "node:path";
+import { fetch } from "undici";
+import { afterAll, beforeAll, describe, it } from "vitest";
+import { runWranglerPagesDev } from "../../shared/src/run-wrangler-long-lived";
+
+describe("Pages Advanced Mode with wrangler.toml", () => {
+	let ip: string, port: number, stop: (() => Promise<unknown>) | undefined;
+
+	beforeAll(async () => {
+		({ ip, port, stop } = await runWranglerPagesDev(
+			resolve(__dirname, ".."),
+			undefined,
+			["--port=0", "--inspector-port=0"]
+		));
+	});
+
+	afterAll(async () => {
+		await stop?.();
+	});
+
+	it("should render static pages", async ({ expect }) => {
+		const response = await fetch(`http://${ip}:${port}/`);
+		const text = await response.text();
+		expect(text).toContain(
+			"🪩 Holiday! Celebrate! Pages supports 'wrangler.toml' 🪩"
+		);
+	});
+
+	it("should run our _worker.js, and correctly apply the routing rules provided in the custom _routes.json file", async ({
+		expect,
+	}) => {
+		// matches `/holiday` include rule
+		let response = await fetch(`http://${ip}:${port}/holiday`);
+		let text = await response.text();
+		expect(text).toEqual(
+			`[/holiday]:\n` +
+				`🎶 🎶 🎶\n` +
+				`If we took a holiday\n` +
+				`Took some time to celebrate\n` +
+				`Just one day out of life\n` +
+				`It would be, it would be so nice 🎉\n` +
+				`🎶 🎶 🎶`
+		);
+
+		// matches `/celebrate` include rule
+		response = await fetch(`http://${ip}:${port}/celebrate`);
+		text = await response.text();
+		expect(text).toEqual(
+			`[/celebrate]:\n` +
+				`🎶 🎶 🎶\n` +
+				`Everybody spread the word\n` +
+				`We're gonna have a celebration\n` +
+				`All across the world\n` +
+				`In every nation\n` +
+				`🎶 🎶 🎶`
+		);
+
+		// matches `/oh-yeah` exclude rule
+		response = await fetch(`http://${ip}:${port}/oh-yeah`);
+		text = await response.text();
+		expect(text).toContain(
+			"🪩 Holiday! Celebrate! Pages supports 'wrangler.toml' 🪩"
+		);
+	});
+});
diff --git a/fixtures/pages-workerjs-with-config-file-app/tests/tsconfig.json b/fixtures/pages-workerjs-with-config-file-app/tests/tsconfig.json
@@ -0,0 +1,7 @@
+{
+	"extends": "@cloudflare/workers-tsconfig/tsconfig.json",
+	"compilerOptions": {
+		"types": ["node"]
+	},
+	"include": ["**/*.ts", "../../../node-types.d.ts"]
+}
diff --git a/fixtures/pages-workerjs-with-config-file-app/tsconfig.json b/fixtures/pages-workerjs-with-config-file-app/tsconfig.json
@@ -0,0 +1,13 @@
+{
+	"compilerOptions": {
+		"target": "ES2020",
+		"esModuleInterop": true,
+		"module": "CommonJS",
+		"lib": ["ES2020"],
+		"types": ["node"],
+		"moduleResolution": "node",
+		"noEmit": true,
+		"skipLibCheck": true
+	},
+	"include": ["tests", "../../node-types.d.ts"]
+}
diff --git a/fixtures/pages-workerjs-with-config-file-app/vitest.config.ts b/fixtures/pages-workerjs-with-config-file-app/vitest.config.ts
@@ -0,0 +1,9 @@
+import { defineProject, mergeConfig } from "vitest/config";
+import configShared from "../../vitest.shared";
+
+export default mergeConfig(
+	configShared,
+	defineProject({
+		test: {},
+	})
+);
diff --git a/fixtures/pages-workerjs-with-config-file-app/wrangler.toml b/fixtures/pages-workerjs-with-config-file-app/wrangler.toml
@@ -0,0 +1,10 @@
+pages_build_output_dir = "./public"
+
+name = "pages-with-config-file-app"
+compatibility_date = "2024-01-01"
+#compatibility_flags = []
+
+[vars]
+VAR1 = "celebrate"
+VAR2 = "holiday"
+VAR3 = "celebration"