fix: remote flag not working for preview command's cache population

Author: james-elicx

.changeset/odd-colts-walk.md

@@ -0,0 +1,10 @@
+---
+"@opennextjs/cloudflare": patch
+---
+
+fix: remote flag not working for preview command's cache population
+
+Previously, passing the `--remote` flag when running `opennextjs-cloudflare preview --remote` would not result in the remote preview binding being populated, and would throw errors due to a missing preview flag when populating Workers KV. The remote flag is now supported for the cache popoulation step when running the preview command.
+
+- `opennextjs-cloudflare preview --remote` will populate the remote binding for the preview ID specified in your Wrangler config.
+- `opennextjs-cloudflare preview` will continue to populate the local binding in your Wrangler config.

examples/overrides/d1-tag-next/wrangler.e2e.jsonc

@@ -15,12 +15,14 @@
 		{
 			"binding": "NEXT_INC_CACHE_KV",
 			"id": "<BINDING_ID>",
+			"preview_id": "<BINDING_ID>",
 		},
 	],
 	"d1_databases": [
 		{
 			"binding": "NEXT_TAG_CACHE_D1",
 			"database_id": "NEXT_TAG_CACHE_D1",
+			"preview_database_id": "NEXT_TAG_CACHE_D1",
 			"database_name": "NEXT_TAG_CACHE_D1",
 		},
 	],

packages/cloudflare/src/cli/commands/populate-cache.ts

@@ -109,6 +109,7 @@ type PopulateCacheOptions = {
 	environment?: string;
 	wranglerConfigPath?: string;
 	cacheChunkSize?: number;
+	shouldUsePreviewNamespace?: boolean;
 };
 
 async function populateR2IncrementalCache(
@@ -197,12 +198,21 @@ async function populateKVIncrementalCache(
 
 		writeFileSync(chunkPath, JSON.stringify(kvMapping));
 
-		runWrangler(options, ["kv bulk put", quoteShellMeta(chunkPath), `--binding ${KV_CACHE_BINDING_NAME}`], {
-			target: populateCacheOptions.target,
-			environment: populateCacheOptions.environment,
-			configPath: populateCacheOptions.wranglerConfigPath,
-			logging: "error",
-		});
+		runWrangler(
+			options,
+			[
+				"kv bulk put",
+				quoteShellMeta(chunkPath),
+				`--binding ${KV_CACHE_BINDING_NAME}`,
+				...(populateCacheOptions.shouldUsePreviewNamespace ? ["--preview"] : ["--preview false"]),
+			],
+			{
+				target: populateCacheOptions.target,
+				environment: populateCacheOptions.environment,
+				configPath: populateCacheOptions.wranglerConfigPath,
+				logging: "error",
+			}
+		);
 
 		rmSync(chunkPath);
 	}
@@ -228,6 +238,7 @@ function populateD1TagCache(
 			"d1 execute",
 			D1_TAG_BINDING_NAME,
 			`--command "CREATE TABLE IF NOT EXISTS revalidations (tag TEXT NOT NULL, revalidatedAt INTEGER NOT NULL, UNIQUE(tag) ON CONFLICT REPLACE);"`,
+			...(populateCacheOptions.shouldUsePreviewNamespace ? ["--preview"] : ["--preview false"]),
 		],
 		{
 			target: populateCacheOptions.target,

packages/cloudflare/src/cli/commands/preview.ts

@@ -16,7 +16,9 @@ import {
  *
  * @param args
  */
-export async function previewCommand(args: WithWranglerArgs<{ cacheChunkSize: number }>): Promise<void> {
+export async function previewCommand(
+	args: WithWranglerArgs<{ cacheChunkSize: number; remote: boolean }>
+): Promise<void> {
 	printHeaders("preview");
 
 	const { config } = await retrieveCompiledConfig();
@@ -25,10 +27,11 @@ export async function previewCommand(args: WithWranglerArgs<{ cacheChunkSize: nu
 	const wranglerConfig = readWranglerConfig(args);
 
 	await populateCache(options, config, wranglerConfig, {
-		target: "local",
+		target: args.remote ? "remote" : "local",
 		environment: args.env,
 		wranglerConfigPath: args.wranglerConfigPath,
 		cacheChunkSize: args.cacheChunkSize,
+		shouldUsePreviewNamespace: args.remote,
 	});
 
 	runWrangler(options, ["dev", ...args.wranglerArgs], { logging: "all" });
@@ -43,7 +46,12 @@ export function addPreviewCommand<T extends yargs.Argv>(y: T) {
 	return y.command(
 		"preview",
 		"Preview a built OpenNext app with a Wrangler dev server",
-		(c) => withPopulateCacheOptions(c),
+		(c) =>
+			withPopulateCacheOptions(c).option("remote", {
+				type: "boolean",
+				default: false,
+				desc: "Run on the global Cloudflare network with access to production resources",
+			}),
 		(args) => previewCommand(withWranglerPassthroughArgs(args))
 	);
 }

packages/cloudflare/src/cli/commands/utils.ts

@@ -131,6 +131,7 @@ type WranglerInputArgs = {
 	configPath: string | undefined;
 	config: string | undefined;
 	env: string | undefined;
+	remote?: boolean | undefined;
 };
 
 /**
@@ -154,6 +155,7 @@ function getWranglerArgs(args: WranglerInputArgs & { _: (string | number)[] }):
 		...(args.configPath ? ["--config", args.configPath] : []),
 		...(args.config ? ["--config", args.config] : []),
 		...(args.env ? ["--env", args.env] : []),
+		...(args.remote ? ["--remote"] : []),
 		// Note: the first args in `_` will be the commands.
 		...args._.slice(args._[0] === "populateCache" ? 2 : 1).map((a) => `${a}`),
 	];