@shopify/cli-hydrogen 7.0.1 → 7.1.1

package/dist/commands/hydrogen/build-vite.js

@@ -0,0 +1,131 @@
+import Command from '@shopify/cli-kit/node/base-command';
+import { outputWarn } from '@shopify/cli-kit/node/output';
+import { removeFile, fileSize } from '@shopify/cli-kit/node/fs';
+import { resolvePath, joinPath } from '@shopify/cli-kit/node/path';
+import { getPackageManager } from '@shopify/cli-kit/node/node-package-manager';
+import { commonFlags, flagsToCamelObject } from '../../lib/flags.js';
+import { checkLockfileStatus } from '../../lib/check-lockfile.js';
+import { findMissingRoutes } from '../../lib/missing-routes.js';
+import { codegen } from '../../lib/codegen.js';
+import { isCI } from '../../lib/is-ci.js';
+import { prepareDiffDirectory, copyDiffBuild } from '../../lib/template-diff.js';
+import { getViteConfig } from '../../lib/vite-config.js';
+
+const WORKER_BUILD_SIZE_LIMIT = 5;
+class Build extends Command {
+  static description = "Builds a Hydrogen storefront for production.";
+  static flags = {
+    ...commonFlags.path,
+    ...commonFlags.entry,
+    ...commonFlags.sourcemap,
+    ...commonFlags.lockfileCheck,
+    ...commonFlags.disableRouteWarning,
+    ...commonFlags.codegen,
+    ...commonFlags.diff
+  };
+  async run() {
+    const { flags } = await this.parse(Build);
+    const originalDirectory = flags.path ? resolvePath(flags.path) : process.cwd();
+    let directory = originalDirectory;
+    if (flags.diff) {
+      directory = await prepareDiffDirectory(originalDirectory, false);
+    }
+    await runViteBuild({
+      ...flagsToCamelObject(flags),
+      useCodegen: flags.codegen,
+      directory
+    });
+    if (flags.diff) {
+      await copyDiffBuild(directory, originalDirectory);
+    }
+  }
+}
+async function runViteBuild({
+  entry: ssrEntry,
+  directory,
+  useCodegen = false,
+  codegenConfigPath,
+  sourcemap = false,
+  disableRouteWarning = false,
+  lockfileCheck = true,
+  assetPath = "/"
+}) {
+  if (!process.env.NODE_ENV) {
+    process.env.NODE_ENV = "production";
+  }
+  const root = directory ?? process.cwd();
+  if (lockfileCheck) {
+    await checkLockfileStatus(root, isCI());
+  }
+  const {
+    userViteConfig,
+    remixConfig,
+    clientOutDir,
+    serverOutDir,
+    serverOutFile
+  } = await getViteConfig(root);
+  const serverMinify = userViteConfig.build?.minify ?? true;
+  const commonConfig = {
+    root,
+    mode: process.env.NODE_ENV,
+    base: assetPath
+  };
+  const vite = await import('vite');
+  await vite.build({
+    ...commonConfig,
+    build: {
+      emptyOutDir: true,
+      copyPublicDir: true,
+      // Disable client sourcemaps in production
+      sourcemap: process.env.NODE_ENV !== "production" && sourcemap
+    }
+  });
+  console.log("");
+  await vite.build({
+    ...commonConfig,
+    build: {
+      sourcemap,
+      ssr: ssrEntry ?? true,
+      emptyOutDir: false,
+      copyPublicDir: false,
+      minify: serverMinify
+    }
+  });
+  await Promise.all([
+    removeFile(joinPath(clientOutDir, ".vite")),
+    removeFile(joinPath(serverOutDir, ".vite")),
+    removeFile(joinPath(serverOutDir, "assets"))
+  ]);
+  if (useCodegen) {
+    await codegen({
+      rootDirectory: root,
+      appDirectory: remixConfig.appDirectory,
+      configFilePath: codegenConfigPath
+    });
+  }
+  if (process.env.NODE_ENV !== "development") {
+    const sizeMB = await fileSize(serverOutFile) / (1024 * 1024);
+    if (sizeMB >= WORKER_BUILD_SIZE_LIMIT) {
+      outputWarn(
+        `\u{1F6A8} Smaller worker bundles are faster to deploy and run.${serverMinify ? "" : "\n   Minify your bundle by adding `build.minify: true` to vite.config.js."}
+   Learn more about optimizing your worker bundle file: https://h2o.fyi/debugging/bundle-size
+`
+      );
+    }
+  }
+  if (!disableRouteWarning) {
+    const missingRoutes = findMissingRoutes(remixConfig);
+    if (missingRoutes.length) {
+      const packageManager = await getPackageManager(root);
+      const exec = packageManager === "npm" ? "npx" : packageManager;
+      outputWarn(
+        `Heads up: Shopify stores have a number of standard routes that aren\u2019t set up yet.
+Some functionality and backlinks might not work as expected until these are created or redirects are set up.
+This build is missing ${missingRoutes.length} route${missingRoutes.length > 1 ? "s" : ""}. For more details, run \`${exec} shopify hydrogen check routes\`.
+`
+      );
+    }
+  }
+}
+
+export { Build as default, runViteBuild };

package/dist/commands/hydrogen/build.js

@@ -20,31 +20,17 @@ const WORKER_BUILD_SIZE_LIMIT = 5;
 class Build extends Command {
   static description = "Builds a Hydrogen storefront for production.";
   static flags = {
-    path: commonFlags.path,
-    sourcemap: Flags.boolean({
-      description: "Generate sourcemaps for the build.",
-      env: "SHOPIFY_HYDROGEN_FLAG_SOURCEMAP",
-      allowNo: true,
-      default: true
-    }),
+    ...commonFlags.path,
+    ...commonFlags.sourcemap,
     "bundle-stats": Flags.boolean({
-      description: "Show a bundle size summary after building.",
+      description: "Show a bundle size summary after building. Defaults to true, use `--no-bundle-stats` to disable.",
       default: true,
       allowNo: true
     }),
-    "lockfile-check": Flags.boolean({
-      description: "Checks that there is exactly 1 valid lockfile in the project.",
-      env: "SHOPIFY_HYDROGEN_FLAG_LOCKFILE_CHECK",
-      default: true,
-      allowNo: true
-    }),
-    "disable-route-warning": Flags.boolean({
-      description: "Disable warning about missing standard routes.",
-      env: "SHOPIFY_HYDROGEN_FLAG_DISABLE_ROUTE_WARNING"
-    }),
-    codegen: commonFlags.codegen,
-    "codegen-config-path": commonFlags.codegenConfigPath,
-    diff: commonFlags.diff
+    ...commonFlags.lockfileCheck,
+    ...commonFlags.disableRouteWarning,
+    ...commonFlags.codegen,
+    ...commonFlags.diff
   };
   async run() {
     const { flags } = await this.parse(Build);

package/dist/commands/hydrogen/check.js

@@ -8,7 +8,7 @@ import { Args } from '@oclif/core';
 class GenerateRoute extends Command {
   static description = "Returns diagnostic information about a Hydrogen storefront.";
   static flags = {
-    path: commonFlags.path
+    ...commonFlags.path
   };
   static args = {
     resource: Args.string({

package/dist/commands/hydrogen/codegen.js

@@ -10,12 +10,12 @@ import { codegen } from '../../lib/codegen.js';
 class Codegen extends Command {
   static description = "Generate types for the Storefront API queries found in your project.";
   static flags = {
-    path: commonFlags.path,
-    ["codegen-config-path"]: Flags.string({
+    ...commonFlags.path,
+    "codegen-config-path": Flags.string({
       description: "Specify a path to a codegen configuration file. Defaults to `<root>/codegen.ts` if it exists.",
       required: false
     }),
-    ["force-sfapi-version"]: Flags.string({
+    "force-sfapi-version": Flags.string({
       description: "Force generating Storefront API types for a specific version instead of using the one provided in Hydrogen. A token can also be provided with this format: `<version>:<token>`.",
       hidden: true
     }),

package/dist/commands/hydrogen/debug/cpu.js

@@ -14,7 +14,7 @@ const DEFAULT_OUTPUT_PATH = "startup.cpuprofile";
 class DebugCpu extends Command {
   static description = "Builds and profiles the server startup time the app.";
   static flags = {
-    path: commonFlags.path,
+    ...commonFlags.path,
     output: Flags.string({
       description: `Specify a path to generate the profile file. Defaults to "${DEFAULT_OUTPUT_PATH}".`,
       default: DEFAULT_OUTPUT_PATH,

package/dist/commands/hydrogen/deploy.js

@@ -2,17 +2,22 @@ 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 { readAndParseDotEnv } from '@shopify/cli-kit/node/dot-env';
 import { AbortError } from '@shopify/cli-kit/node/error';
 import { writeFile } from '@shopify/cli-kit/node/fs';
 import { ensureIsClean, getLatestGitCommit, GitDirectoryNotCleanError } from '@shopify/cli-kit/node/git';
-import { resolvePath } from '@shopify/cli-kit/node/path';
-import { renderFatalError, renderWarning, renderSelectPrompt, renderSuccess, renderTasks } from '@shopify/cli-kit/node/ui';
+import { resolvePath, relativePath } from '@shopify/cli-kit/node/path';
+import { renderWarning, renderSelectPrompt, renderSuccess, renderTasks } from '@shopify/cli-kit/node/ui';
 import { ciPlatform } from '@shopify/cli-kit/node/context/local';
 import { parseToken, createDeploy } from '@shopify/oxygen-cli/deploy';
 import { commonFlags, flagsToCamelObject } from '../../lib/flags.js';
 import { getOxygenDeploymentData } from '../../lib/get-oxygen-deployment-data.js';
 import { runBuild } from './build.js';
+import { runViteBuild } from './build-vite.js';
+import { getViteConfig } from '../../lib/vite-config.js';
+import { prepareDiffDirectory } from '../../lib/template-diff.js';
 
+const DEPLOY_OUTPUT_FILE_HANDLE = "h2_deploy_log.json";
 const deploymentLogger = (message, level = "info") => {
   if (level === "error" || level === "warn") {
     outputWarn(message);
@@ -25,6 +30,10 @@ class Deploy extends Command {
       description: "Environment branch (tag) for environment to deploy to.",
       required: false
     }),
+    "env-file": Flags.string({
+      description: "Path to an environment file to override existing environment variables for the deployment.",
+      required: false
+    }),
     preview: Flags.boolean({
       description: "Deploys to the Preview environment. Overrides --env-branch and Git metadata.",
       required: false,
@@ -37,17 +46,28 @@ class Deploy extends Command {
       env: "SHOPIFY_HYDROGEN_FLAG_FORCE",
       required: false
     }),
+    "no-verify": Flags.boolean({
+      description: "Skip the routability verification step after deployment.",
+      default: false,
+      required: false
+    }),
     "auth-bypass-token": Flags.boolean({
       description: "Generate an authentication bypass token, which can be used to perform end-to-end tests against the deployment.",
       required: false,
       default: false
     }),
-    path: commonFlags.path,
-    shop: commonFlags.shop,
-    "no-json-output": Flags.boolean({
-      description: "Prevents the command from creating a JSON file containing the deployment URL in CI environments.",
+    "build-command": Flags.string({
+      description: "Specify a build command to run before deploying. If not specified, `shopify hydrogen build` will be used.",
+      required: false
+    }),
+    ...commonFlags.lockfileCheck,
+    ...commonFlags.path,
+    ...commonFlags.shop,
+    "json-output": Flags.boolean({
+      allowNo: true,
+      description: "Create a JSON file containing the deployment details in CI environments. Defaults to true, use `--no-json-output` to disable.",
       required: false,
-      default: false
+      default: true
     }),
     token: Flags.string({
       char: "t",
@@ -74,17 +94,20 @@ class Deploy extends Command {
       required: false,
       env: "SHOPIFY_HYDROGEN_FLAG_METADATA_VERSION",
       hidden: true
-    })
+    }),
+    ...commonFlags.diff
   };
   async run() {
     const { flags } = await this.parse(Deploy);
     const deploymentOptions = this.flagsToOxygenDeploymentOptions(flags);
-    await oxygenDeploy(deploymentOptions).catch((error) => {
-      renderFatalError(error);
-      process.exit(1);
-    }).finally(() => {
-      process.exit(0);
-    });
+    if (flags.diff) {
+      deploymentOptions.path = await prepareDiffDirectory(
+        deploymentOptions.path,
+        false
+      );
+    }
+    await runDeploy(deploymentOptions);
+    process.exit(0);
   }
   flagsToOxygenDeploymentOptions(flags) {
     const camelFlags = flagsToCamelObject(flags);
@@ -92,6 +115,7 @@ class Deploy extends Command {
       ...camelFlags,
       defaultEnvironment: flags.preview,
       environmentTag: flags["env-branch"],
+      environmentFile: flags["env-file"],
       path: flags.path ? resolvePath(flags.path) : process.cwd()
     };
   }
@@ -99,10 +123,10 @@ class Deploy extends Command {
 function createUnexpectedAbortError(message) {
   return new AbortError(
     message || "The deployment failed due to an unexpected error.",
-    "Retrying the deployement may succeed.",
+    "Retrying the deployment may succeed.",
     [
       [
-        "If the issue persits, please check the",
+        "If the issue persists, please check the",
         {
           link: {
             label: "Shopify status page",
@@ -114,14 +138,18 @@ function createUnexpectedAbortError(message) {
     ]
   );
 }
-async function oxygenDeploy(options) {
+async function runDeploy(options) {
   const {
     authBypassToken: generateAuthBypassToken,
+    buildCommand,
     defaultEnvironment,
     environmentTag,
+    environmentFile,
     force: forceOnUncommitedChanges,
-    noJsonOutput,
-    path,
+    noVerify,
+    lockfileCheck,
+    jsonOutput,
+    path: root,
     shop,
     metadataUrl,
     metadataUser,
@@ -130,7 +158,7 @@ async function oxygenDeploy(options) {
   let { metadataDescription } = options;
   let isCleanGit = true;
   try {
-    await ensureIsClean(path);
+    await ensureIsClean(root);
   } catch (error) {
     if (error instanceof GitDirectoryNotCleanError) {
       isCleanGit = false;
@@ -153,7 +181,7 @@ async function oxygenDeploy(options) {
   let deploymentEnvironmentTag = void 0;
   let gitCommit;
   try {
-    gitCommit = await getLatestGitCommit(path);
+    gitCommit = await getLatestGitCommit(root);
     branch = (/HEAD -> ([^,]*)/.exec(gitCommit.refs) || [])[1];
     commitHash = gitCommit.hash;
   } catch (error) {
@@ -173,9 +201,20 @@ async function oxygenDeploy(options) {
     });
     metadataDescription = `${commitHash} with additional changes`;
   }
+  let overriddenEnvironmentVariables;
+  if (environmentFile) {
+    const { variables } = await readAndParseDotEnv(environmentFile);
+    overriddenEnvironmentVariables = Object.entries(variables).map(
+      ([key, value]) => ({
+        isSecret: true,
+        key,
+        value
+      })
+    );
+  }
   if (!isCI) {
     deploymentData = await getOxygenDeploymentData({
-      root: path,
+      root,
       flagShop: shop
     });
     if (!deploymentData) {
@@ -229,8 +268,15 @@ async function oxygenDeploy(options) {
     deploymentEnvironmentTag = void 0;
     isPreview = true;
   }
+  let assetsDir = "dist/client";
+  let workerDir = "dist/worker";
+  const maybeVite = await getViteConfig(root).catch(() => null);
+  if (maybeVite) {
+    assetsDir = relativePath(root, maybeVite.clientOutDir);
+    workerDir = relativePath(root, maybeVite.serverOutDir);
+  }
   const config = {
-    assetsDir: "dist/client",
+    assetsDir,
     bugsnag: true,
     deploymentUrl,
     defaultEnvironment: defaultEnvironment || isPreview,
@@ -244,11 +290,12 @@ async function oxygenDeploy(options) {
       ...metadataUser ? { user: metadataUser } : {},
       ...metadataVersion ? { version: metadataVersion } : {}
     },
-    skipVerification: false,
-    rootPath: path,
+    skipVerification: noVerify,
+    rootPath: root,
     skipBuild: false,
     workerOnly: false,
-    workerDir: "dist/worker"
+    workerDir,
+    overriddenEnvironmentVariables
   };
   let resolveUpload;
   const uploadPromise = new Promise((resolve) => {
@@ -272,17 +319,6 @@ async function oxygenDeploy(options) {
     rejectDeploy = reject;
   });
   const hooks = {
-    buildFunction: async (assetPath) => {
-      outputInfo(
-        outputContent`${colors.whiteBright("Building project...")}`.value
-      );
-      await runBuild({
-        directory: path,
-        assetPath,
-        sourcemap: true,
-        useCodegen: false
-      });
-    },
     onDeploymentCompleted: () => resolveDeploymentCompletedVerification(),
     onVerificationComplete: () => resolveRoutableCheck(),
     onDeploymentCompletedVerificationError() {
@@ -309,6 +345,23 @@ async function oxygenDeploy(options) {
       );
     }
   };
+  if (buildCommand) {
+    config.buildCommand = buildCommand;
+  } else {
+    hooks.buildFunction = async (assetPath) => {
+      outputInfo(
+        outputContent`${colors.whiteBright("Building project...")}`.value
+      );
+      const build = maybeVite ? runViteBuild : runBuild;
+      await build({
+        directory: root,
+        assetPath,
+        lockfileCheck,
+        sourcemap: true,
+        useCodegen: false
+      });
+    };
+  }
   const uploadStart = async () => {
     outputInfo(
       outputContent`${colors.whiteBright("Deploying to Oxygen..\n")}`.value
@@ -324,7 +377,8 @@ async function oxygenDeploy(options) {
       },
       {
         title: "Verifying deployment is routable",
-        task: async () => await routableCheckPromise
+        task: async () => await routableCheckPromise,
+        skip: () => noVerify
       }
     ]);
   };
@@ -333,27 +387,35 @@ async function oxygenDeploy(options) {
       rejectDeploy(createUnexpectedAbortError());
       return;
     }
-    const nextSteps = [
-      [
+    const nextSteps = [];
+    if (isCI) {
+      if (jsonOutput) {
+        nextSteps.push([
+          "View the deployment information in",
+          { subdued: DEPLOY_OUTPUT_FILE_HANDLE }
+        ]);
+      }
+    } else {
+      nextSteps.push([
         "Open",
         { link: { url: completedDeployment.url } },
-        `in your browser to view your deployment.`
-      ]
-    ];
-    if (completedDeployment?.authBypassToken) {
-      nextSteps.push([
-        "Use the",
-        { subdued: completedDeployment.authBypassToken },
-        "token to perform end-to-end tests against the deployment."
+        "in your browser to view your deployment."
       ]);
+      if (completedDeployment?.authBypassToken) {
+        nextSteps.push([
+          "Use the",
+          { subdued: completedDeployment.authBypassToken },
+          "token to perform end-to-end tests against the deployment."
+        ]);
+      }
     }
     renderSuccess({
       body: ["Successfully deployed to Oxygen"],
       nextSteps
     });
-    if (isCI && !noJsonOutput) {
+    if (isCI && jsonOutput) {
       await writeFile(
-        "h2_deploy_log.json",
+        DEPLOY_OUTPUT_FILE_HANDLE,
         JSON.stringify(completedDeployment)
       );
     }
@@ -364,4 +426,4 @@ async function oxygenDeploy(options) {
   return deployPromise;
 }
 
-export { Deploy as default, deploymentLogger, oxygenDeploy };
+export { Deploy as default, deploymentLogger, runDeploy };