datahub-mfe-create-app

Original：🇺🇸 English

Translated

Scaffold a new DataHub Micro Frontend (MFE) app with all boilerplate files. Use when the user wants to create a new micro frontend, MFE, remote app, or Module Federation app for DataHub.

2installs

Sourcedatahub-project/datahub-skills

Added on2026-04-30

NPX Install

npx skill4agent add datahub-project/datahub-skills datahub-mfe-create-app

SKILL.md Content

View Translation Comparison →

Create a DataHub MFE App

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.

Step 1: Gather Information

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.

Deriving names from

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
```

Step 2: Generate Files

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>/`

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.

Files to generate

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

Step 3: Install and Start

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.

Step 4: Verify

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.

Step 5: Next Steps

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