datahub-mfe-create-app

Name: datahub-mfe-create-app
Author: datahub-project

91installs28forks

How to install datahub-mfe-create-app?

datahub-project/datahub-skills/datahub-mfe-create-app

$npx -y skills add datahub-project/datahub-skills --skill datahub-mfe-create-app

Installs into the current project.

Summary

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.

Files · 1

View on GitHub

SKILL.md

1	# Create a DataHub MFE App
2
3	Scaffolds a complete, working Micro Frontend app that integrates with DataHub
4	via Webpack Module Federation. Generates all 7 required files and guides the
5	user through building and verifying.
6
7	## Step 1: Gather Information
8
9	Use the AskQuestion tool to collect the following in a single call.
10
11	\| Question \| ID \| Options \|
12	\| -------------------------------------------------- \| --------------- \| -------------------------------------------------- \|
13	\| App name (kebab-case, e.g. `team-dashboard`) \| `app_name` \| `test-app` / `N/A - I'll fill it in later` \|
14	\| Brief description of what the app does \| `app_desc` \| `test-description` / `N/A - I'll fill it in later` \|
15	\| Dev server port \| `port` \| `3002` / `3003` / `3004` / `3005` / `3006` \|
16	\| Does the app need to call the DataHub GraphQL API? \| `needs_graphql` \| `Yes` / `No` \|
17
18	For `app_name` and `app_desc`, present only the `N/A - I'll fill it in later`
19	option — do NOT suggest values from the workspace. The user will type their own.
20
21	### Deriving names from `app_name`
22
23	Given an `app_name` like `team-dashboard`:
24
25	- Directory: `team-dashboard-mfe/` (append `-mfe` if not already present)
26	- Module Federation name (`MF_NAME`): convert to camelCase and append `MFE` — `teamDashboardMFE`
27	- Package name: same as directory name, e.g. `team-dashboard-mfe`
28	- Display label: title-case the words, e.g. `Team Dashboard`
29
30	## Step 2: Generate Files
31
32	Create the directory at the workspace root (sibling to `datahub-web-react/`).
33	Generate all 7 files using the templates in [templates.md](assets/templates.md).
34
35	Apply these substitutions to every template:
36
37	\| Placeholder \| Value \|
38	\| --------------------- \| ---------------------------------------- \|
39	\| `__APP_DIR__` \| Directory name \|
40	\| `__PACKAGE_NAME__` \| Package name \|
41	\| `__APP_DESCRIPTION__` \| User's description \|
42	\| `__PORT__` \| Dev server port \|
43	\| `__MF_NAME__` \| Module Federation name (camelCase + MFE) \|
44	\| `__DISPLAY_LABEL__` \| Title-cased label \|
45	\| `__PUBLIC_PATH_DEV__` \| `http://localhost:<PORT>/` \|
46
47	If `needs_graphql` is Yes, include the GraphQL proxy block in `webpack.config.js`
48	(marked with `{{GRAPHQL_PROXY}}` in the template). If No, omit it entirely.
49
50	### Files to generate
51
52	1. `package.json`
53	2. `webpack.config.js`
54	3. `src/mount.tsx`
55	4. `src/index.tsx`
56	5. `src/App.tsx`
57	6. `tsconfig.json`
58	7. `public/index.html`
59
60	## Step 3: Install and Start
61
62	First `cd` into the app directory — webpack must be started from within it,
63	not from the workspace root.
64
65	```bash
66	cd __APP_DIR__
67	npm install
68	npm start
69	```
70
71	Wait for webpack to compile. The dev server should start on the configured port.
72
73	## Step 4: Verify
74
75	1. Open `http://localhost:<PORT>/remoteEntry.js` in a browser or curl it.
76	It should return JavaScript (not a 404 or HTML error page).
77	2. Open `http://localhost:<PORT>/` — the standalone dev page should render.
78
79	If either check fails, review the webpack output for errors and fix before
80	proceeding.
81
82	## Step 5: Next Steps
83
84	Tell the user:
85
86	> Your MFE app is running! To integrate it with DataHub, use the
87	> datahub-mfe-configure-app skill — it will walk you through adding this app
88	> to the DataHub frontend config so it appears at `/mfe/<path>` and optionally
89	> in the nav sidebar.
90
91	Provide a summary of what was created:
92
93	```
94	Created __APP_DIR__/ with 7 files:
95	package.json — dependencies and scripts
96	webpack.config.js — Module Federation + dev server
97	src/mount.tsx — mount() contract for DataHub
98	src/index.tsx — standalone dev entry point
99	src/App.tsx — starter React component
100	tsconfig.json — TypeScript config
101	public/index.html — dev HTML shell
102
103	Module Federation name: __MF_NAME__ ← use this as "MFE app name" in datahub-mfe-configure-app
104	Remote entry URL: http://localhost:__PORT__/remoteEntry.js
105	Module path: __MF_NAME__/mount
106	```

People who liked this also viewed

6 picks

Type

datahub-mfe-create-app

91installs28forks

View on GitHub

How to install datahub-mfe-create-app?

datahub-project/datahub-skills/datahub-mfe-create-app

$npx -y skills add datahub-project/datahub-skills --skill datahub-mfe-create-app

Installs into the current project.

Summary

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.

Files · 1

View on GitHub

SKILL.md

1	# Create a DataHub MFE App
2
3	Scaffolds a complete, working Micro Frontend app that integrates with DataHub
4	via Webpack Module Federation. Generates all 7 required files and guides the
5	user through building and verifying.
6
7	## Step 1: Gather Information
8
9	Use the AskQuestion tool to collect the following in a single call.
10
11	\| Question \| ID \| Options \|
12	\| -------------------------------------------------- \| --------------- \| -------------------------------------------------- \|
13	\| App name (kebab-case, e.g. `team-dashboard`) \| `app_name` \| `test-app` / `N/A - I'll fill it in later` \|
14	\| Brief description of what the app does \| `app_desc` \| `test-description` / `N/A - I'll fill it in later` \|
15	\| Dev server port \| `port` \| `3002` / `3003` / `3004` / `3005` / `3006` \|
16	\| Does the app need to call the DataHub GraphQL API? \| `needs_graphql` \| `Yes` / `No` \|
17
18	For `app_name` and `app_desc`, present only the `N/A - I'll fill it in later`
19	option — do NOT suggest values from the workspace. The user will type their own.
20
21	### Deriving names from `app_name`
22
23	Given an `app_name` like `team-dashboard`:
24
25	- Directory: `team-dashboard-mfe/` (append `-mfe` if not already present)
26	- Module Federation name (`MF_NAME`): convert to camelCase and append `MFE` — `teamDashboardMFE`
27	- Package name: same as directory name, e.g. `team-dashboard-mfe`
28	- Display label: title-case the words, e.g. `Team Dashboard`
29
30	## Step 2: Generate Files
31
32	Create the directory at the workspace root (sibling to `datahub-web-react/`).
33	Generate all 7 files using the templates in [templates.md](assets/templates.md).
34
35	Apply these substitutions to every template:
36
37	\| Placeholder \| Value \|
38	\| --------------------- \| ---------------------------------------- \|
39	\| `__APP_DIR__` \| Directory name \|
40	\| `__PACKAGE_NAME__` \| Package name \|
41	\| `__APP_DESCRIPTION__` \| User's description \|
42	\| `__PORT__` \| Dev server port \|
43	\| `__MF_NAME__` \| Module Federation name (camelCase + MFE) \|
44	\| `__DISPLAY_LABEL__` \| Title-cased label \|
45	\| `__PUBLIC_PATH_DEV__` \| `http://localhost:<PORT>/` \|
46
47	If `needs_graphql` is Yes, include the GraphQL proxy block in `webpack.config.js`
48	(marked with `{{GRAPHQL_PROXY}}` in the template). If No, omit it entirely.
49
50	### Files to generate
51
52	1. `package.json`
53	2. `webpack.config.js`
54	3. `src/mount.tsx`
55	4. `src/index.tsx`
56	5. `src/App.tsx`
57	6. `tsconfig.json`
58	7. `public/index.html`
59
60	## Step 3: Install and Start
61
62	First `cd` into the app directory — webpack must be started from within it,
63	not from the workspace root.
64
65	```bash
66	cd __APP_DIR__
67	npm install
68	npm start
69	```
70
71	Wait for webpack to compile. The dev server should start on the configured port.
72
73	## Step 4: Verify
74
75	1. Open `http://localhost:<PORT>/remoteEntry.js` in a browser or curl it.
76	It should return JavaScript (not a 404 or HTML error page).
77	2. Open `http://localhost:<PORT>/` — the standalone dev page should render.
78
79	If either check fails, review the webpack output for errors and fix before
80	proceeding.
81
82	## Step 5: Next Steps
83
84	Tell the user:
85
86	> Your MFE app is running! To integrate it with DataHub, use the
87	> datahub-mfe-configure-app skill — it will walk you through adding this app
88	> to the DataHub frontend config so it appears at `/mfe/<path>` and optionally
89	> in the nav sidebar.
90
91	Provide a summary of what was created:
92
93	```
94	Created __APP_DIR__/ with 7 files:
95	package.json — dependencies and scripts
96	webpack.config.js — Module Federation + dev server
97	src/mount.tsx — mount() contract for DataHub
98	src/index.tsx — standalone dev entry point
99	src/App.tsx — starter React component
100	tsconfig.json — TypeScript config
101	public/index.html — dev HTML shell
102
103	Module Federation name: __MF_NAME__ ← use this as "MFE app name" in datahub-mfe-configure-app
104	Remote entry URL: http://localhost:__PORT__/remoteEntry.js
105	Module path: __MF_NAME__/mount
106	```

People who liked this also viewed

6 picks

Type