Vite and Module Federation Makes Micro-Frontends EASY!
In the world of software development, microservices have gained significant popularity in recent years. This architectural style allows developers to break down large applications into smaller, loosely coupled services. However, when it comes to the front-end, the concept of microservices was not easily applicable, until now.
Enter Vite and Module Federation, two powerful technologies that are making micro-frontends a breeze to implement. Vite is a fast and lightweight build tool for JavaScript applications, while Module Federation is a feature of Webpack that enables dynamic, runtime sharing of JavaScript modules between applications.
Traditionally, building a micro-frontend architecture required complex configurations, multiple build processes, and coordination between teams. However, with Vite and Module Federation, the process is simplified, providing developers with a seamless way to create and deploy modular front-end applications.
One of the key features of Vite is its lightning-fast development server. Unlike traditional bundlers that take time to rebuild the entire application on every change, Vite only rebuilds the specific modules that have been modified, resulting in blazing-fast hot-reloading. This makes the development process much more efficient and significantly reduces the time spent waiting for the application to rebuild.
In addition to the speed, Vite supports module dependency graph analysis, which allows it to generate optimized builds by bundling only the modules that are actually used by the application. This significantly reduces the size of the final build, resulting in faster load times for users. With Vite’s efficient build process, developers can create micro-frontends that are lean and performant.
Now, let’s talk about Module Federation. Traditionally, when building micro-frontends, each application is built separately and deployed as a standalone entity. With Module Federation, the applications can dynamically share modules with each other at runtime. This means that instead of reloading the entire application when navigating between micro-frontends, only the specific modules that are required for that page are fetched and executed.
Module Federation provides a high level of flexibility, allowing teams to independently develop and deploy their micro-frontends. It enables them to collaborate seamlessly since modules can easily be shared between different applications without tightly coupling them together.
Combining Vite and Module Federation gives developers a powerful toolset to build and scale micro-frontends effortlessly. With Vite’s fast development server and optimized builds, and Module Federation’s dynamic module sharing, the process becomes seamless and efficient.
In conclusion, Vite and Module Federation are revolutionizing the way micro-frontends are implemented. These technologies simplify the development process, improve performance, and enable seamless collaboration between teams. Whether you are building a large-scale application or a collection of smaller services, Vite and Module Federation are the perfect companions to create modular, scalable, and efficient micro-frontends.
One question about the bundle size. If remote and host has same dependencies, we will be shipping the same code twice such as react, react-router and all other common stuff. Am I missing sth here?
Hi Jack, (today Oct/2023)
I need start a project with MF.
Vite is better option than Webpack?
keep goin' loving the vids
Can you please Make a micro front with next 13 ,
So now I am wondering, how do you unit-test your frontends when your components no longer exist in build time, but only in runtime?
When using proper SolidJS functionality, I got it to build, but for some reason, it's not exposing the remoteEntry.js file at all (or even creating it in the /dist folder).
Is anyone else having issues running the host & remote from the github repo? I'm getting an error on the host: `createContext is not a function`
What is the zsh plugging being used to make the shell look like that?
Good Explanation. If possible, can you do one video on module federation with Nuxt 3, this will be really helpful if you can make it. I have explored on the Google, but didnt find examples related to Nuxt3 module federation with shared libraries like PrimeVue
if I ask you do make a decision between for example ASTRO and MFE …. is it a valid question ? and if the answer is yes, what do you choose?
How about building and i tegrating tools for Mfe?
Our company is kind of looking to build a micro-frontend system, but i am struggling to pick between single-spa framework or module federation. Is module federation along capable of building a great micro-frontend? whats your view on what single-spa can do but not with module federation. thanks!
Thank you @jherr for this great tutorial!
I would like to hear your insights regarding the sharing state between micro-frontends, as it seems to contradict the principle of separated entities, which should be its most vital selling point over monolith-repo…
The way I understand it, each entity should make its own data call to the server or (for example in case of user credentials/sessions) from cookies, but not from a shared store or state…
Sadly we had to drop vite and migrate back to webpack since vite-plugin-federation does not recommended to mixing Vite and Webpack in React projects, which is the case in our project 🙁 Hopefully they can get this sorted soon
Another great walkthrough. I've been coding along and I've initialised react ts project instead. It threw me a ts error. In order to correctly import the button I had to add a type declaration for it in my host project. I guess its because we load projects/modules dynamically at runtime and typescript doesnt know what are the types. Thanks a lot for the input and insights youre giving!
My experience:
Let's see…webpack 5….ooops, doesn't work! Okay, we change the. version….ooops! Doesn't work. Now let's change the target….Oh, again doesn't work. Hmmm…Let's import it, but import it with ".default". Ah, now it works. Ok. Maybe let's migrate an existing app to Vite? Good. Adding a config. Ooooops….doesn't work. Let's rename ALL JS files to JSX. Ah. Nice…..what? Doesn't work? Why?! ahhhh. Global in vite is not defined…….1 week later. Alright. That's how easy you can setup a modern JS micro-frontend-big-headache Application.
I'm slowly thinking to move to Angular or backend NestJS where hype is over. So tired that I have to watch tons of videos and follow millions Github issues to setup a simple web app. Why can't it just work? install a bundler, add dependencies, follow guide. Works. No. Every time there is something. So annoying.
I really appreciate that Jack has done this job for us. This video is really helpful and saved lots of my time.
Great topic i think it suit for the company that has many many teams. For me i think monorepo more suitable for my team size 🥹🥹
I tried doing this with another plugin but got nothing at all. No error, no Ui. Anyway, module federation has a long way to go because this is not really dynamic yet. There should be a way to use remotes dynamically, and load whatever components dynamically.
I was wondering whether this package or the official @module-federation/vite package should be used
I've spent some time with this trying to set up a remote app (vite) in a project where I don't control the host app (webpack). I got "SyntaxError: Cannot use "import.meta' outside a module (at remoteEntry.js:8:30)". At 9:50, line 9 in this video. Do you have any suggestions on how to get around that? I guess it's esm related, but I can't seem to figure out a way to solve it from the remote app.