@module-federation/vite
TypeScript icon, indicating that this package has built-in type declarations

0.2.8 • Public • Published

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:

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.

Package Sidebar

Install

npm i @module-federation/vite

Weekly Downloads

1,408

Version

0.2.8

License

MIT

Unpacked Size

725 kB

Total Files

10

Last publish

Collaborators

  • heal
  • valorkin
  • zackarychapple
  • ilteoood
  • gioboa
  • ranshamay
  • zackljackson
  • tysonrm