React Typescript Module Federation
Micro Frontend with React, ReactRouter V6, Typescript and Webpack
Overview
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.
Features
- Webpack 5 Module Federation integration
- Host app container with two remote apps
- Exposing and importing React components
- Parallel execution of multiple projects using Lerna
- Integration with React Router V6
Summary
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.
- React
React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components
- Chakra UI
Chakra UI is a popular open-source React component library that provides a set of accessible and customizable UI components to help developers create modern web applications.
- Typescript
TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.
- Webpack
Webpack is a popular open-source module bundler for JavaScript applications that bundles and optimizes the code and its dependencies for production-ready deployment. It can also be used to transform other types of assets such as CSS, images, and fonts.