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 BoaFollow

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.

Comments

[Juan Carlos Galindo Navarro]

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

[Giorgio Boa]

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

[Juan Carlos Galindo Navarro]

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]

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]

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]

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

[Giorgio Boa]

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]

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]

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]

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]

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]

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]

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

Remote

[ferblancodosil]

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?

[Giorgio Boa]

let's solve the issue in pair programming and not there in thread 😅 drop me a message on twitter

[Ayush]

How to use typescript with vite module federation