Microfrontends with webpack ModuleFederationPlugin

Package	Type	Port	Framework
container	host	8080	react
marketing	remote/sub application	8081	react
auth	remote/sub application	8082	react
dashboard	remote/sub application	8083	vue

All package have a start and build script that can be run with yarn start and yarn build respectively.

Takeaways

• Scoped CSS With material-ui: use createGenerateClassName
• Generic and future proof way (library agnostic) to communicate and share state between container and sub application: callbacks
• Generic way to integrate an app built with any framework into a react container: mount sub app in useEffect hook, use ref to app element with useRef hook. See Dashboard's mount and Dashboard container's component.
• For deployment with AWS CloudFront, need to invalidate remoteEntry files
• To avoid not found files errors with nested path/routes, don't forget to set the weback publicPath. (webpack doc)
• For better performance, share libraries using webpack shared ModuleFederationPlugin setting.
• Use exported mount function for running in container, mount into element specific to sub application for running in isolation