Beginner Guide: Microfrontends with Module Federation (React + Webpack)

Beginner-Friendly Step-by-Step Guide (From Scratch)

This section is for beginners who want to build Microfrontends with Module Federation using React + Webpack.

1. Install required tools

   npm init -y
   npm install react react-dom
   npm install webpack webpack-cli webpack-dev-server html-webpack-plugin mini-css-extract-plugin --save-dev

2. Create file structure

   host-app/
     src/
       index.js
       App.jsx
     public/
       index.html
     webpack.config.js
   
   remote-app/
     src/
       Button.jsx
       index.js
     public/
       index.html
     webpack.config.js

3. Configure Remote App

   const HtmlWebpackPlugin = require('html-webpack-plugin');
   const { ModuleFederationPlugin } = require('webpack').container;
   
   module.exports = {
     mode: 'development',
     devServer: { port: 3001 },
     entry: './src/index.js',
     plugins: [
       new ModuleFederationPlugin({
         name: 'remote_app',
         filename: 'remoteEntry.js',
         exposes: { './Button': './src/Button.jsx' },
         shared: { react: { singleton: true }, 'react-dom': { singleton: true } }
       }),
       new HtmlWebpackPlugin({ template: './public/index.html' })
     ]
   };

4. Configure Host App

   const HtmlWebpackPlugin = require('html-webpack-plugin');
   const { ModuleFederationPlugin } = require('webpack').container;
   
   module.exports = {
     mode: 'development',
     devServer: { port: 3000 },
     entry: './src/index.js',
     plugins: [
       new ModuleFederationPlugin({
         name: 'host_app',
         remotes: {
           remote_app: 'remote_app@http://localhost:3001/remoteEntry.js'
         },
         shared: { react: { singleton: true }, 'react-dom': { singleton: true } }
       }),
       new HtmlWebpackPlugin({ template: './public/index.html' })
     ]
   };

5. Use Remote Component inside Host

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

6. Connect Host & Remote
   • Remote runs on port 3001
   • Host runs on port 3000
   • Host loads Remote via:
     

     remotes: {
       remote_app: 'remote_app@http://localhost:3001/remoteEntry.js'
     }

7. Beginner Roadmap
   • Create Host + Remote
   • Install Webpack
   • Add Module Federation configs
   • Expose components in Remote
   • Import them in Host
   • Run both servers

Run Commands (Before & After Webpack Setup)

Before Webpack (Normal React App)

{
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }
}

Run with:

npm start
npm run build

But microfrontends cannot run without Webpack Module Federation, so this stage is only for understanding.

After Adding Webpack + Module Federation

{
  "scripts": {
    "start": "webpack serve --mode development --open",
    "build": "webpack --mode production"
  }
}

Run with:

npm start
npm run build

Once you configure webpack.config.js, you replace CRA scripts with Webpack scripts.

🚀 npm start vs npm run build — What’s the Difference in Microfrontends?

When working with React + Webpack Module Federation, you’ll often use two important commands:

npm start           // starts webpack-dev-server
npm run build       // builds your microfrontend

They look simple, but they play very different roles, especially in MicroFrontend architecture. 👇

🧪 npm start → Development Mode (Webpack Dev Server)

npm start is used while developing your microfrontend.

• Runs your app locally on a dev server
• Watches file changes automatically
• Reloads browser instantly (Hot Module Replacement)
• Generates readable, unminified code
• Supports faster debugging with source maps

💡 Use it when writing and testing features.

📍 No build folder is created when you run npm start.

🏗️ npm run build → Production Build (Optimized Output)

npm run build is used when your code is ready for deployment or integration with a host app.

• Creates final build files inside dist/ or build/
• Minifies & optimizes your code for faster loading
• Removes development-only logs and source maps (optional)
• Generates static assets (JS, CSS, images)

💡 Use it when you want to deploy or expose the microfrontend to the Host.

📍 These build files are consumed by the host application via remoteEntry.js.

📌 Quick Comparison Table

🎯 Why It Matters in Microfrontends?

In a MicroFrontend world:

• During development, each team starts their own MicroFrontend individually using npm start.
• When ready, each team builds their microfrontend using npm run build, and the host app can load it via remoteEntry.js.

This enables autonomous development with interdependent deployment. 💡

💬 Final Thought

Think of it like this:

• 🛠 npm start is your workshop — you build, fix, and experiment.
• 🚀 npm run build is your delivery — you pack everything clean and optimized for production.