https://github.com/willacosta/microfrontend-application
A simple application to implement Webpack 5 Module Federation plugin, and handle multiple application modules and share dependencies.
https://github.com/willacosta/microfrontend-application
aws aws-s3 cloud-front mfe-app microfrontend module-federation react vue
Last synced: 4 months ago
JSON representation
A simple application to implement Webpack 5 Module Federation plugin, and handle multiple application modules and share dependencies.
- Host: GitHub
- URL: https://github.com/willacosta/microfrontend-application
- Owner: WillACosta
- Created: 2023-06-05T21:20:04.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2023-06-09T18:11:36.000Z (about 3 years ago)
- Last Synced: 2025-08-02T01:44:01.838Z (about 1 year ago)
- Topics: aws, aws-s3, cloud-front, mfe-app, microfrontend, module-federation, react, vue
- Language: JavaScript
- Homepage: https://d2etx549kucxg0.cloudfront.net/
- Size: 534 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
### @micro-frontend application
A micro frontend application to showcase Webpack 5 Module Federation plugin, and handle multiple modules with share dependencies.
### Table of contents
- [App Architecture](#app-architecture)
- [Technical Resources](#technical-resources)
- [Getting Started](#getting-started)
## App Architecture
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.
## Technical Resources
- 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` and `Cloud Front` (CDN)
- Callback communication between apps
- Lazy load app modules
- React and Vue based applications
- `React Router DOM` for handling browser and memory routers
## Getting Started
1. First of all, you need to clone this repository:
```shell
git clone
```
2. Go to each application directory and install dependencies:
```shell
npm install
```
3. Finally, runs each one with:
```shell
npm run dev
```