Skip to content

Micro-frontend app reference architecture implementation- runtime integration by using Webpack Module federation.

Notifications You must be signed in to change notification settings

AbhishekGautam01/micro-frontend

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

50 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

micro-frontend-app

This is reference implementation of Micro-frontend Architeture. This is achieved using Run-Time Integration between app which was achieved with help of Webpack Module Federation. I have addressed various concerns like: >>Handling Shared Modules/Dependencies >>Implementing Centralized container app to render required Apps based on user-interaction >>Handling CSS across various App by using CSS Scoping >>Implementing Routing & Enabling Route Integration B/w Container and MF Apps >>Improving Load Times through various Optimization Techniques >>Handling Authentication & communicating Auth State to various Apps

Alt text

Please note I have used mono-repo but we could seperate our apps into seperate repos, it will have no effect on our App. Also these App are configured to run in both Isolation and Integrated manner.

#Installation & Usage

  1. git clone https://github.com/AbhishekGautam01/micro-frontend.git or download zip
  2. cd micro-frontend

Setting Up Dashboard MFApp

  1. cd ./dashboard/
  2. npm install
  3. npm run start
  4. Navigate to http://localhost:8083/

Dashboard-ss

Setting Up Marketing MFApp

  1. cd ./marketing/
  2. npm install
  3. npm run start
  4. Navigate to http://localhost:8083/

Marketing-ss

Setting Up Auth MFApp

  1. cd ./auth/
  2. npm install
  3. npm run start
  4. Navigate to http://localhost:8082/auth/signup or http://localhost:8082/auth/signin

Auth-ss

Setting Up Container

  1. cd ./container/
  2. npm install
  3. npm run start
  4. Navigate to http://localhost:8080
  • This would load all the above micro-frontend apps inside the container