How to build microfrontends with React and Vite

A few months ago, I hit a wall. I was working on a microfrontends with React application that had grown much larger than planned. Every team kept adding features to the same codebase, and things started to feel unstable.
A small change to the UI in one part of the app could break something completely unrelated in another part. Builds took a long time, merge conflicts occurred frequently, and releasing updates required way more coordination than it should have.
After fixing a bug that wasn’t even related to my work, I thought, “Why does this whole app feel like it could break at any moment?” That’s when I started to consider microfrontends seriously.

Where microfrontends entered the picture

If you're new to the concept, I recommend starting with this blog introducing microfrontends. It’s a good place to start before jumping into a module federation React or React + Vite setup.

I had heard about microfrontends before, but I always thought they were just for enterprises—something you read about but never actually use. But this time, the problem felt real enough to give it a try. The idea was simple and actually made a lot of sense:

• Split a single large frontend into smaller apps.
• Let teams own their part end-to-end.
• Deploy independently.
• And then connect everything in a host app.

I wanted to keep things straightforward, so I gave this approach a shot with React and Vite, using Vite module federation.

At first, I just saw this as an experiment, but it ended up fixing more problems than I thought it would.

Step-by-step setup of microfrontends with React, Vite, and Module Federation

I started with a basic setup:

• One remote app that exposes components
• One host app that consumes them

Nothing complicated, just enough to see if the idea would work.

Step 1: Create a Vite React app

npm create vite@latest remote-app-1 --template react
npm create vite@latest host-app --template react

Each app had its own port and its own repository. That separation alone already felt like progress.

Step 2: Install Vite module federation

I used the Vite module federation plugin.

npm install @originjs/vite-plugin-federation

Installed this in both apps.

Step 3: Configure the remote app using module federation with Vite

This app exposes a component using Vite module federation.

vite.config.js

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

export default defineConfig({
  plugins: [
    react(),
    federation({
      name: 'remote_app_1',
      filename: 'remoteEntry.js',
      exposes: {
        './Header': './src/Header.jsx',
      },
      shared: ['react', 'react-dom'],
    }),
  ],
  server: {
    port: 5001,
  },
  build: {
    target: 'esnext',
  },
})

A simple component to expose:

// src/Header.jsx
export default function Header() {
 return <h1>Remote App Header</h1>
}

Then I started the app:

npm run dev

Step 4: Configure the host app with module federation

The host just needs to know where the remote lives.

vite.config.js

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

export default defineConfig({
  plugins: [
    react(),
    federation({
      remotes: {
        remote_app_1: 'http://localhost:5001/dist/assets/remoteEntry.js',
      },
      shared: ['react', 'react-dom'],
    }),
  ],
  server: {
    port: 5000,
  },
  build: {
    target: 'esnext',
  },
})

Step 5: Use the remote component

// src/App.jsx
import React, { Suspense } from 'react'

const RemoteHeader = React.lazy(() => import('remote_app_1/Header'))

function App() {
  return (
    <div>
      <Suspense fallback={<h2>Loading...</h2>}>
        <RemoteHeader />
      </Suspense>
    </div>
  )
}

export default App

Step 6: Perform npm run build in remote app

I remember refreshing the browser and seeing the remote header load inside the host app. That moment felt pretty satisfying.

Key benefits of microfrontends with React and Vite

Once this microfrontends with React setup was in place, many things started to feel easier.

• Teams could work independently without constantly stepping on each other’s code.
• Smaller apps meant faster builds and quicker feedback.
• Deployments stopped being big, coordinated events.
• Ownership became clear — if something broke, we knew exactly where to look.

Most importantly, the frontend no longer felt fragile.

When to use microfrontends with React, Vite, and Module Federation

You don’t need microfrontends right away. But if your React app is growing fast and getting hard to manage, they’re worth a look. React and Vite made the setup easy, and module federation handled the tricky parts without adding much complexity. For me, it wasn’t just about the architecture. It was about making the project and my daily work less stressful. If you’re facing similar issues, this approach could help you too.

If you’re thinking about scaling this approach beyond a proof of concept, it helps to learn from teams that have already done it in production. Our microfrontend experts at

Opcito work hands-on with React, Vite, and module federation architectures at scale. You can contact our microfrontend experts to discuss what this setup would look like for your application and teams.