Micro Frontend API-Referenz

MicroFrontend SDK-API

action: Type
{reload?: typeof window.location.reload}
Description
Used to pass a callback to reload the page: { reload } . To use this prop, integrateActions must be set to true.
auth: Type
{ accessToken, idToken, userInfo {OidcUserInfo | null} }
Description
Used to pass an object with tokens and userInfo: { accessToken, idToken, userInfo } to make these values available in the micro frontend. To use this prop, integrateAuthmust be set to true and it is mandatory if integrateAuth is enabled.
configOverrides: Type
{ customConfig: string, localeSettings: {} }
Description
Allows the shell app to inject custom configurations into the micro frontend's Jutro config object.

When the JUTRO_NEW_CONFIG_LOADING_ORDER environment variable is set to true, the config object has precedence over values in the .env file. In the shell app, you can then use configOverrides to inject the values in the config object and they are applied to the micro frontend's configuration.

When the JUTRO_NEW_CONFIG_LOADING_ORDER environment variable is set to false, the .env file has precedence over the Jutro config object. configOverrides can still inject values into the Jutro config object, but they're not visible if the same variables are also defined in the .env file.
g11n: Type
LocaleConfig, 'onGlobalizationChange( language?: string; languageChanged?: boolean; locale: string; localeChanged: boolean )'
Description
Allows you to pass locale configuration. To use this prop, integrateG11n must be set to true.
iframeAttributes: Type
{allow?: string; referrerpolicy?: string; sandbox?: string}
Description
Allows to pass additional attributes for micro frontends. Entries from iframeAttributes prop are added to the iframe HTML element.
integrateActions: Type
boolean
Description
Lets the shell know when reloading on the micro frontend side. When set to true, you must also pass the action prop to enable the actions integration.
integrateAuth: Type
boolean
Description
Allows the sharing of authentication information between the shell app and the micro frontend. When set to true, you must also pass the auth prop to enable the authentication integration.
integrateG11n: Type
boolean
Description
Allows you to listen to globalization changes in the micro frontend. When set to true, you must also pass the g11n prop to enable the globalization integration.
integrateJutro: Type
boolean
Description
Enables or disables the rest of integrate* props. By default is set to false. All the integrate* props inherit the integrateJutro value, this means that when it is set to true the rest of the integrate* props are set to true. Then each of the props value can be manually overridden.
integrateModal: Type
boolean
Description
Enables the modal integration to trigger a modal from within the micro frontend so it can be displayed by the shell app. When set to true, you must also pass the modal prop to enable the modal integration.
integrateRouter: Type
boolean
Description
Allows the router prop integration. When set to true, you must also pass the router prop to enable router integration.
integrateTheme: Type
boolean
Description
Allows you to set the theme that the micro frontend uses. Once enabled, use the prop theme to specify the theme to use. When set to true, you must also pass the theme prop to enable the theme integration.
integrateToast: Type
boolean
Description
Enables the toast integration to trigger a toast message from within the micro frontend so it can be displayed by the shell app. When set to true, you must also pass the toast prop to enable the toast integration.
modal: Type
{ showAlert, showConfirm }
Description
Triggers a modal from within the micro frontend so it can be displayed by the shell app. It is an object with modal property with a callback value. To use this prop, integrateModal must be set to true.
onError: Type
({ error: Error, errorInfo?:ErrorInfo }) => void
Description
A callback to invoke when an error occurs. See the Microfrontend SDK documentation for more details about this property.
onLoadingFinished: Type
() => void
Description
Allows consumers to trigger a callback when a micro frontend finishes loading, enabling them to display their own loader from the shell app for a seamless integration.
onRender: Type
func
Description
A function that is called when the micro frontend is rendered or updated.
router: Type
{location?: string; state?: unknown; onLocationChange?(pathname?: string; action?: 'PUSH' | 'REPLACE' | 'GO'; state?: unknown ) => void; basename?: string; onBlockChange(isBlocked: boolean; prompt?: never)}
Description
Sets the current location of the micro frontend. Any change triggers the navigation on the micro frontend side.
theme: Type
{themeConfig?: ThemeConfigType;}
Description
Sets the theme that the micro frontend uses. To use it, integrateTheme must be set to true.
timeout: Type
number
Description
The app waits the specified time in milliseconds for the micro frontend to load. Note: Network errors such as net::ERR_CONNECTION_REFUSED get handled at the browser level. As there is no API to detect it, the only way to identify the error is to wait until the timeout handler shows an error view. Developers can identify the error in the Network tab of Developer Tools.
toast: Type
{ message?: IntlMessageShape; type?: 'info' | 'success' | 'warning' | 'error'; autoFocus?: boolean; linkProps?: LinkProps; onClosed?: ToastOptions['onClose']; toastId?: string; }
Description
Triggers a toast message from within the micro frontend so it can be displayed by the shell app. It is an object with toast property with a callback value. To use this prop, integrateToast must be set to true.

Beispiel

jutro: {
    integrateJutro: true,
    auth: authProps,
    router: {
        location: route,
        onLocationChange: (location, action) => {
            if (action === 'PUSH') {
                history.push({
                    pathname: urlBase + location,
                });
            }
        },
    },
    modal: {
        showAlert,
        showConfirm,
    },
    theme: {
        themeConfig,
        switchTheme,
    },
    toast: {
        toast: ({ message }) => {
            const elementToHoldToastMessage =
                document.getElementById('toastMessage');

            if (elementToHoldToastMessage) {
                elementToHoldToastMessage.innerText = message;
            }
        },
    },
    configOverrides: {
        customConfig: 'Micro-app overridden configuration',
        localeSettings: {
            availableLocales: ['en-US', 'es-ES'],
            preferredLanguage: 'ES',
            defaultCurrency: 'EUR',
        },
    },
    onRender: () => { console.log('onRender'); },
    onLoadingFinished: () => { console.log('onLoadingFinished'); },
    onError: ({ error, errorInfo }) => {
        console.error(error);
        console.error(errorInfo);
    }
}

Eigenschaften der MicroFrontend-Komponente

errorBoundaryComponent: Type
ReactComponentLike
Description
Optional error boundary component you wish to render instead of the default one in case a micro frontend throws an error.
jutro: Type
JutroProps
Description
Allows to set optional props to handle Jutro behavior, integrations, and overrides. To learn more about these props, check the section <MicroFrontend> component jutro properties below.
loaderComponent: Type
ReactComponentLike
Description
Optional loader component you wish to render instead of the default one when micro frontend assets are loading. See the Loader section for more details on the default component.
src: Type
MicroFrontendSrc
Description
Specifies the URL of the micro frontend. You can either use the micro frontend app ID along with the URI, for example mfeAppId@uri or use the function microFrontendsConfig in your src/config/config.json.

Alle unbekannten Eigenschaften werden als reguläre Eigenschaften an die Hauptkomponente des Micro Frontend übergeben.

Jutro-Eigenschaften der MicroFrontend-Komponente

configOverrides: Type
{ customConfig: string, localeSettings: {} }
Description
Allows the shell app to inject custom configurations into the micro frontend's Jutro config object.

When the JUTRO_NEW_CONFIG_LOADING_ORDER environment variable is set to true, the config object has precedence over values in the .env file. In the shell app, you can then use configOverrides to inject the values in the config object and they are applied to the micro frontend's configuration.

When the JUTRO_NEW_CONFIG_LOADING_ORDER environment variable is set to false, the .env file has precedence over the Jutro config object. configOverrides can still inject values into the Jutro config object, but they're not visible if the same variables are also defined in the .env file.
iframeAttributes: Type
{allow?: string; referrerpolicy?: string; sandbox?: string}
Description
Allows to pass additional attributes for micro frontends. Entries from iframeAttributes prop are added to the iframe HTML element. This prop is only valid when the mode is set to isolated or iframe (deprecated).
integrateActions: Type
boolean
Description
Lets the shell know when reloading on the micro frontend side.
integrateAuth: Type
boolean
Description
Allows the sharing of authentication information between the shell app and the micro frontend
integrateG11n: Type
boolean
Description
Allows you to listen to globalization changes in the micro frontend.
integrateJutro: Type
boolean
Description
Enables or disables the rest of integrate* props. By default is set to true. All the integrate* props inherit the integrateJutro value, this means that when it is set to true the rest of the integrate* props are set to true. Then each of the props value can be manually overridden.
integrateModal: Type
boolean
Description
Enables the modal integration to trigger a modal from within the micro frontend so it can be displayed by the shell app.
integrateQuickView: Type
boolean
Description
Allows to enable/disable QuickView integration for micro frontends. This value can only be used when the mode is set to shared or moduleFederation (deprecated).
integrateRouter: Type
boolean
Description
Allows the router prop integration.
integrateTheme: Type
boolean
Description
Allows you to set the theme that the micro frontend uses. Once enabled, use the prop theme to specify the theme to use. When integrateTheme is set to true, the shell and the micro frontend share a common theme. When set to false, the shell and the micro frontend use independent themes.
integrateToast: Type
boolean
Description
Enables the toast integration to trigger a toast message from within the micro frontend so it can be displayed by the shell app. When set to true, assigns a single global toast provider and a toast trigger with toast: ToastProvider.toast to the shell and all the micro frontends. If set to false, each micro frontend has its own toast provider.
mode: Type
shared | isolated | moduleFederation (deprecated) | iframe (deprecated)
Description
Sets the MicroFrontend component mode for context sharing or context isolation. There are two modes available, shared (previously moduleFederation) mode to enable context sharing and isolated (previously iframe) mode to enable context isolation.
onRender: Type
func
Description
A function that is called when the micro frontend is rendered or updated.
router: Type
{basename?: string}
Description
Sets the current location of the micro frontend. Any change triggers the navigation on the micro frontend side.
timeout: Type
number
Description
The app waits the specified time in milliseconds for the micro frontend to load. Note: Network errors such as net::ERR_CONNECTION_REFUSED get handled at the browser level. As there is no API to detect it, the only way to identify the error is to wait until the timeout handler shows an error view. Developers can identify the error in the Network tab of Developer Tools.

Beispiel

<MicroFrontend
  src="claimMicroFrontend@http://localhost:3001"
  exampleProp="Example prop"
  loaderComponent={MyLoader}
  errorBoundaryComponent={MyErrorBoundary}
  jutro={{
    mode: 'isolated',
    iframeAttributes: {
      allow: 'geolocation; camera "none"',
      referrerpolicy: 'noreferrer',
      sandbox: 'allow-scripts',
    },
    router: {
      basename: '/welcome',
    },
    configOverrides: {
      customConfig: 'Micro-app overridden configuration',
      localeSettings: {
        preferredLanguage: 'es',
      },
    },
  }}
/>

MicroFrontend SDK-API​

action​

auth​

configOverrides​

g11n​

iframeAttributes​

integrateActions​

integrateAuth​

integrateG11n​

integrateJutro​

integrateModal​

integrateRouter​

integrateTheme​

integrateToast​

modal​

onError​

onLoadingFinished​

onRender​

router​

theme​

timeout​

toast​

Beispiel​

Eigenschaften der MicroFrontend-Komponente​

errorBoundaryComponent​

jutro​

loaderComponent​

src​

Jutro-Eigenschaften der MicroFrontend-Komponente​

configOverrides​

iframeAttributes​

integrateActions​

integrateAuth​

integrateG11n​

integrateJutro​

integrateModal​

integrateQuickView​

integrateRouter​

integrateTheme​

integrateToast​

mode​

onRender​

router​

timeout​

Beispiel​

MicroFrontend SDK-API

`action`

`auth`

`configOverrides`

`g11n`

`iframeAttributes`

`integrateActions`

`integrateAuth`

`integrateG11n`

`integrateJutro`

`integrateModal`

`integrateRouter`

`integrateTheme`

`integrateToast`

`modal`

`onError`

`onLoadingFinished`

`onRender`

`router`

`theme`

`timeout`

`toast`

Beispiel

Eigenschaften der MicroFrontend-Komponente

`errorBoundaryComponent`

`jutro`

`loaderComponent`

`src`

Jutro-Eigenschaften der MicroFrontend-Komponente

`configOverrides`

`iframeAttributes`

`integrateActions`

`integrateAuth`

`integrateG11n`

`integrateJutro`

`integrateModal`

`integrateQuickView`

`integrateRouter`

`integrateTheme`

`integrateToast`

`mode`

`onRender`

`router`

`timeout`

Beispiel