Micro frontend migration from 8.8 to 8.9 or later

Warning: ¡No se lo pierda!

A partir de Jutro 8.9.0, no puede usar microfrontends con Webpack 4. Debe actualizar a Webpack 5. Consulte nuestra guía de migración a Webpack.

Follow this guide to migrate from the old Microapp to the modern MicroFrontend.

Component name

Rename the old <MicroApp> component to <MicroFrontend>.

Source

Change the remoteScope prop to src.

// import { MicroFrontend, getMicroFrontendSrc } from '@jutro/micro-frontends';
<MicroFrontend src={getMicroFrontendSrc('claimMicroFrontend')} />

See our section about the src attribute for more details.

Passing jutro prop to AppRoot

We no longer pass the jutro prop to the AppRoot component of the micro frontend. If you were using the jutro prop to access configOverrides, you can use getConfigValue() instead:

Don't

export const AppRoot = (props) => {
  const policyNumber = props.jutro.configOverrides.policyNumber;
  console.log(policyNumber);
  // ...the rest of the component
};

Do

export const AppRoot = (props) => {
  const policyNumber = getConfigValue('policyNumber', 'default here');
  console.log(policyNumber);
  // ...the rest of the component
};

Props

The following props are no longer supported:

• devProps
• importOptions: Entries in this object were moved to the jutro prop:
  • importOptions.appMode is now jutro.mode
  • importOptions.entrypointTimeoutMillis is now jutro.timeout
• Options inside jutro prop:
  • componentMapExtensions

The object accepted by the jutro props no longer contains an iframe key. All the integrate* and related props such as integrateActions and actions are now nested under jutro prop. The rest of the props like appName, path, elementProps, and resizeProps are no longer supported.

Antes

<MicroApp
  jutro={{
    iframe: {
      integrateJutro: true,
      integrateAuth: true,
      integrateG11n: true,
      integrateTheme: true,
      integrateToast: true,
      integrateModal: true,
    },
  }}
/>

Now

<MicroFrontend
  jutro={{
    integrateJutro: true,
    integrateAuth: true,
    integrateG11n: true,
    integrateTheme: true,
    integrateToast: true,
    integrateModal: true,
  }}
/>

Isolated mode

To set a micro frontend to isolated (previously iframe) mode, set mode: 'isolated' inside the jutro prop. See Isolated (iframe) micro frontends.

Configuration

In your config.json, rename microAppConfig to microFrontendsConfig.

Imports

@jutro/lab-preview-micro-app package is renamed to @jutro/micro-frontends Isolated micro frontends.

The @jutro/lab-preview-module-federation package has been removed. It provided support for webpack 4 module federation. Switch to webpack 5.

importIframeApp and importMicroApp are removed. Use the MicroFrontend component instead.

Environment variables

The following environment variables are no longer supported:

• MICRO_APP_MODE - you can get the mode of the micro frontend using AppContext.
• MICRO_APP_SHARE_JUTRO and MICRO_APP_SHARE_REACT - sharing Jutro packages is now automatically determined at runtime. You can also control what is shared by defining a shared function under module federation configs in your overrides.config.js.

Support for UI metadata

The MicroApp (now MicroFrontend) component is no longer available in the metadata by default. To use it in the metadata, add it to componentMap.

Embedded mode

Support for embedded mode has been removed. Use shared (previously moduleFederation) instead, which is the default option in the base configuration.

Routing and ShellHistoryContext

ShellHistoryContext is no longer available.

But shell app and the micro frontend are integrated in a way that allows them to listen to each other's window.history. This allows you to simplify your code.

Antes

function BreadcrumbWrapper(links: BreadcrumbLinkProps[]): ReactElement {
  const shellHistory = useContext(ShellHistoryContext);

  return (
    <Breadcrumb links={links.map((l) => ({ ...l, history: shellHistory }))} />
  );
}

Do

function BreadcrumbWrapper(links: BreadcrumbLinkProps[]): ReactElement {
  return <Breadcrumb links={links} />;
}

If you are using iframe micro frontends, see our docs about navigation in iframe micro frontends.

getMicroAppCache

The getMicroAppCache function is renamed to getMicroFrontendCache.