This repository is educational. The hello-world-with-module-federation is an example of Micro Frontends with Module Federation, React and Typescript. This a POC(Proof of Concept) project it may not look great, but that's not the point in our case. It's just a simple example of how to fetch components from micro-frontends and how to use a context state (which in our case is a user) from a micro-frontend.

Workflow:

• app1 expose AppOne component and UserContext object.
• app2 expose AppTwo component.
• container import AppOne, AppTwo component and UserContext object.

npx create-react-app container --template typescript

yarn add html-webpack-plugin serve ts-loader webpack webpack-cli webpack-dev-server

npm install --save react-error-boundary

npx create-react-app app1 --template typescript

yarn add html-webpack-plugin serve ts-loader webpack webpack-cli webpack-dev-server

yarn add @pixability-ui/federated-types

npx create-react-app app2 --template typescript

yarn add html-webpack-plugin serve ts-loader webpack webpack-cli webpack-dev-server

yarn add @pixability-ui/federated-types

cd app1 yarn install yarn make-types yarn start

cd app2 yarn install yarn make-types yarn start

cd container yarn install yarn start

https://ogzhanolguncu.com/blog/micro-frontends-with-module-federation

https://www.npmjs.com/package/@pixability-ui/federated-types

https://github.com/ogzhanolguncu/react-typescript-module-federation

https://github.com/fabecerra/mfe-poc-bluex