@shopify/cli-hydrogen 7.0.0 → 7.1.0

package/dist/commands/hydrogen/build.js

@@ -22,22 +22,17 @@ class Build extends Command {
   static flags = {
     path: commonFlags.path,
     sourcemap: Flags.boolean({
-      description: "Generate sourcemaps for the build.",
+      description: "Controls whether sourcemaps are generated. Default to true, use `--no-sourcemaps` to disable.",
       env: "SHOPIFY_HYDROGEN_FLAG_SOURCEMAP",
       allowNo: true,
       default: true
     }),
     "bundle-stats": Flags.boolean({
-      description: "Show a bundle size summary after building.",
-      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",
+      description: "Show a bundle size summary after building. Defaults to true, use `--no-bundle-stats` to disable.",
       default: true,
       allowNo: true
     }),
+    "lockfile-check": commonFlags.lockfileCheck,
     "disable-route-warning": Flags.boolean({
       description: "Disable warning about missing standard routes.",
       env: "SHOPIFY_HYDROGEN_FLAG_DISABLE_ROUTE_WARNING"

package/dist/commands/hydrogen/deploy.js

@@ -9,10 +9,12 @@ import { resolvePath } from '@shopify/cli-kit/node/path';
 import { renderFatalError, 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 { loadEnvironmentVariableFile } from '@shopify/oxygen-cli/utils';
 import { commonFlags, flagsToCamelObject } from '../../lib/flags.js';
 import { getOxygenDeploymentData } from '../../lib/get-oxygen-deployment-data.js';
 import { runBuild } from './build.js';
 
+const DEPLOY_OUTPUT_FILE_HANDLE = "h2_deploy_log.json";
 const deploymentLogger = (message, level = "info") => {
   if (level === "error" || level === "warn") {
     outputWarn(message);
@@ -25,6 +27,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 +43,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
     }),
+    "build-command": Flags.string({
+      description: "Specify a build command to run before deploying. If not specified, `shopify hydrogen build` will be used.",
+      required: false
+    }),
+    "lockfile-check": commonFlags.lockfileCheck,
     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.",
+    "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",
@@ -92,6 +109,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 +117,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",
@@ -117,10 +135,14 @@ function createUnexpectedAbortError(message) {
 async function oxygenDeploy(options) {
   const {
     authBypassToken: generateAuthBypassToken,
+    buildCommand,
     defaultEnvironment,
     environmentTag,
+    environmentFile,
     force: forceOnUncommitedChanges,
-    noJsonOutput,
+    noVerify,
+    lockfileCheck,
+    jsonOutput,
     path,
     shop,
     metadataUrl,
@@ -173,6 +195,16 @@ async function oxygenDeploy(options) {
     });
     metadataDescription = `${commitHash} with additional changes`;
   }
+  let overriddenEnvironmentVariables;
+  if (environmentFile) {
+    try {
+      overriddenEnvironmentVariables = loadEnvironmentVariableFile(environmentFile);
+    } catch (error) {
+      throw new AbortError(
+        `Could not load environment file at ${environmentFile}`
+      );
+    }
+  }
   if (!isCI) {
     deploymentData = await getOxygenDeploymentData({
       root: path,
@@ -244,11 +276,12 @@ async function oxygenDeploy(options) {
       ...metadataUser ? { user: metadataUser } : {},
       ...metadataVersion ? { version: metadataVersion } : {}
     },
-    skipVerification: false,
+    skipVerification: noVerify,
     rootPath: path,
     skipBuild: false,
     workerOnly: false,
-    workerDir: "dist/worker"
+    workerDir: "dist/worker",
+    overriddenEnvironmentVariables
   };
   let resolveUpload;
   const uploadPromise = new Promise((resolve) => {
@@ -272,17 +305,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 +331,22 @@ async function oxygenDeploy(options) {
       );
     }
   };
+  if (buildCommand) {
+    config.buildCommand = buildCommand;
+  } else {
+    hooks.buildFunction = async (assetPath) => {
+      outputInfo(
+        outputContent`${colors.whiteBright("Building project...")}`.value
+      );
+      await runBuild({
+        directory: path,
+        assetPath,
+        lockfileCheck,
+        sourcemap: true,
+        useCodegen: false
+      });
+    };
+  }
   const uploadStart = async () => {
     outputInfo(
       outputContent`${colors.whiteBright("Deploying to Oxygen..\n")}`.value
@@ -324,7 +362,8 @@ async function oxygenDeploy(options) {
       },
       {
         title: "Verifying deployment is routable",
-        task: async () => await routableCheckPromise
+        task: async () => await routableCheckPromise,
+        skip: () => noVerify
       }
     ]);
   };
@@ -333,27 +372,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)
       );
     }

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

@@ -8,12 +8,16 @@ import { ensureIsClean, GitDirectoryNotCleanError, getLatestGitCommit } from '@s
 import { oxygenDeploy, deploymentLogger } from './deploy.js';
 import { getOxygenDeploymentData } from '../../lib/get-oxygen-deployment-data.js';
 import { createDeploy, parseToken } from '@shopify/oxygen-cli/deploy';
+import { loadEnvironmentVariableFile } from '@shopify/oxygen-cli/utils';
 import { ciPlatform } from '@shopify/cli-kit/node/context/local';
+import { runBuild } from './build.js';
 
-vi.mock("../../lib/get-oxygen-deployment-data.js");
 vi.mock("@shopify/oxygen-cli/deploy");
+vi.mock("@shopify/oxygen-cli/utils");
 vi.mock("@shopify/cli-kit/node/fs");
 vi.mock("@shopify/cli-kit/node/context/local");
+vi.mock("../../lib/get-oxygen-deployment-data.js");
+vi.mock("./build.js");
 vi.mock("../../lib/auth.js");
 vi.mock("../../lib/shopify-config.js");
 vi.mock("../../lib/graphql/admin/link-storefront.js");
@@ -69,7 +73,9 @@ describe("deploy", () => {
     authBypassToken: true,
     defaultEnvironment: false,
     force: false,
-    noJsonOutput: false,
+    noVerify: true,
+    lockfileCheck: false,
+    jsonOutput: true,
     path: "./",
     shop: "snowdevil.myshopify.com",
     metadataUrl: "https://example.com",
@@ -98,7 +104,7 @@ describe("deploy", () => {
       user: deployParams.metadataUser,
       version: deployParams.metadataVersion
     },
-    skipVerification: false,
+    skipVerification: true,
     rootPath: deployParams.path,
     skipBuild: false,
     workerOnly: false,
@@ -161,6 +167,46 @@ describe("deploy", () => {
     });
     expect(vi.mocked(renderSuccess)).toHaveBeenCalled;
   });
+  it("calls createDeploy with overridden variables in environment file", async () => {
+    const overriddenEnvironmentVariables = [
+      {
+        key: "fake-key",
+        value: "fake-value",
+        isSecret: true
+      }
+    ];
+    vi.mocked(loadEnvironmentVariableFile).mockReturnValue(
+      overriddenEnvironmentVariables
+    );
+    await oxygenDeploy({
+      ...deployParams,
+      environmentFile: "fake-env-file"
+    });
+    expect(vi.mocked(createDeploy)).toHaveBeenCalledWith({
+      config: {
+        ...expectedConfig,
+        overriddenEnvironmentVariables
+      },
+      hooks: expectedHooks,
+      logger: deploymentLogger
+    });
+  });
+  it("errors when supplied environment file does not exist", async () => {
+    vi.mocked(loadEnvironmentVariableFile).mockImplementation(
+      (_path) => {
+        throw new AbortError("File not found");
+      }
+    );
+    try {
+      await oxygenDeploy({
+        ...deployParams,
+        environmentFile: "fake-env-file"
+      });
+      expect(true).toBe(false);
+    } catch (err) {
+      expect(err).toBeInstanceOf(AbortError);
+    }
+  });
   it("errors when there are uncommited changes", async () => {
     vi.mocked(ensureIsClean).mockRejectedValue(
       new GitDirectoryNotCleanError("Uncommitted changes")
@@ -304,6 +350,42 @@ describe("deploy", () => {
       });
     });
   });
+  it("passes the lockfileCheck to the build function when the flag is set", async () => {
+    const params = {
+      ...deployParams,
+      lockfileCheck: false
+    };
+    vi.mocked(createDeploy).mockImplementationOnce((options) => {
+      options.hooks?.buildFunction?.("some-cool-asset-path");
+      return new Promise((resolve, _reject) => {
+        resolve({ url: "https://a-lovely-deployment.com" });
+      });
+    });
+    await oxygenDeploy(params);
+    expect(vi.mocked(runBuild)).toHaveBeenCalledWith({
+      assetPath: "some-cool-asset-path",
+      directory: params.path,
+      lockfileCheck: false,
+      sourcemap: true,
+      useCodegen: false
+    });
+  });
+  it("passes a build command to createDeploy when the build-command flag is used", async () => {
+    const params = {
+      ...deployParams,
+      buildCommand: "hocus pocus"
+    };
+    const { buildFunction: _, ...hooks } = expectedHooks;
+    await oxygenDeploy(params);
+    expect(vi.mocked(createDeploy)).toHaveBeenCalledWith({
+      config: {
+        ...expectedConfig,
+        buildCommand: "hocus pocus"
+      },
+      hooks,
+      logger: deploymentLogger
+    });
+  });
   it("writes a file with JSON content in CI environments", async () => {
     vi.mocked(ciPlatform).mockReturnValue({
       isCI: true,
@@ -325,7 +407,7 @@ describe("deploy", () => {
       })
     );
     vi.mocked(writeFile).mockClear();
-    ciDeployParams.noJsonOutput = true;
+    ciDeployParams.jsonOutput = false;
     await oxygenDeploy(ciDeployParams);
     expect(vi.mocked(writeFile)).not.toHaveBeenCalled();
   });
@@ -401,10 +483,85 @@ describe("deploy", () => {
     } catch (err) {
       if (err instanceof AbortError) {
         expect(err.message).toBe("oh shit");
-        expect(err.tryMessage).toBe("Retrying the deployement may succeed.");
+        expect(err.tryMessage).toBe("Retrying the deployment may succeed.");
       } else {
         expect(true).toBe(false);
       }
     }
   });
+  describe("next steps", () => {
+    it("renders a link to the deployment", async () => {
+      vi.mocked(createDeploy).mockResolvedValue({
+        url: "https://a-lovely-deployment.com"
+      });
+      await oxygenDeploy(deployParams);
+      expect(vi.mocked(renderSuccess)).toHaveBeenCalledWith({
+        body: ["Successfully deployed to Oxygen"],
+        nextSteps: [
+          [
+            "Open",
+            { link: { url: "https://a-lovely-deployment.com" } },
+            "in your browser to view your deployment."
+          ]
+        ]
+      });
+    });
+    it("renders a link to the deployment and shows auth bypass token when one is created", async () => {
+      vi.mocked(createDeploy).mockResolvedValue({
+        url: "https://a-lovely-deployment.com",
+        authBypassToken: "some-token"
+      });
+      await oxygenDeploy(deployParams);
+      expect(vi.mocked(renderSuccess)).toHaveBeenCalledWith({
+        body: ["Successfully deployed to Oxygen"],
+        nextSteps: [
+          [
+            "Open",
+            { link: { url: "https://a-lovely-deployment.com" } },
+            "in your browser to view your deployment."
+          ],
+          [
+            "Use the",
+            { subdued: "some-token" },
+            "token to perform end-to-end tests against the deployment."
+          ]
+        ]
+      });
+    });
+    describe("when in a CI environment", () => {
+      it("renders information about h2_deploy_log.json", async () => {
+        vi.mocked(ciPlatform).mockReturnValue({
+          isCI: true,
+          name: "github",
+          metadata: {}
+        });
+        await oxygenDeploy({ ...deployParams, token: "fake-token" });
+        expect(vi.mocked(renderSuccess)).toHaveBeenCalledWith({
+          body: ["Successfully deployed to Oxygen"],
+          nextSteps: [
+            [
+              "View the deployment information in",
+              { subdued: "h2_deploy_log.json" }
+            ]
+          ]
+        });
+      });
+      it("renders no next steps if jsonOutput is set to false", async () => {
+        vi.mocked(ciPlatform).mockReturnValue({
+          isCI: true,
+          name: "github",
+          metadata: {}
+        });
+        await oxygenDeploy({
+          ...deployParams,
+          token: "fake-token",
+          jsonOutput: false
+        });
+        expect(vi.mocked(renderSuccess)).toHaveBeenCalledWith({
+          body: ["Successfully deployed to Oxygen"],
+          nextSteps: []
+        });
+      });
+    });
+  });
 });

package/dist/commands/hydrogen/generate/route.js

@@ -18,6 +18,10 @@ class GenerateRoute extends Command {
       description: "Generate TypeScript files",
       env: "SHOPIFY_HYDROGEN_FLAG_TYPESCRIPT"
     }),
+    "locale-param": Flags.string({
+      description: "The param name in Remix routes for the i18n locale, if any. Example: `locale` becomes ($locale).",
+      env: "SHOPIFY_HYDROGEN_FLAG_ADAPTER"
+    }),
     force: commonFlags.force,
     path: commonFlags.path
   };
@@ -40,7 +44,8 @@ class GenerateRoute extends Command {
     await runGenerate({
       ...flags,
       directory,
-      routeName
+      routeName,
+      localePrefix: flags["locale-param"]
     });
   }
 }

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

@@ -171,8 +171,8 @@ describe("init", () => {
         const examplePath = templatePath.replace("templates", "examples").replace("skeleton", exampleName);
         const ignore = ["**/node_modules/**", "**/dist/**"];
         const resultFiles = await glob("**/*", { ignore, cwd: tmpDir });
-        const templateFiles = await glob("**/*", { ignore, cwd: templatePath });
         const exampleFiles = await glob("**/*", { ignore, cwd: examplePath });
+        const templateFiles = (await glob("**/*", { ignore, cwd: templatePath })).filter((item) => !item.endsWith("CHANGELOG.md"));
         expect(resultFiles).toEqual(
           expect.arrayContaining([
             .../* @__PURE__ */ new Set([...templateFiles, ...exampleFiles])
@@ -462,6 +462,7 @@ describe("init", () => {
           });
           const resultFiles = await glob("**/*", { cwd: tmpDir });
           expect(resultFiles).toContain("app/routes/($locale)._index.tsx");
+          expect(resultFiles).toContain("app/routes/($locale).tsx");
           const serverFile = await readFile(`${tmpDir}/server.ts`);
           expect(serverFile).toMatch(/i18n: getLocaleFromRequest\(request\),/);
           expect(serverFile).toMatch(/url.pathname/);

package/dist/commands/hydrogen/setup.js

@@ -7,7 +7,7 @@ import { commonFlags, overrideFlag, flagsToCamelObject } from '../../lib/flags.j
 import { renderI18nPrompt, setupI18nStrategy } from '../../lib/setups/i18n/index.js';
 import { getRemixConfig } from '../../lib/remix-config.js';
 import { handleRouteGeneration, generateProjectEntries, handleCliShortcut, renderProjectReady } from '../../lib/onboarding/common.js';
-import { getCliCommand } from '../../lib/shell.js';
+import { getCliCommand, ALIAS_NAME } from '../../lib/shell.js';
 import { getTemplateAppFile } from '../../lib/build.js';
 
 class Setup extends Command {
@@ -89,24 +89,22 @@ async function runSetup(options) {
       () => setupI18nStrategy(i18n, remixConfig)
     );
   }
-  let hasCreatedShortcut = false;
-  const cliCommand = await cliCommandPromise;
-  const needsAlias = cliCommand !== "h2";
-  if (needsAlias) {
-    const { createShortcut, showShortcutBanner } = await handleCliShortcut(
-      controller,
-      await cliCommandPromise,
-      options.shortcut
-    );
-    if (createShortcut) {
-      backgroundWorkPromise = backgroundWorkPromise.then(async () => {
-        hasCreatedShortcut = await createShortcut();
-      });
-      showShortcutBanner();
-    }
-  }
-  if (!i18n && !needsRouteGeneration && !needsAlias)
+  let cliCommand = await Promise.resolve(cliCommandPromise);
+  const { createShortcut, showShortcutBanner } = await handleCliShortcut(
+    controller,
+    cliCommand,
+    options.shortcut
+  );
+  if (!i18n && !needsRouteGeneration && !createShortcut)
     return;
+  if (createShortcut) {
+    backgroundWorkPromise = backgroundWorkPromise.then(async () => {
+      if (await createShortcut()) {
+        cliCommand = ALIAS_NAME;
+      }
+    });
+    showShortcutBanner();
+  }
   await renderTasks(tasks);
   await renderProjectReady(
     {
@@ -115,7 +113,7 @@ async function runSetup(options) {
       directory: remixConfig.rootDirectory
     },
     {
-      hasCreatedShortcut,
+      cliCommand,
       depsInstalled: true,
       packageManager: "npm",
       i18n,

package/dist/generator-templates/starter/CHANGELOG.md

@@ -1,5 +1,50 @@
 # skeleton
 
+## 1.0.4
+
+### Patch Changes
+
+- This is an important fix to a bug with 404 routes and path-based i18n projects where some unknown routes would not properly render a 404. This fixes all new projects, but to fix existing projects, add a `($locale).tsx` route with the following contents: ([#1732](https://github.com/Shopify/hydrogen/pull/1732)) by [@blittle](https://github.com/blittle)
+
+  ```ts
+  import {type LoaderFunctionArgs} from '@remix-run/server-runtime';
+
+  export async function loader({params, context}: LoaderFunctionArgs) {
+    const {language, country} = context.storefront.i18n;
+
+    if (
+      params.locale &&
+      params.locale.toLowerCase() !== `${language}-${country}`.toLowerCase()
+    ) {
+      // If the locale URL param is defined, yet we still are still at the default locale
+      // then the the locale param must be invalid, send to the 404 page
+      throw new Response(null, {status: 404});
+    }
+
+    return null;
+  }
+  ```
+
+- Add defensive null checks to the default cart implementation in the starter template ([#1746](https://github.com/Shopify/hydrogen/pull/1746)) by [@blittle](https://github.com/blittle)
+
+- 🐛 Fix issue where customer login does not persist to checkout ([#1719](https://github.com/Shopify/hydrogen/pull/1719)) by [@michenly](https://github.com/michenly)
+
+  ✨ Add `customerAccount` option to `createCartHandler`. Where a `?logged_in=true` will be added to the checkoutUrl for cart query if a customer is logged in.
+
+- Updated dependencies [[`faeba9f8`](https://github.com/Shopify/hydrogen/commit/faeba9f8947d6b9420b33274a0f39b62418ff2e5), [`6d585026`](https://github.com/Shopify/hydrogen/commit/6d585026623204e99d54a5f2efa3d1c74f690bb6), [`fcecfb23`](https://github.com/Shopify/hydrogen/commit/fcecfb2307210b9d73a7cc90ba865508937217ba), [`28864d6f`](https://github.com/Shopify/hydrogen/commit/28864d6ffbb19b62a5fb8f4c9bbe27568de62411), [`c0ec7714`](https://github.com/Shopify/hydrogen/commit/c0ec77141fb1d7a713d91219b8777bc541780ae8), [`226cf478`](https://github.com/Shopify/hydrogen/commit/226cf478a5bdef1cca33fe8f69832ae0e557d9d9), [`06d9fd91`](https://github.com/Shopify/hydrogen/commit/06d9fd91140bd52a8ee41a20bc114ce2e7fb67dc)]:
+  - @shopify/cli-hydrogen@7.1.0
+  - @shopify/hydrogen@2024.1.2
+
+## 1.0.3
+
+### Patch Changes
+
+- ♻️ `CustomerClient` type is deprecated and replaced by `CustomerAccount` ([#1692](https://github.com/Shopify/hydrogen/pull/1692)) by [@michenly](https://github.com/michenly)
+
+- Updated dependencies [[`02798786`](https://github.com/Shopify/hydrogen/commit/02798786bf8ae5c53f6430723a86d62b8e94d120), [`52b15df4`](https://github.com/Shopify/hydrogen/commit/52b15df457ce723bbc83ad594ded73a7b06447d6), [`a2664362`](https://github.com/Shopify/hydrogen/commit/a2664362a7d89b34835553a9b0eb7af55ca70ae4), [`eee5d927`](https://github.com/Shopify/hydrogen/commit/eee5d9274b72404dfb0ffef30d5503fd553be5fe), [`c7b2017f`](https://github.com/Shopify/hydrogen/commit/c7b2017f11a2cb4d280dfd8f170e65a908b9ea02), [`06320ee4`](https://github.com/Shopify/hydrogen/commit/06320ee48b94dbfece945461031a252f454fd0a3)]:
+  - @shopify/hydrogen@2024.1.1
+  - @shopify/cli-hydrogen@7.0.1
+
 ## 1.0.2
 
 ### Patch Changes

package/dist/generator-templates/starter/README.md

@@ -41,12 +41,18 @@ npm run dev
 
 ## Setup for using Customer Account API (`/account` section)
 
+### Enabled new Customer Account Experience
+
+1. Go to your Shopify admin => Settings => Customer accounts => New customer account
+
 ### Setup public domain using ngrok
 
 1. Setup a [ngrok](https://ngrok.com/) account and add a permanent domain (ie. `https://<your-ngrok-domain>.app`).
 1. Install the [ngrok CLI](https://ngrok.com/download) to use in terminal
 1. Start ngrok using `ngrok http --domain=<your-ngrok-domain>.app 3000`
 
+> [!IMPORTANT]
+> To successfully interact with the Customer Account API routes you will need to use the ngrok domain during development instead of localhost
 ### Include public domain in Customer Account API settings
 
 1. Go to your Shopify admin => `Hydrogen` or `Headless` app/channel => Customer Account API => Application setup
@@ -54,10 +60,27 @@ npm run dev
 1. Edit `Javascript origin(s)` to include your public domain `https://<your-ngrok-domain>.app` or keep it blank
 1. Edit `Logout URI` to include your public domain `https://<your-ngrok-domain>.app` or keep it blank
 
+### Add the ngrok domain to the CSP policy
+
+Modify your `/app/entry.server.tsx` to allow the ngrok domain as a connect-src
+
+```diff
+-  const {nonce, header, NonceProvider} = createContentSecurityPolicy()
++  const {nonce, header, NonceProvider} = createContentSecurityPolicy({
++   connectSrc: [
++     'wss://<your-ngrok-domain>.app:*', // Your ngrok websocket domain
++   ],
++ });
+```
+
 ### Prepare Environment variables
 
 Run [`npx shopify hydrogen link`](https://shopify.dev/docs/custom-storefronts/hydrogen/cli#link) or [`npx shopify hydrogen env pull`](https://shopify.dev/docs/custom-storefronts/hydrogen/cli#env-pull) to link this app to your own test shop.
 
-Alternatly, the values of the required environment varaibles "PUBLIC_CUSTOMER_ACCOUNT_API_CLIENT_ID" and "PUBLIC_CUSTOMER_ACCOUNT_API_URL" can be found in customer account api settings in the Hydrogen admin channel.
+Alternately, the values of the required environment variables "PUBLIC_CUSTOMER_ACCOUNT_API_CLIENT_ID" and "PUBLIC_CUSTOMER_ACCOUNT_API_URL" can be found in customer account api settings in the Hydrogen admin channel.
+
+> [!IMPORTANT]
+> Note that `mock.shop` doesn't supply these variables automatically and your own test shop is required for using Customer Account API
 
-🗒️ Note that mock.shop doesn't supply these variables automatically.
+> [!NOTE]
+> B2B features such as contextual pricing is not available in SF API with Customer Account API login. If you require this feature, we suggest using the [legacy-customer-account-flow](https://github.com/Shopify/hydrogen/tree/main/examples/legacy-customer-account-flow). This feature should be available in the Customer Account API in the 2024-04 release.