datahub-mfe-configure-app

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Configure an MFE in DataHub

在DataHub中配置MFE

Walks through registering a Micro Frontend app with the DataHub frontend so it loads at

/mfe/<path>

and optionally appears in the navigation sidebar. Covers local development, production/k8s deployment, and troubleshooting.

本文将介绍如何向DataHub前端注册微前端（MFE）应用，使其在

/mfe/<path>

路径下加载，并可选择显示在导航侧边栏中。内容涵盖本地开发、生产/K8s部署以及问题排查。

Step 1: Gather Information

步骤1：收集信息

Use the AskQuestion tool to collect the following in a single call.

Question	ID	Options
Are you configuring for local development or production/k8s?	`env_target`	`Local development` / `Production / Kubernetes`
MFE app name — the `name` field inside `new ModuleFederationPlugin({ name: '...' })` in the MFE's `webpack.config.js` . Must match exactly.	`mf_name`	`testAppMFE` / `N/A - I'll fill it in later`
URL path where the MFE should be accessible, e.g. `/dashboard` (must start with `/` )	`mfe_path`	`/test_page` / `N/A - I'll fill it in later`
`remoteEntry.js` URL, e.g. `http://localhost:3002/remoteEntry.js`	`remote_entry_url`	`http://localhost:3002/remoteEntry.js` / `N/A - I'll fill it in later`
Display label for navigation, e.g. `Team Dashboard`	`display_label`	`Test Dashboard` / `N/A - I'll fill it in later`
Should the MFE appear in the left nav sidebar?	`show_in_nav`	`Yes` / `No`
Nav icon	`nav_icon`	`ChartBar` / `Trophy` / `Gear` / `HandWaving` / `Lightning` / `MagnifyingGlass` / `Database` / `Users` / `Shield` / `Bell` / `Flag` / `Star` / `Heart` / `Cube` / `Table` / `Code` / `Globe` / `Rocket`

env_target

is Local development, ask one follow-up question using AskQuestion before proceeding:

Question	ID	Options
How are you running DataHub locally?	`local_mode`	`Docker / datahub-dev.sh (standard)` / `Play server directly (sbt / IntelliJ)`

For the

N/A - I'll fill it in later

fields (

mf_name

mfe_path

remote_entry_url

display_label

), do NOT invent or suggest values from the workspace. The user will type their own.

Finding the MFE app name: Open the MFE's
webpack.config.js
and look for the
ModuleFederationPlugin
block. The
name
property is what goes here:
js
new ModuleFederationPlugin({ name: 'teamDashboardMFE', ... })
//                                   ^^^^^^^^^^^^^^^^^  ← this value
If the name in the YAML config doesn't match this exactly, the MFE will fail to load. If you used the
datahub-mfe-create-app
skill, the name was printed in the summary as "Module Federation name".

使用AskQuestion工具一次性收集以下信息。

问题	ID	选项
你是为本地开发还是生产/K8s环境进行配置？	`env_target`	`Local development` / `Production / Kubernetes`
MFE应用名称 —— MFE的 `webpack.config.js` 中 `new ModuleFederationPlugin({ name: '...' })` 里的 `name` 字段。必须完全匹配。	`mf_name`	`testAppMFE` / `N/A - I'll fill it in later`
MFE可访问的URL路径，例如 `/dashboard` （必须以 `/` 开头）	`mfe_path`	`/test_page` / `N/A - I'll fill it in later`
`remoteEntry.js` 的URL，例如 `http://localhost:3002/remoteEntry.js`	`remote_entry_url`	`http://localhost:3002/remoteEntry.js` / `N/A - I'll fill it in later`
导航显示标签，例如 `Team Dashboard`	`display_label`	`Test Dashboard` / `N/A - I'll fill it in later`
是否要在左侧导航侧边栏显示该MFE？	`show_in_nav`	`Yes` / `No`
导航图标	`nav_icon`	`ChartBar` / `Trophy` / `Gear` / `HandWaving` / `Lightning` / `MagnifyingGlass` / `Database` / `Users` / `Shield` / `Bell` / `Flag` / `Star` / `Heart` / `Cube` / `Table` / `Code` / `Globe` / `Rocket`

如果

env_target

为Local development，在继续前使用AskQuestion询问一个后续问题：

问题	ID	选项
你在本地如何运行DataHub？	`local_mode`	`Docker / datahub-dev.sh (standard)` / `Play server directly (sbt / IntelliJ)`

对于标记为

N/A - I'll fill it in later

的字段（

mf_name

、

mfe_path

、

remote_entry_url

、

display_label

），请勿从工作区中生成或建议值，用户将自行输入。

查找MFE应用名称：打开MFE的
webpack.config.js
，找到
ModuleFederationPlugin
代码块。
name
属性即为所需值：
js
new ModuleFederationPlugin({ name: 'teamDashboardMFE', ... })
//                                   ^^^^^^^^^^^^^^^^^  ← 这个值
如果YAML配置中的名称与该值不完全匹配，MFE将加载失败。如果你使用了
datahub-mfe-create-app
技能，该名称会在摘要中以“Module Federation name”的形式显示。

Step 2: Generate the YAML Config Entry

步骤2：生成YAML配置条目

Build the config entry from the gathered values:

yaml

  - id: __MFE_ID__
    label: __DISPLAY_LABEL__
    path: __MFE_PATH__
    remoteEntry: __REMOTE_ENTRY_URL__
    module: __MF_NAME__/mount
    flags:
      enabled: true
      showInNav: __SHOW_IN_NAV__
    navIcon: __NAV_ICON__

Where

__MFE_ID__

is derived from the path (strip leading

, replace

with

), e.g. path

/dashboard

becomes id

dashboard

根据收集到的值构建配置条目：

yaml

  - id: __MFE_ID__
    label: __DISPLAY_LABEL__
    path: __MFE_PATH__
    remoteEntry: __REMOTE_ENTRY_URL__
    module: __MF_NAME__/mount
    flags:
      enabled: true
      showInNav: __SHOW_IN_NAV__
    navIcon: __NAV_ICON__

其中

__MFE_ID__

由路径派生（去除开头的

，将

替换为

），例如路径

/dashboard

会变为id

dashboard

。

Step 3: Apply the Configuration

步骤3：应用配置

Local Development — Docker /

datahub-dev.sh

(standard)

本地开发 —— Docker /

datahub-dev.sh

（标准方式）

The Docker image has

MFE_CONFIG_FILE_PATH

baked in at build time pointing to

/datahub-frontend/conf/mfe.config.dev.yaml

(set in

docker/datahub-frontend/Dockerfile

). This is the file to edit for any Docker-based workflow.

Read the current

datahub-frontend/conf/mfe.config.dev.yaml

Append the new entry under
```
microFrontends:
```
. If the file is empty, use:

yaml

subNavigationMode: false
microFrontends:
  - id: ...
    ...

Rebuild the frontend container so the updated file is baked into the image:

bash

scripts/dev/datahub-dev.sh rebuild --wait

Docker镜像在构建时内置了

MFE_CONFIG_FILE_PATH

，指向

/datahub-frontend/conf/mfe.config.dev.yaml

（在

docker/datahub-frontend/Dockerfile

中设置）。任何基于Docker的工作流都需要编辑此文件。

读取当前的

datahub-frontend/conf/mfe.config.dev.yaml

文件。

在
```
microFrontends:
```
下追加新条目。如果文件为空，请使用：

yaml

subNavigationMode: false
microFrontends:
  - id: ...
    ...

重新构建前端容器，使更新后的文件被打包到镜像中：

bash

scripts/dev/datahub-dev.sh rebuild --wait

Local Development — Play server directly (sbt / IntelliJ)

本地开发 —— 直接运行Play服务器（sbt / IntelliJ）

datahub-frontend/run/frontend.env

points

MFE_CONFIG_FILE_PATH

../conf/mfe.config.local.yaml

. Edit that file instead.

Read the current

datahub-frontend/conf/mfe.config.local.yaml

Append the new entry under
```
microFrontends:
```
.
Restart the Play server — no rebuild needed, the file is read from disk:

bash

cd datahub-frontend/run && ./run-local-frontend

datahub-frontend/run/frontend.env

将

MFE_CONFIG_FILE_PATH

指向

../conf/mfe.config.local.yaml

。请改为编辑该文件。

读取当前的

datahub-frontend/conf/mfe.config.local.yaml

文件。

在
```
microFrontends:
```
下追加新条目。
重启Play服务器 —— 无需重新构建，文件将从磁盘读取：

bash

cd datahub-frontend/run && ./run-local-frontend

Production / Kubernetes

生产 / Kubernetes

Tell the user:

Since you selected Production / Kubernetes, I won't edit any local config files — instead here's what you need.

Show the user the complete YAML config to add to their production config file (which may live in a separate config repo).
Explain the env var and volume mount setup. See reference.md for the full k8s ConfigMap pattern.
Remind the user about
```
MFE_PUBLIC_PATH
```
:

When deploying your MFE to a CDN or static host, set the
MFE_PUBLIC_PATH
env var during the MFE's production build so webpack knows the correct public URL for chunk loading.
bash
MFE_PUBLIC_PATH=https://cdn.example.com/my-mfe/ npm run build

告知用户：

由于你选择了Production / Kubernetes，我不会编辑任何本地配置文件 —— 以下是你需要执行的操作。

向用户展示需要添加到生产配置文件中的完整YAML配置（该文件可能存放在单独的配置仓库中）。
解释环境变量和卷挂载设置。有关完整的K8s ConfigMap模式，请参阅reference.md。
提醒用户注意
```
MFE_PUBLIC_PATH
```
：

将MFE部署到CDN或静态主机时，在MFE的生产构建过程中设置
MFE_PUBLIC_PATH
环境变量，以便webpack知道块加载的正确公共URL。
bash
MFE_PUBLIC_PATH=https://cdn.example.com/my-mfe/ npm run build

Step 4: Verify

步骤4：验证

Guide the user through these checks:

Standalone check: Open
```
__REMOTE_ENTRY_URL__
```
in a browser — should return JavaScript content (not 404 or HTML).
Integration check: Navigate to
```
http://localhost:9002/mfe__MFE_PATH__
```
(local) or the equivalent production URL. The MFE should render inside the DataHub chrome.
Nav check (if
```
showInNav: true
```
): The sidebar should show the
```
__DISPLAY_LABEL__
```
item with the chosen icon. Click it to navigate.

If any check fails, see the Troubleshooting section in reference.md.

引导用户完成以下检查：

独立检查：在浏览器中打开
```
__REMOTE_ENTRY_URL__
```
—— 应返回JavaScript内容（而非404或HTML）。
集成检查：导航到
```
http://localhost:9002/mfe__MFE_PATH__
```
（本地环境）或对应的生产URL。MFE应在DataHub的框架内渲染。
导航检查（如果
```
showInNav: true
```
）：侧边栏应显示带有所选图标的
```
__DISPLAY_LABEL__
```
项。点击该项进行导航。

如果任何检查失败，请参阅reference.md中的故障排除部分。

Step 5: Summary

步骤5：总结

Provide the user with a summary. Show only the config file relevant to their

env_target

— do not mention local config files if they selected Production.

If local development:

MFE registered in DataHub:
  Path:            /mfe__MFE_PATH__
  Remote entry:    __REMOTE_ENTRY_URL__
  Module:          __MF_NAME__/mount
  Nav sidebar:     __SHOW_IN_NAV__ (icon: __NAV_ICON__)
  Config file:     datahub-frontend/conf/mfe.config.dev.yaml    (Docker / datahub-dev.sh)
                   datahub-frontend/conf/mfe.config.local.yaml  (Play server / IntelliJ)

If Production / Kubernetes:

MFE registered in DataHub:
  Path:            /mfe__MFE_PATH__
  Remote entry:    __REMOTE_ENTRY_URL__
  Module:          __MF_NAME__/mount
  Nav sidebar:     __SHOW_IN_NAV__ (icon: __NAV_ICON__)
  Config file:     <your production config file>

为用户提供总结。仅显示与他们的

env_target

相关的配置文件 —— 如果用户选择了生产环境，请勿提及本地配置文件。

如果是本地开发：

已在DataHub中注册MFE：
  路径:            /mfe__MFE_PATH__
  远程入口:    __REMOTE_ENTRY_URL__
  模块:          __MF_NAME__/mount
  导航侧边栏:     __SHOW_IN_NAV__ (图标: __NAV_ICON__)
  配置文件:     datahub-frontend/conf/mfe.config.dev.yaml    (Docker / datahub-dev.sh)
                   datahub-frontend/conf/mfe.config.local.yaml  (Play server / IntelliJ)

如果是Production / Kubernetes：

已在DataHub中注册MFE：
  路径:            /mfe__MFE_PATH__
  远程入口:    __REMOTE_ENTRY_URL__
  模块:          __MF_NAME__/mount
  导航侧边栏:     __SHOW_IN_NAV__ (图标: __NAV_ICON__)
  配置文件:     <你的生产配置文件>

datahub-mfe-configure-app

Original

Translation

Configure an MFE in DataHub

在DataHub中配置MFE

Step 1: Gather Information

步骤1：收集信息

Step 2: Generate the YAML Config Entry

步骤2：生成YAML配置条目

Step 3: Apply the Configuration

步骤3：应用配置

Local Development — Docker /
`datahub-dev.sh`
(standard)

本地开发 —— Docker /
`datahub-dev.sh`
（标准方式）

Local Development — Play server directly (sbt / IntelliJ)

本地开发 —— 直接运行Play服务器（sbt / IntelliJ）

Production / Kubernetes

生产 / Kubernetes

Step 4: Verify

步骤4：验证

Step 5: Summary

步骤5：总结

datahub-mfe-configure-app

Original

Translation

Configure an MFE in DataHub

在DataHub中配置MFE

Step 1: Gather Information

步骤1：收集信息

Step 2: Generate the YAML Config Entry

步骤2：生成YAML配置条目

Step 3: Apply the Configuration

步骤3：应用配置

Local Development — Docker / datahub-dev.sh (standard)

本地开发 —— Docker / datahub-dev.sh（标准方式）

Local Development — Play server directly (sbt / IntelliJ)

本地开发 —— 直接运行Play服务器（sbt / IntelliJ）

Production / Kubernetes

生产 / Kubernetes

Step 4: Verify

步骤4：验证

Step 5: Summary

步骤5：总结

Local Development — Docker /
`datahub-dev.sh`
(standard)

本地开发 —— Docker /
`datahub-dev.sh`
（标准方式）