MICRO - FRONTEND con Angular y Module Federation, Multi Repo 🤯

[@jesusorozco294]

Video y ejercicio completado! ya hice el de monorepo y ahora este de multirepo, hasta ahora todo muy claro, gracias!

[@LogiDev]

Genial 🙌🏻

[@frochaol]

Muchas gracias por el video, fue de mucha ayuda !!!

[@LogiDev]

Gracias por el apoyo 🙌🏻

[@santiiza]

Excelente, queria sabr como cambia la codificacion con los stanalone component, donde ya no existen modulos para hacer referencias

[@LogiDev]

Los modulos no desaparecieron :v la unica diferencia con el standalone component es que tendra sus propias importaciones, a nivel de MF en vez de cargar un modulo ahora cargas un standalone component, no hay problema, el ejemplo esta en el MF-PAYMENT, revisa el repositorio.

[@eivanmtzleal9547]

Gracias Jimmy... excelente contenido !

[@LogiDev]

Gracias por el apoyo 🙌🏻

[@oscarperez-kp3qd]

Como siempre, excelente video Jimy

[@LogiDev]

Hola, gracias por tu apoyo 🙌🏻

[@WalterRemache-u7z]

Muy buen video, excelente explicacion, que configuracion tendria que hacer si unos de los mf tiene rutas hijas ?

[@drackp2m]

Me flipa todo lo que explicas, y cómo lo haces. He visto en tu enlace para invitarte a un café que tienes seis años de experiencia. ¡¡Parece más cuando se te oye hablar!! Aunque no lo hubiera pensado nunca por lo joven que aparentas ser. ¿Sería muy indiscreto si te preguntara tu edad? 😜 Por cierto, he echado de menos conocer si hay forma de tener estos micro-frontends combinados en un proyecto a la hora de compilar, de modo que mantengas la ventaja de poderlos arrancar por separado para desarrollar, pero que no haya que hacer muchas peticiones para cargar estas "partes" una vez desplegado. Además, si controlas del tema, creo que estaría guay una sesión informativa sobre cómo añadir colas a las notificaciones y alertas y tratamiento de dead letters. ¡¡Un saludo muy grande, eres un crack!!

[@LogiDev]

Hola! gracias por las palabras, no soy tan Joven como aprento, tengo 31 años . Respecto a los microfront, los puedes levantar por separado sin necesidad de ejecutar el Shell y poder seguir desarrollando; gracias por las sugerencias, saludos y gracias.🙌

[@UrielGuillen-i5z]

@LogiDev muy buen video! me ha quedado claro como funciona el multi repo, solo tengo una duda, a nivel desarrollo, si tengo mi shell y por ejemplo 8 remotes, la idea seria solo correr el remote sobre el que quiero desarrollar por lo que los otros 7 no es necesario tenerlos corriendo, con ese approach, como podria configurarse el shell para que no dependa de tener corriendo los 8 multi repos?? al final cada MF tendra su ruta de acceso y mientras no acceda a esa ruta, el shell no deberia romperse porque no depende de los MF para funcionar, saludos!

Muy buena explicacion. tengo una duda, ¿como se comparten el token entre microfrontend?

[@LogiDev]

Hola eso dependera de que tecnologia estas usando para la autenticación, pero te recomiendo que tengas un MF encargado de todo el AUT; si estas usando Auth0 puede usar su SDK que hace el trabajo de compartir la autenticacion entre MF: auth0.com/docs/libraries/auth0-single-page-app-sdk Si estas administrando la sesion por tu propio servidor (tu creas el token) lo idea seria que al iniciar sesion guardes ese token en una cookie, luego cada vez que un usuario intente golpear a algun servicio, esa cookie viajara al servidor de manera automatica, y desde el servidor haces la validacion de autenticacion

[@LogiDev]

Link del repositorio: github.com/jimyhdolores/demo-microfrontend-multirepo-angular-modulefederation

[@dromeroSL]

Jimmy puede ser que el repo no sea publico?

[@dromeroSL]

no dije nada el link tomaba el emoji :D

[@LogiDev]

@@dromeroSL acabo de actualizarlo, vuelve a probar porfa

[@zerilanka]

@LogiDev he tratado de hacer un ejemplo con un proyecto multireport con un (mf-shell, mf-login, mf-sidemenu) he logrado que cuando el login sea correcto redirecione al mf-sidemenu, pero tengo un problema y es que las rutas del sidemenu (about, profile etc) al momento de dar click me dice (Cannot match any routes. URL Segment: 'dashboard/about') no se que pueda estar haciendo mal, ejecutando el proyecto mf-sidemenu individual funciona correctamente.

[@LogiDev]

Hola, si tú repositorio es publico pásame el Link para repositorio y hacer un pull request con la solución

[@jesusorozco294]

@@LogiDev Amigo seria genial un video haciendo un login con multirepo y microfrontend, la sacarias del estadio!!!

[@LogiDev]

@@jesusorozco294 gracias por la recomendación, espero sacar pronto un video al respecto

[@jesusorozco294]

@@LogiDev gracias amigazo, tu puedes!

[@jesusorozco294]

@@LogiDev una pregunta es recomendable usar la librería PubSubJs? No está obsoleta o algo por el estilo? Que alternativas hay? En la empresa debemos hacer un proyecto Microfrontend multirepo solo con aplicaciones en Angular y la librería de componentes qué vamos a utilizar es PrimeNg

[@jpaulsondev]

Excelente video

[@LogiDev]

Gracias por el apoyo

[@CarlosEduardoHincapieHidalgo]

Hola Jimmy de nuevo por acá paso para agradecerte este material tan valioso y segundo me podrías explicar por que es una mala practica compartir el estado entre los micro-frontend utilizando un patrón para el manejo de estados como redux con ngrx y la otra pregunta es como seria la implementación si de un determinado micro-frontend tipo remote yo quiero exponer varios módulos

[@LogiDev]

Si quieres exportar varios modulo simplemente lo exportas desde el webpack.config en la sección de exports, no hay un limite. Es una mala practica estar compartiendo el estado por muchas razones, por ejemplo el compartir el estado entre múltiplesMF, se crea un acoplamiento entre ellos, lo que puede dificultar la independencia y la evolución independiente de cada uno. Esto viola el principio de separación de preocupaciones y puede dificultar la escalabilidad del sistema. Compartir el estado entre MF a través de un Store centralizado puede afectar el rendimiento debido a la necesidad de sincronizar y mantener el estado en múltiples lugares. Esto puede causar latencia adicional en la aplicación y degradación del rendimiento. Recuerda que los MF busca "independizar" cada parte de la app.

[@carloseduardohincapiehidal4107]

Super claro muchas gracias, entonces debemos de buscar siempre que los componentes sean independientes en cuanto al estado y buscar que cuando se requiera compartir información entre ellos sea algo muy puntual y utilizar un patrón de mensajería sencillo de publicación y suscripción, como el que utilizaste en el ejemplo. Super Jimmy aquí seguiré a la espera de más material de calidad ❤

[@LogiDev]

@@carloseduardohincapiehidal4107 gracias bro, lo entendiste muy bien, espero darme tiempo para sacar cosas avanzadas sobre la web, ahora ando con el curso de Angular para los chicos que recien se inicia, gracias por tu apoyo, un abrazo a la distancia.🙌

[@carlosh9732]

me sirvio mucho tu explicación, aún me falta ver si con monorepo las librerias pueden ser independientes, por eso de problemas de compatibilidad, por eso me decante por el multirepo saludos

[@LogiDev]

Hola! gracias por tu apoyo!🙌

[@JesusOrtega-nx3eb]

Excelente video, solo me quedo con una duda en un ambiente donde se realiza un deploy en un contenedor docker de manera independiente como se realizaria la configuracion de cors?

[@LogiDev]

Hola, eso ya depende del servidor que estés usando (azure, aws, iis, apache,etc) pero todas te dan la opción de configurar los CORS; lo que puedes hacer es crear un gateway que valide los CORS y demás permisos y haga el redireccionamiento al recurso solicitado

[@dromeroSL]

Gran aporte Jimmy. Seria bueno implementar un login y ver como compartir ese token de autenticación. Otro video seria interesante ver la manera de que la carga de microfronts en el shell sea dinámico con el uso de un manifest y variables de entorno. Saludos, tienes un gran canal

[@LogiDev]

Hola gracias por las recomendaciones, lo tendre muy en cuenta 🤗

[@dromeroSL]

@@LogiDev excelente :D saludos!

[@edwardvargas4605]

Saludos excelente explicación. Sin embargo tengo un tema con los ASSETS y CSS del MF en el SHELL , no me cargan. Estoy trabajando como un MultiRepo

[@LogiDev]

Hola Edwar, te sale algún error?

[@FranciscoJavierOrozcoRamír-h8t]

Tendras un enlace de como se hacen los deploy ?

[@LogiDev]

Hola, aún no saco un video al respecto, pero es sencillo, despliegas cada proyecto en tu server o alguna nube, luego la url donde estén desplegados los agregas en el MFShell

[@braianezequielrosales3982]

Consulta! ¿Como haces para manejar un sharedModule en una arquitectura multi-repo? copias y pegas el sharedModule en cada microfrontend? gracias genio

[@LogiDev]

Lo mejor es crear una librería que exponga todo lo que necesitas, esa librería la instalas en cada microfrontend, luego en cada webpack.config estableces que lalibrería es STANDALONE, de esa manera solo se descargara tu librería una sola vez

[@LogiDev]

@@braianezequielrosales3982 éxitos y gracias por el apoyo

[@braianezequielrosales3982]

@LogiDev Que genio, a la velocidad de la luz me contestaste, voy a optar por esa opcion y voy a seguir tus pasos, estamos migrando a una arquitectura microfront y no sabiamos que hacer con el sharedModule. Abrazo! gracias!

[@naseddinoufallah628]

Hola Jimmy,Quiero preguntarte si te functiona cuando lo displiguies en local?

[@LogiDev]

Hola, funciona localmente, asegurate de usar la versiones correctas de las librerías para tu versión de Angular

[@anthonygayoso9113]

Excelente video, tengo una duda, yo tengo una libreria en el microfrontend que solo se necesita ahi , mas no en otro lado. Cuando levanto el microfrontend de manera independiente funciona, pero cuando lo abro desde el host no, esa libreria tiene que estar tambien instalado en el host ? y luego aplicarle el singleton ? o como se haria eso. Muchas gracias

[@LogiDev]

Ponlo en el host y que sea singleton

[@juanfalcon9507]

Muy buen video seria interesante ver un video donde este integrado un mf de angular y otro mf de react saludos y gracias por la gran explicación!!!🙂

[@LogiDev]

Hola Juan, gracias por la recomendación 🙌🏻

[@NicolasSantiagoNaranjo]

Este vídeo me ha ayudado mucho para un proyecto en el que estoy trabajando. El manejador de eventos lo estoy realizando con RXjs, pero no me es claro ¿cómo puedo acceder a él por medio de la aplicación host? ¿Podrías ayudarme con eso?

[@LogiDev]

Todo recurso que quieras utilizas en diferentes microfrontends debe ir en el shell

[@jarethnn]

Muy buen video. Me gustaría comentarte sobre una situación que me ocurre con proyecto, Tengo un proyecto padre y uno hijo, que se carga al iniciar. Pero cuando se pincha para abrir el proyecto hijo desde otra página, se refresca en ambas páginas. Muchas gracias por todos los videos! Me ayudaron mucho

[@anacarolinaaristizabal5607]

si yo tengo una carpeta shared dentro de mf-products con componentes compartidos como hago para poder usar esos componentes en mf-shopping?

[@LogiDev]

Tienes que exponerlos en tu webpack.config

[@deymerh]

Hola Jimmy, estoy en un proyecto con microfrontends usando multi repo, como se podría abordar el tema para no tener código duplicado en diferentes micro?. Por poner un ejemplo: el servicio que meneja el localStorage que puede necesitarse en varios microfrontends. Saludos y gracias por compartirnos tu conocimiento.

[@LogiDev]

Hola Deymer, puedes crea una librería con las funcionalidades que necesites, esa librería la instalas en cada uno de tus MF, luego en tu webpack-config lo agregas al Shared para mantener una sola instancia de la librería

[@NgOliver11]

Hola @@LogiDev , tienes algun video de como crear una libreria para implementar en algun proyecto?

[@deymerh]

@@LogiDev Gracias Jimmy por tomarte el tiempo de responder, voy a revisar como hacer esa implementaciòn.

[@ricardotovar4597]

Hola como seria para cargar un microfront por una acción y no por ruta ? , por ejemplo si en el navbar hay un botón que carga los productos agregados y este aparece como un div flotante

[@LogiDev]

Usa la función loadRemoteModule, recuerda revisar la documentación según la versión que estés usando de la librería

[@NgOliver11]

Hola Jimmy, queria saber como subistes los proyectos al github dentro de una carpeta principal me ayudarias si me indicas como es el proceso

[@LogiDev]

Los proyectos estan en una sola carpeta, dentro de esa carpeta ejecutas el comando "git init" esto prepara la carpeta para que sea subido a un repositorio, luego solo tienes que agregar la ul de repositorio, cuando creas un repositorio en github te salen las instrucciones, espero esto te ayudem gracias,

[@alonsobenites2386]

Hola jimmy una consulta, segui todos tus pasos pero no puedo visualizar el modulo remoto en el host, cual podria ser la causa?

[@LogiDev]

Hola Alonso, asegurate de instalar la versión de la librería @angular-architect/module-federation correspondiente para tu version de angular de tu proyecto; las configuraciones varian según la versión que uses, lee el readme : www.npmjs.com/package/@angular-architects/module-federation

[@chawuala]

Seguí tu video y me sale en el routing que no reconoce el modulo, que puede ser?

[@LogiDev]

Asegurate de usar la versión correspondiente de @angular-architects para tu versión de Angular, revisa que estes exportando un modulo o un standalone component en tu webpackconfig,puedes revisar el repositorio y guiarte.

[@assetdev1859]

and how to deploy it?

[@FranciscoJavierOrozcoRamír-h8t]

No puedo ver bien el video

[@MuhammadZeeshan-xf3qy]

Hello, Could you please post the whole lesson for multi-repo projects in Micro-Frontend in English as soon as possible?

[@juanmanuelvalderramarengif9633]

Hola que tal, super tus videos los segui tal como los muestras en el video y funciona de maravilla. Pero al implementarlo en un proyecto propio y usando una libreria de diseño de terceros me pasa este error, te agradeceria tu ayuda. Muchas gracias Error: Uncaught (in promise): TypeError: _angular_core__WEBPACK_IMPORTED_MODULE_0__.ɵɵtemplate(...) is not a function TypeError: _angular_core__WEBPACK_IMPORTED_MODULE_0__.ɵɵtemplate(...) is not a function at LeftComponent (design-system.mjs:153:685) at executeTemplate (core.mjs:12003:13) at renderView (core.mjs:13201:13) at renderComponent (core.mjs:13148:5) at renderChildComponents (core.mjs:13246:9) at renderView (core.mjs:13226:13) at renderComponent (core.mjs:13148:5) at renderChildComponents (core.mjs:13246:9) at renderView (core.mjs:13226:13) at ComponentFactory.create (core.mjs:14138:13) at resolvePromise (zone.js:1193:31) at resolvePromise (zone.js:1147:17) at zone.js:1260:17 at _ZoneDelegate.invokeTask (zone.js:402:31) at core.mjs:10757:55 at AsyncStackTaggingZoneSpec.onInvokeTask (core.mjs:10757:36) at _ZoneDelegate.invokeTask (zone.js:401:60) at Object.onInvokeTask (core.mjs:11070:33) at _ZoneDelegate.invokeTask (zone.js:401:60) at Zone.runTask (zone.js:173:47)

[@LogiDev]

Es problemas de versiones, primer revisa hasta que versión de Angular tiene soporte la libreria de terceros, eso influye en la versión de la libreria angular-architect y tu version de angular de angular, recuerda que cada version de angular usa internamente una versión distinta de webpack, saludos.

[@juanmanuelvalderramarengif9633]

@@LogiDev Efectivamente el error era por dependencias de paquetes con diferentes versiones, por lo tanto ejecute este comando: npm ls @angular/core y me di cuenta que el paquete ngx-build-plus por alguna razón queda en la versión mas reciente de angular (18), lo actualize con este comando npm install @angular-architects/module-federation@16.x ngx-build-plus@16.x a la version 16 y listo funciono.

[@LogiDev]

@@juanmanuelvalderramarengif9633 exitos

[@FranciscoJavierOrozcoRamír-h8t]

la configuracion que haces en esta linea moduleFederationConfig.output.publicPath = "localhost:4201/"; tendria que modificarla tambien cuando hago el deploy ? o solo es configuracion para trabajar localmente

[@LogiDev]

tienes que modificarla para tu deploy

[@osc902202]

@@LogiDev hola amigo una consulta, iba a preguntar algo similar, estoy desplegando en un vps, yo uso docker y jenkins, y tengo la duda, cuando se despliega en si el proyecto se buildea y se levanta en un puerto, es la ip y el puerto lo que se pondria en la configuracion del path?