新一代平台

设置本地开发实例

您可以通过 DTK 建立本地实例,开发和定制 Sterling Store Engagement 用户界面,以满足您的业务需求。

开发基于 Angular 18 的应用程序的最佳方法是在本地开发时使用 Angular CLI。 在本地开发功能部件后,可以在开发者工具箱或云环境中部署应用程序。

开始之前

确保已设置用户界面中间件。 目前,您必须下载开发 Sterling Store Engagement 所需的中间件。

过程

  1. 下载最新的开发者工具箱。
  2. 浏览 <runtime>/repository/eardata/isf/war/store-frontend-src 并复制 Sterling Store Engagement 源代码。
  3. 将源代码粘贴到临时目录。 例如, <WORKSPACE>/store-frontend-src,称为 <store_temp>package.json 存在于 <store_temp>中。 要管理源代码管理,请使用 <WORKSPACE>/store-frontend-src/extensions
  4. 安装节点模块依赖关系。 转至 <store-temp> 文件夹,然后运行以下命令:
    yarn bootstrap
  5. 运行以下命令将 node_modulesschematics 链接到 angular-cl
     ln -s <store-temp>/store-cli/schematics/node_modules <store-temp>/store-cli/node_modules
    

    在此之前运行命令时,请确保使用绝对路径。

  6. 修改 app-config-overrides.json 文件以选取需要在本地运行的路径 (useRemote:false)。 缺省情况下,所有路由都从远程服务器运行。 要在本地运行所有路由,请设置 serveAllAppsFromLocal:true
    例如,如果希望 app-shell、home、login、navigation-bar 和 backroom-pick 应用程序在本地运行, app-config-overrides.json 文件将如图所示。
    {
        "name": "store-frontend",
        "serveAllAppsFromLocal": false,
        "remoteServerConfig": {
            "hostName": "1.1.1.1",
            "port": 9080,
            "https": true
        },
        "routes": {
            "app-shell": {
                "useRemote": false
              },
              "login": {
                "useRemote": false
              },
              "nav-bar": {
                "useRemote": false
              },
              "home": {
                "useRemote": false
              },
              "backroom-pick": {
                "useRemote": false
              }
        }
    }
  7. 修改 app-config-overrides.json 文件以选取需要在本地运行的路径 (useRemote:false)。 缺省情况下,所有路由都从远程服务器运行。 要在本地运行所有路由,请设置 serveAllAppsFromLocal:true
  8. 测试自定义功能。

下一步

启动所有微前端应用程序后,可通过以下方式访问 Sterling Store Engagement URL : http://localhost:9000/isf/store-frontend/index.html
注意: 在开发过程中,如果您从本地 Sterling Store Engagement 应用程序登录到启用了 Store Inventory Management 的 Sterling Store Engagement 应用程序,建议您在网络安全禁用模式下启动 Google Chrome 浏览器。 这是为了确保您的浏览器不会阻止从本地 Sterling Store Engagement 应用程序向商店库存管理服务器发出的任何跨源 HTTP 请求。
  • 对于 Windows ,请运行以下命令:
    chrome.exe --user-data-dir="C:\tmp" --disable-web-security
  • 对于 Mac ,运行以下命令:
    open /Applications/Google\ Chrome.app --args --disable-web-security --user-data-dir=/tmp