datahub-mfe-create-app

name	datahub-mfe-create-app
description	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.

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