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-mfeif not already present) - Module Federation name (
MF_NAME): convert to camelCase and appendMFE—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.jsonwebpack.config.jssrc/mount.tsxsrc/index.tsxsrc/App.tsxtsconfig.jsonpublic/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 startWait for webpack to compile. The dev server should start on the configured port.
Step 4: Verify
- Open
http://localhost:<PORT>/remoteEntry.jsin 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