We moved this package under the @module-federation organisation -> @module-federation/vite

Vite/Rollup plugin for Module Federation

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.

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 implementation

👉 Here you can find a working implementation that shows how to use the plugin.

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 '@gioboa/vite-module-federation';
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!