Configure an MFE in DataHub
Walks through registering a Micro Frontend app with the DataHub frontend so it loads at /mfe/<path> and optionally appears in the navigation sidebar. Covers local development, production/k8s deployment, and troubleshooting.
Step 1: Gather Information
Use the AskQuestion tool to collect the following in a single call.
| Question | ID | Options |
|---|---|---|
| Are you configuring for local development or production/k8s? | env_target | Local development / Production / Kubernetes |
MFE app name — the name field inside new ModuleFederationPlugin({name: '...'}) in the MFE's webpack.config.js. Must match exactly. | mf_name | testAppMFE / N/A - I'll fill it in later |
URL path where the MFE should be accessible, e.g. /dashboard (must start with /) | mfe_path | /test_page / N/A - I'll fill it in later |
remoteEntry.js URL, e.g. http://localhost:3002/remoteEntry.js | remote_entry_url | http://localhost:3002/remoteEntry.js / N/A - I'll fill it in later |
Display label for navigation, e.g. Team Dashboard | display_label | Test Dashboard / N/A - I'll fill it in later |
| Should the MFE appear in the left nav sidebar? | show_in_nav | Yes / No |
| Nav icon | nav_icon | ChartBar / Trophy / Gear / HandWaving / Lightning / MagnifyingGlass / Database / Users / Shield / Bell / Flag / Star / Heart / Cube / Table / Code / Globe / Rocket |
If env_target is Local development, ask one follow-up question using AskQuestion before proceeding:
| Question | ID | Options |
|---|---|---|
| How are you running DataHub locally? | local_mode | Docker / datahub-dev.sh (standard) / Play server directly (sbt / IntelliJ) |
For the N/A - I'll fill it in later fields (mf_name, mfe_path, remote_entry_url, display_label), do NOT invent or suggest values from the workspace. The user will type their own.
Finding the MFE app name: Open the MFE'swebpack.config.jsand look for theModuleFederationPluginblock. Thenameproperty is what goes here: ``js new ModuleFederationPlugin({ name: 'teamDashboardMFE', ... }) // ^^^^^^^^^^^^^^^^^ ← this value`If the name in the YAML config doesn't match this exactly, the MFE will fail to load. If you used thedatahub-mfe-create-app` skill, the name was printed in the summary as "Module Federation name".
Step 2: Generate the YAML Config Entry
Build the config entry from the gathered values:
- id: __MFE_ID__
label: __DISPLAY_LABEL__
path: __MFE_PATH__
remoteEntry: __REMOTE_ENTRY_URL__
module: __MF_NAME__/mount
flags:
enabled: true
showInNav: __SHOW_IN_NAV__
navIcon: __NAV_ICON__Where __MFE_ID__ is derived from the path (strip leading /, replace / with -), e.g. path /dashboard becomes id dashboard.
Step 3: Apply the Configuration
Local Development — Docker / datahub-dev.sh (standard)
The Docker image has MFE_CONFIG_FILE_PATH baked in at build time pointing to /datahub-frontend/conf/mfe.config.dev.yaml (set in docker/datahub-frontend/Dockerfile). This is the file to edit for any Docker-based workflow.
- Read the current
datahub-frontend/conf/mfe.config.dev.yaml. - Append the new entry under
microFrontends:. If the file is empty, use:
subNavigationMode: false
microFrontends:
- id: ...
...- Rebuild the frontend container so the updated file is baked into the image:
scripts/dev/datahub-dev.sh rebuild --waitLocal Development — Play server directly (sbt / IntelliJ)
datahub-frontend/run/frontend.env points MFE_CONFIG_FILE_PATH to ../conf/mfe.config.local.yaml. Edit that file instead.
- Read the current
datahub-frontend/conf/mfe.config.local.yaml. - Append the new entry under
microFrontends:. - Restart the Play server — no rebuild needed, the file is read from disk:
cd datahub-frontend/run && ./run-local-frontendProduction / Kubernetes
Tell the user:
Since you selected Production / Kubernetes, I won't edit any local config files — instead here's what you need.
- Show the user the complete YAML config to add to their production config file (which may live in a separate config repo).
- Explain the env var and volume mount setup. See reference.md for the full k8s ConfigMap pattern.
- Remind the user about
MFE_PUBLIC_PATH:
When deploying your MFE to a CDN or static host, set theMFE_PUBLIC_PATHenv var during the MFE's production build so webpack knows the correct public URL for chunk loading. ``bash MFE_PUBLIC_PATH=https://cdn.example.com/my-mfe/ npm run build``
Step 4: Verify
Guide the user through these checks:
- Standalone check: Open
__REMOTE_ENTRY_URL__in a browser — should return JavaScript content (not 404 or HTML). - Integration check: Navigate to
http://localhost:9002/mfe__MFE_PATH__(local) or the equivalent production URL. The MFE should render inside the DataHub chrome. - Nav check (if
showInNav: true): The sidebar should show the__DISPLAY_LABEL__item with the chosen icon. Click it to navigate.
If any check fails, see the Troubleshooting section in reference.md.
Step 5: Summary
Provide the user with a summary. Show only the config file relevant to their env_target — do not mention local config files if they selected Production.
If local development:
MFE registered in DataHub:
Path: /mfe__MFE_PATH__
Remote entry: __REMOTE_ENTRY_URL__
Module: __MF_NAME__/mount
Nav sidebar: __SHOW_IN_NAV__ (icon: __NAV_ICON__)
Config file: datahub-frontend/conf/mfe.config.dev.yaml (Docker / datahub-dev.sh)
datahub-frontend/conf/mfe.config.local.yaml (Play server / IntelliJ)If Production / Kubernetes:
MFE registered in DataHub:
Path: /mfe__MFE_PATH__
Remote entry: __REMOTE_ENTRY_URL__
Module: __MF_NAME__/mount
Nav sidebar: __SHOW_IN_NAV__ (icon: __NAV_ICON__)
Config file: <your production config file>