datahub-mfe-create-app

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Create a DataHub MFE App

创建DataHub MFE应用

Scaffolds a complete, working Micro Frontend app that integrates with DataHub via Webpack Module Federation. Generates all 7 required files and guides the user through building and verifying.

生成一个可直接运行、完整的微前端应用，该应用通过Webpack Module Federation与DataHub集成。生成全部7个所需文件，并引导用户完成构建与验证流程。

Step 1: Gather Information

步骤1：收集信息

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

Question	ID	Options
App name (kebab-case, e.g. `team-dashboard` )	`app_name`	`test-app` / `N/A - I'll fill it in later`
Brief description of what the app does	`app_desc`	`test-description` / `N/A - I'll fill it in later`
Dev server port	`port`	`3002` / `3003` / `3004` / `3005` / `3006`
Does the app need to call the DataHub GraphQL API?	`needs_graphql`	`Yes` / `No`

For

app_name

and

app_desc

, present only the

N/A - I'll fill it in later

option — do NOT suggest values from the workspace. The user will type their own.

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

问题	ID	选项
应用名称（短横线命名法，例如 `team-dashboard` ）	`app_name`	`test-app` / `N/A - 我稍后填写`
应用功能简要描述	`app_desc`	`test-description` / `N/A - 我稍后填写`
开发服务器端口	`port`	`3002` / `3003` / `3004` / `3005` / `3006`
应用是否需要调用DataHub GraphQL API？	`needs_graphql`	`是` / `否`

对于

app_name

和

app_desc

，仅提供

N/A - 我稍后填写

选项——请勿从工作区中建议取值，用户将自行输入。

Deriving names from

app_name

从

app_name

衍生名称

Given an

app_name

team-dashboard

Directory:
```
team-dashboard-mfe/
```
(append
```
-mfe
```
if not already present)
Module Federation name (
```
MF_NAME
```
): convert to camelCase and append
```
MFE
```
—
```
teamDashboardMFE
```
Package name: same as directory name, e.g.
```
team-dashboard-mfe
```
Display label: title-case the words, e.g.
```
Team Dashboard
```

假设

app_name

为

team-dashboard

：

目录：
```
team-dashboard-mfe/
```
（如果末尾没有
```
-mfe
```
则添加）
Module Federation名称（
```
MF_NAME
```
）：转换为驼峰命名并追加
```
MFE
```
——
```
teamDashboardMFE
```
包名称：与目录名称相同，例如
```
team-dashboard-mfe
```
显示标签：每个单词首字母大写，例如
```
Team Dashboard
```

Step 2: Generate Files

步骤2：生成文件

Create the directory at the workspace root (sibling to

datahub-web-react/

). Generate all 7 files using the templates in templates.md.

Apply these substitutions to every template:

Placeholder	Value
`__APP_DIR__`	Directory name
`__PACKAGE_NAME__`	Package name
`__APP_DESCRIPTION__`	User's description
`__PORT__`	Dev server port
`__MF_NAME__`	Module Federation name (camelCase + MFE)
`__DISPLAY_LABEL__`	Title-cased label
`__PUBLIC_PATH_DEV__`	`http://localhost:<PORT>/`

needs_graphql

is Yes, include the GraphQL proxy block in

webpack.config.js

(marked with

{{GRAPHQL_PROXY}}

in the template). If No, omit it entirely.

在工作区根目录（与

datahub-web-react/

同级）创建目录。使用templates.md中的模板生成全部7个文件。

对所有模板进行以下替换：

占位符	取值
`__APP_DIR__`	目录名称
`__PACKAGE_NAME__`	包名称
`__APP_DESCRIPTION__`	用户提供的描述
`__PORT__`	开发服务器端口
`__MF_NAME__`	Module Federation名称（驼峰命名 + MFE）
`__DISPLAY_LABEL__`	首字母大写的标签
`__PUBLIC_PATH_DEV__`	`http://localhost:<PORT>/`

如果

needs_graphql

为是，则在

webpack.config.js

中包含GraphQL代理块（模板中标记为

{{GRAPHQL_PROXY}}

）。如果为否，则完全省略该块。

Files to generate

需生成的文件

```
package.json
```
```
webpack.config.js
```
```
src/mount.tsx
```
```
src/index.tsx
```
```
src/App.tsx
```
```
tsconfig.json
```
```
public/index.html
```

```
package.json
```
```
webpack.config.js
```
```
src/mount.tsx
```
```
src/index.tsx
```
```
src/App.tsx
```
```
tsconfig.json
```
```
public/index.html
```

Step 3: Install and Start

步骤3：安装与启动

First
cd
into the app directory — webpack must be started from within it, not from the workspace root.

bash

cd __APP_DIR__
npm install
npm start

Wait for webpack to compile. The dev server should start on the configured port.

首先进入应用目录——webpack必须从目录内部启动，而非工作区根目录。

bash

cd __APP_DIR__
npm install
npm start

等待webpack编译完成。开发服务器应在配置的端口启动。

Step 4: Verify

步骤4：验证

Open
```
http://localhost:<PORT>/remoteEntry.js
```
in a browser or curl it. It should return JavaScript (not a 404 or HTML error page).
Open
```
http://localhost:<PORT>/
```
— the standalone dev page should render.

If either check fails, review the webpack output for errors and fix before proceeding.

在浏览器中打开
```
http://localhost:<PORT>/remoteEntry.js
```
或使用curl访问。应返回JavaScript代码（而非404或HTML错误页面）。
打开
```
http://localhost:<PORT>/
```
——独立开发页面应正常渲染。

如果任一检查失败，请查看webpack输出中的错误并修复后再继续。

Step 5: Next Steps

步骤5：后续操作

Tell the user:

Your MFE app is running! To integrate it with DataHub, use the datahub-mfe-configure-app skill — it will walk you through adding this app to the DataHub frontend config so it appears at
/mfe/<path>
and optionally in the nav sidebar.

Provide a summary of what was created:

Created __APP_DIR__/ with 7 files:
  package.json          — dependencies and scripts
  webpack.config.js     — Module Federation + dev server
  src/mount.tsx         — mount() contract for DataHub
  src/index.tsx         — standalone dev entry point
  src/App.tsx           — starter React component
  tsconfig.json         — TypeScript config
  public/index.html     — dev HTML shell

Module Federation name: __MF_NAME__   ← use this as "MFE app name" in datahub-mfe-configure-app
Remote entry URL:       http://localhost:__PORT__/remoteEntry.js
Module path:            __MF_NAME__/mount

告知用户：

你的MFE应用已运行！要将其与DataHub集成，请使用datahub-mfe-configure-app技能——它将引导你将此应用添加到DataHub前端配置中，使其在
/mfe/<path>
路径下显示，并可选择添加到导航侧边栏。

提供已创建内容的摘要：

已创建 __APP_DIR__/ 目录及7个文件：
  package.json          — 依赖项与脚本
  webpack.config.js     — Module Federation + 开发服务器配置
  src/mount.tsx         — 供DataHub调用的mount()契约
  src/index.tsx         — 独立开发入口文件
  src/App.tsx           — 初始React组件
  tsconfig.json         — TypeScript配置
  public/index.html     — 开发用HTML外壳

Module Federation名称: __MF_NAME__   ← 在datahub-mfe-configure-app中用作“MFE应用名称”
远程入口URL:       http://localhost:__PORT__/remoteEntry.js
模块路径:            __MF_NAME__/mount

datahub-mfe-create-app

Original

Translation

Create a DataHub MFE App

创建DataHub MFE应用

Step 1: Gather Information

步骤1：收集信息

Deriving names from
`app_name`

从
`app_name`
衍生名称

Step 2: Generate Files

步骤2：生成文件

Files to generate

需生成的文件

Step 3: Install and Start

步骤3：安装与启动

Step 4: Verify

步骤4：验证

Step 5: Next Steps

步骤5：后续操作

datahub-mfe-create-app

Original

Translation

Create a DataHub MFE App

创建DataHub MFE应用

Step 1: Gather Information

步骤1：收集信息

Deriving names from app_name

从app_name衍生名称

Step 2: Generate Files

步骤2：生成文件

Files to generate

需生成的文件

Step 3: Install and Start

步骤3：安装与启动

Step 4: Verify

步骤4：验证

Step 5: Next Steps

步骤5：后续操作

Deriving names from
`app_name`

从
`app_name`
衍生名称