cloudflare · petebacondarwin · Apr 25, 2025 · Apr 24, 2025 · Apr 24, 2025 · Mar 14, 2025
@@ -1,2 +1,8 @@
+import { test } from "vitest";
+
 export * from "../vitest-setup";
 export * from "./responses";
+
+export function failsIf(condition: boolean) {
+	return condition ? test.fails : test;
+}
@@ -1,5 +1,5 @@
 import { describe, expect, test } from "vitest";
-import { isBuild, page, viteTestUrl } from "../../__test-utils__";
+import { failsIf, isBuild, page, viteTestUrl } from "../../__test-utils__";
 
 describe("react-spa", () => {
 	test("returns the correct home page", async () => {
@@ -65,7 +65,3 @@ describe("react-spa", () => {
 		);
 	});
 });
-
-function failsIf(condition: boolean) {
-	return condition ? test.fails : test;
-}
@@ -1,7 +1,7 @@
 import { readFileSync, writeFileSync } from "node:fs";
 import { join } from "node:path";
 import { describe, expect, test, vi } from "vitest";
-import { isBuild, page, viteTestUrl } from "../../../__test-utils__";
+import { failsIf, isBuild, page, viteTestUrl } from "../../../__test-utils__";
 
 describe(
 	"react-spa (with experimental support)",
@@ -115,7 +115,3 @@ describe("reloading the server", () => {
 		}
 	);
 });
-
-function failsIf(condition: boolean) {
-	return condition ? test.fails : test;
-}
@@ -0,0 +1,44 @@
+import { describe, expect, test } from "vitest";
+import { failsIf, isBuild, page, viteTestUrl } from "../../__test-utils__";
+
+describe("run_worker_first support", () => {
+	test("returns the correct home page", async () => {
+		const content = await page.textContent("h1");
+		expect(content).toBe("Vite + React");
+	});
+
+	test("returns the response from the API", async () => {
+		const button = page.getByRole("button", { name: "get-name" });
+		const contentBefore = await button.innerText();
+		expect(contentBefore).toBe("Name from API is: unknown");
+		const responsePromise = page.waitForResponse((response) =>
+			response.url().endsWith("/api/")
+		);
+		await button.click();
+		await responsePromise;
+		const contentAfter = await button.innerText();
+		expect(contentAfter).toBe("Name from API is: Cloudflare");
+	});
+
+	test("returns UNAUTH for the admin page", async () => {
+		const response = await fetch(viteTestUrl + "/admin");
+		expect(response.status).toBe(401);
+	});
+
+	// This is the only use case that is not currently supported in dev mode.
+	// In that mode the middleware that runs the Worker is after the built-in Vite middleware that handles the assets.
+	failsIf(!isBuild)("returns UNAUTH for an admin image", async () => {
+		const response = await fetch(viteTestUrl + "/admin/secret.svg");
+		expect(response.status).toBe(401);
+	});
+
+	test("returns response for authorized admin page", async () => {
+		const response = await fetch(viteTestUrl + "/admin?auth=xxx");
+		expect(response.status).toBe(200);
+	});
+
+	test("returns response for authorized admin image", async () => {
+		const response = await fetch(viteTestUrl + "/admin/secret.svg?auth=xxx");
+		expect(response.status).toBe(200);
+	});
+});
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<link rel="icon" type="image/svg+xml" href="/vite.svg" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>Vite + React + TS</title>
+	</head>
+	<body>
+		<div id="root"></div>
+		<script type="module" src="/src/main.tsx"></script>
+	</body>
+</html>
@@ -0,0 +1,25 @@
+interface Env {
+	ASSETS: Fetcher;
+}
+
+export default {
+	async fetch(request, env) {
+		const url = new URL(request.url);
+
+		// Protect assets in the `/admin` directory from "unauthorized" access!
+		if (url.pathname.startsWith("/admin")) {
+			const auth = url.searchParams.get("auth");
+			if (!auth) {
+				return new Response("Unauthorized access", { status: 401 });
+			}
+		}
+
+		if (url.pathname.startsWith("/api/")) {
+			return Response.json({
+				name: "Cloudflare",
+			});
+		}
+
+		return env.ASSETS.fetch(request);
+	},
+} satisfies ExportedHandler<Env>;
@@ -0,0 +1,26 @@
+{
+	"name": "@playground/run-worker-first",
+	"private": true,
+	"type": "module",
+	"scripts": {
+		"build": "vite build --app",
+		"check:types": "tsc --build",
+		"dev": "vite dev",
+		"preview": "vite preview"
+	},
+	"dependencies": {
+		"react": "^19.0.0",
+		"react-dom": "^19.0.0"
+	},
+	"devDependencies": {
+		"@cloudflare/vite-plugin": "workspace:*",
+		"@cloudflare/workers-tsconfig": "workspace:*",
+		"@cloudflare/workers-types": "^4.20250310.0",
+		"@types/react": "^19.0.0",
+		"@types/react-dom": "^19.0.0",
+		"@vitejs/plugin-react": "^4.3.4",
+		"typescript": "catalog:default",
+		"vite": "catalog:vite-plugin",
+		"wrangler": "workspace:*"
+	}
+}
@@ -0,0 +1,42 @@
+#root {
+	max-width: 1280px;
+	margin: 0 auto;
+	padding: 2rem;
+	text-align: center;
+}
+
+.logo {
+	height: 6em;
+	padding: 1.5em;
+	will-change: filter;
+	transition: filter 300ms;
+}
+.logo:hover {
+	filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+	filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+@keyframes logo-spin {
+	from {
+		transform: rotate(0deg);
+	}
+	to {
+		transform: rotate(360deg);
+	}
+}
+
+@media (prefers-reduced-motion: no-preference) {
+	a:nth-of-type(2) .logo {
+		animation: logo-spin infinite 20s linear;
+	}
+}
+
+.card {
+	padding: 2em;
+}
+
+.read-the-docs {
+	color: #888;
+}
@@ -0,0 +1,54 @@
+import viteLogo from "/vite.svg";
+import { useState } from "react";
+import reactLogo from "./assets/react.svg";
+import "./App.css";
+
+function App() {
+	const [count, setCount] = useState(0);
+	const [name, setName] = useState("unknown");
+
+	return (
+		<>
+			<div>
+				<a href="https://vite.dev" target="_blank">
+					<img src={viteLogo} className="logo" alt="Vite logo" />
+				</a>
+				<a href="https://react.dev" target="_blank">
+					<img src={reactLogo} className="logo react" alt="React logo" />
+				</a>
+			</div>
+			<h1>Vite + React</h1>
+			<div className="card">
+				<button
+					onClick={() => setCount((count) => count + 1)}
+					aria-label="increment"
+				>
+					count is {count}
+				</button>
+				<p>
+					Edit <code>src/App.tsx</code> and save to test HMR
+				</p>
+			</div>
+			<div className="card">
+				<button
+					onClick={() => {
+						fetch("/api/")
+							.then((res) => res.json() as Promise<{ name: string }>)
+							.then((data) => setName(data.name));
+					}}
+					aria-label="get-name"
+				>
+					Name from API is: {name}
+				</button>
+				<p>
+					Edit <code>api/index.ts</code> to change the name
+				</p>
+			</div>
+			<p className="read-the-docs">
+				Click on the Vite and React logos to learn more
+			</p>
+		</>
+	);
+}
+
+export default App;
@@ -0,0 +1,68 @@
+:root {
+	font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+	line-height: 1.5;
+	font-weight: 400;
+
+	color-scheme: light dark;
+	color: rgba(255, 255, 255, 0.87);
+	background-color: #242424;
+
+	font-synthesis: none;
+	text-rendering: optimizeLegibility;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+}
+
+a {
+	font-weight: 500;
+	color: #646cff;
+	text-decoration: inherit;
+}
+a:hover {
+	color: #535bf2;
+}
+
+body {
+	margin: 0;
+	display: flex;
+	place-items: center;
+	min-width: 320px;
+	min-height: 100vh;
+}
+
+h1 {
+	font-size: 3.2em;
+	line-height: 1.1;
+}
+
+button {
+	border-radius: 8px;
+	border: 1px solid transparent;
+	padding: 0.6em 1.2em;
+	font-size: 1em;
+	font-weight: 500;
+	font-family: inherit;
+	background-color: #1a1a1a;
+	cursor: pointer;
+	transition: border-color 0.25s;
+}
+button:hover {
+	border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+	outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+	:root {
+		color: #213547;
+		background-color: #ffffff;
+	}
+	a:hover {
+		color: #747bff;
+	}
+	button {
+		background-color: #f9f9f9;
+	}
+}
@@ -0,0 +1,10 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import "./index.css";
+import App from "./App.tsx";
+
+createRoot(document.getElementById("root")!).render(
+	<StrictMode>
+		<App />
+	</StrictMode>
+);
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
@@ -0,0 +1,4 @@
+{
+	"extends": ["@cloudflare/workers-tsconfig/react.json"],
+	"include": ["src"]
+}
@@ -0,0 +1,8 @@
+{
+	"files": [],
+	"references": [
+		{ "path": "./tsconfig.node.json" },
+		{ "path": "./tsconfig.client.json" },
+		{ "path": "./tsconfig.worker.json" }
+	]
+}
@@ -0,0 +1,4 @@
+{
+	"extends": ["@cloudflare/workers-tsconfig/base.json"],
+	"include": ["vite.config.ts", "__tests__"]
+}
@@ -0,0 +1,4 @@
+{
+	"extends": ["@cloudflare/workers-tsconfig/worker.json"],
+	"include": ["middleware"]
+}