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