feat(wrangler): Add remote mode support for Workers + Assets

Author: CarmenPopoviciu

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

@@ -1733,18 +1733,6 @@ describe.sequential("wrangler dev", () => {
 				`[Error: Cannot use assets in remote mode. Workers with assets are only supported in local mode. Please use \`wrangler dev\`.]`
 			);
 		});
-
-		it("should error if config.assets and --remote are used together", async () => {
-			writeWranglerConfig({
-				assets: { directory: "./public" },
-			});
-			fs.mkdirSync("public");
-			await expect(
-				runWrangler("dev --remote")
-			).rejects.toThrowErrorMatchingInlineSnapshot(
-				`[Error: Cannot use assets in remote mode. Workers with assets are only supported in local mode. Please use \`wrangler dev\`.]`
-			);
-		});
 	});
 
 	describe("--inspect", () => {

packages/wrangler/src/api/startDevWorker/ConfigController.ts

@@ -308,12 +308,6 @@ async function resolveConfig(
 		);
 	}
 
-	if (resolved.assets && resolved.dev.remote) {
-		throw new UserError(
-			"Cannot use assets in remote mode. Workers with assets are only supported in local mode. Please use `wrangler dev`."
-		);
-	}
-
 	validateAssetsArgsAndConfig(resolved);
 
 	const services = extractBindingsOfType("service", resolved.bindings);

packages/wrangler/src/api/startDevWorker/RemoteRuntimeController.ts

@@ -30,6 +30,8 @@ import type {
 } from "./events";
 import type { Trigger } from "./types";
 
+type CreateRemoteWorkerInitProps = Parameters<typeof createRemoteWorkerInit>[0];
+
 export class RemoteRuntimeController extends RuntimeController {
 	#abortController = new AbortController();
 
@@ -60,40 +62,49 @@ export class RemoteRuntimeController extends RuntimeController {
 	}
 
 	async #previewToken(
-		props: Parameters<typeof createRemoteWorkerInit>[0] &
+		props: Omit<CreateRemoteWorkerInitProps, "name"> &
+			Partial<Pick<CreateRemoteWorkerInitProps, "name">> &
 			Parameters<typeof getWorkerAccountAndContext>[0]
 	): Promise<CfPreviewToken | undefined> {
+		if (!this.#session) {
+			return;
+		}
+
 		try {
+			const { workerAccount, workerContext } = await getWorkerAccountAndContext(
+				{
+					accountId: props.accountId,
+					env: props.env,
+					legacyEnv: props.legacyEnv,
+					host: props.host,
+					routes: props.routes,
+					sendMetrics: props.sendMetrics,
+					configPath: props.configPath,
+				}
+			);
+
+			const scriptId =
+				props.name ||
+				(workerContext.zone
+					? this.#session.id
+					: this.#session.host.split(".")[0]);
+
 			const init = await createRemoteWorkerInit({
 				bundle: props.bundle,
 				modules: props.modules,
 				accountId: props.accountId,
-				name: props.name,
+				name: scriptId,
 				legacyEnv: props.legacyEnv,
 				env: props.env,
 				isWorkersSite: props.isWorkersSite,
+				assets: props.assets,
 				legacyAssetPaths: props.legacyAssetPaths,
 				format: props.format,
 				bindings: props.bindings,
 				compatibilityDate: props.compatibilityDate,
 				compatibilityFlags: props.compatibilityFlags,
 			});
 
-			const { workerAccount, workerContext } = await getWorkerAccountAndContext(
-				{
-					accountId: props.accountId,
-					env: props.env,
-					legacyEnv: props.legacyEnv,
-					host: props.host,
-					routes: props.routes,
-					sendMetrics: props.sendMetrics,
-					configPath: props.configPath,
-				}
-			);
-			if (!this.#session) {
-				return;
-			}
-
 			const workerPreviewToken = await createWorkerPreview(
 				init,
 				workerAccount,
@@ -173,6 +184,7 @@ export class RemoteRuntimeController extends RuntimeController {
 				legacyEnv: !config.legacy?.enableServiceEnvironments,
 				env: config.env,
 				isWorkersSite: config.legacy?.site !== undefined,
+				assets: config.assets,
 				legacyAssetPaths: config.legacy?.site?.bucket
 					? {
 							baseDirectory: config.legacy?.site?.bucket,

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

@@ -7,11 +7,9 @@ import { logger } from "../logger";
 import { ParseError, parseJSON } from "../parse";
 import { getAccessToken } from "../user/access";
 import { isAbortError } from "../utils/isAbortError";
-import type {
-	CfWorkerContext,
-	CfWorkerInit,
-} from "../deployment-bundle/worker";
+import type { CfWorkerContext } from "../deployment-bundle/worker";
 import type { ApiCredentials } from "../user";
+import type { CfWorkerInitWithName } from "./remote";
 import type { HeadersInit } from "undici";
 
 /**
@@ -227,18 +225,17 @@ export async function createPreviewSession(
  */
 async function createPreviewToken(
 	account: CfAccount,
-	worker: CfWorkerInit,
+	worker: CfWorkerInitWithName,
 	ctx: CfWorkerContext,
 	session: CfPreviewSession,
 	abortSignal: AbortSignal
 ): Promise<CfPreviewToken> {
 	const { value, host, inspectorUrl, prewarmUrl } = session;
 	const { accountId } = account;
-	const scriptId = worker.name || (ctx.zone ? session.id : host.split(".")[0]);
 	const url =
 		ctx.env && !ctx.legacyEnv
-			? `/accounts/${accountId}/workers/services/${scriptId}/environments/${ctx.env}/edge-preview`
-			: `/accounts/${accountId}/workers/scripts/${scriptId}/edge-preview`;
+			? `/accounts/${accountId}/workers/services/${worker.name}/environments/${ctx.env}/edge-preview`
+			: `/accounts/${accountId}/workers/scripts/${worker.name}/edge-preview`;
 
 	const mode: CfPreviewMode = ctx.zone
 		? {
@@ -303,7 +300,7 @@ async function createPreviewToken(
  * const {value, host} = await createWorker(init, acct);
  */
 export async function createWorkerPreview(
-	init: CfWorkerInit,
+	init: CfWorkerInitWithName,
 	account: CfAccount,
 	ctx: CfWorkerContext,
 	session: CfPreviewSession,

packages/wrangler/src/dev/remote.ts

@@ -1,5 +1,6 @@
 import assert from "node:assert";
 import path from "node:path";
+import { syncAssets } from "../assets";
 import { printBundleSize } from "../deployment-bundle/bundle-reporter";
 import { getBundleType } from "../deployment-bundle/bundle-type";
 import { withSourceURLs } from "../deployment-bundle/source-url";
@@ -10,6 +11,7 @@ import { syncLegacyAssets } from "../sites";
 import { requireApiToken } from "../user";
 import { isAbortError } from "../utils/isAbortError";
 import { getZoneIdForPreview } from "../zones";
+import type { AssetsOptions } from "../assets";
 import type { Route } from "../config/environment";
 import type {
 	CfModule,
@@ -79,14 +81,18 @@ export function handlePreviewSessionCreationError(
 	}
 }
 
+export type CfWorkerInitWithName = Required<Pick<CfWorkerInit, "name">> &
+	CfWorkerInit;
+
 export async function createRemoteWorkerInit(props: {
 	bundle: EsbuildBundle;
 	modules: CfModule[];
 	accountId: string;
-	name: string | undefined;
+	name: string;
 	legacyEnv: boolean | undefined;
 	env: string | undefined;
 	isWorkersSite: boolean;
+	assets: AssetsOptions | undefined;
 	legacyAssetPaths: LegacyAssetPaths | undefined;
 	format: CfScriptFormat;
 	bindings: CfWorkerInit["bindings"];
@@ -130,7 +136,11 @@ export async function createRemoteWorkerInit(props: {
 		});
 	}
 
-	const init: CfWorkerInit = {
+	const assetsJwt = props.assets
+		? await syncAssets(props.accountId, props.name, props.assets.directory)
+		: undefined;
+
+	const init: CfWorkerInitWithName = {
 		name: props.name,
 		main: {
 			name: path.basename(props.bundle.path),
@@ -161,10 +171,17 @@ export async function createRemoteWorkerInit(props: {
 		keepSecrets: true,
 		logpush: false,
 		sourceMaps: undefined,
+		assets:
+			props.assets && assetsJwt
+				? {
+						jwt: assetsJwt,
+						routingConfig: props.assets.routingConfig,
+						assetConfig: props.assets.assetConfig,
+					}
+				: undefined,
 		placement: undefined, // no placement in dev
 		tail_consumers: undefined, // no tail consumers in dev - TODO revisit?
 		limits: undefined, // no limits in preview - not supported yet but can be added
-		assets: undefined, // no remote mode for assets
 		observability: undefined, // no observability in dev
 	};