20.3. 使用 OptaWeb Vehicle Routing 前端模块

流程

1. 在 Fedora 中，输入以下命令设置开发环境：

   sudo dnf install npm

   Copy to Clipboard Toggle word wrap

   有关安装 npm 的更多信息，请参阅下载并安装 Node.js 和 npm。

2. 将目录更改为 rhbop-8.29.0-kogito-and-optaplanner-quickstarts/optaweb-8.29.0.Final-redhat-00009/optaweb-vehicle-routing/optaweb-vehicle-routing-frontend。

3. 安装 npm 依赖项：

   npm install

   Copy to Clipboard Toggle word wrap

   与 Maven 不同，npm 软件包管理器会在项目目录下在 node_modules 中安装依赖项，且仅在执行 npm 安装 时才执行。每当 package.json 中列出的依赖项更改时，例如，当您拉取到 master 分支更改时，您必须在运行开发服务器前执行 npm 安装。

4. 输入以下命令来运行开发服务器：

   npm start

   Copy to Clipboard Toggle word wrap

5. 如果没有自动打开，在 Web 浏览器中打开 http://localhost:3000/。

   默认情况下，npm start 命令尝试在默认浏览器中打开此 URL。

   注意

   如果您不希望 npm start 命令在每次运行时打开新的浏览器标签页，请导出 BROWSER=none 环境变量。您可以使用 .env.local 文件使这个首选项永久化。要做到这一点，请输入以下命令：

   echo BROWSER=none >> .env.local

   Copy to Clipboard Toggle word wrap

   每当在前端源代码中更改时，浏览器都会刷新页面。在终端中运行的开发服务器进程也会选择更改，并将编译和 lint 错误输出到控制台。

6. 输入以下命令来运行测试：

   npm test

   Copy to Clipboard Toggle word wrap

7. 更改 REACT_APP_BACKEND_URL 环境变量的值，以指定在执行 npm start 或 npm run 构建时 由 npm 使用的后端项目的位置，例如：

   REACT_APP_BACKEND_URL=http://10.0.0.123:8081

   Copy to Clipboard Toggle word wrap
   注意

   环境变量在 npm 构建过程中在 JavaScript 捆绑包中硬编码，因此您必须在构建和部署前端前指定后端位置。

   要了解更多有关 React 环境变量的信息，请参阅 添加自定义环境变量。

8. 要构建前端，请输入以下命令之一：

   ./mvnw install

   Copy to Clipboard Toggle word wrap

   mvn install

   Copy to Clipboard Toggle word wrap