https://github.com/ogzhanolguncu/react-typescript-module-federation
Micro Frontend with React, ReactRouter V6, Typescript and Webpack
https://github.com/ogzhanolguncu/react-typescript-module-federation
chakra chakra-ui lerna module-federation react react-router-v6 reactjs typescript webpack
Last synced: about 1 year ago
JSON representation
Micro Frontend with React, ReactRouter V6, Typescript and Webpack
- Host: GitHub
- URL: https://github.com/ogzhanolguncu/react-typescript-module-federation
- Owner: ogzhanolguncu
- Created: 2021-05-13T14:17:08.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2022-11-10T08:26:06.000Z (over 3 years ago)
- Last Synced: 2024-06-13T23:50:46.074Z (about 2 years ago)
- Topics: chakra, chakra-ui, lerna, module-federation, react, react-router-v6, reactjs, typescript, webpack
- Language: TypeScript
- Homepage: http://ogz-microfrontend-container.s3-website.eu-central-1.amazonaws.com/
- Size: 1020 KB
- Stars: 171
- Watchers: 2
- Forks: 60
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Webpack 5 Module Federation with React/Typescript
[](https://github.com/ogzhanolguncu/react-typescript-module-federation/actions/workflows/s3-deploy.yaml)
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
```bash
npm i -g lerna
```
Then,
```bash
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,
```bash
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, Lerna, React Router V6
## Article
If you are curious about building this template head over to [Introduction to Micro Frontends with Module Federation, React and Typescript](https://ogzhanolguncu.com/blog/micro-frontends-with-module-federation)
## Feedback
If you have any feedback, please reach out to me or feel free to open up a issue.