react-typescript-module-federation
react-typescript-module-federation copied to clipboard
Micro Frontend with React, ReactRouter V6, Typescript and Webpack
Webpack 5 Module Federation with React/Typescript
This project consist of three pieces, a host app container
and two remotes app1
app2
.
Workflow:
-
app1
expose CounterAppOne component. -
app2
expose CounterAppTwo header component. -
container
import CounterAppOne and CounterAppTwo component.
Running Demo
In order to run the demo I highly recommend installing lerna globally via
npm i -g lerna
Then,
lerna bootstrap
Run the command above at the root of your project. This command will make sure you have dependencies you need in order to run this project.
Finally,
npm run start
Lerna will start all your projects parallelly and open your browser.
- http://localhost:3000/ (container)
- http://localhost:3001/ (app1)
- http://localhost:3002/ (app2)
Screenshots
Tech Stack
React, Typescript, Chakra UI, Webpack
Article
If you are curious about building this template head over to Introduction to Micro Frontends with Module Federation, React and Typescript
Feedback
If you have any feedback, please reach out to me or feel free to open up a issue.