Skip to main content

Require Micro frontend

To render a micro frontend within the application host, you can use the requireMicrofrontend command provided by fronthub function. This command allows you to specify which micro frontend to require, where to mount it, and pass custom options.

Example:

fronthub('requireMicrofrontend', 'YOUR_MICROFRONTEND_NAME', function (hub) {
  hub.renderAt(document.getElementById('target-id-element'))
})

Arguments​

Micro Frontend name​

The first argument should be the micro frontend name, as specified in the package.json file.

Fixed version​

The second agument for requiring a micro frontend, as shown in the example above, will fetch the latest active version from Fronthub. If you need to require a fixed version, you can do so as follows:

fronthub(
  'requireMicrofrontend',
  'YOUR_MICROFRONTEND_NAME@THE_SEMVER_VERSION',
  function (hub) {
    hub.renderAt(document.getElementById('target-id-element')),
  },
)
info

What is THE_SEMVER_VERSION

Hub function​

The third argument must be a function specifying where to render the micro frontend. This function should include the property hub.renderAt, where you provide a JavaScript valid selector for a element in the html tree where the micro frontend will be rendered.

The second parameter for the renderAt function is an object, allowing you to pass additional information directly to the micro frontend context.

info

The object for the renderAt function does not accept function.

fronthub('requireMicrofrontend', 'YOUR_MICROFRONTEND_NAME', function (hub) {
  hub.renderAt(document.getElementById('target-id-element'),
    {
      prop: true,
      customData: {
        foo: 'bar'
      }
    }
  ),
})

This information can be accessed through Connect component props. For more details, refer to the Connect documentation.

Options​

The fourth and last argument is an object with the following properties:

  • errorCallback: A function to handle any errors that occurs during the micro frontend require process.

  • priority: This property has two options, high and medium. It determines the priority with which FrontHub will request the micro frontend assets. When the option is medium the micro frontend will be loaded after the property document.readyState be complete. This feature is especially useful to delay the request of non-essential micro frontends, thereby improving overall page performance. The default option is high.

fronthub('requireMicrofrontend', 'YOUR_MICROFRONTEND_NAME', function (hub) {
  hub.renderAt(document.getElementById('target-id-element')),
    {
      errorCallback: error => {
        MyCustomErrorService.error(error)
        console.error(`Failed to load MFE: ${err}`)
      },
      priority: 'medium', // or 'high'
    }
})