@module-federation/vite

Vite/Rollup plugin for Module Federation

Reason why 🤔

Microservices nowadays is a well-known concept and maybe you are using it in your current company. Do you know that now you can apply similar ideas on the Frontend? With Module Federation you can load separately compiled and deployed code into a unique application. This plugin makes Module Federation work together with Vite.

Working implementations

React

Svelte

Vue

Getting started 🚀

This plugin is based on top of native-federation so this library is a peer dependency.

You need to extend the Vite configuration with this plugin:

import { defineConfig } from 'vite';
import { federation } from '@module-federation/vite';
import { createEsBuildAdapter } from '@softarc/native-federation-esbuild';

// https://vitejs.dev/config/
export default defineConfig(async ({ command }) => ({
  server: {
    fs: {
      allow: ['.', '../shared'],
    },
  },
  plugins: [
    await federation({
      options: {
        workspaceRoot: __dirname,
        outputPath: 'dist',
        tsConfig: 'tsconfig.json',
        federationConfig: 'module-federation/federation.config.cjs',
        verbose: false,
        dev: command === 'serve',
      },
      adapter: createEsBuildAdapter({ plugins: [...], }),
    }),
    [...]
  ],
}));

Define configs

You need to define two different configurations in the federationConfig property.
Here are two examples:

• host
• remote
  
  

So far so good 🎉

Now you are ready to use Module Federation in Vite!

Thanks 🤝

Big thanks to:

Manfred Steyer, Speaker, Trainer, Consultant and Author with focus on Angular. Google Developer Expert (GDE) and Microsoft MVP.

who collaborate with me to make this possible.