DEV Community

Cover image for Setup a Micro-Frontend architecture in 15min with Vite!

Setup a Micro-Frontend architecture in 15min with Vite!

Meidi Airouche on December 10, 2024

In a monolithic frontend architecture, a single codebase handles the entire user interface. While this can simplify initial development, it can bec...
Read full post
Collapse
 
ozzythegiant profile image
Oziel Perez •

This is great for SPAs, but if you guys just want a traditional website with different frameworks for functionality, try Astro instead

Collapse
 
mahmoudalaskalany profile image
Mahmoud Alaskalany •

Thanks for this post i will try this with angular

Collapse
 
hieu_buihuu_3fe912f1ad47 profile image
Kevin.CK •

Thanks

Collapse
 
ciphernutz profile image
Ciphernutz IT Services •

Absolutely agree with your points. This is a game-changer!

Collapse
 
griffinrivera profile image
Griffin Rivera •

Thanks for sharing.

Collapse
 
han_yang_20969b18accbe79e profile image
Han Yang •

very good tutorial, but angular v19 do not have .\app\app.module.ts, in dist folder, vue generated header.umd.cjs file, react do not generate trending.umd.js.

Collapse
 
mairouche profile image
Meidi Airouche •

I passed everything in ESM since it's more standard now. Thank you for the feedback <3

Collapse
 
han_yang_20969b18accbe79e profile image
Han Yang • • Edited

current status - 2024-12-11 - base concept works fine

Image description

Thread Thread
 
mairouche profile image
Meidi Airouche •

I added the repository with the overall code working (except for Angular) at the end of the article : github.com/mairouche/mfe-news-portal

Collapse
 
lwz7512 profile image
liwenzhi •

Couldnt integrate angular app, got error:

Uncaught SyntaxError: The requested module '/apps/highlights/dist/main.js' does not provide an export named 'mount' (at main.js:3:10)

has anyone make it run successful?

Collapse
 
mairouche profile image
Meidi Airouche •

Depends on the version. Try with this in src/main.js:

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';

function mount(el: HTMLElement) {
  const bootstrap = async () => {
    const appElement = document.createElement('app-highlights');
    el.appendChild(appElement);
    await platformBrowserDynamic().bootstrapModule(AppModule);
  };

  bootstrap().catch(err => console.error(err));
}

export { mount };
Enter fullscreen mode Exit fullscreen mode
Collapse
 
lwz7512 profile image
liwenzhi •

got an abnormal main.js file under dist folder:

"use strict";(self.webpackChunkhighlights=self.webpackChunkhighlights||[]).push([[792],{429:(e,o,_)=>{}},e=>{e(e.s=429)}]);
Enter fullscreen mode Exit fullscreen mode

Do you mind sharing your full project code? this is really interesting...i have never seen a solution like this...

Thread Thread
 
mairouche profile image
Meidi Airouche •

I update to last versions and share it tomorrow. I ping you in comment when it's done

Thread Thread
 
mairouche profile image
Meidi Airouche • • Edited

@lwz7512 Indeed, I was using module federation with old Angular versions. I will find out what's the best approach between, widgets, module federation or web component and propose it in an edit of the article.

Collapse
 
farseenmanekhan1232 profile image
Mohammad Farseen Manekhan •

This is amazing.
This is exactly what's happening in Astro behind the hood.
Correct me if I'm wrong.

Collapse
 
mairouche profile image
Meidi Airouche •

To be Honest I discovered Astro with a previous comment and I'll deep dive into it. It looks like the same with Astro being maybe a bit more opinionated and closer to a framework than a library. But I'll look for it to see if I well understood

Collapse
 
getsetgopi profile image
GP •

Integrating multiple technologies within a micro frontend architecture is generally regarded as a suboptimal design choice. This approach can lead to significant performance issues, as it necessitates loading numerous technology libraries alongside each component, resulting in a bloated and resource-intensive application. Moreover, the complexity introduced by this multi-technology setup can make maintenance and management exceptionally challenging.

A more streamlined and efficient approach is to standardize on a single library or framework across the micro frontend ecosystem. This strategy offers several advantages:

  1. Improved performance due to reduced overhead from multiple libraries
  2. Simplified codebase that's easier to maintain and update
  3. Enhanced consistency in development practices and user experience
  4. Better team collaboration and knowledge sharing
  5. Reduced learning curve for new developers joining the project
  6. More straightforward integration and communication between micro frontends

By focusing on a unified technology stack, development teams can create more cohesive, performant, and maintainable micro frontend applications that align better with the core principles of this architectural pattern.

Collapse
 
mairouche profile image
Meidi Airouche • • Edited

Agree. This is why I explained in the article that it can be a solution (temporary one) to shift from a framework to another smoothly here :

In a real life software growing through years, being able to handle multiple frameworks can be a smooth way to migrate from an old one to a new one whenever it's needed.

For example, in my experience, we transitionned form Angular to Vue step by step thanks to this approach. I'm not saying it's a desirable design but it's an existing one. Used in the appropriate context, it can bring value.

Collapse
 
sirserje profile image
Serhii Viazkov •

did you have any luck with precious angular versions , eg 18?

Collapse
 
mairouche profile image
Meidi Airouche •

I succeed with module federation from Angular 16- but it's not that simple. I'm still testinfg things but Vue and React are Libraries whereas Angular, as a Framework, has it's own event, state, data management etc... So it's not that easy.