> For the complete documentation index, see [llms.txt](https://docs.glitchfy.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.glitchfy.com/getting-started/micro-frontend-module-federation/a-step-by-step-guide.md).

# A Step-by-Step Guide

Below is a detailed guide to implement the architecture shown in your diagram using **React**, **Module Federation**, and the **latest MUI library**.

**1. Project Setup**

1. **Create a Monorepo (optional)**\
   Use **Nx**, **Turborepo**, or **Lerna** to organize microfrontend projects in a monorepo.

   ```bash
   bashCopy codenpx create-nx-workspace super-app
   ```
2. **Create Microfrontend Projects**\
   For each microfrontend (A, B, C):

   ```bash
   bashCopy codenpx create-react-app microfrontend-a --template typescript
   npx create-react-app microfrontend-b --template typescript
   npx create-react-app microfrontend-c --template typescript
   ```
3. **Install Dependencies**\
   Install the latest MUI library for all microfrontends.

   ```bash
   bashCopy codenpm install @mui/material @emotion/react @emotion/styled
   ```

***

**2. Configure Module Federation**

1. **Set Up Webpack in Microfrontends**\
   Replace the default configuration with **Webpack 5** for Module Federation.\
   Install dependencies:

   ```bash
   bashCopy codenpm install webpack webpack-cli webpack-dev-server webpack-merge @module-federation/webpack-federation-plugin
   ```
2. **Define Module Federation in Each Microfrontend**\
   Update the `webpack.config.js` files in all projects:

   ```javascript
   javascriptCopy codeconst ModuleFederationPlugin = require("@module-federation/webpack-federation-plugin");

   module.exports = {
     mode: "development",
     devServer: { port: 3001 }, // Replace with unique port for each app
     plugins: [
       new ModuleFederationPlugin({
         name: "microfrontendA", // Change for each app
         filename: "remoteEntry.js",
         exposes: {
           "./Widget": "./src/Widget", // Component to expose
         },
         shared: { react: { singleton: true }, "react-dom": { singleton: true } },
       }),
     ],
   };
   ```
3. **Host and Consume Microfrontends**
   * **Host App (Container)**: Add an `ModuleFederationPlugin` and consume exposed components:

     ```javascript
     javascriptCopy codenew ModuleFederationPlugin({
       name: "container",
       remotes: {
         microfrontendA: "microfrontendA@http://localhost:3001/remoteEntry.js",
         microfrontendB: "microfrontendB@http://localhost:3002/remoteEntry.js",
         microfrontendC: "microfrontendC@http://localhost:3003/remoteEntry.js",
       },
     });
     ```
   * Import widgets:

     ```javascript
     javascriptCopy codeimport WidgetA from "microfrontendA/Widget";
     import WidgetB from "microfrontendB/Widget";
     import WidgetC from "microfrontendC/Widget";
     ```

***

**3. Build a Shared UI with MUI**

1. **Create a Shared UI Library**\
   Create a shared library for reusable MUI components (e.g., buttons, layouts).

   ```bash
   bashCopy codenpx create-react-app shared-ui --template typescript
   npm install @mui/material @emotion/react @emotion/styled
   ```
2. **Export Shared Components**\
   Define common components:

   ```tsx
   tsxCopy code// Button.tsx
   import { Button } from "@mui/material";

   export const CustomButton = ({ label }: { label: string }) => (
     <Button variant="contained" color="primary">
       {label}
     </Button>
   );
   ```
3. **Expose Library via Module Federation**\
   Add the shared library to the `ModuleFederationPlugin`:

   ```javascript
   javascriptCopy codeexposes: {
     "./CustomButton": "./src/Button",
   },
   ```

***

**4. Navigation Between Microfrontends**

1. Install **React Router** in the container app and all microfrontends:

   ```bash
   bashCopy codenpm install react-router-dom
   ```
2. Define routes for microfrontends in the container:

   ```tsx
   tsxCopy codeimport { BrowserRouter as Router, Routes, Route } from "react-router-dom";

   const App = () => (
     <Router>
       <Routes>
         <Route path="/microfrontend-a" element={<WidgetA />} />
         <Route path="/microfrontend-b" element={<WidgetB />} />
         <Route path="/microfrontend-c" element={<WidgetC />} />
       </Routes>
     </Router>
   );
   ```

***

**5. Testing and Development**

1. **Run Microfrontends Locally**\
   Start each microfrontend on a separate port:

   ```bash
   bashCopy codenpm start
   ```
2. **Integrate with the Host App**\
   Run the host app and ensure microfrontends are rendered correctly.

***

**6. Production Deployment**

1. **Build Microfrontends**

   ```bash
   bashCopy codenpm run build
   ```
2. **Deploy Each Microfrontend**\
   Host each microfrontend (e.g., S3, Netlify, Vercel) and serve the `remoteEntry.js` file.
3. **Integrate with a CDN**\
   Update the container app to point to CDN URLs for microfrontends.

***

**7. Bonus: State Management Across Microfrontends**

Use a global state management library like **Redux** or **React Query**. Share the state across microfrontends via Module Federation.

***

**8. Final Touches**

* Add theming support using **MUI's ThemeProvider**.
* Optimize performance using lazy loading for microfrontends:

  ```tsx
  tsxCopy codeconst WidgetA = React.lazy(() => import("microfrontendA/Widget"));
  ```

***