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
 
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
 
mahmoudalaskalany profile image
Mahmoud Alaskalany •

Thanks for this post i will try this with angular

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.