DEV Community

Cover image for React micro-frontend architecture for your next project
Sohil Lalakiya
Sohil Lalakiya

Posted on

React micro-frontend architecture for your next project

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)