Micro-Frontends in React

🚀 Introduction

As modern web applications grow larger and more complex, monolithic frontends become harder to scale, maintain, and develop independently. Just as microservices solved the backend scaling problem, micro-frontends offer a solution for scaling front-end development by breaking a large application into smaller, independently deployable units.

📖 What Are Micro-Frontends?

Micro-frontends are the frontend equivalent of microservices.

Definition: Micro-Frontends is an architecture where a large web application is broken down into smaller, independently deployable front-end applications that are stitched together to form a unified user experience.

Each micro-frontend:

• Can be built, deployed, and maintained independently.

• Can be owned by a separate team.

• Can potentially use different tech stacks. (But usually better to keep them aligned.)

✅ Benefits of Micro-Frontends

• Scalable: Easier to scale teams and projects.

• Independent Deployments: No need to redeploy the whole app for a single change.

• Faster Development: Parallel work by multiple teams.

• Tech Stack Freedom: Each micro-frontend could use different versions of React or even different frameworks if necessary.

• Improved Maintainability: Smaller, focused codebases.

📊 Flow Diagram

🗂️ Micro-Frontend Architecture Overview

• Host/Container App: Shell application that loads and orchestrates micro-frontends.

• Micro-Frontends: Independent apps that handle specific features (like Navbar, Product, Cart).

⚙️ Key Technology: Webpack Module Federation

Webpack 5 introduced Module Federation which allows dynamic runtime loading of code from remote servers.

It enables:

• Sharing dependencies like React across apps.

• On-demand loading of components from remote apps.

🛠️ Step-by-Step Example: Micro-Frontends in React Using Webpack 5 Module Federation

We will build:

• Host App (Container)

• Micro-Frontend 1: Header App

• Micro-Frontend 2: Products App

🏗️ Folder Structure

Each app will:

• Have its own package.json

• Run on a different port

🔹 Step 1: Set Up Micro-Frontend 1 (Header App)

👉 1. Create the Header App:

👉 2. Install Webpack Module Federation Plugin:

👉 3. Create webpack.config.js in the root of the header app:

👉 4. Update package.json to use custom webpack:

👉 5. Create Header component:

🔹 Step 2: Set Up Micro-Frontend 2 (Products App)

Repeat steps from Step 1 using port 3002 and expose the Products component.

👉 1. Create Products component:

🔹 Step 3: Set Up Host App (Container)

👉 1. Create the Container App:

👉 2. Install Webpack Module Federation:

👉 3. Create webpack.config.js:

👉 4. Update package.json:

👉 5. Use Remote Components:

🔹 Step 4: Run All Apps

Open three terminals:

Visit http://localhost:3000

✅ You should see:

• The Header micro-frontend loaded from port 3001.

• The Products micro-frontend loaded from port 3002.

📦 Communication Example

• You can pass props to remote components.

• You can set up global event bus using window.dispatchEvent and window.addEventListener for micro-frontend communication.

🔥 Final Thoughts

Micro-frontends in React help break the frontend monolith, allowing teams to independently develop and deploy features while reducing cross-team dependencies.