Implementing Micro Frontends in React with Webpack’s Module Federation: A Step-by-Step Guide

Learn how to implement micro frontends in React with Webpack's Module Federation. This step-by-step guide covers everything you need to know to break your monolithic frontend into modular, scalable applications.

We're aiming to create a micro frontend architecture where:

• Host App: The main application, providing the overall structure.

• Remote App: A header navbar component, dynamically loaded into the host app.

Technology Stack:

• Host App and Remote App: React and TypeScript

Integration Method:

• Module Federation: A Webpack plugin that allows dynamic loading of remote modules.

Step-by-Step Guide

1. Set Up the Project

Host App:

npx create-react-app host-app --template typescript

Remote App:

npx create-react-app remote-app --template typescript

2. Configure Webpack for Module Federation

Host App (webpack.config.js):

const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');

module.exports = {
  // ... other Webpack configurations
  plugins: [
    new ModuleFederationPlugin({
      name: 'hostApp',
      filename: 'remoteEntry.js',
      remotes: {
        remoteApp: 'remoteApp@http://localhost:8081/remoteEntry.js',
      },
      shared: ['react', 'react-dom'],
    }),
  ],
};

Remote App (webpack.config.js):

const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');

module.exports = {
  // ... other Webpack configurations
  plugins: [
    new ModuleFederationPlugin({
      name: 'remoteApp',
      filename: 'remoteEntry.js',
      exposes: {
        './HeaderNavbar': './src/HeaderNavbar',
      },
      shared: ['react', 'react-dom'],
    }),
  ],
};

3. Create the Remote Component (HeaderNavbar)

Remote App (src/HeaderNavbar.tsx):

import React from 'react';

const HeaderNavbar = () => {
  return (
    <header>
      <h1>Remote Header Navbar</h1>
      {/* Your navbar content here */}
    </header>
  );
};

export default HeaderNavbar;

4. Consume the Remote Component in the Host App

Host App (src/App.tsx):

import React, { lazy, Suspense } from 'react';

const RemoteHeaderNavbar = lazy(() => import('remoteApp/HeaderNavbar'));

function App() {
  return (
    <div className="App">
      <Suspense fallback={<div>Loading...</div>}>
        <RemoteHeaderNavbar />
      </Suspense>
      {/* Rest of your host app's content */}
    </div>
  );
}

export default App;

5. Run the Applications

Start both the host app and remote app:

# In the host app directory
npm start

# In the remote app directory
npm start

The host app will load the HeaderNavbar component from the remote app, and it will be displayed in the host app's layout.

Key Points:

• Shared Dependencies: Ensure shared dependencies (like React and React-DOM) are configured correctly in both Webpack configurations.

• Remote Entry Point: The remoteEntry.js file acts as the entry point for the remote module.

• Dynamic Loading: The lazy and Suspense components in React are used to dynamically load the remote component.

• Error Handling: Implement error handling mechanisms to gracefully handle potential failures during remote module loading.

By following these steps, you can effectively create a micro frontend architecture using React and TypeScript, enabling independent development and deployment of features.

Also do not forget to Subscribe to our newsletter and get exclusive tech tips and insights delivered straight to your inbox.