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.

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

datahub-mfe-create-app