@module-federation/vite
We moved this package under the @module-federation organisation ->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:
So far so good 🎉
Now you are ready to use Module Federation in Vite!