⚡ What Are Micro-Frontends?

Micro-frontends apply the principles of microservices to the frontend. Instead of building a monolithic frontend app, micro-frontends divide it into smaller, independent pieces, where each team can develop, test, and deploy their feature or module independently.

🏗️ Think of it as: Multiple mini React apps (or other frameworks) working together to form a single cohesive app.

🚀 Why Use Micro-Frontends?

1. Scalability: Different teams can work on different features without stepping on each other’s toes.
2. Tech Agnostic: You can mix React, Vue, Angular, etc., in the same app (though usually avoided unless necessary).
3. Independent Deployment: Each micro-frontend can be deployed independently.
4. Improved Maintainability: Smaller codebases are easier to manage.

🛠️ Micro-Frontends with React: Approaches & Tools

1️⃣ Module Federation (Webpack 5) 🔗

The most popular way to build micro-frontends in React today.

• Key Concept: Share modules between apps at runtime.

Example Setup:

• Host App — Main shell.
• Remote App — A micro-frontend exposed via module federation.

Webpack Config (Remote App):

// webpack.config.js
module.exports = {
name: 'remoteApp',
filename: 'remoteEntry.js',
exposes: {
'./Button': './src/Button', // Exposing a component
},
shared: { react: { singleton: true }, 'react-dom': { singleton: true } },
};

Webpack Config (Host App):

// webpack.config.js
module.exports = {
name: 'hostApp',
remotes: {
remoteApp: 'remoteApp@http://localhost:3001/remoteEntry.js',
},
};

Usage in React:

import React, { Suspense } from 'react';

const RemoteButton = React.lazy(() => import('remoteApp/Button'));

const App = () => (
<Suspense fallback={<div>Loading...</div>}>
<RemoteButton />
</Suspense>
);

🔥 Pros:

• Dynamic loading at runtime.
• Strong ecosystem support.

⚠️ Cons:

• Complex webpack configuration.
• Version mismatches can cause issues.

2️⃣ iFrames 🖼️

The simplest form of micro-frontends.

• Each micro-frontend runs in its own iframe.
• Communicate using postMessage API.

🔥 Pros:

• Strong isolation.
• Simple to implement.

⚠️ Cons:

• Poor UX due to page reloads and styling issues.
• SEO and accessibility challenges.

3️⃣ Single SPA 🏛️

A micro-frontend framework that helps multiple frameworks coexist (React, Vue, Angular, etc.).

• Manages routing and rendering for multiple apps.

Example Setup:

import { registerApplication, start } from 'single-spa';

registerApplication({
name: '@my-org/react-app',
app: () => System.import('@my-org/react-app'),
activeWhen: ['/react'],
});

start();

🔥 Pros:

• Framework-agnostic.
• Handles routing and lifecycles.

⚠️ Cons:

• Steeper learning curve.
• Can lead to bloated JS bundles.

4️⃣ Micro-Frontends via SSR (Next.js) 🌐

Next.js can be used to stitch micro-frontends on the server side.

• You can render micro-frontend apps on the server and send a single HTML file to the client.
• Useful for SEO-heavy apps.

⚡ When Should You Use Micro-Frontends?

✅ Best For:

• Large-scale applications with multiple teams.
• Complex projects where independent deployments are needed.

❌ Not Ideal For:

• Small to medium-sized apps.
• Projects without strong CI/CD pipelines.

💡 Best Practices:

1. Shared Libraries: Use module federation or monorepos to share common dependencies.
2. Consistent UI: Implement a design system to maintain consistency.
3. Version Control: Handle dependency mismatches between micro-frontends carefully.
4. Communication: Define clear contracts between micro-frontends (e.g., using events or shared state).