Introduction

Microfrontends are an architecture that breaks down a monolithic frontend application into smaller, independent applications. Each microfrontend can be developed, deployed, and maintained by different teams, even using different frameworks.

In this tutorial, I'll show you how to build a microfrontend application using React and Vue with Module Federation, and how to make them communicate with each other using RxJS. This is an intermediate topic because it requires understanding build tools, application architecture, and communication between independent components.

Why Microfrontends?

Microfrontends offer several advantages:

Team Independence: Each team can work on their own microfrontend without affecting others
Technology Flexibility: Different microfrontends can use different frameworks (React, Vue, Angular, etc.)
Independent Deployments: You can deploy each microfrontend separately
Scalability: Larger teams can work in parallel without conflicts

Our Application Architecture

We're going to build an application with this structure:

Host (Shell): The container application that orchestrates everything
React MFE: A microfrontend built with React
Vue MFE: A microfrontend built with Vue
Shared State: Shared logic using RxJS for communication

Initial Project Setup

We'll use a monorepo to keep everything organized. You can use pnpm workspaces, Yarn workspaces, or npm workspaces.

Project Structure

microfrontend-project/
├── host/              # Shell/host application
├── mfe-react/         # React microfrontend
├── mfe-vue/           # Vue microfrontend
└── shared/            # Shared code
    ├── ui/            # Shared UI components
    └── state/         # Shared state with RxJS

Configure the Monorepo

Create a package.json at the root:

{
  "name": "microfrontend-project",
  "private": true,
  "workspaces": [
    "host",
    "mfe-react",
    "mfe-vue",
    "shared/*"
  ]
}

Configure the React Microfrontend

First, let's create the React microfrontend.

1. Create the React Project with Vite

cd mfe-react
npm create vite@latest . -- --template react-ts
npm install

Install Module Federation plugin:

npm install @module-federation/vite --save-dev

Install RxJS for communication:

npm install rxjs

2. Configure Vite with Module Federation

Update vite.config.ts:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { federation } from '@module-federation/vite';

export default defineConfig({
  server: {
    port: 3001,
    cors: true,
  },
  plugins: [
    react(),
    federation({
      name: 'reactRemote',
      filename: 'remoteEntry.js',
      remotes: {
        host: {
          type: 'module',
          name: 'host',
          entry: 'http://localhost:3000/remoteEntry.js',
        },
      },
      exposes: {
        './Widget': './src/Widget.tsx',
      },
      shared: {
        react: {
          singleton: true,
          requiredVersion: '^18.0.0',
        },
        'react-dom': {
          singleton: true,
          requiredVersion: '^18.0.0',
        },
        rxjs: {
          singleton: true,
        },
      },
    }),
  ],
  build: {
    target: 'esnext',
    minify: false,
    cssCodeSplit: false,
  },
});

3. Create the React Component

Create src/Widget.tsx:

import React, { useEffect, useState } from 'react';
import { eventBus } from 'host/eventBus';

export const Widget: React.FC = () => {
  const [message, setMessage] = useState('');

  useEffect(() => {
    const subscription = eventBus.subscribe((event) => {
      if (event.type === 'VUE_MESSAGE') {
        setMessage(`Message from Vue: ${event.payload}`);
      }
    });

    return () => subscription.unsubscribe();
  }, []);

  const sendToVue = () => {
    eventBus.next({
      type: 'REACT_MESSAGE',
      payload: 'Hello from React!',
    });
  };

  return (
    <div style={{ padding: '20px', border: '2px solid #61dafb', borderRadius: '8px' }}>
      <h2>React Microfrontend</h2>
      <p>This is a React component loaded dynamically</p>
      {message && <p style={{ color: 'green' }}>{message}</p>}
      <button onClick={sendToVue} style={{ padding: '10px 20px', marginTop: '10px' }}>
        Send message to Vue
      </button>
    </div>
  );
};

Configure the Vue Microfrontend

Now let's create the Vue microfrontend.

1. Create the Vue Project with Vite

cd mfe-vue
npm create vite@latest . -- --template vue-ts
npm install

Install Module Federation plugin:

npm install @module-federation/vite --save-dev

Install RxJS for communication:

npm install rxjs

2. Configure Vite with Module Federation

Update vite.config.ts:

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { federation } from '@module-federation/vite';

export default defineConfig({
  server: {
    port: 3002,
    cors: true,
  },
  plugins: [
    vue(),
    federation({
      name: 'vueRemote',
      filename: 'remoteEntry.js',
      remotes: {
        host: {
          type: 'module',
          name: 'host',
          entry: 'http://localhost:3000/remoteEntry.js',
        },
      },
      exposes: {
        './Widget': './src/Widget.vue',
      },
      shared: {
        vue: {
          singleton: true,
          requiredVersion: '^3.0.0',
        },
        rxjs: {
          singleton: true,
        },
      },
    }),
  ],
  build: {
    target: 'esnext',
    minify: false,
    cssCodeSplit: false,
  },
});

3. Create the Vue Component

Create src/Widget.vue:

<template>
  <div class="vue-widget">
    <h2>Vue Microfrontend</h2>
    <p>This is a Vue component loaded dynamically</p>
    <p v-if="message" class="message">{{ message }}</p>
    <button @click="sendToReact" class="btn">Send message to React</button>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';
import { eventBus } from 'host/eventBus';
import type { Subscription } from 'rxjs';

const message = ref('');

let subscription: Subscription | null = null;

onMounted(() => {
  subscription = eventBus.subscribe((event) => {
    if (event.type === 'REACT_MESSAGE') {
      message.value = `Message from React: ${event.payload}`;
    }
  });
});

onUnmounted(() => {
  if (subscription) {
    subscription.unsubscribe();
  }
});

const sendToReact = () => {
  eventBus.next({
    type: 'VUE_MESSAGE',
    payload: 'Hello from Vue!',
  });
};
</script>

<style scoped>
.vue-widget {
  padding: 20px;
  border: 2px solid #42b983;
  border-radius: 8px;
}

.message {
  color: green;
  margin: 10px 0;
}

.btn {
  padding: 10px 20px;
  margin-top: 10px;
  background-color: #42b983;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.btn:hover {
  background-color: #35a372;
}
</style>

Configure Shared State with RxJS

Let's create a shared service using RxJS so microfrontends can communicate.

1. Create the Shared Package

cd shared/state
npm init -y
npm install rxjs

2. Create the Event Bus

Create src/eventBus.ts:

import { Subject } from 'rxjs';

export interface MicrofrontendEvent {
  type: string;
  payload?: any;
  source?: string;
  timestamp?: number;
}

export const eventBus = new Subject<MicrofrontendEvent>();

// Helper to emit events with metadata
export const emitEvent = (type: string, payload?: any) => {
  eventBus.next({
    type,
    payload,
    timestamp: Date.now(),
  });
};

// Helper to subscribe to specific events
export const subscribeToEvent = (
  eventType: string,
  callback: (payload?: any) => void
) => {
  return eventBus.subscribe((event) => {
    if (event.type === eventType) {
      callback(event.payload);
    }
  });
};

3. Export from the Package

In the package.json of the shared/state package:

{
  "name": "shared-state",
  "version": "1.0.0",
  "main": "./src/eventBus.ts",
  "exports": {
    ".": "./src/eventBus.ts"
  }
}

Configure the Host Application

The host application orchestrates everything and loads the microfrontends.

1. Create the Host Project with Vite

cd host
npm create vite@latest . -- --template react-ts
npm install

Install React Router, Vue, and Module Federation plugin:

npm install react-router-dom vue
npm install @module-federation/vite --save-dev

Note: We install Vue in the host because we need createApp to render the Vue component in the wrapper.

2. Configure Vite with Module Federation

Update vite.config.ts:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { federation } from '@module-federation/vite';

export default defineConfig({
  server: {
    port: 3000,
  },
  plugins: [
    react(),
    federation({
      name: 'host',
      filename: 'remoteEntry.js',
      remotes: {
        reactRemote: {
          type: 'module',
          name: 'reactRemote',
          entry: 'http://localhost:3001/remoteEntry.js',
        },
        vueRemote: {
          type: 'module',
          name: 'vueRemote',
          entry: 'http://localhost:3002/remoteEntry.js',
        },
      },
      exposes: {
        './eventBus': '../shared/state/src/eventBus',
      },
      shared: {
        react: {
          singleton: true,
          requiredVersion: '^18.0.0',
        },
        'react-dom': {
          singleton: true,
          requiredVersion: '^18.0.0',
        },
        vue: {
          singleton: true,
          requiredVersion: '^3.0.0',
        },
        rxjs: {
          singleton: true,
        },
      },
    }),
  ],
  build: {
    target: 'esnext',
  },
});

3. Create the Host Component that Loads Remotes

Create src/App.tsx:

import React, { Suspense, lazy } from 'react';
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';
import { VueWidget } from './VueWrapper';

// Lazy load microfrontends
const ReactWidget = lazy(() => 
  import('reactRemote/Widget').then(module => ({ default: module.Widget }))
);

const App: React.FC = () => {
  return (
    <BrowserRouter>
      <div style={{ padding: '20px' }}>
        <nav style={{ marginBottom: '20px', borderBottom: '1px solid #ccc', paddingBottom: '10px' }}>
          <Link to="/" style={{ marginRight: '20px' }}>Home</Link>
          <Link to="/test" style={{ marginRight: '20px' }}>Test Communication</Link>
          <Link to="/react" style={{ marginRight: '20px' }}>React MFE</Link>
          <Link to="/vue">Vue MFE</Link>
        </nav>

        <Suspense fallback={<div>Loading...</div>}>
          <Routes>
            <Route path="/" element={<div><h1>Host Application</h1><p>Navigate to microfrontends using the menu</p></div>} />
            <Route path="/test" element={
              <div style={{ display: 'flex', gap: '20px', flexWrap: 'wrap' }}>
                <div style={{ flex: '1', minWidth: '300px' }}>
                  <h2>React Microfrontend</h2>
                  <ReactWidget />
                </div>
                <div style={{ flex: '1', minWidth: '300px' }}>
                  <h2>Vue Microfrontend</h2>
                  <VueWidget />
                </div>
              </div>
            } />
            <Route path="/react" element={<ReactWidget />} />
            <Route path="/vue" element={<VueWidget />} />
          </Routes>
        </Suspense>
      </div>
    </BrowserRouter>
  );
};

export default App;

Note: The /test route shows both widgets on the same page so you can test communication between them in real-time.

4. Create a Wrapper for the Vue Component

Since Vue needs to be rendered specially in React, create src/VueWrapper.tsx:

import React, { useEffect, useRef } from 'react';
import { createApp } from 'vue';

export const VueWidget: React.FC = () => {
  const containerRef = useRef<HTMLDivElement>(null);
  const appRef = useRef<any>(null);

  useEffect(() => {
    if (containerRef.current) {
      // Load Vue component dynamically
      import('vueRemote/Widget').then((module) => {
        const Widget = module.default || module.Widget;
        appRef.current = createApp(Widget);
        appRef.current.mount(containerRef.current!);
      });
      
      return () => {
        if (appRef.current) {
          appRef.current.unmount();
        }
      };
    }
  }, []);

  return <div ref={containerRef} />;
};

Important note: You need to install Vue in the host project to use createApp:

npm install vue

Running the Application

To run the entire project:

Terminal 1 - React MFE (must start first):
```
cd mfe-react
npm run dev
```
Terminal 2 - Vue MFE:
```
cd mfe-vue
npm run dev
```
Terminal 3 - Host:
```
cd host
npm run dev
```

Open http://localhost:3000 and you should see the host application with navigation to both microfrontends.

Testing Communication

To test that communication between microfrontends works, we need to see both widgets on the same page.

How to test:

Start all servers (React MFE, Vue MFE, and Host)
Open http://localhost:3000/test in your browser
You should see both widgets side by side
Click "Send message to Vue" in the React widget
You should see the message appear in the Vue widget
Click "Send message to React" in the Vue widget
You should see the message appear in the React widget

If messages appear correctly, communication between microfrontends is working! 🎉

Communication Between Microfrontends with RxJS

We've already implemented basic communication. Let's expand it with more functionality:

Event Types

Define event types in shared/state/src/eventTypes.ts:

export const EventTypes = {
  USER_LOGGED_IN: 'USER_LOGGED_IN',
  USER_LOGGED_OUT: 'USER_LOGGED_OUT',
  CART_UPDATED: 'CART_UPDATED',
  THEME_CHANGED: 'THEME_CHANGED',
  NAVIGATION: 'NAVIGATION',
  REACT_MESSAGE: 'REACT_MESSAGE',
  VUE_MESSAGE: 'VUE_MESSAGE',
} as const;

Example: Synchronize User State

In the React MFE:

import { subscribeToEvent, emitEvent } from 'shared/state/eventBus';
import { EventTypes } from 'shared/state/eventTypes';

useEffect(() => {
  const sub = subscribeToEvent(EventTypes.USER_LOGGED_IN, (user) => {
    setCurrentUser(user);
  });

  return () => sub.unsubscribe();
}, []);

const handleLogin = (user: User) => {
  emitEvent(EventTypes.USER_LOGGED_IN, user);
};

In the Vue MFE:

import { subscribeToEvent, emitEvent } from 'shared/state/eventBus';
import { EventTypes } from 'shared/state/eventTypes';

onMounted(() => {
  subscription = subscribeToEvent(EventTypes.USER_LOGGED_IN, (user) => {
    currentUser.value = user;
  });
});

Best Practices

1. Error Handling

Always wrap remote loading in error boundaries:

class RemoteErrorBoundary extends React.Component {
  state = { hasError: false };

  static getDerivedStateFromError() {
    return { hasError: true };
  }

  render() {
    if (this.state.hasError) {
      return <div>Error loading microfrontend</div>;
    }
    return this.props.children;
  }
}

2. Shared Dependency Versioning

Use exact versions or strict ranges for shared dependencies:

shared: {
  react: {
    singleton: true,
    requiredVersion: '^18.2.0',
    strictVersion: true, // Fails if version doesn't match
  },
}

3. Lazy Loading

Always use lazy loading for remotes to improve initial performance:

const ReactWidget = lazy(() => 
  import('reactRemote/Widget').then(module => ({ default: module.Widget }))
);

4. Independent Testing

Each microfrontend should be able to run independently for development and testing.

5. Isolated Styles

Use CSS Modules, Styled Components, or scoped styles to avoid style conflicts between microfrontends.

Deployment

For production:

Build each microfrontend:

cd mfe-react && npm run build
cd mfe-vue && npm run build
cd host && npm run build

Update URLs in the host to point to deployed remotes:

remotes: {
  reactRemote: 'reactRemote@https://your-cdn.com/react/remoteEntry.js',
  vueRemote: 'vueRemote@https://your-cdn.com/vue/remoteEntry.js',
}

Deploy each application on its own server/CDN

Troubleshooting Common Issues

Error: "Failed to resolve import reactRemote/Widget"

This error occurs when the host cannot find the remote. Check the following:

The remote must be running first: Make sure the React microfrontend is running on port 3001 before starting the host:
```
cd mfe-react
npm run dev
# Wait to see "ready in" or "Local: http://localhost:3001"
```
Verify remoteEntry.js is available: Open http://localhost:3001/remoteEntry.js in your browser. You should see JavaScript code, not a 404.
Check Vite configuration: Make sure the exposes in the remote points to the correct file:
```
exposes: {
  './Widget': './src/Widget.tsx',  // Include the .tsx extension
}
```
Verify the component is exported correctly: In src/Widget.tsx, make sure you have:
```
export const Widget: React.FC = () => {
  // ...
};
```
Check host configuration: In the host vite.config.ts, verify the remote is configured correctly:
```
remotes: {
  reactRemote: 'reactRemote@http://localhost:3001/remoteEntry.js',
}
```

Error: "Cannot find module" or import issues

If you have issues with shared modules:

Verify that React, React-DOM, and other shared dependency versions are compatible
Make sure singleton: true is configured for critical dependencies
Restart all development servers after changing vite configuration

Component not rendering

If the component loads but doesn't display:

Verify you're using Suspense to wrap lazy-loaded components
Check the browser console for runtime errors
Make sure the component is correctly exported and the path in exposes matches

Conclusion

Microfrontends with Module Federation allow you to build large, complex applications by breaking them into more manageable pieces. The combination of React and Vue in the same application, communicating through RxJS, demonstrates the flexibility of this architecture.

Remember:

Keep shared dependencies as singletons
Use RxJS or similar for communication between MFEs
Implement error boundaries and fallbacks
Test each MFE independently
Document shared APIs and events

Do you have questions about the implementation? Leave me a comment and I'll help you.

Was this resource helpful?