设置本地环境
本指南介绍如何设置本地环境以使用 PWA Kit 进行开发。
我们建议使用基于 Unix 的操作系统进行 PWA Kit 开发，例如：
- 安装适用于 Linux 的 Windows 子系统的 Windows 10
- macOS 10.13 或更高版本
- Ubuntu Linux 18.x 或更高版本
Windows 用户：请参阅 Microsoft 对 Node 开发人员的官方建议。
您必须安装 Managed Runtime 支持的特定版本的 Node 和 Node Package Manager (NPM)（节点包管理器）。
转到 Node 18.x 下载页面，为您的机器下载正确的安装程序。
Windows 用户：下载与您的处理器对应的 .msi 文件。例如，如果您有 64 位 Intel 处理器，则选择 x64 安装程序。
Mac 用户：下载 .pkg 文件。
Apple silicon 用户：如果您尚未安装 Rosetta，请运行 softwareupdate --install-rosetta。
Linux 用户：下载与您的处理器对应的 -linux 文件。例如，如果您有 64 位 Intel 处理器，则应选择首选存档格式的 linux-x64 安装程序。
现在您已经下载了适当的 Node 安装程序，请打开它并完成设置说明。
当安装程序提示时，接受默认选项以同时安装 Node.js runtime、安装 Node Package Manager 并将 Node.js runtime 添加到您的路径。
在继续之前，请检查是否安装了正确版本的 Node 和 NPM：
- 打开终端。
- 运行
node -v。 - 确保它返回
v18.16.1（或最新18.x版本）。 - 运行
npm -v。 - 确保它返回
9.5.1（或 Node18.x包含的最新版本）。
如果您安装了不同版本的 NPM，可以像这样手动安装版本 9.5.1：
- 打开终端。
- 运行
npm install -g npm@9.5.1。 - 再次运行
npm -v。 - 确保它返回
9.5.1。
如果您想在 Windows 上管理多个版本的 Node，我们推荐 Node Version Switcher（Node 版本切换器）或 Volta。我们不推荐 Corey Butler 的 Node Version Manager (NVM) for Windows，因为我们在测试期间遇到了问题。
对于 Mac 和 Linux 用户，我们建议安装 Node Version Manager。
每个 PWA Kit 网店都必须在 Runtime Admin 中创建一个项目来管理部署。
在使用 Managed Runtime 和 Runtime Admin 之前必须启用它们，并且您必须请求访问它们。要为您的组织启用 Managed Runtime 和 Runtime Admin，请联系您的 Salesforce 帐户团队。要获得访问权限，请让您的 Commerce Cloud 管理员使用 Account Manager 将以下角色之一添加到您的帐户：Managed Runtime User（托管运行时用户）或 Managed Runtime Admin（托管运行时管理员）。
如果您或团队中有人还未创建项目，以下是在 Runtime Admin 中创建项目的方法：
- 登录 Runtime Admin。
- 点击新建项目。
- 输入项目的名称。
- 点击创建项目。
记下项目 ID，因为您需要它来生成用于开发的项目文件。
首次创建项目时，在部署必要的云基础架构之前，网站无法在 Web 上访问。此部署过程最多可能需要 40 分钟。
要详细了解您可以在 Runtime Admin 中执行的操作，请参阅我们的 Managed Runtime Administration 指南。
大多数 PWA Kit 开发人员首先复制包含先前生成的一组项目文件的存储库。（要了解如何生成新项目，请跳到下一节。）
复制项目存储库后，您必须安装包依赖项：
- 打开终端。
- 切换到项目目录。
- 运行
npm ci
如果您已有现成的 PWA Kit 项目并且已经完成了上一节的说明，可以跳到下一节。否则，您必须生成一个项目。
要生成项目，请打开终端并运行以下命令。将 ~/PLACEHOLDER-PROJECT-ID 替换为包含来自 Runtime Admin 的项目 ID 的路径：
在 npx 命令中，您可以将 @latest 替换为特定版本的 Retail React App，例如 @v3.0.0 或 @v2.7.3。如果您不指定版本，由于缓存旧版本，您可能会得到意想不到的结果。
当提示您选择项目预设时，请从以下选项之一中进行选择：
retail-react-app-demo：使用 Retail React App 网店模板并将演示 Sandbox 用于后端。无需进一步配置。retail-react-app：使用 Retail React App 网店模板，并使用您自己的 B2C Commerce 实例作为后端。您必须提供配置值。
使用 retail-react-app 预设时，生成器脚本会要求您提供几个配置值。这些配置值会将您的新 PWA Kit 项目与 Runtime Admin 工具中的相应项目和 B2C Commerce 实例相关联。
下表提供有关每个项目配置值及其查找位置的更多信息。B2C Commerce API 文档中也更详细地介绍了配置值。请参阅基本 URL 和请求构成。
| 配置值 | 更多信息 |
|---|---|
| Managed Runtime Admin 中的项目 ID | Managed Runtime Administration介绍如何创建项目和查找现有项目的项目 ID。
|
| 您的 B2C Commerce 实例的 URL | 需要新的 B2C Commerce 实例进行开发或测试？请参阅创建 On-Demand Sandbox。
|
| Commerce API 客户端 ID | 此标识符不再能在 Account Manager 中找到。请参阅为 API 访问生成客户端 ID。
|
| Commerce API 专用客户端模式 | 这将在应用程序是使用公共身份验证流程还是私有身份验证流程来将购物者登录之间切换。有关更多信息，请参阅购物者登录文档和使用 SLAS 专用客户端。
|
| Business Manager 中的站点 ID | 用于标识特定电子商务站点的字符串。要在 Business Manager 中获取可用站点及其关联站点 ID 的列表，请转至管理 > 站点 > 管理站点。
|
| Business Manager 字符串中的 Commerce API 组织 ID | 用于根据域和实例识别您的组织以进行 API 访问。要在 Business Manager 中查找组织 ID，请转至管理 > 站点开发 > Salesforce Commerce API 设置。
|
| Business Manager 中的 Commerce API 短代码 | 为路由目的分配给域的 8 个字符的字符串。短代码适用于所有实例的整个域环境。（所有 On-Demand Sandbox 的短代码是 kv7kzm78）。要在 Business Manager 中查找您的短代码，请转至管理 > 站点开发 > Salesforce Commerce API 设置。
|
| Einstein Configurator 中的 API 客户端 ID | 请参阅适用于 Commerce Cloud 开发人员的 Einstein API 文档并直接访问 Einstein Configurator。 |
生成项目后，我们建议您将生成的项目文件提交到存储库并与您的网店开发人员共享存储库。
您也可以在生成项目_后_编辑项目的配置值。有关更多信息，请参阅配置文件。
不要忘记只要这些值发生变化就要更新，例如当您的自定义项目文件以使用不同的 B2C Commerce 实例时。
要启动 Web 服务器以进行本地开发，请从项目目录运行以下命令：
现在开发服务器正在运行，您可以打开浏览器并预览您的网店：
您可以随时使用键盘快捷键 Control+C 停止开发服务器。
要预览服务器端呈现的页面，请将 ?__server_only 查询字符串附加到您要预览的 URL。例如，您可以通过访问 URL www.example.com?__server_only 来测试服务器端呈现版本的 www.example.com。
-
复制现有项目并运行
npm ci或生成新项目后，可能需要几分钟才能在终端中看到任何活动，因此在完成之前不要取消该过程。此外，防病毒软件（尤其是在 Windows 上）可能会导致安装时间比平时长得多。 -
如果您从
authorize端点收到 HTTP 401 错误响应，则说明 Shopper Login and API Access Service (SLAS) 存在配置问题。要更正您的 SLAS 配置，请参阅设置 API 访问中的说明。