@shopify/cli-hydrogen 5.2.3 → 5.3.0

package/dist/commands/hydrogen/build.js

@@ -1,8 +1,8 @@
 import { Flags } from '@oclif/core';
 import Command from '@shopify/cli-kit/node/base-command';
 import { outputInfo, outputContent, outputToken, outputWarn } from '@shopify/cli-kit/node/output';
-import { rmdir, fileSize, glob, removeFile, fileExists, copyFile } from '@shopify/cli-kit/node/fs';
-import { resolvePath, relativePath, joinPath } from '@shopify/cli-kit/node/path';
+import { rmdir, fileSize, fileExists, copyFile } from '@shopify/cli-kit/node/fs';
+import { resolvePath, relativePath } from '@shopify/cli-kit/node/path';
 import { getPackageManager } from '@shopify/cli-kit/node/node-package-manager';
 import colors from '@shopify/cli-kit/node/colors';
 import { getProjectPaths, getRemixConfig, handleRemixImportFail, assertOxygenChecks } from '../../lib/remix-config.js';
@@ -11,8 +11,11 @@ import { checkLockfileStatus } from '../../lib/check-lockfile.js';
 import { findMissingRoutes } from '../../lib/missing-routes.js';
 import { muteRemixLogs, createRemixLogger } from '../../lib/log.js';
 import { codegen } from '../../lib/codegen.js';
+import { buildBundleAnalysis, getBundleAnalysisSummary } from '../../lib/bundle/analyzer.js';
+import { AbortError } from '@shopify/cli-kit/node/error';
 
 const LOG_WORKER_BUILT = "\u{1F4E6} Worker built";
+const MAX_WORKER_BUNDLE_SIZE = 10;
 class Build extends Command {
   static description = "Builds a Hydrogen storefront for production.";
   static flags = {
@@ -20,7 +23,13 @@ class Build extends Command {
     sourcemap: Flags.boolean({
       description: "Generate sourcemaps for the build.",
       env: "SHOPIFY_HYDROGEN_FLAG_SOURCEMAP",
-      default: false
+      allowNo: true,
+      default: true
+    }),
+    ["bundle-stats"]: Flags.boolean({
+      description: "Show a bundle size summary after building.",
+      default: true,
+      allowNo: true
     }),
     "disable-route-warning": Flags.boolean({
       description: "Disable warning about missing standard routes.",
@@ -51,11 +60,16 @@ async function runBuild({
   useCodegen = false,
   codegenConfigPath,
   sourcemap = false,
-  disableRouteWarning = false
+  disableRouteWarning = false,
+  bundleStats = true,
+  assetPath
 }) {
   if (!process.env.NODE_ENV) {
     process.env.NODE_ENV = "production";
   }
+  if (assetPath) {
+    process.env.HYDROGEN_ASSET_BASE_URL = assetPath;
+  }
   const { root, buildPath, buildPathClient, buildPathWorkerFile, publicPath } = getProjectPaths(directory);
   await Promise.all([checkLockfileStatus(root), muteRemixLogs()]);
   console.time(LOG_WORKER_BUILT);
@@ -90,29 +104,37 @@ async function runBuild({
   if (process.env.NODE_ENV !== "development") {
     console.timeEnd(LOG_WORKER_BUILT);
     const sizeMB = await fileSize(buildPathWorkerFile) / (1024 * 1024);
+    const bundleAnalysisPath = await buildBundleAnalysis(buildPath);
     outputInfo(
       outputContent`   ${colors.dim(
         relativePath(root, buildPathWorkerFile)
-      )}  ${outputToken.yellow(sizeMB.toFixed(2))} MB\n`
+      )}  ${outputToken.link(
+        colors.yellow(sizeMB.toFixed(2) + " MB"),
+        bundleAnalysisPath
+      )}\n`
     );
-    if (sizeMB >= 1) {
+    if (bundleStats && sizeMB < MAX_WORKER_BUNDLE_SIZE) {
+      outputInfo(
+        outputContent`${await getBundleAnalysisSummary(buildPathWorkerFile) || "\n"}\n    │\n    └─── ${outputToken.link(
+          "Complete analysis: " + bundleAnalysisPath,
+          bundleAnalysisPath
+        )}\n\n`
+      );
+    }
+    if (sizeMB >= MAX_WORKER_BUNDLE_SIZE) {
+      throw new AbortError(
+        "\u{1F6A8} Worker bundle exceeds 10 MB! Oxygen has a maximum worker bundle size of 10 MB.",
+        outputContent`See the bundle analysis for a breakdown of what is contributing to the bundle size:\n${outputToken.link(
+          bundleAnalysisPath,
+          bundleAnalysisPath
+        )}`
+      );
+    } else if (sizeMB >= 5) {
       outputWarn(
-        `\u{1F6A8} Worker bundle exceeds 1 MB! This can delay your worker response.${remixConfig.serverMinify ? "" : " Minify your bundle by adding `serverMinify: true` to remix.config.js."}
+        `\u{1F6A8} Worker bundle exceeds 5 MB! This can delay your worker response.${remixConfig.serverMinify ? "" : " Minify your bundle by adding `serverMinify: true` to remix.config.js."}
 `
       );
     }
-    if (sourcemap) {
-      if (process.env.HYDROGEN_ASSET_BASE_URL) {
-        const filepaths = await glob(joinPath(buildPathClient, "**/*.js.map"));
-        for (const filepath of filepaths) {
-          await removeFile(filepath);
-        }
-      } else {
-        outputWarn(
-          "\u{1F6A8} Sourcemaps are enabled in production! Use this only for testing.\n"
-        );
-      }
-    }
   }
   if (!disableRouteWarning) {
     const missingRoutes = findMissingRoutes(remixConfig);
@@ -127,7 +149,7 @@ This build is missing ${missingRoutes.length} route${missingRoutes.length > 1 ?
       );
     }
   }
-  if (!process.env.SHOPIFY_UNIT_TEST) {
+  if (!process.env.SHOPIFY_UNIT_TEST && !assetPath) {
     process.exit(0);
   }
 }

package/dist/commands/hydrogen/deploy.js

@@ -0,0 +1,171 @@
+import { Flags } from '@oclif/core';
+import Command from '@shopify/cli-kit/node/base-command';
+import colors from '@shopify/cli-kit/node/colors';
+import { outputWarn, outputInfo, outputContent } from '@shopify/cli-kit/node/output';
+import { AbortError } from '@shopify/cli-kit/node/error';
+import { resolvePath } from '@shopify/cli-kit/node/path';
+import { renderFatalError, renderSuccess, renderTasks } from '@shopify/cli-kit/node/ui';
+import { parseToken, createDeploy } from '@shopify/oxygen-cli/deploy';
+import { commonFlags } from '../../lib/flags.js';
+import { getOxygenDeploymentToken } from '../../lib/get-oxygen-token.js';
+import { runBuild } from './build.js';
+
+const deploymentLogger = (message, level = "info") => {
+  if (level === "error" || level === "warn") {
+    outputWarn(message);
+  }
+};
+class Deploy extends Command {
+  static flags = {
+    path: commonFlags.path,
+    shop: commonFlags.shop,
+    publicDeployment: Flags.boolean({
+      env: "SHOPIFY_HYDROGEN_FLAG_PUBLIC_DEPLOYMENT",
+      description: "Marks a preview deployment as publicly accessible.",
+      required: false,
+      default: false
+    }),
+    metadataUrl: Flags.string({
+      description: "URL that links to the deployment. Will be saved and displayed in the Shopify admin",
+      required: false,
+      env: "SHOPIFY_HYDROGEN_FLAG_METADATA_URL"
+    }),
+    metadataUser: Flags.string({
+      description: "User that initiated the deployment. Will be saved and displayed in the Shopify admin",
+      required: false,
+      env: "SHOPIFY_HYDROGEN_FLAG_METADATA_USER"
+    }),
+    metadataVersion: Flags.string({
+      description: "A version identifier for the deployment. Will be saved and displayed in the Shopify admin",
+      required: false,
+      env: "SHOPIFY_HYDROGEN_FLAG_METADATA_VERSION"
+    })
+  };
+  static hidden = true;
+  async run() {
+    const { flags } = await this.parse(Deploy);
+    const actualPath = flags.path ? resolvePath(flags.path) : process.cwd();
+    await oxygenDeploy({
+      path: actualPath,
+      shop: flags.shop,
+      publicDeployment: flags.publicDeployment,
+      metadataUrl: flags.metadataUrl,
+      metadataUser: flags.metadataUser,
+      metadataVersion: flags.metadataVersion
+    }).catch((error) => {
+      renderFatalError(error);
+      process.exit(1);
+    }).finally(() => {
+      process.exit(0);
+    });
+  }
+}
+async function oxygenDeploy(options) {
+  const {
+    path,
+    shop,
+    publicDeployment,
+    metadataUrl,
+    metadataUser,
+    metadataVersion
+  } = options;
+  const token = await getOxygenDeploymentToken({
+    root: path,
+    flagShop: shop
+  });
+  if (!token) {
+    throw new AbortError("Could not obtain Oxygen deployment token");
+  }
+  const config = {
+    assetsDir: "dist/client",
+    deploymentUrl: "https://oxygen.shopifyapps.com",
+    deploymentToken: parseToken(token),
+    healthCheckMaxDuration: 180,
+    metadata: {
+      ...metadataUrl ? { url: metadataUrl } : {},
+      ...metadataUser ? { user: metadataUser } : {},
+      ...metadataVersion ? { version: metadataVersion } : {}
+    },
+    publicDeployment,
+    skipHealthCheck: false,
+    rootPath: path,
+    skipBuild: false,
+    workerOnly: false,
+    workerDir: "dist/worker"
+  };
+  let resolveUpload;
+  const uploadPromise = new Promise((resolve) => {
+    resolveUpload = resolve;
+  });
+  let resolveHealthCheck;
+  const healthCheckPromise = new Promise((resolve) => {
+    resolveHealthCheck = resolve;
+  });
+  let deployError = null;
+  let resolveDeploy;
+  let rejectDeploy;
+  const deployPromise = new Promise((resolve, reject) => {
+    resolveDeploy = resolve;
+    rejectDeploy = reject;
+  });
+  const hooks = {
+    buildFunction: async (assetPath) => {
+      outputInfo(
+        outputContent`${colors.whiteBright("Building project...")}`.value
+      );
+      await runBuild({
+        directory: path,
+        assetPath,
+        sourcemap: false,
+        useCodegen: false
+      });
+    },
+    onHealthCheckComplete: () => resolveHealthCheck(),
+    onUploadFilesStart: () => uploadStart(),
+    onUploadFilesComplete: () => resolveUpload(),
+    onHealthCheckError: (error) => {
+      deployError = new AbortError(
+        error.message,
+        "Please verify the deployment status in the Shopify Admin and retry deploying if necessary."
+      );
+    },
+    onUploadFilesError: (error) => {
+      deployError = new AbortError(
+        error.message,
+        "Check your connection and try again. If the problem persists, try again later or contact support."
+      );
+    }
+  };
+  const uploadStart = async () => {
+    outputInfo(
+      outputContent`${colors.whiteBright("Deploying to Oxygen..\n")}`.value
+    );
+    await renderTasks([
+      {
+        title: "Uploading files",
+        task: async () => await uploadPromise
+      },
+      {
+        title: "Performing health check",
+        task: async () => await healthCheckPromise
+      }
+    ]);
+  };
+  await createDeploy({ config, hooks, logger: deploymentLogger }).then((url) => {
+    const deploymentType = config.publicDeployment ? "public" : "private";
+    renderSuccess({
+      body: ["Successfully deployed to Oxygen"],
+      nextSteps: [
+        [
+          `Open ${url} in your browser to view your ${deploymentType} deployment`
+        ]
+      ]
+    });
+    resolveDeploy();
+  }).catch((error) => {
+    rejectDeploy(deployError || error);
+  });
+  return deployPromise;
+}
+
+export { Deploy as default, deploymentLogger, oxygenDeploy };

package/dist/commands/hydrogen/deploy.test.js

@@ -0,0 +1,185 @@
+import { vi, describe, beforeEach, afterEach, it, expect } from 'vitest';
+import { login } from '../../lib/auth.js';
+import { getStorefronts } from '../../lib/graphql/admin/link-storefront.js';
+import { AbortError } from '@shopify/cli-kit/node/error';
+import { renderSelectPrompt, renderSuccess, renderFatalError } from '@shopify/cli-kit/node/ui';
+import { oxygenDeploy, deploymentLogger } from './deploy.js';
+import { getOxygenDeploymentToken } from '../../lib/get-oxygen-token.js';
+import { createDeploy, parseToken } from '@shopify/oxygen-cli/deploy';
+
+vi.mock("../../lib/get-oxygen-token.js");
+vi.mock("@shopify/oxygen-cli/deploy");
+vi.mock("../../lib/auth.js");
+vi.mock("../../lib/shopify-config.js");
+vi.mock("../../lib/graphql/admin/link-storefront.js");
+vi.mock("../../lib/graphql/admin/create-storefront.js");
+vi.mock("../../lib/graphql/admin/fetch-job.js");
+vi.mock("../../lib/shell.js", () => ({ getCliCommand: () => "h2" }));
+vi.mock("@shopify/cli-kit/node/output", async () => {
+  return {
+    outputContent: () => ({ value: "" }),
+    outputInfo: () => {
+    }
+  };
+});
+vi.mock("@shopify/cli-kit/node/ui", async () => {
+  return {
+    renderFatalError: vi.fn(),
+    renderSelectPrompt: vi.fn(),
+    renderSuccess: vi.fn(),
+    renderTasks: vi.fn()
+  };
+});
+describe("deploy", () => {
+  const ADMIN_SESSION = {
+    token: "abc123",
+    storeFqdn: "my-shop.myshopify.com"
+  };
+  const FULL_SHOPIFY_CONFIG = {
+    shop: "my-shop.myshopify.com",
+    shopName: "My Shop",
+    email: "email",
+    storefront: {
+      id: "gid://shopify/HydrogenStorefront/1",
+      title: "Hydrogen"
+    }
+  };
+  const UNLINKED_SHOPIFY_CONFIG = {
+    ...FULL_SHOPIFY_CONFIG,
+    storefront: void 0
+  };
+  const originalExit = process.exit;
+  const deployParams = {
+    path: "./",
+    shop: "snowdevil.myshopify.com",
+    publicDeployment: false,
+    metadataUrl: "https://example.com",
+    metadataUser: "user",
+    metadataVersion: "1.0.0"
+  };
+  const mockToken = {
+    accessToken: "some-token",
+    allowedResource: "some-resource",
+    appId: "1",
+    client: "1",
+    expiresAt: "some-time",
+    namespace: "some-namespace",
+    namespaceId: "1"
+  };
+  beforeEach(async () => {
+    process.exit = vi.fn();
+    vi.mocked(login).mockResolvedValue({
+      session: ADMIN_SESSION,
+      config: UNLINKED_SHOPIFY_CONFIG
+    });
+    vi.mocked(getStorefronts).mockResolvedValue([
+      {
+        ...FULL_SHOPIFY_CONFIG.storefront,
+        parsedId: "1",
+        productionUrl: "https://example.com"
+      }
+    ]);
+    vi.mocked(renderSelectPrompt).mockResolvedValue(FULL_SHOPIFY_CONFIG.shop);
+    vi.mocked(createDeploy).mockResolvedValue(
+      "https://a-lovely-deployment.com"
+    );
+    vi.mocked(getOxygenDeploymentToken).mockResolvedValue("some-encoded-token");
+    vi.mocked(parseToken).mockReturnValue(mockToken);
+  });
+  afterEach(() => {
+    vi.resetAllMocks();
+    process.exit = originalExit;
+  });
+  it("calls getOxygenDeploymentToken with the correct parameters", async () => {
+    await oxygenDeploy(deployParams);
+    expect(getOxygenDeploymentToken).toHaveBeenCalledWith({
+      root: "./",
+      flagShop: "snowdevil.myshopify.com"
+    });
+    expect(getOxygenDeploymentToken).toHaveBeenCalledTimes(1);
+  });
+  it("calls createDeploy with the correct parameters", async () => {
+    await oxygenDeploy(deployParams);
+    const expectedConfig = {
+      assetsDir: "dist/client",
+      deploymentUrl: "https://oxygen.shopifyapps.com",
+      deploymentToken: mockToken,
+      healthCheckMaxDuration: 180,
+      metadata: {
+        url: deployParams.metadataUrl,
+        user: deployParams.metadataUser,
+        version: deployParams.metadataVersion
+      },
+      publicDeployment: deployParams.publicDeployment,
+      skipHealthCheck: false,
+      rootPath: deployParams.path,
+      skipBuild: false,
+      workerOnly: false,
+      workerDir: "dist/worker"
+    };
+    expect(vi.mocked(createDeploy)).toHaveBeenCalledWith({
+      config: expectedConfig,
+      hooks: {
+        buildFunction: expect.any(Function),
+        onHealthCheckComplete: expect.any(Function),
+        onUploadFilesStart: expect.any(Function),
+        onUploadFilesComplete: expect.any(Function),
+        onHealthCheckError: expect.any(Function),
+        onUploadFilesError: expect.any(Function)
+      },
+      logger: deploymentLogger
+    });
+    expect(vi.mocked(renderSuccess)).toHaveBeenCalled;
+  });
+  it("handles error during uploadFiles", async () => {
+    const mockRenderFatalError = vi.fn();
+    vi.mocked(renderFatalError).mockImplementation(mockRenderFatalError);
+    const error = new Error("Wonky internet!");
+    vi.mocked(createDeploy).mockImplementation((options) => {
+      options.hooks?.onUploadFilesStart?.();
+      options.hooks?.onUploadFilesError?.(error);
+      return new Promise((_resolve, reject) => {
+        reject(error);
+      });
+    });
+    try {
+      await oxygenDeploy(deployParams);
+      expect(true).toBe(false);
+    } catch (err) {
+      if (err instanceof AbortError) {
+        expect(err.message).toBe(error.message);
+        expect(err.tryMessage).toBe(
+          "Check your connection and try again. If the problem persists, try again later or contact support."
+        );
+      } else {
+        expect(true).toBe(false);
+      }
+    }
+  });
+  it("handles error during health check", async () => {
+    const mockRenderFatalError = vi.fn();
+    vi.mocked(renderFatalError).mockImplementation(mockRenderFatalError);
+    const error = new Error("Cloudflare is down!");
+    vi.mocked(createDeploy).mockImplementation((options) => {
+      options.hooks?.onUploadFilesStart?.();
+      options.hooks?.onUploadFilesComplete?.();
+      options.hooks?.onHealthCheckError?.(error);
+      return new Promise((_resolve, reject) => {
+        reject(error);
+      });
+    });
+    try {
+      await oxygenDeploy(deployParams);
+      expect(true).toBe(false);
+    } catch (err) {
+      if (err instanceof AbortError) {
+        expect(err.message).toBe(error.message);
+        expect(err.tryMessage).toBe(
+          "Please verify the deployment status in the Shopify Admin and retry deploying if necessary."
+        );
+      } else {
+        expect(true).toBe(false);
+      }
+    }
+  });
+});

package/dist/commands/hydrogen/dev.js

@@ -10,7 +10,7 @@ import { muteDevLogs, createRemixLogger, enhanceH2Logs } from '../../lib/log.js'
 import { commonFlags, deprecated, flagsToCamelObject, DEFAULT_PORT } from '../../lib/flags.js';
 import Command from '@shopify/cli-kit/node/base-command';
 import { Flags } from '@oclif/core';
-import { startMiniOxygen } from '../../lib/mini-oxygen.js';
+import { startMiniOxygen } from '../../lib/mini-oxygen/index.js';
 import { checkHydrogenVersion } from '../../lib/check-version.js';
 import { addVirtualRoutes } from '../../lib/virtual-routes.js';
 import { spawnCodegenProcess } from '../../lib/codegen.js';
@@ -26,6 +26,7 @@ class Dev extends Command {
   static flags = {
     path: commonFlags.path,
     port: commonFlags.port,
+    ["worker-unstable"]: commonFlags.workerRuntime,
     ["codegen-unstable"]: Flags.boolean({
       description: "Generate types for the Storefront API queries found in your project. It updates the types on file save.",
       required: false,
@@ -52,6 +53,7 @@ class Dev extends Command {
     await runDev({
       ...flagsToCamelObject(flags),
       useCodegen: flags["codegen-unstable"],
+      workerRuntime: flags["worker-unstable"],
       path: directory
     });
   }
@@ -60,6 +62,7 @@ async function runDev({
   port: portFlag = DEFAULT_PORT,
   path: appPath,
   useCodegen = false,
+  workerRuntime = false,
   codegenConfigPath,
   disableVirtualRoutes,
   envBranch,
@@ -107,14 +110,17 @@ async function runDev({
   async function safeStartMiniOxygen() {
     if (miniOxygen)
       return;
-    miniOxygen = await startMiniOxygen({
-      root,
-      port: portFlag,
-      watch: !liveReload,
-      buildPathWorkerFile,
-      buildPathClient,
-      env: await envPromise
-    });
+    miniOxygen = await startMiniOxygen(
+      {
+        root,
+        port: portFlag,
+        watch: !liveReload,
+        buildPathWorkerFile,
+        buildPathClient,
+        env: await envPromise
+      },
+      workerRuntime
+    );
     const graphiqlUrl = `${miniOxygen.listeningAt}/graphiql`;
     const debugNetworkUrl = `${miniOxygen.listeningAt}/debug-network`;
     enhanceH2Logs({ graphiqlUrl, ...remixConfig });
@@ -125,9 +131,11 @@ async function runDev({
       extraLines: [
         colors.dim(`
 View GraphiQL API browser: ${graphiqlUrl}`),
-        colors.dim(`
-View server-side network requests: ${debugNetworkUrl}`)
-      ]
+        workerRuntime ? "" : colors.dim(
+          `
+View server-side network requests: ${debugNetworkUrl}`
+        )
+      ].filter(Boolean)
     });
     if (useCodegen) {
       spawnCodegenProcess({ ...remixConfig, configFilePath: codegenConfigPath });
@@ -182,7 +190,7 @@ View server-side network requests: ${debugNetworkUrl}`)
           if (!miniOxygen) {
             await safeStartMiniOxygen();
           } else if (liveReload) {
-            await miniOxygen.reload({ worker: true });
+            await miniOxygen.reload();
           }
           liveReload?.onAppReady(context);
         }

package/dist/commands/hydrogen/init.js

@@ -1,6 +1,6 @@
 import Command from '@shopify/cli-kit/node/base-command';
 import { fileURLToPath } from 'node:url';
-import { packageManagerUsedForCreating } from '@shopify/cli-kit/node/node-package-manager';
+import { packageManagerFromUserAgent } from '@shopify/cli-kit/node/node-package-manager';
 import { Flags } from '@oclif/core';
 import { AbortError } from '@shopify/cli-kit/node/error';
 import { AbortController } from '@shopify/cli-kit/node/abort';
@@ -42,7 +42,8 @@ class Init extends Command {
     routes: Flags.boolean({
       description: "Generate routes for all pages.",
       env: "SHOPIFY_HYDROGEN_FLAG_ROUTES",
-      hidden: true
+      hidden: true,
+      allowNo: true
     }),
     git: Flags.boolean({
       description: "Init Git and create initial commits.",
@@ -52,10 +53,13 @@ class Init extends Command {
     })
   };
   async run() {
-    const { flags } = await this.parse(Init);
-    if (flags.markets && !I18N_CHOICES.includes(flags.markets)) {
+    const {
+      flags: { markets, ..._flags }
+    } = await this.parse(Init);
+    const flags = { ..._flags, i18n: markets };
+    if (flags.i18n && !I18N_CHOICES.includes(flags.i18n)) {
       throw new AbortError(
-        `Invalid URL structure strategy: ${flags.markets}. Must be one of ${I18N_CHOICES.join(", ")}`
+        `Invalid URL structure strategy: ${flags.i18n}. Must be one of ${I18N_CHOICES.join(", ")}`
       );
     }
     if (flags.styling && !STYLING_CHOICES.includes(flags.styling)) {
@@ -77,7 +81,7 @@ async function runInit(options = parseProcessFlags(process.argv, FLAG_MAP)) {
     "cli"
   );
   if (showUpgrade) {
-    const packageManager = await packageManagerUsedForCreating();
+    const packageManager = packageManagerFromUserAgent();
     showUpgrade(
       packageManager === "unknown" ? "" : `Please use the latest version with \`${packageManager} create @shopify/hydrogen@latest\``
     );

package/dist/commands/hydrogen/init.test.js

@@ -46,7 +46,7 @@ vi.mock(
     return {
       ...original,
       getPackageManager: () => Promise.resolve("npm"),
-      packageManagerUsedForCreating: () => Promise.resolve("npm"),
+      packageManagerFromUserAgent: () => "npm",
       installNodeModules: vi.fn(async ({ directory }) => {
         renderTasksHook.mockImplementationOnce(async () => {
           await writeFile(`${directory}/package-lock.json`, "{}");
@@ -519,6 +519,21 @@ describe("init", () => {
           );
           expect(mb).toBeGreaterThan(0);
           expect(mb).toBeLessThan(1);
+          expect(output).toMatch("Complete analysis: file://");
+          const clientAnalysisPath = "dist/worker/client-bundle-analyzer.html";
+          const workerAnalysisPath = "dist/worker/worker-bundle-analyzer.html";
+          expect(
+            fileExists(joinPath(tmpDir, clientAnalysisPath))
+          ).resolves.toBeTruthy();
+          expect(
+            fileExists(joinPath(tmpDir, workerAnalysisPath))
+          ).resolves.toBeTruthy();
+          expect(await readFile(joinPath(tmpDir, clientAnalysisPath))).toMatch(
+            /globalThis\.METAFILE = '.+';/g
+          );
+          expect(await readFile(joinPath(tmpDir, workerAnalysisPath))).toMatch(
+            /globalThis\.METAFILE = '.+';/g
+          );
         });
       });
     });

package/dist/commands/hydrogen/preview.js

@@ -1,34 +1,50 @@
 import Command from '@shopify/cli-kit/node/base-command';
 import { muteDevLogs } from '../../lib/log.js';
 import { getProjectPaths } from '../../lib/remix-config.js';
-import { commonFlags, DEFAULT_PORT } from '../../lib/flags.js';
-import { startMiniOxygen } from '../../lib/mini-oxygen.js';
+import { commonFlags, flagsToCamelObject, DEFAULT_PORT } from '../../lib/flags.js';
+import { startMiniOxygen } from '../../lib/mini-oxygen/index.js';
+import { getAllEnvironmentVariables } from '../../lib/environment-variables.js';
+import { getConfig } from '../../lib/shopify-config.js';
 
 class Preview extends Command {
   static description = "Runs a Hydrogen storefront in an Oxygen worker for production.";
   static flags = {
     path: commonFlags.path,
-    port: commonFlags.port
+    port: commonFlags.port,
+    ["worker-unstable"]: commonFlags.workerRuntime,
+    ["env-branch"]: commonFlags.envBranch
   };
   async run() {
     const { flags } = await this.parse(Preview);
-    await runPreview({ ...flags });
+    await runPreview({
+      ...flagsToCamelObject(flags),
+      workerRuntime: flags["worker-unstable"]
+    });
   }
 }
 async function runPreview({
   port = DEFAULT_PORT,
-  path: appPath
+  path: appPath,
+  workerRuntime = false,
+  envBranch
 }) {
   if (!process.env.NODE_ENV)
     process.env.NODE_ENV = "production";
   muteDevLogs({ workerReload: false });
   const { root, buildPathWorkerFile, buildPathClient } = getProjectPaths(appPath);
-  const miniOxygen = await startMiniOxygen({
-    root,
-    port,
-    buildPathClient,
-    buildPathWorkerFile
-  });
+  const { shop, storefront } = await getConfig(root);
+  const fetchRemote = !!shop && !!storefront?.id;
+  const env = await getAllEnvironmentVariables({ root, fetchRemote, envBranch });
+  const miniOxygen = await startMiniOxygen(
+    {
+      root,
+      port,
+      buildPathClient,
+      buildPathWorkerFile,
+      env
+    },
+    workerRuntime
+  );
   miniOxygen.showBanner({ mode: "preview" });
 }