How Micro Frontends Work: A Deep Dive

Micro frontends are an architectural style where a frontend app is decomposed into smaller, semi-independent “microapps” that can be developed, tested, and deployed independently. Here’s a breakdown of how they work:

1. Independent Deployment – Each micro frontend can be deployed without affecting others.
2. Team Autonomy – Different teams can own different parts of the UI.
3. Technology Agnostic – Teams can use different frameworks (React, Angular, Vue).
4. Shared UI Components – Common design systems ensure consistency.
5. Runtime Composition – Fragments are assembled in the browser.
6. API Gateway – Backend services are unified under a single entry point.
7. Isolated State – Each micro frontend manages its own state.
8. Lazy Loading – Only required modules are loaded dynamically.
9. Cross-Cutting Concerns – Auth, logging, and analytics are handled centrally.
10. CI/CD Pipelines – Each micro frontend has its own build and deployment process.

For a detailed guide with visuals, check Neo Kim’s article: Micro Frontends Explained.

You Should Know: Practical Implementation of Micro Frontends

1. Setting Up a Micro Frontend with Module Federation (Webpack 5)

   // webpack.config.js (Host App) 
   const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin"); </li>
   </ol>
   
   module.exports = { 
   plugins: [ 
   new ModuleFederationPlugin({ 
   name: "host", 
   remotes: { 
   microApp1: "microApp1@http://localhost:3001/remoteEntry.js", 
   }, 
   shared: ["react", "react-dom"], 
   }), 
   ], 
   }; 
   

   2. Running Independent Micro Frontends

   Use Docker to containerize each micro frontend:

   docker build -t microfrontend-app1 . 
   docker run -p 3001:80 microfrontend-app1 
   

   3. Nginx Reverse Proxy for Composition

   server { 
   listen 80; 
   location /app1 { 
   proxy_pass http://microapp1:3001; 
   } 
   location /app2 { 
   proxy_pass http://microapp2:3002; 
   } 
   } 
   

   1. Shared State Management (Redux + Custom Events)

      // Cross-microfrontend communication 
      window.dispatchEvent(new CustomEvent('global-state-update', { 
      detail: { user: { name: "Alice" } } 
      })); </li>
      </ol>
      
      // Listening in another micro frontend 
      window.addEventListener('global-state-update', (e) => { 
      console.log(e.detail); 
      }); 
      

      5. Lazy Loading with Dynamic Imports

      const loadMicroApp = async (appName) => { 
      const module = await import(<code>./${appName}/bootstrap.js</code>); 
      module.mount(document.getElementById('app-container')); 
      }; 
      

      What Undercode Say

      Micro frontends solve scalability challenges in large teams but introduce complexity in state management and deployment orchestration. Use:
      – Linux Commands for Debugging:

      netstat -tuln | grep 3000  Check port usage 
      lsof -i :3001  Find processes using a port 
      

      – Windows Commands for Deployment:

      tasklist | findstr "node"  Check running Node.js processes 
      

      – CI/CD Automation:

      kubectl apply -f k8s-deployment.yaml  Kubernetes deployment 
      

      Expected Output: A scalable, independently deployable frontend architecture with seamless team collaboration.

      Prediction

      Micro frontends will dominate enterprise frontend architectures by 2026, with improved tooling for state sharing and performance optimization.

      References:

      Reported By: Nk Systemdesign – Hackers Feeds
      Extra Hub: Undercode MoN
      Basic Verification: Pass ✅

      Join Our Cyber World:

      💬 Whatsapp | 💬 Telegram