Repository files navigation

This example demonstrate how to use Native Federation in a framework- and tooling-agnostic way. For this, Native Federation Core --@softarc/native-federation -- is used.

Hint: There is also anAngular-based wrapper.

Thanks toZack Jackson for helping with this example.

npm inpm run buildnpm start

This simple example does not implement a watch-mode for development.

Run thewatch script instead ofbuild:

npm inpm run watchnpm start

• Have a look at the project structure: It contains a shell (host), a micro frontend mfe1 (remote), and a shared lib used for exchanging data between the shell and the shell and mfe1.

• Have a look at the build process in the filebuild/build-common.ts. It's a simpleesbuild-based process augmented by Native Federation.

• The build process uses anadapter to bring in the build tool of your choice.

• Have a look at the filefederation.config.js in the shell. It configures Native Federation. TheshareAll-helper shares all the libs found in yourpackage.json in the nodedependencies.

• The Micro Frontend'sfederation.config.js also exposes a component. This component can be loaded into the shell.

• The entry point into the shell is the filemain.ts. It initializesNative Federation and passes key data about the remotes. Then, it loads the application via an dynamicimport.

• The entry point into mfe2 is calledmain.ts too. It's similar to the one used by the shell. However, it doesn't point to further Micro Frontends.

• The shell'sapp.ts uses the functionloadRemoteModule to load the separately compiled and deployed Micro Frontend at runtime.

• Both applications userxjs. However, it's only loaded once because of usingshareAll in the federation config. To assure yourself of this, just have a look to your browser's network tab.

• For the same reason, the shared-lib (libs/shared-lib) is only loaded once and can be used as a mediator for exchaning data between theshell andmfe1.