@shopify/cli-hydrogen 4.2.0 → 5.0.0

package/dist/commands/hydrogen/build.js

@@ -1,14 +1,14 @@
 import path from 'path';
+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, copyFile } from '@shopify/cli-kit/node/fs';
+import { getPackageManager } from '@shopify/cli-kit/node/node-package-manager';
+import colors from '@shopify/cli-kit/node/colors';
 import { getProjectPaths, getRemixConfig } from '../../lib/config.js';
 import { commonFlags, deprecated, flagsToCamelObject } from '../../lib/flags.js';
-import Command from '@shopify/cli-kit/node/base-command';
-import { Flags } from '@oclif/core';
 import { checkLockfileStatus } from '../../lib/check-lockfile.js';
 import { findMissingRoutes } from '../../lib/missing-routes.js';
-import { getPackageManager } from '@shopify/cli-kit/node/node-package-manager';
-import { colors } from '../../lib/colors.js';
 
 const LOG_WORKER_BUILT = "\u{1F4E6} Worker built";
 class Build extends Command {
@@ -18,7 +18,8 @@ class Build extends Command {
     sourcemap: Flags.boolean({
       description: "Generate sourcemaps for the build.",
       env: "SHOPIFY_HYDROGEN_FLAG_SOURCEMAP",
-      default: true
+      default: true,
+      allowNo: true
     }),
     ["disable-route-warning"]: Flags.boolean({
       description: "Disable warning about missing standard routes.",

package/dist/commands/hydrogen/check.js

@@ -29,7 +29,7 @@ class GenerateRoute extends Command {
   }
 }
 async function runCheckRoutes({ directory }) {
-  const remixConfig = await getRemixConfig(directory);
+  const remixConfig = await getRemixConfig(directory, true);
   logMissingRoutes(findMissingRoutes(remixConfig));
 }
 

package/dist/commands/hydrogen/codegen-unstable.d.ts

@@ -6,6 +6,7 @@ declare class Codegen extends Command {
     static flags: {
         path: _oclif_core_lib_interfaces_parser_js.OptionFlag<string | undefined, _oclif_core_lib_interfaces_parser_js.CustomOptions>;
         "codegen-config-path": _oclif_core_lib_interfaces_parser_js.OptionFlag<string | undefined, _oclif_core_lib_interfaces_parser_js.CustomOptions>;
+        "force-sfapi-version": _oclif_core_lib_interfaces_parser_js.OptionFlag<string | undefined, _oclif_core_lib_interfaces_parser_js.CustomOptions>;
         watch: _oclif_core_lib_interfaces_parser_js.BooleanFlag<boolean>;
     };
     run(): Promise<void>;

package/dist/commands/hydrogen/codegen-unstable.js

@@ -15,6 +15,10 @@ class Codegen extends Command {
       description: "Specify a path to a codegen configuration file. Defaults to `<root>/codegen.ts` if it exists.",
       required: false
     }),
+    ["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
+    }),
     watch: Flags.boolean({
       description: "Watch the project for changes to update types on file save.",
       required: false,
@@ -33,6 +37,7 @@ class Codegen extends Command {
 async function runCodegen({
   path: appPath,
   codegenConfigPath,
+  forceSfapiVersion,
   watch
 }) {
   const { root } = getProjectPaths(appPath);
@@ -42,6 +47,7 @@ async function runCodegen({
     const generatedFiles = await generateTypes({
       ...remixConfig,
       configFilePath: codegenConfigPath,
+      forceSfapiVersion,
       watch
     });
     if (!watch) {

package/dist/commands/hydrogen/env/list.d.ts

@@ -1,9 +1,8 @@
 import * as _oclif_core_lib_interfaces_parser_js from '@oclif/core/lib/interfaces/parser.js';
 import Command from '@shopify/cli-kit/node/base-command';
 
-declare class List extends Command {
+declare class EnvList extends Command {
     static description: string;
-    static hidden: boolean;
     static flags: {
         path: _oclif_core_lib_interfaces_parser_js.OptionFlag<string | undefined, _oclif_core_lib_interfaces_parser_js.CustomOptions>;
         shop: _oclif_core_lib_interfaces_parser_js.OptionFlag<string | undefined, _oclif_core_lib_interfaces_parser_js.CustomOptions>;
@@ -16,4 +15,4 @@ interface Flags {
 }
 declare function listEnvironments({ path, shop: flagShop }: Flags): Promise<void>;
 
-export { List as default, listEnvironments };
+export { EnvList as default, listEnvironments };

package/dist/commands/hydrogen/env/list.js

@@ -1,24 +1,24 @@
 import Command from '@shopify/cli-kit/node/base-command';
-import { renderConfirmationPrompt, renderTable } from '@shopify/cli-kit/node/ui';
-import { outputContent, outputToken, outputNewline } from '@shopify/cli-kit/node/output';
+import { renderConfirmationPrompt } from '@shopify/cli-kit/node/ui';
+import { pluralize } from '@shopify/cli-kit/common/string';
+import colors from '@shopify/cli-kit/node/colors';
+import { outputContent, outputToken, outputNewline, outputInfo } from '@shopify/cli-kit/node/output';
 import { linkStorefront } from '../link.js';
-import { adminRequest } from '../../../lib/graphql.js';
 import { commonFlags } from '../../../lib/flags.js';
 import { getHydrogenShop } from '../../../lib/shop.js';
 import { getAdminSession } from '../../../lib/admin-session.js';
-import { ListEnvironmentsQuery } from '../../../lib/graphql/admin/list-environments.js';
+import { getStorefrontEnvironments } from '../../../lib/graphql/admin/list-environments.js';
 import { getConfig } from '../../../lib/shopify-config.js';
 import { renderMissingLink, renderMissingStorefront } from '../../../lib/render-errors.js';
 
-class List extends Command {
-  static description = "List the environments on your Hydrogen storefront.";
-  static hidden = true;
+class EnvList extends Command {
+  static description = "List the environments on your linked Hydrogen storefront.";
   static flags = {
     path: commonFlags.path,
     shop: commonFlags.shop
   };
   async run() {
-    const { flags } = await this.parse(List);
+    const { flags } = await this.parse(EnvList);
     await listEnvironments(flags);
   }
 }
@@ -43,54 +43,52 @@ async function listEnvironments({ path, shop: flagShop }) {
   if (!configStorefront) {
     return;
   }
-  const result = await adminRequest(
-    ListEnvironmentsQuery,
+  const { storefront } = await getStorefrontEnvironments(
     adminSession,
-    {
-      id: configStorefront.id
-    }
+    configStorefront.id
   );
-  const hydrogenStorefront = result.hydrogenStorefront;
-  if (!hydrogenStorefront) {
+  if (!storefront) {
     renderMissingStorefront({ adminSession, storefront: configStorefront });
     return;
   }
-  const previewEnvironmentIndex = hydrogenStorefront.environments.findIndex(
+  const previewEnvironmentIndex = storefront.environments.findIndex(
     (env) => env.type === "PREVIEW"
   );
-  const previewEnvironment = hydrogenStorefront.environments.splice(
+  const previewEnvironment = storefront.environments.splice(
     previewEnvironmentIndex,
     1
   );
-  hydrogenStorefront.environments.push(previewEnvironment[0]);
-  const rows = hydrogenStorefront.environments.map(
-    ({ branch, name, url, type }) => {
-      const environmentUrl = type === "PRODUCTION" ? hydrogenStorefront.productionUrl : url;
-      return {
-        name,
-        branch: branch ? branch : "-",
-        url: environmentUrl ? environmentUrl : "-"
-      };
-    }
-  );
+  storefront.environments.push(previewEnvironment[0]);
   outputNewline();
-  renderTable({
-    rows,
-    columns: {
-      name: {
-        header: "Name",
-        color: "whiteBright"
-      },
-      branch: {
-        header: "Branch",
-        color: "yellow"
-      },
-      url: {
-        header: "URL",
-        color: "green"
-      }
+  outputInfo(
+    pluralizedEnvironments({
+      environments: storefront.environments,
+      storefrontTitle: configStorefront.title
+    }).toString()
+  );
+  storefront.environments.forEach(({ name, branch, type, url }) => {
+    outputNewline();
+    const environmentUrl = type === "PRODUCTION" ? storefront.productionUrl : url;
+    outputInfo(
+      outputContent`${colors.whiteBright(name)}${branch ? ` ${colors.dim(`(Branch: ${branch})`)}` : ""}`.value
+    );
+    if (environmentUrl) {
+      outputInfo(
+        outputContent`    ${colors.whiteBright(environmentUrl)}`.value
+      );
     }
   });
 }
+const pluralizedEnvironments = ({
+  environments,
+  storefrontTitle
+}) => {
+  return pluralize(
+    environments,
+    (environments2) => `Showing ${environments2.length} environments for the Hydrogen storefront ${storefrontTitle}`,
+    (_environment) => `Showing 1 environment for the Hydrogen storefront ${storefrontTitle}`,
+    () => `There are no environments for the Hydrogen storefront ${storefrontTitle}`
+  );
+};
 
-export { List as default, listEnvironments };
+export { EnvList as default, listEnvironments };

package/dist/commands/hydrogen/env/list.test.js

@@ -2,14 +2,14 @@ import { vi, describe, beforeEach, afterEach, it, expect } from 'vitest';
 import { mockAndCaptureOutput } from '@shopify/cli-kit/node/testing/output';
 import { inTemporaryDirectory } from '@shopify/cli-kit/node/fs';
 import { renderConfirmationPrompt } from '@shopify/cli-kit/node/ui';
-import { ListEnvironmentsQuery } from '../../../lib/graphql/admin/list-environments.js';
+import { getStorefrontEnvironments } from '../../../lib/graphql/admin/list-environments.js';
 import { getAdminSession } from '../../../lib/admin-session.js';
-import { adminRequest } from '../../../lib/graphql.js';
 import { getConfig } from '../../../lib/shopify-config.js';
 import { renderMissingLink, renderMissingStorefront } from '../../../lib/render-errors.js';
 import { linkStorefront } from '../link.js';
 import { listEnvironments } from './list.js';
 
+const SHOP = "my-shop";
 vi.mock("@shopify/cli-kit/node/ui", async () => {
   const original = await vi.importActual("@shopify/cli-kit/node/ui");
   return {
@@ -21,20 +21,16 @@ vi.mock("../link.js");
 vi.mock("../../../lib/admin-session.js");
 vi.mock("../../../lib/shopify-config.js");
 vi.mock("../../../lib/render-errors.js");
-vi.mock("../../../lib/graphql.js", async () => {
-  const original = await vi.importActual("../../../lib/graphql.js");
-  return {
-    ...original,
-    adminRequest: vi.fn()
-  };
+vi.mock("../../../lib/graphql/admin/list-environments.js", () => {
+  return { getStorefrontEnvironments: vi.fn() };
 });
 vi.mock("../../../lib/shop.js", () => ({
-  getHydrogenShop: () => "my-shop"
+  getHydrogenShop: () => SHOP
 }));
 describe("listEnvironments", () => {
   const ADMIN_SESSION = {
     token: "abc123",
-    storeFqdn: "my-shop"
+    storeFqdn: SHOP
   };
   const PRODUCTION_ENVIRONMENT = {
     id: "gid://shopify/HydrogenStorefrontEnvironment/1",
@@ -68,8 +64,8 @@ describe("listEnvironments", () => {
         title: "Existing Link"
       }
     });
-    vi.mocked(adminRequest).mockResolvedValue({
-      hydrogenStorefront: {
+    vi.mocked(getStorefrontEnvironments).mockResolvedValue({
+      storefront: {
         id: "gid://shopify/HydrogenStorefront/1",
         productionUrl: "https://example.com",
         environments: [
@@ -87,12 +83,9 @@ describe("listEnvironments", () => {
   it("makes a GraphQL call to fetch environment variables", async () => {
     await inTemporaryDirectory(async (tmpDir) => {
       await listEnvironments({ path: tmpDir });
-      expect(adminRequest).toHaveBeenCalledWith(
-        ListEnvironmentsQuery,
+      expect(getStorefrontEnvironments).toHaveBeenCalledWith(
         ADMIN_SESSION,
-        {
-          id: "gid://shopify/HydrogenStorefront/1"
-        }
+        "gid://shopify/HydrogenStorefront/1"
       );
     });
   });
@@ -101,12 +94,13 @@ describe("listEnvironments", () => {
       const output = mockAndCaptureOutput();
       await listEnvironments({ path: tmpDir });
       expect(output.info()).toMatch(
-        /Production\s*main\s*https:\/\/example\.com/
-      );
-      expect(output.info()).toMatch(
-        /Staging\s*staging\s*https:\/\/oxygen-456\.example\.com/
+        /Showing 3 environments for the Hydrogen storefront Existing Link/
       );
-      expect(output.info()).toMatch(/Preview\s*-\s*-/);
+      expect(output.info()).toMatch(/Production \(Branch: main\)/);
+      expect(output.info()).toMatch(/https:\/\/example\.com/);
+      expect(output.info()).toMatch(/Staging \(Branch: staging\)/);
+      expect(output.info()).toMatch(/https:\/\/oxygen-456\.example\.com/);
+      expect(output.info()).toMatch(/Preview/);
     });
   });
   describe("when there is no linked storefront", () => {
@@ -137,8 +131,8 @@ describe("listEnvironments", () => {
   });
   describe("when there is no matching storefront in the shop", () => {
     beforeEach(() => {
-      vi.mocked(adminRequest).mockResolvedValue({
-        hydrogenStorefront: null
+      vi.mocked(getStorefrontEnvironments).mockResolvedValue({
+        storefront: null
       });
     });
     it("calls renderMissingStorefront", async () => {

package/dist/commands/hydrogen/env/pull.d.ts

@@ -1,9 +1,8 @@
 import * as _oclif_core_lib_interfaces_parser_js from '@oclif/core/lib/interfaces/parser.js';
 import Command from '@shopify/cli-kit/node/base-command';
 
-declare class Pull extends Command {
+declare class EnvPull extends Command {
     static description: string;
-    static hidden: boolean;
     static flags: {
         "env-branch": _oclif_core_lib_interfaces_parser_js.OptionFlag<string | undefined, _oclif_core_lib_interfaces_parser_js.CustomOptions>;
         path: _oclif_core_lib_interfaces_parser_js.OptionFlag<string | undefined, _oclif_core_lib_interfaces_parser_js.CustomOptions>;
@@ -20,4 +19,4 @@ interface Flags {
 }
 declare function pullVariables({ envBranch, force, path, shop: flagShop, }: Flags): Promise<void>;
 
-export { Pull as default, pullVariables };
+export { EnvPull as default, pullVariables };

package/dist/commands/hydrogen/env/pull.js

@@ -1,15 +1,17 @@
+import { diffLines } from 'diff';
 import Command from '@shopify/cli-kit/node/base-command';
-import { renderConfirmationPrompt } from '@shopify/cli-kit/node/ui';
-import { outputWarn, outputSuccess } from '@shopify/cli-kit/node/output';
-import { fileExists, writeFile } from '@shopify/cli-kit/node/fs';
+import { renderInfo, renderConfirmationPrompt, renderWarning, renderSuccess } from '@shopify/cli-kit/node/ui';
+import { outputContent, outputToken } from '@shopify/cli-kit/node/output';
+import { fileExists, readFile, writeFile } from '@shopify/cli-kit/node/fs';
 import { resolvePath } from '@shopify/cli-kit/node/path';
+import { patchEnvFile } from '@shopify/cli-kit/node/dot-env';
+import colors from '@shopify/cli-kit/node/colors';
 import { commonFlags, flagsToCamelObject } from '../../../lib/flags.js';
 import { pullRemoteEnvironmentVariables } from '../../../lib/pull-environment-variables.js';
 import { getConfig } from '../../../lib/shopify-config.js';
 
-class Pull extends Command {
+class EnvPull extends Command {
   static description = "Populate your .env with variables from your Hydrogen storefront.";
-  static hidden = true;
   static flags = {
     ["env-branch"]: commonFlags["env-branch"],
     path: commonFlags.path,
@@ -17,7 +19,7 @@ class Pull extends Command {
     force: commonFlags.force
   };
   async run() {
-    const { flags } = await this.parse(Pull);
+    const { flags } = await this.parse(EnvPull);
     await pullVariables({ ...flagsToCamelObject(flags) });
   }
 }
@@ -36,33 +38,50 @@ async function pullVariables({
   if (!environmentVariables.length) {
     return;
   }
+  const fileName = colors.whiteBright(`.env`);
   const dotEnvPath = resolvePath(actualPath, ".env");
+  const fetchedEnv = {};
+  environmentVariables.forEach(({ isSecret, key, value }) => {
+    fetchedEnv[key] = isSecret ? `""` : value;
+  });
   if (await fileExists(dotEnvPath) && !force) {
+    const existingEnv = await readFile(dotEnvPath);
+    const patchedEnv = patchEnvFile(existingEnv, fetchedEnv);
+    if (existingEnv === patchedEnv) {
+      renderInfo({
+        body: `No changes to your ${fileName} file`
+      });
+      return;
+    }
+    const diff = diffLines(existingEnv, patchedEnv);
     const overwrite = await renderConfirmationPrompt({
-      message: "Warning: .env file already exists. Do you want to overwrite it?"
+      confirmationMessage: `Yes, confirm changes`,
+      cancellationMessage: `No, make changes later`,
+      message: outputContent`We'll make the following changes to your .env file:
+
+${outputToken.linesDiff(diff)}
+Continue?`.value
     });
     if (!overwrite) {
       return;
     }
+    await writeFile(dotEnvPath, patchedEnv);
+  } else {
+    const newEnv = patchEnvFile(null, fetchedEnv);
+    await writeFile(dotEnvPath, newEnv);
   }
-  let hasSecretVariables = false;
-  const contents = environmentVariables.map(({ key, value, isSecret }) => {
-    let line = `${key}="${value}"`;
-    if (isSecret) {
-      hasSecretVariables = true;
-      line = `# ${key} is marked as secret and its value is hidden
-` + line;
-    }
-    return line;
-  }).join("\n") + "\n";
+  const hasSecretVariables = environmentVariables.some(
+    ({ isSecret }) => isSecret
+  );
   if (hasSecretVariables) {
     const { storefront: configStorefront } = await getConfig(actualPath);
-    outputWarn(
-      `${configStorefront.title} contains environment variables marked as secret, so their values weren\u2019t pulled.`
-    );
+    renderWarning({
+      body: `${configStorefront.title} contains environment variables marked as secret, so their values weren\u2019t pulled.`
+    });
   }
-  await writeFile(dotEnvPath, contents);
-  outputSuccess("Updated .env");
+  renderSuccess({
+    body: ["Changes have been made to your", { filePath: fileName }, "file"]
+  });
 }
 
-export { Pull as default, pullVariables };
+export { EnvPull as default, pullVariables };

package/dist/commands/hydrogen/env/pull.test.js

@@ -69,7 +69,7 @@ describe("pullVariables", () => {
       expect(await fileExists(filePath)).toBeFalsy();
       await pullVariables({ path: tmpDir });
       expect(await readFile(filePath)).toStrictEqual(
-        'PUBLIC_API_TOKEN="abc123"\n# PRIVATE_API_TOKEN is marked as secret and its value is hidden\nPRIVATE_API_TOKEN=""\n'
+        'PUBLIC_API_TOKEN=abc123\nPRIVATE_API_TOKEN=""'
       );
     });
   });
@@ -77,8 +77,18 @@ describe("pullVariables", () => {
     await inTemporaryDirectory(async (tmpDir) => {
       const outputMock = mockAndCaptureOutput();
       await pullVariables({ path: tmpDir });
-      expect(outputMock.warn()).toStrictEqual(
-        "Existing Link contains environment variables marked as secret, so their values weren\u2019t pulled."
+      expect(outputMock.warn()).toMatch(
+        /Existing Link contains environment variables marked as secret, so their/
+      );
+      expect(outputMock.warn()).toMatch(/values weren’t pulled./);
+    });
+  });
+  it("renders a success message", async () => {
+    await inTemporaryDirectory(async (tmpDir) => {
+      const outputMock = mockAndCaptureOutput();
+      await pullVariables({ path: tmpDir });
+      expect(outputMock.info()).toMatch(
+        /Changes have been made to your \.env file/
       );
     });
   });
@@ -92,8 +102,10 @@ describe("pullVariables", () => {
         await writeFile(filePath, "EXISTING_TOKEN=1");
         await pullVariables({ path: tmpDir });
         expect(renderConfirmationPrompt).toHaveBeenCalledWith({
+          confirmationMessage: `Yes, confirm changes`,
+          cancellationMessage: `No, make changes later`,
           message: expect.stringMatching(
-            /Warning: \.env file already exists\. Do you want to overwrite it\?/
+            /We'll make the following changes to your \.env file:/
           )
         });
       });

package/dist/commands/hydrogen/init.js

@@ -1,4 +1,6 @@
 import Command from '@shopify/cli-kit/node/base-command';
+import { readdir } from 'node:fs/promises';
+import { fileURLToPath } from 'node:url';
 import { packageManagerUsedForCreating, installNodeModules } from '@shopify/cli-kit/node/node-package-manager';
 import { renderFatalError, renderSelectPrompt, renderTextPrompt, renderConfirmationPrompt, renderInfo, renderTasks, renderSuccess } from '@shopify/cli-kit/node/ui';
 import { Flags } from '@oclif/core';
@@ -9,8 +11,7 @@ import { commonFlags, flagsToCamelObject, parseProcessFlags } from '../../lib/fl
 import { transpileProject } from '../../lib/transpile-ts.js';
 import { getLatestTemplates } from '../../lib/template-downloader.js';
 import { checkHydrogenVersion } from '../../lib/check-version.js';
-import { readdir } from 'fs/promises';
-import { fileURLToPath } from 'url';
+import { supressNodeExperimentalWarnings } from '../../lib/process.js';
 
 const STARTER_TEMPLATES = ["hello-world", "demo-store"];
 const FLAG_MAP = { f: "force" };
@@ -167,16 +168,5 @@ async function runInit(options = parseProcessFlags(process.argv, FLAG_MAP)) {
 async function projectExists(projectDir) {
   return await fileExists(projectDir) && await isDirectory(projectDir) && (await readdir(projectDir)).length > 0;
 }
-function supressNodeExperimentalWarnings() {
-  const warningListener = process.listeners("warning")[0];
-  if (warningListener) {
-    process.removeAllListeners("warning");
-    process.prependListener("warning", (warning) => {
-      if (warning.name != "ExperimentalWarning") {
-        warningListener(warning);
-      }
-    });
-  }
-}
 
 export { Init as default, runInit };

package/dist/commands/hydrogen/link.d.ts

@@ -3,7 +3,6 @@ import Command from '@shopify/cli-kit/node/base-command';
 
 declare class Link extends Command {
     static description: string;
-    static hidden: boolean;
     static flags: {
         force: _oclif_core_lib_interfaces_parser_js.BooleanFlag<boolean>;
         path: _oclif_core_lib_interfaces_parser_js.OptionFlag<string | undefined, _oclif_core_lib_interfaces_parser_js.CustomOptions>;

package/dist/commands/hydrogen/link.js

@@ -1,25 +1,20 @@
 import { Flags } from '@oclif/core';
 import Command from '@shopify/cli-kit/node/base-command';
-import { renderConfirmationPrompt, renderWarning, renderSelectPrompt } from '@shopify/cli-kit/node/ui';
-import { outputContent, outputToken, outputSuccess, outputInfo } from '@shopify/cli-kit/node/output';
-import { adminRequest, parseGid } from '../../lib/graphql.js';
+import { renderConfirmationPrompt, renderWarning, renderSelectPrompt, renderSuccess } from '@shopify/cli-kit/node/ui';
 import { commonFlags } from '../../lib/flags.js';
 import { getHydrogenShop } from '../../lib/shop.js';
-import { getAdminSession } from '../../lib/admin-session.js';
-import { hydrogenStorefrontUrl } from '../../lib/admin-urls.js';
-import { LinkStorefrontQuery } from '../../lib/graphql/admin/link-storefront.js';
+import { getStorefronts } from '../../lib/graphql/admin/link-storefront.js';
 import { getConfig, setStorefront } from '../../lib/shopify-config.js';
 import { logMissingStorefronts } from '../../lib/missing-storefronts.js';
+import { getCliCommand } from '../../lib/shell.js';
 
 class Link extends Command {
   static description = "Link a local project to one of your shop's Hydrogen storefronts.";
-  static hidden = true;
   static flags = {
     force: commonFlags.force,
     path: commonFlags.path,
     shop: commonFlags.shop,
     storefront: Flags.string({
-      char: "h",
       description: `The name of a Hydrogen Storefront (e.g. "Jane's Apparel")`,
       env: "SHOPIFY_HYDROGEN_STOREFRONT"
     })
@@ -46,56 +41,59 @@ async function linkStorefront({
       return;
     }
   }
-  const adminSession = await getAdminSession(shop);
-  const result = await adminRequest(
-    LinkStorefrontQuery,
-    adminSession
-  );
-  if (!result.hydrogenStorefronts.length) {
+  const { storefronts, adminSession } = await getStorefronts(shop);
+  if (storefronts.length === 0) {
     logMissingStorefronts(adminSession);
     return;
   }
   let selectedStorefront;
+  const cliCommand = await getCliCommand();
   if (flagStorefront) {
-    selectedStorefront = result.hydrogenStorefronts.find(
-      (storefront) => storefront.title === flagStorefront
+    selectedStorefront = storefronts.find(
+      ({ title }) => title === flagStorefront
     );
     if (!selectedStorefront) {
       renderWarning({
         headline: `Couldn't find ${flagStorefront}`,
-        body: outputContent`There's no storefront matching ${flagStorefront} on your ${shop} shop. To see all available Hydrogen storefronts, run ${outputToken.genericShellCommand(
-          `npx shopify hydrogen list`
-        )}`.value
+        body: [
+          "There's no storefront matching",
+          { userInput: flagStorefront },
+          "on your",
+          { userInput: shop },
+          "shop. To see all available Hydrogen storefronts, run",
+          {
+            command: `${cliCommand} list`
+          }
+        ]
       });
       return;
     }
   } else {
-    const choices = result.hydrogenStorefronts.map((storefront) => ({
-      label: `${storefront.title} ${storefront.productionUrl}${storefront.id === configStorefront?.id ? " (Current)" : ""}`,
-      value: storefront.id
+    const choices = storefronts.map(({ id, title, productionUrl }) => ({
+      value: id,
+      label: `${title} (${productionUrl})`
     }));
     const storefrontId = await renderSelectPrompt({
-      message: "Choose a Hydrogen storefront to link this project to:",
-      choices,
-      defaultValue: "true"
+      message: "Choose a Hydrogen storefront to link",
+      choices
     });
-    selectedStorefront = result.hydrogenStorefronts.find(
-      (storefront) => storefront.id === storefrontId
-    );
+    selectedStorefront = storefronts.find(({ id }) => id === storefrontId);
   }
   if (!selectedStorefront) {
     return;
   }
   await setStorefront(path ?? process.cwd(), selectedStorefront);
-  outputSuccess(`Linked to ${selectedStorefront.title}`);
   if (!silent) {
-    outputInfo(
-      `Admin URL: ${hydrogenStorefrontUrl(
-        adminSession,
-        parseGid(selectedStorefront.id)
-      )}`
-    );
-    outputInfo(`Site URL: ${selectedStorefront.productionUrl}`);
+    renderSuccess({
+      body: [{ userInput: selectedStorefront.title }, "is now linked"],
+      nextSteps: [
+        [
+          "Run",
+          { command: `${cliCommand} dev` },
+          "to start your local development server and start building"
+        ]
+      ]
+    });
   }
 }