As applications grow larger, frontend codebases often become difficult to maintain. Multiple teams working on the same frontend repository can slow down development and deployments.

This is where Microfrontend architecture comes in.

Microfrontends allow us to break a large frontend application into smaller independent applications, similar to how microservices work in the backend.

Today we will cover:

• What Microfrontends are
  
• Why they are useful
  
• How to implement them using React + Vite Module Federation

What is a Microfrontend?

A Microfrontend is an architectural pattern where a frontend application is divided into multiple smaller applications, each owned by a separate team.

Instead of one large application like this:

One React App

├ Products

├ Cart

├ Checkout

└ User Profile

We split it into independent applications:

Host App

├ Product App

├ Cart App

└ Profile App

Each application can be:

• Developed independently
  
• Deployed independently
  
• Maintained by different teams
  

This approach improves scalability and team productivity.

Why Use Microfrontends?

There are several advantages to using Microfrontends.

First, independent deployments. Teams can deploy updates without affecting the entire application.

Second, technology flexibility. One team can use React, another could use Vue or Angular.

Third, team scalability. Different teams can own different parts of the UI.

This architecture is widely used in large-scale enterprise applications.

Microfrontend Implementation 

There are several ways to implement Microfrontends.

Some common approaches include:

• Build-time integration
  
• Runtime integration
  
• Iframe-based integration
  

However, one of the most modern and efficient approaches is Module Federation.

Module Federation allows applications to share components dynamically at runtime.

Originally introduced in Webpack 5, it is now also supported in Vite using plugins.

Project Architecture

In our example, we will create two applications:

Host Application

Remote Application

The Host app acts as the main container.

The Remote app exposes components that the host can consume.

Example structure:

microfrontend-project

host-app

remote-app

The host will dynamically load components from the remote application.

Setup Microfrontend with Vite

Step 1: Create Vite React apps

First, create two React applications using Vite.

npm create vite@latest host-app

npm create vite@latest remote-app

Choose:

React

TypeScript or JavaScript

Then install dependencies.

npm install

Step 2: Install Module Federation plugin

Install the Vite federation plugin.

npm install @originjs/vite-plugin-federation

This plugin enables Module Federation support in Vite.

Step 3: Configure Remote App

Inside the remote app, update vite.config.js.

Example configuration:

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”,

     filename: “remoteEntry.js”,

     exposes: {

       “./Button”: “./src/Button.jsx”,

     },

     shared: [“react”, “react-dom”],

   }),

 ],

 server: {

   port: 5001,

 },

})

Here we are exposing a component called Button.

Step 4: Configure Host App

Next, configure the host app.

Update vite.config.js.

federation({

 name: “host_app”,

 remotes: {

   remote_app: “http://localhost:5001/assets/remoteEntry.js”,

 },

 shared: [“react”, “react-dom”],

})

Now the host application knows where to load the remote module from.

Import Remote Component

Inside the host app, we can dynamically import the remote component.

Example:

const RemoteButton = React.lazy(() => import(“remote_app/Button”))

Then render it using React Suspense.

<Suspense fallback=”Loading…”>

 <RemoteButton />

</Suspense>

Now the host application dynamically loads the remote component at runtime.

This is the core idea behind Module Federation.

When we run both applications:

npm run dev

The host application will load UI components from the remote application.

This means:

• Remote apps can be deployed independently
  
• Host apps can consume them dynamically
  
• Teams can work independently
  

Conclusion

To summarize:

Microfrontends allow large frontend applications to scale by splitting them into smaller independent applications.

Using React with Vite Module Federation, we can dynamically share components between applications.

This approach improves:

• Development scalability
  
• Deployment flexibility
  
• Team productivity