Giorgio Boa

Posted on Sep 27, 2022 • Edited on Dec 20, 2022

Vite + Module Federation: yes, we can

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 particular task allows you to create a Microfrontend architecture.

Until recently, this task was only a Webpack feature, but now there is a plugin to support Module Federation inside Vite.

Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects. It's the de facto standard for new projects and framework starters.

To understand better the paradigm and the configurations I created a working example of a host that loads a remote application at runtime.

This is a simple Microfrontend architecture with Svelte, you can find the code here

You can follow me on Twitter, where I'm posting or retweeting interesting articles.

I hope this plugin can helps the Microfrontend adoption, thanks for your attention, bye 👋

Giorgio Boa

Giorgio Boa is a full stack developer and the front-end ecosystem is his passion. He is also international public speaker, active in open source ecosystem, he loves learn and studies new things.

Special thanks to Manfred Steyer for his contribution in this plugin.

Top comments (16)

Juan Carlos Galindo Navarro • Jan 10 '23

Sadly we can't share Pina store through modules :(

Giorgio Boa • Jan 11 '23

Hi, are you using this plugin with Vue? Have you got a public repository for this case?

Juan Carlos Galindo Navarro • Jan 11 '23

Hi Giorgio. Sorry, I commit a mistake, I was researching about Module Federation for Vite for hours, I wrote that comment at 3:50am. I sucessfully did two demos, 1 with webpack, works fine but you know, it's not Vite, and other with @originjs/vite-plugin-federation both this also works fine but it's a nigthmare in dev mode, there's no way to work with it, without doing deploying/previewing process. I saw your post, but there's is not about Vue, I know this is agnostic, but I'm really lost how I can create a demo for Vue. There's no examples with Vue, only React and Svelte :(

Giorgio Boa • Jan 11 '23

In these days I'm working on the Vue example so be patient and soon you will have good news.
The examples I did with Svelte and React are available here
github.com/module-federation/modul...

vite-react-microfrontends
vite-svelte-microfrontends

Juan Carlos Galindo Navarro • Jan 11 '23

Oh dude, thank you so much!!!! Yeah yeah thanks, I already saw those examples, but I'm bit confused about adapters, it's really new to me. I'm wondering, this Vite plugin works like Webpack or is totally new? Again, thank you for being truly kind

Giorgio Boa • Jan 11 '23

It's a new implementation because Vite works in a different way

Giorgio Boa • Jan 12 '23

Here is the Vue example
github.com/gioboa/vue-microfronten...
The application is sharing a reactive store because I'm new with Vue, I need to study Pinia too. Now it works in preview mode and without sharing deps

Juan Carlos Galindo Navarro • Jan 13 '23

Thanks Girgio, it's fantastic. I test with Pinia and works smoothly, but I don't get it how it works in dev mode, I ran pnpm dev and get:

es-module-shims.js? [sm]:716 Uncaught (in promise) Error: Unsupported Content-Type "text/html" loading __x00__plugin-vue:export-helper imported from http://localhost:5000/src/Main.vue. Modules must be served with a valid MIME type like application/javascript.
    at fetchModule (es-module-shims.js? [sm]:716:13)
    at async es-module-shims.js? [sm]:761:34

It' supports HMR?

I'll share my version tomorrow.

Thanks so much!

Giorgio Boa • Jan 13 '23

The workaround for the dev mode is this one
github.com/gioboa/vue-microfronten... but I will create a custom Vite plugin to fix up the things

ferblancodosil • Mar 24 '23

In this example, if I add Vite environment variables to the remote project and read them with "import.meta.env.VARIABLE_NAME", it works perfectly during development. However, if I build the project, it fails because it can't find the environment variables. On the other hand, if I use the same variables locally, it works fine. Perhaps there is another configuration that needs to be added?

Here a example with the error: github.com/ferblancodosil/vite-mod...

Giorgio Boa • Mar 25 '23

I changed a wrong script in remote package.json

and now when I run npm run preview:remote it works
pls let me know if it also works in your env

ferblancodosil • Mar 25 '23

But I use the build:remote and build:host to deploy in S3. It should not call remote:preview. Maybe exist other problem in build script? or in a shared federation config?

Giorgio Boa • Mar 25 '23

It works...
n.b. --> in the host you need to set the s3 endpoint
Host

Remote

ferblancodosil • Mar 25 '23

Oh! In my example I use console.info("VITE_EXAMPLE", import.meta.env.VITE_EXAMPLE); and in the viewer mode works but in build mode not work (faild in runtime).

Maybe diferent versions of the libs?