React Microfrontend with Vite Federation

Introduction

Micro frontend is an architectural pattern inspired by Microservices. It allows developers to integrate multiple modules together to create a complete web application. Each micro frontend is an independent unit responsible for a specific function.

The basic components of Micro Frontend include:

Host Application: Also known as the Shell app, this is the primary application that users interact with. It serves as the container for the micro frontends.
Remote Application: These are the micro frontends themselves, which act as building blocks for the host application. Remote Applications are injected into the Shell app to form a complete web application.

Advantages

Scalability: It is easy to add new business modules to the system (without affecting existing modules), and teams can work concurrently on separate modules without impacting each other.
Flexibility: Micro frontends can be developed using different frameworks, as they ultimately just need to be built into static files (HTML, CSS, JavaScript) to be injected into the Shell app, forming a complete web application.
Independence: Each micro frontend can be developed and deployed independently, reducing risks and enabling easy frequent releases.
Maintainability: Smaller codebases are easier to maintain and refactor.

Implementation Methods for Micro Frontend

iframe: This is a simple method but has limitations in communication (state management/session between Shell app and iframe) and customizing styles for iframe components.
Web Components: Create custom components to use in the Shell app. However, this approach requires updating to the corresponding new version when Web Components change.
JavaScript Bundles: Each micro frontend is built into static files to be executed in the Shell app.
Module Federation: This feature allows micro frontends to be deployed independently and used like regular web applications. In the Shell App, it only requires remote loading (dynamic loading/lazy load) of the corresponding micro frontend modules needed for use.

This feature is supported by Webpack and Vite. In this article, I will guide you on how to use Vite to build React Micro frontends.

Steps to Implement

First, after installing Vite, create two projects including a Shell app and a Component (used to implement the component that will be injected into the Shell app) as follows:

yarn create vite shell-app -- --template react-ts
yarn create vite component -- --template react-ts

Above, I have created 2 React Vite projects using the Typescript template.

Next, let install the @originjs/vite-plugin-federation package for both newly created projects.

yarn add -D @originjs/vite-plugin-federation

In the Component project, please create a file named `Input.tsx` with the following content:

export default function Input() {
  return (
    <input style={{ padding: "5px 10px" }} placeholder="Input value here" />
  );
}

The file `Button.tsx` with the following content:

export default function Button() {
  return (
    <button
      style={{
        padding: "5px 10px",
        background: "#004644",
        color: "#fff",
        fontWeight: 700,
      }}
    >
      Submit
    </button>
  );
}

Then, update the App.tsx file to use the components as follows:

import Button from "./Button";
import Input from "./Input";

export default function App() {
  return (
    <div>
      <p>Components</p>
      <Input />
      <Button />
    </div>
  );
}

Next, update the `vite.config.ts` file as follows:

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",
      filename: "remoteEntry.js",
      exposes: {
        "./Input": "./src/Input",
        "./Button": "./src/Button",
      },
      shared: ["react", "react-dom"],
    }),
  ],
  build: {
    target: "esnext",
    modulePreload: false,
    minify: false,
    cssCodeSplit: false,
  },
});

name: module federation name
filename: the file name used by the Shell app to remote load
expose: modules you want to expose
shared: modules shared with the Shell app

Next, modify the `scripts` field in the `package.json` file as follows:

{
  "scripts": {
    "dev": "vite --port 5001 --strictPort",
    "build": "tsc -b && vite build",
    "serve": "vite preview --port 5001 --strictPort",
    "start": "npm run build && npm run serve"
  }
}

dev: Since Vite starts with a random port, specify a specific port to allow the Shell app to dynamically load these modules.
build: Add `tsc` to build the TypeScript project.
start: First, build the Micro Frontend into static files, then start these assets so the Shell app can dynamically load them.

Next, modify the `package.json` file in the App shell similarly:

{
  "scripts": {
    "dev": "vite --port 5002 --strictPort",
    "build": "tsc -b && vite build",
    "serve": "vite preview --port 5002 --strictPort",
    "start": "npm run build && npm run serve"
  }
}

dev: Used during the implementation process.
start: Used when you want to build static files to deploy the web application.

Update the `vite.config.ts` file as follows:

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

export default defineConfig({
  plugins: [
    react(),
    federation({
      name: 'host',
      filename: 'remoteEntry.js',
      remotes: {
        remote: 'http://127.0.0.1:5001/assets/remoteEntry.js',
      },
      shared: ['react', 'react-dom'],
    }),
  ],
  build: {
    target: 'esnext',
    modulePreload: false,
    minify: false,
    cssCodeSplit: false,
  },
});

Most of the fields are similar to those in the Component project. However, we add an extra field called `remotes` in a key-value format. The `key` is the alias for the remote module that will be used in the project, and the `value` is the URL to access the assets file (defined in the `vite.config.ts` file of the Component project).

Next, update the `App.tsx` file to use the remote module as follows:

import React from "react";

// 2 ways to load remote module
import Input from "remote/Input";
const Button = React.lazy(() => import("remote/Button"));

function App() {
  return (
    <React.Suspense fallback="Loading...">
      <p>Shell app</p>
      <Input />
      <Button />
    </React.Suspense>
  );
}

export default App;

You can see that `remote` is the value defined in the vite.config.ts file (Shell app), while Input and Button are components exposed from the Component project.

Since the project uses TypeScript, you'll encounter a "module not found" error when the TypeScript compiler runs. To resolve this, create a module.d.ts file to define the modules as follows:

declare module "remote/Input" {
  const module: JSX;
  export default module;
}

declare module "remote/Button" {
  const module: JSX;
  export default module;
}