Vite Micro Frontend

A micro frontend is a development approach that breaks down a web application’s front end into smaller, self-contained modules. These modules can be developed, tested, and deployed independently, making micro frontends particularly useful for large and complex web applications that demand flexibility and faster iterations.

Create

To implement a micro frontend architecture, start by dividing your application into micro UIs. For instance, in an e-commerce website, you might have micro UIs for products, cart, and support. Each micro UI requires a parent UI, known as the micro UI container, which controls the rendering of the micro UIs.

Next, create projects for all the necessary micro UIs and containers using Vite. This guide focuses on using Vite’s federation plugin, a straightforward approach for achieving micro UI architecture. You would need to install the @originjs/vite-plugin-federation package as a dev dependency in the container and micro-ui’s.

npm i --save-dev '@originjs/vite-plugin-federation'

Micro UI Config

In the micro UI configuration, ensure Vite runs on a specific port. Then, specify the components in the micro UI that need to be exposed to the container application.

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

export default defineConfig({
  server: {
    port: 4001
  },
  plugins: [
    react(),
    federation({
      name: "remote_app",
      filename: "remoteEntry.js",
      exposes: {
        './MicroOne': './src/App.jsx'
      },
      shared: ['react', 'react-dom']
    })
  ],
  build: {
    modulePreload: false,
    target: 'esnext',
    minify: false,
    cssCodeSplit: false
  }
})

In the provided configuration:

• The micro UI exposes ‘MicroOne’ as a key for the container to reference.
• The exposed key points to ‘App.jsx’ of the micro UI, establishing a channel for the container to access the micro UI component.
• The ‘shared’ array lists libraries that can be shared between containers and micro UIs, preventing duplicate instances of libraries from loading on the client machine.

Build & Run

npm run build  // this will generate js file along with remote entry file.
npm run preview // exposes http://localhost:4001/assets/remoteEntry.js'

Container UI Config

Now, you need to register all the micro UIs in the container configuration using the ‘remotes’ property of the federation plugin.

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

export default defineConfig({
  plugins: [
    react(),
    federation({
      name: 'app',
      remotes: {
        remoteAppOne: 'http://localhost:4001/assets/remoteEntry.js',
      },
      shared: ['react', 'react-dom']
    })
  ],
  build: {
    modulePreload: false,
    target: 'esnext',
    minify: false,
    cssCodeSplit: false
  }
})

In this configuration:

• ‘remoteAppOne’ is the key provided for the container to invoke the remote micro UI component, i.e., ‘MicroOne.’

The container can then import the micro UI component as demonstrated below:

import MicroOne from 'remoteAppOne/MicroOne'

Simply execute npm run preview to finalize the setup. This concludes the straightforward implementation of a Micro UI Architecture.

Compiler