Entando MFE SDK

Helpers for building Entando micro-frontends.

Runtime Mercury Injection

The runtime may pass a Mercury-compatible object on the mount SDK:

await mod.mount({
  domElement,
  sdk: {
    ...sdk,
    mercury,
  },
});

When sdk.mercury is present, emit() and on() use Mercury on the shared mfe.event channel and keep the existing SDK event names inside the message payload. When it is absent, the SDK keeps the current ESM CustomEvent and iframe postMessage behavior.

This only gives iframe MFEs direct Mercury communication if the runtime can actually provide the iframe with a usable object or broker-backed Mercury client. A sandboxed srcdoc iframe cannot receive the parent's live JavaScript object by reference.

Vite Manifest Plugin

Use the Vite plugin to publish Widget Registry metadata at /.well-known/entando-mfe.json.

Explicit mode pins the public runtime files:

import { defineConfig } from "vite";
import { entandoMfeManifestPlugin } from "@entando/mfe-sdk/vite";

export default defineConfig({
  plugins: [
    entandoMfeManifestPlugin({
      name: "Orders Widget",
      version: "1.2.3",
      owner: "Commerce",
      entry: "/esm/bundle.js",
      styles: ["/esm/style.css"],
      outDir: "dist",
    }),
  ],
});

Inferred mode lets the SDK read Vite/Rollup build output and write the emitted JS/CSS filenames:

import { defineConfig } from "vite";
import { entandoMfeManifestPlugin } from "@entando/mfe-sdk/vite";

export default defineConfig({
  plugins: [
    entandoMfeManifestPlugin({
      name: "Orders Widget",
      version: "1.2.3",
      owner: "Commerce",
      outDir: "dist",
    }),
  ],
  build: {
    outDir: "dist/esm",
  },
});

If Vite emits dist/esm/assets/main-AbC123.js and dist/esm/assets/style-DeF456.css, the SDK writes:

{
  "entry": "/esm/assets/main-AbC123.js",
  "styles": ["/esm/assets/style-DeF456.css"]
}

Explicit entry / styles always win over inference.

CLI

For non-Vite build systems, write the manifest in a post-build step:

entando-mfe-manifest --name "Orders Widget" --version 1.2.3 --owner Commerce --entry /esm/bundle.js --styles /esm/style.css --out-dir dist

The CLI can also scan a built output directory:

entando-mfe-manifest --name "Orders Widget" --owner Commerce --out-dir dist --scan-dir dist/esm --infer --public-path /esm

Webpack Manifest Plugin

Webpack builds can infer paths from entrypoint files:

import MiniCssExtractPlugin from "mini-css-extract-plugin";
import { EntandoMfeManifestWebpackPlugin } from "@entando/mfe-sdk/webpack";

export default {
  entry: { main: "./src/main.js" },
  experiments: { outputModule: true },
  output: {
    path: new URL("./dist", import.meta.url).pathname,
    filename: "esm/assets/[name]-[contenthash:8].js",
    library: { type: "module" },
    module: true,
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "esm/assets/[name]-[contenthash:8].css",
    }),
    new EntandoMfeManifestWebpackPlugin({
      name: "Orders Widget",
      outDir: "dist",
    }),
  ],
};

The plugin uses Webpack's compilation entrypoint files to write /.well-known/entando-mfe.json.