vanilla-native-federation

vanilla-native-federation

Check the full description of native-federation on @softarc/native-federation. This library is specifically made for stateful models that require a small library to (lazy) load micro frontends or webcomponents on frameworkless webpages using native-federation (e.g. PHP, Ruby or Java applications).

Simple usage:

loader.ts

import { initFederation } from 'vanilla-native-federation';

(() => {
    const manifest = {
        "mfe": "http://localhost:3000/remoteEntry.json"
    }
    initFederation(manifest)
        .then(({load, importMap}) => Promise.all([
            load('mfe1', './Component'),
            load('mfe2', './Component'),
        ]))
        .catch(console.error);
})();

usage using custom events:

loader.ts

import { initFederation } from 'vanilla-native-federation';

(() => {
    const manifest = {
        "mfe": "http://localhost:3000/remoteEntry.json"
    }
    initFederation(manifest)
        .then(({load, importMap}) => {
            console.log("importMap: ", importMap);
            window.dispatchEvent(new CustomEvent("mfe-loader-available", {detail: {load}}));
        })
})();

your-shell.html

<script type="module" src="loader.js"></script>

<script>
    window.addEventListener('mfe-loader-available', (e) => {
        Promise.all([
            e.detail.load('mfe1', './Component'),
            e.detail.load('mfe2', './Component'),
        ]).catch(console.error);
    }, {once: true});
</script>    

Usage with discovery:

This library also contains the implementation for micro frontend discovery. Convenient for micro frontend architectures that require a more robust and detailed discovery mechanism:

loader.ts

import { initFederationWithDiscovery } from 'vanilla-native-federation';

(() => {
    const myDiscoveryUrl = "http://localhost:3000";
    initFederationWithDiscovery(myDiscoveryUrl)
        .then(({load, discovery, importMap}) => {
            console.log("discovery: ", discovery);
            console.log("importMap: ", importMap);
            window.dispatchEvent(new CustomEvent("mfe-loader-available", {detail: {load}}));
        })
})();

your-shell.html

<script type="module" src="loader.js"></script>

<script>
    window.addEventListener('mfe-loader-available', (e) => {
        Promise.all([
            e.detail.load('mfe1', './Component'),
            e.detail.load('mfe2', './Component'),
        ]).catch(console.error);
    }, {once: true});
</script>    

Expected format from discovery service:

{
  "schema": "https://github.com/awslabs/frontend-discovery/blob/main/schema/v1-pre.json",
  "microFrontends": {
    "mfe1": [
      {
        "url": "http://localhost:3001/mfe1.js",
        "metadata": {
          "integrity": "CHECKSUM",
          "version": "1.0.0"
        },
        "deployment": {
          "traffic": 100,
          "default": true
        },
        "extras": {
          "nativefederation": {
            "remoteEntry": "http://localhost:3001/remoteEntry.json",
            "key": "./Component",
          }
        }
      }
    ],
    "mfe2": [
      {
        "url": "http://localhost:3002/mfe1.js",
        "metadata": {
          "integrity": "CHECKSUM",
          "version": "1.0.0"
        },
        "deployment": {
          "traffic": 100,
          "default": true
        },
        "extras": {
          "nativefederation": {
            "remoteEntry": "http://localhost:3002/remoteEntry.json",
            "key": "./Component",
          }
        }
      }
    ]
  }
}