MICRO - FRONTEND con Angular y Module Federation

[@jesusorozco294]

Super, lo hice completo y entendí muy bien todo! ahora voy para el de multirepo.

[@LogiDev]

Gracias por tu apoyo bro 🙌🏻

[@judithcristinaquinonesinga3691]

Justo necesitaba este video!!!, Muchas gracias!

[@LogiDev]

Gracias por el apoyo 🤗

[@easantose]

Hola Jimy, El video-tutorial esta super-loco, muy bien documentado y explicado. No tenia mucha experiencia o casi nada de la importancia de Microfrontend usando Webpack Module Federation Disenar un projecto para desarrollarlo como mono-repo o multi-repo dependera de la dimension y objetivos del aplicativo Esta forma de implementar projectos funciona perfecto cuando trabajas en equipo Jimy, gracias por compartir tu conocimiento, tienes un futuro brillante como 'developer' y 'profesor'. Udemy te espera. Hace anos lei un libro informatico y al final decia: "De que sirve el conocimiento, si no se comparte" Gracias nuevamente, ya estoy ansioso de aprender multi-repo -Gary

[@LogiDev]

Muchas gracias por tus palabras, te deseo el mejor de los éxitos 🙌🏻

[@devligarreto]

Todos mis respetos, GIGANTE que gran tutorial, lo necesitaba por algo urgente y esto me salvo todo!!! Capo gracias!!! Saludos!!!

[@LogiDev]

Muchas gracias por el apoyo 🤗

[@judithcristinaquinonesinga3691]

Taller en vivo sería genial, me ha quedado claro muchos conceptos.

[@LogiDev]

Buena idea, podria ser por twitch implementar esto y hagan sus preguntas 🤗

[@judithcristinaquinonesinga3691]

@@LogiDev sería genial 🙌

[@LogiDev]

@JUDITH CRISTINA QUIÑONES INGA Gracias por el apoyo, voy a plantear una fecha para ese stream 🙌

[@javierescobar4103]

Muchas gracias por compartir!!

[@LogiDev]

Gracias por el apoyo 🙌🏻

[@oscarperez-kp3qd]

Excelente material Jimy, gracias!

[@LogiDev]

Gracias por tu apoyo bro 🙌🏻

[@victoralexisluissalinasurc8006]

excelente contenido, gracias por compartir tus conocimientos 😀

[@LogiDev]

Gracias por el apoyo 🙌🏻

[@victoralexisluissalinasurc8006]

Hola Jimy aun piensas hacer el directo lo digo mas para conocer mas sobre el tema de MICRO - FRONTEND es muy interesante cuando tienes que hacer un proyecto grande, espero tu respuesta 😎

[@LogiDev]

@@victoralexisluissalinasurc8006 estoy planeando que días hacerlo y preparando los temas a tratar, em cuanto tenga una fecha lo estare publicando por mis redes, gracias.🤗

[@magadiflo-dev]

Hola Jimy, buen contenido, pude replicar lo que hiciste, es la primera vez que veo micro frontend, en ese sentido, puedes recomendarme algún libro, página web, etc. que toque este tema, con Angular y Module Federation desde cero, tal como lo hiciste, al construir desde cero. NOTA: Ya revisé la página de Angular Architects. Quedo atento,saludos y gracias Jimy por compartir tus conocimientos.

[@LogiDev]

Hola, hasta ahora el mejor contenido que he visto es el de Angular Architect, ellos también dan clases privadas de pago, podria ser una gran opción, saludos.

[@chacataplan]

El mas completo, gracias!!!’

[@LogiDev]

Gracias por el apoyo

[@micumicu93]

Muy bueno el tutorial! Gracias! :)

[@LogiDev]

Gracias por tu apoyo bro, no olvides suscribirte

[@antonionavarrro]

Muy buen video, excelente

[@LogiDev]

Gracias por el apoyo 🙌🏻

[@jefryjohanpardoalzate6617]

Muy buen video, gracias!!

[@LogiDev]

Gracias por tu apoyo 🙌🏻

[@msasoftware]

Genial! Muchas gracias

[@LogiDev]

Gracias por el apoyo

[@mizradev]

Excelente video. Tengo dos dudas ¿Cómo se podría realizar autenticación con esta arquitectura? y ¿El despliegue en producción como quedaría? porque veo que todo esta como localhost en duro en el código.

[@LogiDev]

Hola, el despliegue es individual, al final cada proyecta genera su build y lo despliegas en cualquier servidor; la autenticación lo manejas en algún Microfront, al final guardas las credenciales en memoria o en el almacenamiento web bajo encriptación y los demás MF podran acceder, si un usuario ingresa directamente a un MF validas la sesión con esos daos guardados.

[@josecarlosleonnima1605]

me quedo en claroo esta super bien, seria genial que hagas un video curso de crear aplicaciones desde 0, un sistema de ventas por ejemplo. Gracias

[@LogiDev]

Hola, gracias por la recomendación

[@josecarlosleonnima1605]

@@LogiDev tengo una duda si tengo 3 modulos, por ejemplo: Optica, Logistica Restaurant; Ponte que en logistica cree productos, en restaurant tambien se utiliza y en optica tambien, principalmente creo projects y pongo los menus en uno solo o tengo que crear 2 proyectos mas ???

[@gdob7503]

¡Muchas gracias por compartir tu sabiduría con todos! Me ha quedado una duda , en el objecto remotes del webpack utilizas las urls basadas en localhost, ¿cómo sería un ejemplo en el que debes soportar varios ambientes (DEV, QA, PROD, ETC)?

[@LogiDev]

Ya que usas angular puedes usar los environment, y cargas las url de los environment según el entorno que deseas

[@frafrimon]

El common libs, es como una forma de centralizar los servicios que pueden ser comunes al rededor de toda mi app?

[@LogiDev]

asi es

[@frafrimon]

otra duda jeje, que ventajas tendría esto? ya que digamos no se aleja mucho de montar una app normal de angular, pero supongo que en aplicaciones más grandes tendrá sus ventajas, no?

[@LogiDev]

@@frafrimon si, lo explico en el primer video.

[@frafrimon]

@@LogiDev genial, ya los vi, de hecho logré montar mi propio micro front para practicar con router también, amigo pero te pregunto, el warning que sale en el navegador es porque se debe configurar algo adicional? es decir, este warning Uncaught SyntaxError: Cannot use 'import.meta' outside a module (at styles.js:8089:29)

[@cristiansanchezvalverde4424]

Excelente explicación

[@LogiDev]

Hola, muchas gracias ☺️

[@cristiansanchezvalverde4424]

@@LogiDev gracias estimado por compartir lo que sabes, una consulta para la versión 17 con que librería se podria trabajar los microfront?

[@LogiDev]

@@cristiansanchezvalverde4424 Te recomiendo Native Federate, pero ten en cuenta que todos tus MF tiene usarlo, no puedes usar Module Federation y Native Federate a la vez, tendras muchos errores.

[@rogeracg]

Esperando el multi repo :o

[@LogiDev]

Hola Roger, estoy preparando el video con el enfoque multirepo, espero terminarlo pronto, gracias por el apoyo 🤗

[@maopuerta3430]

gracias por compartir. Excelente tema. Depronto tienes en mente algun video explicando la carga dinamica de rutas con MFs?

[@LogiDev]

Hola, así es, también mostraré ese tema, gracias por el apoyo al canal 🙌🏻

[@frochaol]

Hola, muchas gracias por el video... tengo una consulta, antes de que se creara esa librería de angular-architects, cómo se configuraba modulos federados ?

[@LogiDev]

Tenias que instalar alguna libreria que te permita agregar funcionalidad adicional a webpack para que puedas usar ModuleFederation (recuerda que angular usa webpack por detras), luego configurar el angular.json

[@frochaol]

@@LogiDev Entiendo, gracias por la aclaración, saludos !!

[@leonardobarrios1509]

Hola, gracias por tu tiempo y compartir tu conocimiento, que piensas de compartir información de mf mediante localstorage?

[@LogiDev]

Hola Leonardo, si deseas persistir informacion no tienes de otra que almacenarlo en el storage de la web, puede ser local o sesion storage, cookies, indexDB, etc; lo que te recomiendo es encriptar la información guardada bajo un metodo de encriptación, por ejemplo la encrypt achromatic. Gracias por apoyar el canal 🤗

[@leonardobarrios1509]

@@LogiDev gracias por la reclamación, en el caso que uno utiliza un service que está en una librería fuera de mi proyecto monorepo y recargo una página con f5 es normal que se pierda los valores de ese service o no se deberían perder?

[@LogiDev]

@@leonardobarrios1509 si, todo lo que se guarda en el service solo es en memoria, si actualizas la pagina los datos se pierden, si no quieres que la data se pierda la tienes que guardar en el storage de la web

[@marcosjrs]

Gracias! :)

[@LogiDev]

Gracias por el apoyo 🤗

[@chuny_dev]

¿A qué se debe el error de import.meta? en el minuto 58:08

[@LogiDev]

Hola, el error es provocado por la alteración que hicimos de webpack usando la función "withModuleFederationPlugin", pero no impide que el proyecto compile y funcione, si quieres quitar ese error solo tendrias que agregar el valor del "publicPath" del objecto que te retorna la función ya mencionada, ejemplo: const moduleFederationConfig = withModuleFederationPlugin({ name: "mf-shell", remotes: {}, shared: { ...shareAll({ singleton: true, strictVersion: true, requiredVersion: "auto", }), }, }); moduleFederationConfig.output.publicPath = "localhost:4200/"; module.exports = moduleFederationConfig;

[@chuny_dev]

@@LogiDev esto se haría desde el orquestador, cierto?

[@LogiDev]

@@chuny_dev en cada webpack.config.js

[@LogiDev]

@@chuny_dev aqui lo tengo implementado kzbin.info/www/bejne/bnLFoXxsoLlliKs

[@InafuneTaka]

Gracias por la información! :)!! Pregunta, nx es lo mismo que usar federation?

[@LogiDev]

Hola, Nx es una herramientas que nos ayuda a mejorar la productividad al momento de desarrollar una aplicación, no tiene nada que ver con module federation, talves tu pregunta surge porque tiene la herramienta que te ayuda a implementar microfrontends, como dije es solo una herramienta, Module Federation es parte de WebPack 5 en adelante, espero haber respondido tu pregunta, gracias por el apoyo al canal

[@JulioGonzalez-bz4yf]

Maravilloso, bro!! ¿podrías hacer un video mostrando rutas dentro del microfrontend y un despliegue en el servidor de cada uno de los microfrontend? Donde trabajo usan nginx para servir las app. Desde ya agradecido de tu trabajo.

[@LogiDev]

Hola Julio, gracias por la recomendación, lo tendré en cuenta, gracias por el apoyo.

[@dromeroSL]

Excelente aporte en un tema qué hay muy poco material en español.

[@LogiDev]

Gracias por el apoyo 🙌

[@deymerh]

Excelente video @LogiDev, tienes algun ejemplo usando multirepo?, gracias!

[@LogiDev]

Hola, sacaré un próximo video con el mismo ejemplo pero en multirepo, gracias por el apoyo 🤗

[@rogeracg]

@@LogiDev Quedo atento al multirepo *-*

[@TheAlexalexsan]

Hola Jimmy, tienes algun video donde hagas el build de los proyectos y la libreria? Me esta dando problemas al hacer los build individualmente para su despliegue

[@LogiDev]

Hola, no tengo un repositorio de ello, es un gran tema para un nuevo video, gracias.

[@josecarlosleonnima1605]

Buenas tengo una pregunta, se pueden compartir librerias cuando es multirepo?

[@LogiDev]

Si, basicamente tu libreria la debes instalar en cada MF, pero en la configuracion colocas que esa libreria sera Singleton para que solo se desacrgue una vez y los demás MF la usen.

[@josecarlosleonnima1605]

@@LogiDev puedes hacer un ejemplo porfa ?

[@luiscuyapuertas2606]

genial

[@LogiDev]

[@nova3744]

Hola muy buen aporte, disculpa tengo una duda, cuál sería la diferencia de hacerlo en vez de angular applications usar varios workspace de angular?

[@LogiDev]

Ya trabajarias bajo un enfoque multirepo.

[@nova3744]

@@LogiDev entiendo muchas gracias!

[@rogerurbano8965]

Según la indicación en el repositorio dice que "common-lib" es para compartir "elementos", pero veo que instalaste el rxjs, mi consulta es sí esta aplicación tipo library también se usa para compartir las librerías que se instalan en ella como por ejemplo "bootstrap" o "tailwind"

[@leonardobarrios1509]

Gracias por compartir tu conocimiento. Una consulta en el caso que necesites token para las peticiones como recomiendas trabajar para que los micro front mantengan su funcionamiento independientes? realizar un componente adicional en el caso que se levante por separado para que obtenga dicho token?

[@LogiDev]

Hola Leonardo, en tu MicroFrontEnd debes de tener una petición que te entregue ese token y solo realizas la petición siempre y cuando no estés en modo producción, para ello usas los environment, ese token lo guardas en un local o sesión storage o lo que mejor te convenga, y luego solo lo usas desde ahí; cuando ya estés en producción se entiende que desde el micro shell se guarda el token en el localStorage(o donde lo hayas guardado) y tu micro consumirá eso

[@dromeroSL]

Guardar un token B2C en el localStorage lo veo algo inseguro. Me parece que lo mejor es mantenerlo en un servicio cross de angular encargado de la comunicación shell-mfe, o en todo caso una cookie con tiempo muy bajo de expiración del token

[@LogiDev]

@@dromeroSL podrias mantenerlo en un service, solo hay que tener en cuenta que si actualizamos la pagina perdemos la información, en si hay varias estrategias pero todo depende del negocio del proyecto y la arquitectura por detras.

[@leonardobarrios1509]

@@dromeroSL gracias amigo

[@mrbrightsidee5364]

Para compartir la información puedes usar Redux? , pero iria en el shell project, verdad?

[@LogiDev]

si vas a compartir datos entre varios MF iria en el shell, de lo contrario lo implementas en tu MF. PDT: No soy fan de usar Redux xd

[@sergioromero6646]

Puedes hacer un vídeo de cómo hacer comunicación entre componentes @input @output o redux de un microfrontend

[@LogiDev]

Hola Sergio, claro tambien realizare un video al respecto, gracias por el apoyo.🙌

[@dromeroSL]

Me sumo a este pedido, la comunicación es un tema crítico en donde aparecen los problemas

[@LogiDev]

@@dromeroSL pronto estare lanzando los videos, tengame paciencia 😅

[@FernandoDiegoSantillanVaras]

muchas gracias Jimmy, cual es la diferencia de usar angular architects y single spa? he estado viendo que tambien se pueden hacer mfs con ese framework?

[@LogiDev]

La diferencia es que Single-SPA es un metaframework y tiene muchas funcionalidades para crear MF además de contar con una CLI, es muy bueno

[@rogerurbano8965]

En la aplicación monolítica me da un error de que no encuentra para importar las imagenes guardadas en la carpeta assets/images de cada micro front, que faltaría configurar para importar una imagen estatica?

[@rogerurbano8965]

Una consulta sí se requiere instalar bootstrap ó Angular-material, entiendo que se hace en el package.json del "common-lib" Pero como se hace para compartirla entre los micro-frontend

[@LogiDev]

Cada Microfrontend instala la libreria, el truco es que cuando se configure el MF en el webpack.config ponga la libreria como "singleton" de esa manera "agular material" por ejemplo, se descargará una sola vez.✌

[@rogerurbano8965]

@@LogiDev según la estructura del proyecto cada MF no tiene un package.json, los únicos que tienen son la aplicación contenedora y el common-lib. Siendo ese el caso quedan 2 opciones donde instalar en este Angular Material, la duda es si se instala en el common-lib o en la aplicacion contenedora, por favor no lo tengo muy claro.

[@LogiDev]

@@rogerurbano8965 En este caso es microfrontend con arquitectura monorepo, por ende debes instalarla en el package.json raiz y listo, si estubieses en un enfoque multirepo tendrias que instalarlo en cada MF

[@rogerurbano8965]

@@LogiDev gracias por la respuesta, el MICRO FRONTEND esta pegando con fuerza, sería genial que también pudieras hacer videos de Clean Arquitect en Angular con Scaffolding casi no hay información.

[@brayannino8062]

Hola, super chévere el tema y todo lo aplicado, pero yo tengo un problema, en local, todo me funciona muy bien, pero cuando despliego a ambientes pre-productivos ya no me cargan los microsFront, es normal o hay que hacer alguna configuración adicional?

[@LogiDev]

Asegurate de configurar los CORS en tu servidor para cada uno de los MF

[@brayannino8062]

Me podrías explicar un poco sobre eso? no te entiendo 😅 @@LogiDev

[@LogiDev]

@@brayannino8062 cuando despliegas tu aplicación el servidor tiene una opción de habilitar los CORS, los CORS son políticas de seguridad, básicamente es habilitar la solicitudes cruzadas, desde cualquier dominio diferente al que tienes, pero eso l defines tu, es decir HABILITAR QUE URL O DOMINIOS PUEDEN REALIZAR SOLICITUDES A TU SERVIDOR, y ahí deberían estar las url donde tienes desplegado tus MF

[@edderdiaz9479]

Hola tendras algun tutorial o documentacion para poder debbuguear (mediante breakpoints ) microfrontend con vs code que me puedas proporcionar de favor . saludos

[@DanielZambrano-t4z]

Hola excelente video, que pasaria si tengo un micro que sea full stand alone sabes algo jeje?

[@LogiDev]

No pasa nada, lo puedes seguir usando, en vez de exportar modulos, exportas standalone, en mis videos de Microfrontend uso ambos

[@Xxp0werm4n]

tienes algún ejemplo donde el proyecto host y el remote sean repositorios y proyectos totalmente desacoplados?

[@LogiDev]

Hola Daniel, estoy preparando el video con el enfoque multirepo, espero terminarlo pronto, gracias por el apoyo 🤗

[@Xxp0werm4n]

@@LogiDev gracias a ti por los buenos aportes, saludos.

[@jespalza]

hola amigo, gracias me has solucionado muchas dudas, te ganaste un cafesito en estos dias pero me queda una duda. lo implemente pero las imagenes del mf no cargan sale la ruta del host pero no muestra la imagen del remote, que puede ser?-..... ya espero el siguiente video

[@LogiDev]

Hola Juan, realizare un video al respecto, gracias por el apoyo 🙌

[@VíctorBedmarLam]

Buenas crack, tengo una pregunta, si no levantamos uno delos microfronts o esta caido que se puede hacer para que no se rompa la app? tipo balanceador de carga o respaldo, como se haria en este caso? gracias, un saludo

[@LogiDev]

a nivel de infraestructura puedes usar un gateway que disponibilise el MF, si te refieres a detectar cuando no carga un MF directamente en tu proyecto, pues solo usas la opcion "catch" al momento de cargar el MF, cuando usas el "import" eso retorna un Promise; cuano se produsca un error haces un redireccinamiento a alguna pagina de error

[@jaasielsosamorales6735]

Hola estoy teniendo un problema al momento de crear el WorkSpace, utilizo el comando "ng new workspace --createApplication=false" y me aparece esto Error: Unknown argument: createApplication, ¿Alguien sabe a que se debe?

[@diegolobato4949]

Solo funciona con proyectos angular o tambien se puede con otro tipo de frameworks?

[@LogiDev]

Funciona con cualquier framework o librería de JavaScript

[@diegoBike31]

Buenas amigo, y en el proyecto se puede instalar angular material ?

[@LogiDev]

Claro, sin ningún problema

[@darkking016]

gracias xD

[@LogiDev]

Gracias por el apoyo 🤗

[@darkking016]

@@LogiDev una dudota en libary es necesario hacerle el npm i ? porque tendria 2 node el del root y el del libary

[@andresen21]

la verdad no pude replicar el contenido, se omiten ciertas cosas con lo cual genera error al momento de tratar de hacer el ejercicio.

[@LogiDev]

Talves sea por la versión de NodeJS y AngularArchitect que estes usando, que error tienes?

[@rogerurbano8965]

Yo lo estoy realizando con Agular 15, al principio tenía problemas de compatibilidad con angular architect pero revise las versiones del npm y listo

[@LogiDev]

@@rogerurbano8965 excelente :D