This project is an example of a micro frontend using Module Feredation
More and more front-end projects get bigger and complex, in 2016 I had a really cool experience with micro frontends, at that time it was not very common and our approach can be said that it was not the best possible but it worked very well. This project intend to be a simple and scalable boilerplate of a micro frontend, in it I used the Module Federation, to better understand I recommend accessing the following links:
Webpack 5 Module Federation - Zack Jackson
After cloning the repository, you must run the command below at the root of the project:
yarn install-allRun the command below to start the applications: dashboard, profile and projects
yarn start-allor if you prefer you can run the command below for each project: dashboard, profile and projects
yarn startThe ports of each project:
| Project | Port |
|---|---|
| dashboard | 3000 |
| profile | 3001 |
| projects | 3002 |
The project structure presented is just an example, here I tried to make it as simple and scalable as possible:
.
├── dashboard # Full dashboard using the `profile` and` projects` page.
├── profile # Profile containing only the profile page and related components.
├── projects # Projects containing only the projects page and related components.
Internal structure of each project:
.
├── public # Public files
├── src # Application code source
│ ├── components # Generic application components
│ ├── styles # Generic application styles
│ ├── views # Pages used on the router
│ ├── App.js # Main application bootstrap with routes
│ ├── bootstrap.js # Responsible for importing App.js and rendering in the DOM
│ ├── index.js # Performs async import from bootstrap.js
└── webpack.config.js # Bundler the all project and also where modules are exported so that projects can be reused
This project is distributed under the MIT license.