fix: pass routes to dev session (#1213)

We can pass routes when creating a `dev` session. The effect of this is when you visit a path that _doesn't_ match the given routes, then it instead does a fetch from the deployed worker on that path (if any). We were previously passing `*/*`, i.e, matching _all_ routes in dev; this fix now passes configured routes instead.

.changeset/curly-bulldogs-shake.md

@@ -0,0 +1,7 @@
+---
+"wrangler": patch
+---
+
+fix: pass `routes` to `dev` session
+
+We can pass routes when creating a `dev` session. The effect of this is when you visit a path that _doesn't_ match the given routes, then it instead does a fetch from the deployed worker on that path (if any). We were previously passing `*/*`, i.e, matching _all_ routes in dev; this fix now passes configured routes instead.

packages/wrangler/src/__tests__/dev.test.tsx

@@ -141,6 +141,27 @@ describe("wrangler dev", () => {
 		});
 	});
 
+	describe("routes", () => {
+		it("should pass routes to <Dev/>", async () => {
+			fs.writeFileSync("index.js", `export default {};`);
+
+			// config.routes
+			mockGetZones("5.some-host.com", [{ id: "some-zone-id-5" }]);
+			writeWranglerToml({
+				main: "index.js",
+				routes: ["http://5.some-host.com/some/path/*"],
+			});
+			await runWrangler("dev");
+			expect((Dev as jest.Mock).mock.calls[0][0]).toEqual(
+				expect.objectContaining({
+					host: "5.some-host.com",
+					zone: "some-zone-id-5",
+					routes: ["http://5.some-host.com/some/path/*"],
+				})
+			);
+		});
+	});
+
 	describe("host", () => {
 		it("should resolve a host to its zone", async () => {
 			writeWranglerToml({

packages/wrangler/src/create-worker-preview.ts

@@ -118,7 +118,21 @@ async function createPreviewToken(
 			: `/accounts/${accountId}/workers/scripts/${scriptId}/edge-preview`;
 
 	const mode: CfPreviewMode = ctx.zone
-		? { routes: ["*/*"] } // TODO: should we support routes here? how?
+		? {
+				routes: ctx.routes
+					? // extract all the route patterns
+					  ctx.routes.map((route) => {
+							if (typeof route === "string") {
+								return route;
+							}
+							if (route.custom_domain) {
+								return `${route.pattern}/*`;
+							}
+							return route.pattern;
+					  })
+					: // if there aren't any patterns, then just match on all routes
+					  ["*/*"],
+		  }
 		: { workers_dev: true };
 
 	const formData = createWorkerUploadForm(worker);

packages/wrangler/src/dev.tsx

@@ -22,6 +22,7 @@ import {
 } from "./index";
 
 import type { Config } from "./config";
+import type { Route } from "./config/environment";
 import type { Argv, ArgumentsCamelCase } from "yargs";
 
 interface DevArgs {
@@ -296,24 +297,24 @@ export async function devHandler(args: ArgumentsCamelCase<DevArgs>) {
 		// Compute zone info from the `host` and `route` args and config;
 		let host = args.host || config.dev.host;
 		let zoneId: string | undefined;
+		const routes: Route[] | undefined =
+			args.routes || (config.route && [config.route]) || config.routes;
 
 		if (!args.local) {
 			if (host) {
 				zoneId = await getZoneIdFromHost(host);
 			}
-			const routes = args.routes || config.route || config.routes;
 			if (!zoneId && routes) {
-				const firstRoute = Array.isArray(routes) ? routes[0] : routes;
+				const firstRoute = routes[0];
 				const zone = await getZoneForRoute(firstRoute);
 				if (zone) {
 					zoneId = zone.id;
 					host = zone.host;
 				}
 			}
 		} else if (!host) {
-			const routes = args.routes || config.route || config.routes;
 			if (routes) {
-				const firstRoute = Array.isArray(routes) ? routes[0] : routes;
+				const firstRoute = routes[0];
 				host = getHostFromRoute(firstRoute);
 			}
 		}
@@ -415,6 +416,7 @@ export async function devHandler(args: ArgumentsCamelCase<DevArgs>) {
 					env={args.env}
 					zone={zoneId}
 					host={host}
+					routes={routes}
 					rules={getRules(config)}
 					legacyEnv={isLegacyEnv(config)}
 					minify={args.minify ?? config.minify}

packages/wrangler/src/dev/dev.tsx

@@ -17,6 +17,7 @@ import { Local } from "./local";
 import { Remote } from "./remote";
 import { useEsbuild } from "./use-esbuild";
 import type { Config } from "../config";
+import type { Route } from "../config/environment";
 import type { Entry } from "../entry";
 import type { AssetPaths } from "../sites";
 import type { CfWorkerInit } from "../worker";
@@ -52,6 +53,7 @@ export type DevProps = {
 	legacyEnv: boolean;
 	zone: string | undefined;
 	host: string | undefined;
+	routes: Route[] | undefined;
 };
 
 export function DevImplementation(props: DevProps): JSX.Element {
@@ -188,6 +190,7 @@ function DevSession(props: DevSessionProps) {
 			legacyEnv={props.legacyEnv}
 			zone={props.zone}
 			host={props.host}
+			routes={props.routes}
 		/>
 	);
 }

packages/wrangler/src/dev/remote.tsx

@@ -9,6 +9,7 @@ import { logger } from "../logger";
 import { usePreviewServer } from "../proxy";
 import { syncAssets } from "../sites";
 import { ChooseAccount, getAccountChoices, requireApiToken } from "../user";
+import type { Route } from "../config/environment";
 import type { CfPreviewToken } from "../create-worker-preview";
 import type { AssetPaths } from "../sites";
 import type { ChooseAccountItem } from "../user";
@@ -34,6 +35,7 @@ export function Remote(props: {
 	legacyEnv: boolean | undefined;
 	zone: string | undefined;
 	host: string | undefined;
+	routes: Route[] | undefined;
 }) {
 	const [accountId, setAccountId] = useState(props.accountId);
 	const accountChoicesRef = useRef<Promise<ChooseAccountItem[]>>();
@@ -56,6 +58,7 @@ export function Remote(props: {
 		legacyEnv: props.legacyEnv,
 		zone: props.zone,
 		host: props.host,
+		routes: props.routes,
 	});
 
 	usePreviewServer({
@@ -125,6 +128,7 @@ export function useWorker(props: {
 	legacyEnv: boolean | undefined;
 	zone: string | undefined;
 	host: string | undefined;
+	routes: Route[] | undefined;
 }): CfPreviewToken | undefined {
 	const {
 		name,
@@ -230,6 +234,7 @@ export function useWorker(props: {
 						legacyEnv: props.legacyEnv,
 						zone: props.zone,
 						host: props.host,
+						routes: props.routes,
 					},
 					abortController.signal
 				)
@@ -277,6 +282,7 @@ export function useWorker(props: {
 		props.legacyEnv,
 		props.zone,
 		props.host,
+		props.routes,
 	]);
 	return token;
 }

packages/wrangler/src/preview.tsx

@@ -76,6 +76,7 @@ export async function previewHandler(args: ArgumentsCamelCase<PreviewArgs>) {
 			env={args.env}
 			zone={undefined}
 			host={undefined}
+			routes={undefined}
 			legacyEnv={isLegacyEnv(config)}
 			build={config.build || {}}
 			define={config.define}

packages/wrangler/src/worker.ts

@@ -1,8 +1,9 @@
+import type { Route } from "./config/environment";
+import type { ApiCredentials } from "./user";
+
 /**
  * A Cloudflare account.
  */
-import type { ApiCredentials } from "./user";
-
 export interface CfAccount {
 	/**
 	 * An API token.
@@ -180,4 +181,5 @@ export interface CfWorkerContext {
 	legacyEnv: boolean | undefined;
 	zone: string | undefined;
 	host: string | undefined;
+	routes: Route[] | undefined;
 }