Back to Details

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.
QuestionIDOptions
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
like 
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:
PlaceholderValue
__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>/
If 
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

需生成的文件

  1. package.json
  2. webpack.config.js
  3. src/mount.tsx
  4. src/index.tsx
  5. src/App.tsx
  6. tsconfig.json
  7. public/index.html
  1. package.json
  2. webpack.config.js
  3. src/mount.tsx
  4. src/index.tsx
  5. src/App.tsx
  6. tsconfig.json
  7. 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：验证

  1. Open 
    http://localhost:<PORT>/remoteEntry.js
    in a browser or curl it. It should return JavaScript (not a 404 or HTML error page).
  2. Open 
    http://localhost:<PORT>/
    — the standalone dev page should render.
If either check fails, review the webpack output for errors and fix before proceeding.
  1. 在浏览器中打开
    http://localhost:<PORT>/remoteEntry.js
    或使用curl访问。应返回JavaScript代码（而非404或HTML错误页面）。
  2. 打开
    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