Project Micro Frontend

Project Micro Frontend is a hands-on demo where a React portfolio is split into independent apps using Vite Plugin Federation. A remote React app exposes a Projects component that a main React host loads at runtime with React.lazy, Suspense, and an ErrorBoundary, illustrating the micro frontend architecture end to end.

What is Project Micro Frontend?

Micro frontends is an architectural style where a large frontend application is split into smaller, independent sections. Each section is developed, deployed, and maintained separately, allowing different teams to work on different parts of the frontend. This approach improves scalability, flexibility, and makes it easier to update or replace individual parts without affecting the whole system.

My Role

Let me describe what I did.

I built two React applications to demonstrate the pattern. In the remote app, I exposed the Projects component through Vite Plugin Federation. In the main app, I configured the host to load that component from the remote over remoteEntry.js. I wired up runtime loading with React.lazy for code-splitting, Suspense for a loading skeleton, and an ErrorBoundary to handle failures gracefully.

In this React app, the Projects component is exposed using Vite Plugin Federation:

return {
    plugins: [
      react(),
      federation({
        name: "remote_projects",
        filename: "remoteEntry.js",
        exposes: {
          "./Projects": "./src/components/Projects",
        },
        shared: ["react", "react-dom"],
      }),
    ],
    preview: {
      port: env.VITE_PREVIEW_PORT,
    },
    server: {
      port: env.VITE_DEV_PORT,
    },
    build: {
      modulePreload: false,
      target: "esnext",
      minify: false,
      cssCodeSplit: false,
    },
  };

This configuration is for the remote React application that exposes the Projects component.

For the main React application, we configure it to load the Projects component from the remote app:

return {
    plugins: [
      react(),
      federation({
        name: "portfolio",
        remotes: {
          remoteProjects: `${env.VITE_PROJECTS_HOST}/assets/remoteEntry.js`,
        },
        shared: ["react", "react-dom"],
      }),
    ],
    preview: {
      port: env.VITE_PREVIEW_PORT,
    },
    server: {
      port: env.VITE_DEV_PORT,
    },
    build: {
      modulePreload: false,
      target: "esnext",
      minify: false,
      cssCodeSplit: false,
    },
  };

In this setup, the main app renders the Projects component from remoteProjects, which is defined in the Vite configuration. This means that the Projects component is loaded from another React application.

...
const Projects = React.lazy(() => import("remoteProjects/Projects"));
...

function App() {
  return (
    <>
      <NavBar />
      <Suspense fallback={<Skeleton />}>
        <ErrorBoundary
          fallback={
            <SomethingWentWrong message="Projects Micro Frontend Team might be on a Vacation" />
          }
        >
          <Projects />
        </ErrorBoundary>
      </Suspense>
      <span>Tech</span>
    </>
  );
}

This code leverages React.lazy for code-splitting and Suspense for loading the remote Projects component, with an ErrorBoundary to handle errors gracefully.

Tech Stack

• Micro frontend - architectural style splitting the frontend into independent, separately deployed sections.
• React - library used to build both the remote and the main host applications.
• Vite - build tool and dev/preview server configured for each app.
• Vite Plugin Federation - enables the remote to expose components and the host to consume them at runtime.

Get Involved

🚀 Check out this simple app implementing the micro frontend concept: Visit Project 🌐