A micro frontend application to showcase Webpack 5 Module Federation plugin, and handle multiple modules with share dependencies.
The project has three sub-applications using the concept of micro frontend, moreover, we've another application shell named container
for handling whether we should or not show other apps, all these modules are managed by Module Federation
plugin, from Webpack 5
. As you can see below:
.
|
|__ packages
|
|__ container
|__ auth
|__ dashboard
|__ marketing
We use a generic mount function for custom rendering micro apps to get agnostic behavior for any frameworks that going used down the road. Also, the communication between apps is made by the callbacks functions.
- Micro-frontend architecture with mono-repo
Github Actions
workflows for automatically deploying each MFE (Micro-frontend)- Use of
Module Federation
plugin for managing applications - Use of
Amazon S3
andCloud Front
(CDN) - Callback communication between apps
- Lazy load app modules
- React and Vue based applications
React Router DOM
for handling browser and memory routers
- First of all, you need to clone this repository:
git clone
- Go to each application directory and install dependencies:
npm install
- Finally, runs each one with:
npm run dev