Micro-Frontends in DataHub

DataHub now supports hosting micro-frontends (MFEs), which can be easily configured via YAML files. Each MFE must expose a remoteEntry.js file using Module Federation.

Note: Exporting your <App/> component is not sufficient.
You must export a mount function that accepts a DOM element and renders your app inside it.
This approach allows DataHub to support MFEs built with any framework (React, Angular, Vue, Svelte, etc.).

Getting Started Locally

To get started, refer to the Module Federation documentation, online tutorials (such as this example), or use your preferred AI tool to write and expose your app's mount() function via a remote entry.

A variety of Module Federation examples are available here.
Most examples include both a "host app" and a "remote app." For DataHub, you only need to implement the "remote app," as DataHub acts as the host.

Edit the Configuration File

Edit mfe.config.local.yaml to resemble the following:

topLevelMenuTitle: My Apps
subNavigationMode: false
microFrontends:
    - id: HelloWorld
      label: HelloWorld DEV
      path: /helloworld-mfe
      remoteEntry: http://localhost:3002/remoteEntry.js
      module: helloWorldMFE/mount
      flags:
          enabled: true
          showInNav: true
      navIcon: HandWaving

To ensure compatibility between the DataHub MFE configuration above and your actual MFE, verify the following:

• The HelloWorld app is running on localhost:3002.
• The HelloWorld Webpack configuration includes:

  plugins: [
    // ...other plugins...
    new ModuleFederationPlugin({
      name: 'helloWorldMFE',
      filename: 'remoteEntry.js',
      exposes: {
        './mount': './src/whatever/sub/path/mount.tsx',
      },
      // ...other options...
    }),
    // ...other plugins...
  ]

Tuning the Remote Load Timeout

DataHub waits a fixed amount of time for an MFE's remote module to load before giving up and rendering the "not available at this time" error state. The default is 10000 ms, which can be too short for a large bundle or a slow network.

Set loadTimeoutMs (in milliseconds) at the top level to change it for every MFE:

topLevelMenuTitle: My Apps
subNavigationMode: false
loadTimeoutMs: 30000 # applies to every MFE below
microFrontends:
    - id: HelloWorld
      label: HelloWorld DEV
      path: /helloworld-mfe
      remoteEntry: http://localhost:3002/remoteEntry.js
      module: helloWorldMFE/mount
      flags:
          enabled: true
          showInNav: true
      navIcon: HandWaving

When loadTimeoutMs is not set, 10000 ms is used, so existing configs keep working unchanged. A value that is not a positive number, or is above 2147483647 (the browser timer limit), is logged and ignored — it falls back to 10000 ms rather than taking the MFE offline.

Note that datahub-frontend reads the config file once at startup and serves it with a 5-minute browser cache, so a change here needs a datahub-frontend restart to take effect.

Build the datahub-frontend Binary

cd datahub-frontend
../gradlew build

Run the Binary

cd run
./run-local-frontend

By default, the above script (run-local-frontend) uses the frontend.env file, which sets the MFE_CONFIG_FILE_PATH environment variable to point to your edited mfe.config.local.yaml.

Additionally, this section in frontend.env:

PORT=9002

ensures the app is available at http://localhost:9002.

Start Supporting Services

As described in the DataHub Quickstart Guide, you will need to start several supporting services to use the DataHub GUI.

Test Your MFE

Navigate to http://localhost:9002.
You should see a waving hand menu item in the left navigation bar.

Deploying to Kubernetes

Suppose HelloWorld is deployed at https://mydomain-dev.com/helloworld/remoteEntry.js.

Edit mfe.config.dev.yaml. This file will be similar to your local configuration, but update the remoteEntry field:

remoteEntry: https://mydomain-dev.com/helloworld/remoteEntry.js

Note: The above file name and location is just an example. You may create any file and place it in a separate configuration repository, depending on your organization's practices.

In your Kubernetes YAML, ensure the environment variable MFE_CONFIG_FILE_PATH points to your configuration via volumes and volume mounts:

  env:
    - name: MFE_CONFIG_FILE_PATH
      value: /mfeconfig/mfe.config.dev.yaml
  volumeMounts:
    - name: mfe-config
      mountPath: /mfeconfig
      readOnly: true

volumes:
  - name: mfe-config
    configMap:
      name: datahub-mfe-config

Then include the file in the ConfigMap following Kubernetes best practices.