datahub-project/datahub-mfe-create-app

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

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

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

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.

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