• Overview
• Project Structure
• Setup
• Running the App
• State Management
• Micro Frontend Communication
• Useful Links

This is a PoC project demonstrating a Micro Frontend architecture where Vue and React apps coexist in a single host using Webpack Module Federation.

• Host: Integrates multiple micro frontends (MFEs).
• MFEs:
  • React: Navbar component with links and a counter state.
  • Vue: Interactive dashboard with buttons and state-driven actions.

root/
├─ host/
│ ├─ src/
│ │ ├─ bootstrap.ts
│ │ ├─ store/
│ │ └─ index.html
│ ├─ package.json
│ └─ webpack.config.js
│
├─ mfe-navbar/
│ ├─ src/
│ │ ├─ bootstrap.tsx
│ │ ├─ components/
│ │ └─ index.html
│ ├─ package.json
│ └─ webpack.config.js
│
├─ mfe-dashboard/
│ ├─ src/
│ │ ├─ main.ts
│ │ ├─ app/
│ │ │ ├─ App.vue
│ │ │ └─ components/
│ │ └─ assets/
│ ├─ package.json
│ └─ webpack.config.js

1. Clone the repository:

git clone https://github.com/Asega1996/mfe-poc.git

2. Install dependencies for each project:

cd host
npm install

cd ../mfe-navbar
npm install

cd ../mfe-dashboard
npm install

3. Make sure all MFEs and host use compatible versions of React, ReactDOM, Vue, Redux Toolkit, and React Redux.

To do this, it may be necessary to review the package.json files for each project.

You should run each sequence on a different terminal.

1. Start the Navbar MFE:

cd mfe-navbar
npm start

2. Start the Dashboard MFE:

cd mfe-dashboard
npm start

3. Start the Host application:

cd host
npm start

4. Open your browser at http://localhost:3000 (default port), you can change the ports checking de /config directory on each project.

• The host contains the Redux main store, defined on host/store/*
• For the use of components in standalone mode (simulating different development equipment), a copy of the state defined for the host has been included in each MFE.

• Global state management is configured with Redux.
• Shared state is maintained via Redux Toolkit.
• The host injects the store into each MFE in the mount function usage.

• Module Federation (Webpack 5) – https://webpack.js.org/concepts/module-federation/
  Learn how Webpack 5 enables multiple frontends to share modules at runtime.

• Redux Toolkit – https://redux-toolkit.js.org/
  Official documentation for Redux Toolkit, including slices, actions, and store configuration.

• React – https://reactjs.org/
  Official React documentation.

• React Redux – https://react-redux.js.org/
  Guides for connecting React components to a Redux store using Provider and hooks.

• Vue 3 – https://vuejs.org/
  Official Vue 3 guide and API documentation.

• TypeScript – https://www.typescriptlang.org/
  Learn about TypeScript types, modules, and tooling.

• SCSS / Sass – https://sass-lang.com/
  Styling guide for writing SCSS/Sass efficiently.

• React Icons – https://react-icons.github.io/react-icons/
  Library for including SVG icons in React projects.