Micro-frontend Applications

Module Federation is a powerful tool for implementing micro-frontend architecture in frontend applications. It allows different teams to build and deploy their own independent frontend components, which can then be dynamically loaded and composed together at runtime within a larger application.
Explore the docs »

Report Bug · Request Feature

Table of Contents

1. About The Project
   • Built With
2. Getting Started
   • Prerequisites
   • How to Run
3. Usage
4. Roadmap
5. Contributing
6. License
7. Contact
8. Acknowledgments

About The Project

Module Federation gives us a new method of sharing code between applications at runtime. To do so, we need to envision a fairly common scenario like eShopContainers with Micro-frontend Architecture.

Here's why:

• A containerized architecture is a scalable solution for backend
• But, Client apps (Single Page Architecture) are still in monolithic architecture
• For client apps, multiple teams should work independently
• For client apps, product and build management should be independent
• Duplicate UI components, business logic, i18n strings, etc.

Module Federation is new solution for micro-frontend architecture!

• Code remains in-place - For one of the applications, the rendering code remains in-place and is not modified.
• No framework - As long as both applications are using the same view framework, then they can both use the same code.
• No code loaders - Micro-FE frameworks are often coupled with code loaders, like SystemJS, that work in parallel with the babel and Webpack imports that engineers are used to. Importing a federated module works just like any normal import. It just happens to be remote.
• Applies to any Javascript - Where Micro-FE frameworks work on UI components, Module Federation can be used for any type of Javascript; UI components, business logic, i18n strings, etc. Any Javascript can be shared.
• Applies beyond Javascript - While many frameworks focus heavily on the Javascript aspects, Module Federation will work with files that Webpack is currently able to process today such as images, JSON, and CSS. If you can require it, it can be federated.
• Universal - Module Federation can be used on any platform that uses the Javascript runtime such as Browser, Node, Electron, or Web Worker.

(back to top)

Built With

This section should list any major frameworks/libraries used to bootstrap the project.

• React.js
• React Query
• Webpack
• Module Federation

(back to top)

Getting Started

Instructions on setting up the project locally.

Prerequisites

• Docker Desktop - Make sure you have installed and configured docker in your environment.

• Run eShopContainers - follow the instructions

  docker-compose build
  docker-compose up

• Node.js

• npm

  npm install npm@latest -g

• yarn

  npm install yarn -g

How to Run

Below is the instructions of how you can install and run the app.

1. Clone the repo

   git clone https://github.com/imatiqul/eShopFederated.git

2. Go to src/eShopMF

   cd src/eShopMF

3. Run mf-basket-app

   cd mf-basket-app
   yarn
   yarn start

4. Run mf-shared-app

   cd mf-shared-app
   yarn
   yarn start

5. Run mf-catalog-app

   cd mf-catalog-app
   yarn
   yarn start

6. Run mf-shop-app

   cd mf-shop-app
   yarn
   yarn start

(back to top)

Usage

(back to top)

Roadmap

(back to top)

Contributing

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/mf-feature)
3. Commit your Changes (git commit -m 'Add some mf-feature')
4. Push to the Branch (git push origin feature/mf-feature)
5. Open a Pull Request

(back to top)

License

Distributed under the MIT License. See LICENSE.txt for more information.

(back to top)

Contact

ATIQUL ISLAM - @ATIQ - islam.md.atiqul@gmail.com

Project Link: https://github.com/imatiqul/micro-frontend-react

(back to top)

Acknowledgments

(back to top)