Micro Frontend with React, ReactRouter V6, Typescript and Webpack
This project is a demonstration of using Webpack 5 Module Federation with React and Typescript. It consists of a host app container and two remote apps, app1 and app2. The workflow involves app1 exposing a CounterAppOne component and app2 exposing a CounterAppTwo header component. The container then imports and uses these components. To run the demo, the author recommends installing Lerna globally and running a command in the project’s root directory. The demo can be accessed through the following URLs: http://localhost:3000/ (container), http://localhost:3001/ (app1), and http://localhost:3002/ (app2). The tech stack used includes React, Typescript, Chakra UI, Webpack, Lerna, and React Router V6.
To install and run this project, follow the steps below:
Install Lerna globally by running the following command in your terminal:
npm install --global lerna
Clone the project repository and navigate to the root directory.
Install the project dependencies by running the following command:
lerna bootstrap
Start all the projects in parallel by running the following command:
lerna run start
Open your browser and access the following URLs to see the running demo:
This project demonstrates the usage of Webpack 5 Module Federation with React and Typescript. It showcases the integration of a host app container with two remote apps, allowing for the exposure and importation of React components. The project also utilizes Lerna for parallel execution of multiple projects and incorporates React Router V6 for routing. Overall, this serves as a useful template for building micro frontends with Module Federation. If you have any feedback or encounter any issues, you are encouraged to reach out to the author or open an issue.