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 👋
Special thanks to Manfred Steyer for his contribution in this plugin.
Top comments (16)
Sadly we can't share Pina store through modules :(
Hi, are you using this plugin with Vue? Have you got a public repository for this case?
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 :(
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...
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
It's a new implementation because Vite works in a different way
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
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 devand get:It' supports HMR?
I'll share my version tomorrow.
Thanks so much!
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
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...
I changed a wrong script in remote package.json
and now when I run
npm run preview:remoteit workspls let me know if it also works in your env
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?
It works...
n.b. --> in the host you need to set the s3 endpoint
Host
Remote
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?
let's solve the issue in pair programming and not there in thread 😅 drop me a message on twitter
How to use typescript with vite module federation