React Micro Frontend Architecture

Welcome to the React Micro Frontend Architecture project!

What is Micro Frontend?

Micro Frontend is an architectural style where a single frontend application is split into smaller, independently deployable micro-applications. This allows teams to work on different parts of a project separately while ensuring modularity and scalability.

Why Use Micro Frontend?

  • Independent deployment of frontend apps
  • Improved scalability & maintainability
  • Better team collaboration
  • Technology agnostic (each micro-app can use different tech stacks)

Source Code

The full source code is available on my Github Repo. Feel free to explore and customize it!

Project Structure 

react-microfrontend-project
 ├──  host-app (Main container app)
 ├──  micro-app-1 (First micro-frontend)
 ├──  micro-app-2 (Second micro-frontend)
 ├──  README.md

How to Run This Project

Follow these steps to get the project up and running:

1. Clone the Repository 

git clone https://github.com/your-username/react-microfrontend.git
 cd react-microfrontend-project

2. Install Dependencies

For each app (host-app, micro-app-1, micro-app-2), run:

cd host-app  # or micro-app-1, micro-app-2
 npm install

3. Start the Applications

Run the following commands in separate terminals:

cd host-app && npm start
 cd micro-app-1 && npm start
 cd micro-app-2 && npm start

Each application will start on a different port (e.g., localhost:3000, localhost:3001, localhost:3002) and for more refer Readme.md file.

Data Sharing Between Apps

  • The host-app acts as the main container and loads both micro-apps dynamically.
  • Micro-apps can communicate with each other using props, events, or a global state management system (like Redux or Zustand).
  • Example: Micro-app-1 sends data to Micro-app-2 via the host-app.