Module Federation implementation examples

Read more:

• Module Federation
  • github with examples

Projects

• angular-in-vue-router ✅ Best practice - connecting Angular inside Vue with Vue Router
• angular-ngrx-vue-router ✅ Best practice - connecting Angular inside Vue with Vue Router with ngrx
• angular-react-vue ⚠️ No services working - simple app with angular-vue-react each to each connection

General rules:

• Configure webpack ModuleFederationPlugin

• Use bootstrap.js files to redefine entry points with asynchronous boundary is strongly recommended way:

  But if you exposes and also remotes application (omnidirectional way), it is necessary

  • Cut everything from your entry file, for example - main.js to some other file, for example - bootstrap.js;
  • Use import function inside this main.js:

  index.js

  import('./bootstrap');

  bootstrap.js

  import React from 'react';
  import ReactDOM from 'react-dom';
  import App from './App';
  ReactDOM.render(<App />, document.getElementById('root'));

  Check example

Useful links that helped me

• [indepth.dev] Zack Jackson | Webpack 5 Module Federation: A game-changer in JavaScript architecture

• [YouTube] Lukas Ruebbelke | ng-conf | Framework Inception with Micro Frontend Composition - great example with socket io live monitoring

  • github

• [YouTube] Jason Neal | ng-conf | Micro Frontend Architecture in 5 Minutes

  • github

• [YouTube] Jack Herrington | Vue + React Module Federation

  • github

• Rany ElHousieny | Micro Frontends Step by Step Using React, Webpack 5, and Module Federation

  • github

• [YouTube] Angular 12 - webpack 5 module federation with nice directive

  • github

• [YouTube] Manfred Steyer | AngularAir | Using Module Federation in Angular v11