tmkasun / webpack-module-federation-with-react

Micro frontend in React with webpack Module Federation

Microfrontend Architecture Demo using Webpack Module Federation

This repository contains a demonstration application that showcases the implementation of Microfrontend architecture using the Webpack Module Federation feature. The application is built using React and demonstrates how different parts of a web application can be developed and deployed independently while seamlessly integrating with each other.

Features

• Integration of multiple independent frontend modules into a single application.
• Seamless communication between microfrontends.
• Lazy loading of microfrontends for optimized performance.
• Shared components and resources across microfrontends.
• Demonstrates the power of Webpack Module Federation in building microfrontend applications.

Architecture Overview

The demo application consists of a host(main) application and a microfrontend module.

• (Primary)
  • The entry point of the application that integrates the microfrontends and manages their communication.
• (Secondary)
  • An independent module showcasing a data table. It is loaded into the main application on-demand.

Usage of Webpack Module Federation

Webpack Module Federation is utilized to enable the integration of microfrontends into the main application. It allows each microfrontend to expose selected components and consume components from other microfrontends, all while keeping their code and state separate.

The webpack.config.js files in the host application and each microfrontend module contain the federation configuration, enabling seamless module sharing.

Folder Structure

microfrontend-demo/
│
├── host/
│   ├── src/
│   └── webpack.config.js
│
├── remote/
│   ├── src/
│   └── webpack.config.js
│
└── README.md

Know issues

• webpack/webpack-dev-server#2692
  • styled-components/styled-components#3302
• webpack/webpack#11805 (comment)
• webpack/webpack#13287

Guides

• https://module-federation.github.io/blog/get-started
• https://medium.com/swlh/webpack-5-module-federation-a-game-changer-to-javascript-architecture-bcdd30e02669
• https://webpack.js.org/concepts/module-federation/#modulefederationplugin-high-level