@gioboa/vite-module-federation

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 in the Frontend? With Module Federation you can load separately compiled and deployed code into an unique application. This plugin makes Module Federation work together with Vite.

Working implementation

👉 Here you can find a working implementation that shows how 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 () => ({
  plugins: [
    federation({
      options: {
        workspaceRoot: __dirname,
        outputPath: 'dist',
        tsConfig: 'tsconfig.json',
        federationConfig: 'module-federation/federation.config.cjs',
        verbose: false,
      },
      adapter: createEsBuildAdapter({
				plugins: [],
			}),
    }),
    [...]
  ],
}));

Define configs

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

• host
• remote
  
  

So far so good 🎉

Now you are ready to use Module Federation in Vite!

Changelog

version 0.2.0 - planet tasty (2022-09-22)

Features

• hot module reload feature