Piral Cloud Sample ·

Sample project to illustrate a micro frontend discovery with Module Federation.

⚡ Use the Piral Feed Service for generic micro frontend discovery in the context of Module Federation-based micro frontends.

Feel free to play around with the code using StackBlitz.

You can also visit this demo at cloud-module-federation.samples.piral.cloud/.

Structure

This repository contains the following packages / code elements:

• host-direct: the host with direct MF integration - for local debugging
• host-indirect: the host with indirect MF integration through a MF discovery service - for production purposes
• mf-blue: the MF with the buy and basket components from the blue team
• mf-green: the MF with the recommendations component from the green team
• mf-red: the MF with the product details component from the red team
• shared: the shared loader that enables cross-MF component sharing

Publishing to a Discovery Service

Following the same principles as outlined in this article the repository uses the publish-microfrontend helper CLI to publish individual packages to the Piral Feed Service.

The Piral Feed Service recognizes the format and shows the micro frontends already as Module Federation modules in the feed.

As feed representation we use the "Native Federation Remote". In this example the representation will look like this:

{
  "mf-blue": "https://assets.piral.cloud/pilets/native-federation-demo/mf-blue/1.0.0/remoteEntry.js",
  "mf-green": "https://assets.piral.cloud/pilets/native-federation-demo/mf-green/1.0.0/remoteEntry.js",
  "mf-red": "https://assets.piral.cloud/pilets/native-federation-demo/mf-red/1.0.3/remoteEntry.js"
}

The feed is inserted in the root module of the host-indirect package.

License

Piral and this sample code is released using the MIT license. For more information see the license file.