Micro‑Frontend Architecture with Webpack Module Federation – Part 1

Background – A React admin panel for Trendyol GO initially lived in a single repository. As the team grew, they adopted Domain‑Driven Design and needed a micro‑frontend structure that allowed each team to develop independently.

Why Webpack Module Federation?

The team evaluated many alternatives and chose Module Federation because it incurs no maintenance or learning cost, requires minimal migration effort, avoids full rewrites, satisfies all build‑time requirements, needs no runtime work, shares dependencies cheaply, keeps libraries/frameworks independent, and provides loose coupling between the shell and micro apps.

How to Use Module Federation

Three integration forms are described:

Domain – multiple micro‑frontends are hosted on separate domains and managed by a shell app.

Widget – individual components can be exposed from any app and consumed by others.

Hybrid – a combination of domain and widget approaches.

Getting Started

Step 1: Initialize the projects

npx create-react-app shell
cd shell
yarn add webpack webpack-cli webpack-server html-webpack-plugin css-loader style-loader babel-loader webpack-dev-server

Step 2: Configure Webpack

const HtmlWebpackPlugin = require('html-webpack-plugin');
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
const deps = require('./package.json').dependencies;

module.exports = {
  mode: 'development',
  devServer: { port: 3001 },
  module: {
    rules: [
      { test: /.js?$/, exclude: /node_modules/, loader: 'babel-loader', options: { presets: ['@babel/preset-env', '@babel/preset-react'] } },
      { test: /.css$/i, use: ['style-loader', 'css-loader'] }
    ]
  },
  plugins: [
    new ModuleFederationPlugin({
      name: 'SHELL',
      filename: 'remoteEntry.js',
      shared: [{ ...deps, react: { requiredVersion: deps.react, singleton: true }, 'react-dom': { requiredVersion: deps['react-dom'], singleton: true } }]
    }),
    new HtmlWebpackPlugin({ template: './public/index.html' })
  ]
};

The configuration options are explained: name identifies the app, filename is the entry file for remote consumption, and shared ensures React and React‑DOM are singletons across apps.

Duplicate the same setup for product and user projects, adjusting ports and the name field.

Step 3: Create Simple Apps

// app.js
import React from 'react';
import './App.css';
const App = () => (
Hi from Shell App
);
export default App;

/* app.css */
.shell-app {
  margin: 5px;
  text-align: center;
  background: #FFF3E0;
  border: 1px dashed #FFB74D;
  border-radius: 5px;
  color: #FFB74D;
}

Run each project with yarn webpack server to start the micro‑frontend environment.

Step 4: Integrate Apps

Expose components from product and consume them in the shell using React.lazy and React.Suspense :

import React from 'react';
import './App.css';

const ProductApp = React.lazy(() => import('PRODUCT/App'));
const App = () => (
Hi from Shell App
);
export default App;

Routing is handled by the shell, delegating sub‑routes to each micro‑frontend, while shared hooks (e.g., useToastr ) are exposed via the shared array.

Hot Reload

To enable live reload across federated modules, the @module-federation/fmr plugin is added to the Webpack config.

Deployment

Dynamic publicPath is set at runtime using a small script ( setPublicPath.js ) and the External Remotes Plugin, allowing each environment to provide its own URLs via window.MF_A_URL and window.MF_B_URL .

With these steps the team achieved a stable micro‑frontend architecture where each team can develop, test, and deploy independently while sharing common dependencies and state.