te felicito es muy práctico tu forma de explicar, 2 preguntas, crees que seria aplicable si se trabajan en dos repos independientes con nextjs, que de pronto se configuren con webpack y que empiezan a compartir el footer header etc?, la última seria, a nivel devops y pipeline multiples repos conviven en el mismo domain, entonces el setup del que expone y el import en donde se arma de donde consumir (micro a y b) podrian apuntarse bajo el mismo dominio punto com productivo no?, lo mas logica ahi seria tener las variables de entorno previamente seteadas desde el panel de donde sea que lo tienen los devops digo, ya que variarian los domains en qa stg y prod correcto?
Hola! Excelente video, es muy clara toda la información. Quisiera saber si module federation es compatible con App router de NextJS, actualmente estoy tratando de que desde un botón de mi app principal se muestre toda mi app secundaria con su flujo normal y enrutado interno. Pero al tratar de hacer esto me sale: Error: Shared module next/router doesn't exist in shared scope default Estuve viendo el repo de la librería y el creador dice que no tiene compatibilidad con app router, saben alguna manera de implementar microfrontend en NextJS con app router? Muchísimas gracias!!
Gracias por el video. saludos este video es de hace 1 año. se mantiene vigente con las nuevas versiones de next.js??? Se puede utilizar con server actions? se puede usar con orm prisma en relacion a no tener schema duplicados ??? Quien me podria orientar???
hola estuve tratando de hacer un proyecto con micro frontend y next 13 y typescript sabes si se puede hacer micro front end con las nuevas caracteristicas al activar el app directory? yo no lo pude lograr por una cosa o por otra tiraba error en las importaciones dinamicas y tenes algun ejemplo si se puede? tailwind no lo pude configurar aun tampoco en microfrontend con nextjs 13
Hola finalmente pudiste hacerlo? porque quisiera intentarlo por saber si llegaste a hacer microfrontends con las ultimas funcionadlidades de next js 13
Excelente, doc una consulta. como haria si necesito controlar la ruta desde el remoto y no desde el orquestador ? es decir tu hay en ese ejemplo creas la pagina :/ y hay llamas a tu pagina remota, pero y si desde el orquestador no sabes el pathbase como harias para renderizar la pagina remota al entrar en la url correspondiente, esto podria hacerse con react-router-dom, pero como se podria hacer en next js con su sistema de router por paginas ?, saludos.
No se puede compartir la ruta de una pagina completa? Por ejemplo en mi app1 tengo varios modulos y un login, pero en mi app 2 tengo un modulo adicional de /contracts, y otros paths comp /contracts/detail/1, como podria compartir esa carpeta o ruta en mi app1 y que a su ves compartan las funcionalidades para que las rutas esten protegidas mediante la autenticación del login
Hola. Estoy utilizando micro-frontend con next.js (ambos) y los estilos los tengo con tailwind. Sim embargo, cuando llamo de un micro a otro, los estilos o no se aplican bien o derechamente no se aplican. Porque puede ser?
Amigo una consulta, cuando le agrego estilos a través de classes al botón del micro "next2" solo se reflejan en la app abierta en el puerto "3001" pero en el micro "next1" (abierto en en el puerto "3000") que es donde se esta importando el botón pierde eso estilos, abra alguna manera de que persistan los estilos?
Hola Omar, El Tema es que tienes que importar los estilos en el modulo que estas exponiendo, por ejemplo si estas exponiendo la page "Home" tienes que importar los estilos en ese mismo componente no de manera global ya que el escope del bundle solo es el del modulo federado
@@luisandrademe Hola amigo, gracias por tu respuesta, ya había solucionado ese tema, pero ahora me salió otro, tengo 2 micros front uno que es el contenedor y otro que se llama inbox, ambos micros están usando tailwindcss v2.2.19, el micro contenedor esta importando correctamente el micro inbox, cuando lo abro en mi local los estilos de tailwindcss en el contenedor y en el inbox se ven bien pero cuando cuando hago el despliegue en firebase los estilos del contenedor se ven bien pero los del inbox no los reconoce.
Sure, The issue is that you have to import the styles in the module that you are exposing, for example if you are exposing the "Home" page you have to import the styles in that same component, not globally since the scope of the bundle is only the federated module
@@luisandrademe Oh ok. But for css, Im using tailwind. the css is working in port 3001 and not in port 3000 [main-app], provided I have tailwind configured in both [main-app] and other app which has the component currently exposing. Any feedbacks would be great. Thanks in advance!
@@arvindsuriya6342 in that case you should make share the package of tailwind as singleton and not setup tailwind on remotes only on the host this week i will upload a video explaining and config tailwind with mfe for nextjs. im working on that
luego de intentar varias horas resolvi lo de tailwind para que ande con module-federation con nextjs 13. pero que funcione con el directorio app y typescript no pude. Vos por casualidad pudeste?
me gusto el video pero podrias subir correctamente a github el ejemplo? tenes en cada carpeta next1 y next2 en cada una tenes el directorio .git y tenés que eliminarlo de ahi porque no se puede ver el codigo fuente. hace el git init en el directorio padre para que pueda subir correctamente al repo los dos microfrontends
Muy interesante muchas gracias
Me encanto tu video, explicas de forma clara y concisa!
gracias genio, sos un crack... espero el proximo video jajajajja
Me alegra que te haya gustado el video, espero te sea util. Gracias por el apoyo 🙏
Dale genio segui asi sos un crack!!
Hola compa , excelente , dejaré like y sub , seguirás subiendo videos de microfrontend? me interesa
te felicito es muy práctico tu forma de explicar, 2 preguntas, crees que seria aplicable si se trabajan en dos repos independientes con nextjs, que de pronto se configuren con webpack y que empiezan a compartir el footer header etc?, la última seria, a nivel devops y pipeline multiples repos conviven en el mismo domain, entonces el setup del que expone y el import en donde se arma de donde consumir (micro a y b) podrian apuntarse bajo el mismo dominio punto com productivo no?, lo mas logica ahi seria tener las variables de entorno previamente seteadas desde el panel de donde sea que lo tienen los devops digo, ya que variarian los domains en qa stg y prod correcto?
Hola! Excelente video, es muy clara toda la información. Quisiera saber si module federation es compatible con App router de NextJS, actualmente estoy tratando de que desde un botón de mi app principal se muestre toda mi app secundaria con su flujo normal y enrutado interno. Pero al tratar de hacer esto me sale:
Error: Shared module next/router doesn't exist in shared scope default
Estuve viendo el repo de la librería y el creador dice que no tiene compatibilidad con app router, saben alguna manera de implementar microfrontend en NextJS con app router?
Muchísimas gracias!!
Gracias por el video. saludos este video es de hace 1 año. se mantiene vigente con las nuevas versiones de next.js???
Se puede utilizar con server actions?
se puede usar con orm prisma en relacion a no tener schema duplicados ???
Quien me podria orientar???
hola estuve tratando de hacer un proyecto con micro frontend y next 13 y typescript sabes si se puede hacer micro front end con las nuevas caracteristicas al activar el app directory? yo no lo pude lograr por una cosa o por otra tiraba error en las importaciones dinamicas y tenes algun ejemplo si se puede? tailwind no lo pude configurar aun tampoco en microfrontend con nextjs 13
Hola finalmente pudiste hacerlo? porque quisiera intentarlo por saber si llegaste a hacer microfrontends con las ultimas funcionadlidades de next js 13
por lo que vi en el repo de @module-federation/nextjs-mf estiman que para la version 7.1 se pueda usar mf con
app router
Excelente, doc una consulta. como haria si necesito controlar la ruta desde el remoto y no desde el orquestador ? es decir tu hay en ese ejemplo creas la pagina :/ y hay llamas a tu pagina remota, pero y si desde el orquestador no sabes el pathbase como harias para renderizar la pagina remota al entrar en la url correspondiente, esto podria hacerse con react-router-dom, pero como se podria hacer en next js con su sistema de router por paginas ?, saludos.
No se puede compartir la ruta de una pagina completa? Por ejemplo en mi app1 tengo varios modulos y un login, pero en mi app 2 tengo un modulo adicional de /contracts, y otros paths comp /contracts/detail/1, como podria compartir esa carpeta o ruta en mi app1 y que a su ves compartan las funcionalidades para que las rutas esten protegidas mediante la autenticación del login
Hola. Estoy utilizando micro-frontend con next.js (ambos) y los estilos los tengo con tailwind. Sim embargo, cuando llamo de un micro a otro, los estilos o no se aplican bien o derechamente no se aplican. Porque puede ser?
En este video explico como poder integrar tailwind con modules federation y nextJS ua-cam.com/video/-yXUMWghr0U/v-deo.html
@@luisandrademe Gracias amigo, me suscribo
Amigo una consulta, cuando le agrego estilos a través de classes al botón del micro "next2" solo se reflejan en la app abierta en el puerto "3001" pero en el micro "next1" (abierto en en el puerto "3000") que es donde se esta importando el botón pierde eso estilos, abra alguna manera de que persistan los estilos?
Hola Omar, El Tema es que tienes que importar los estilos en el modulo que estas exponiendo, por ejemplo si estas exponiendo la page "Home" tienes que importar los estilos en ese mismo componente no de manera global ya que el escope del bundle solo es el del modulo federado
@@luisandrademe Hola amigo, gracias por tu respuesta, ya había solucionado ese tema, pero ahora me salió otro, tengo 2 micros front uno que es el contenedor y otro que se llama inbox, ambos micros están usando tailwindcss v2.2.19, el micro contenedor esta importando correctamente el micro inbox, cuando lo abro en mi local los estilos de tailwindcss en el contenedor y en el inbox se ven bien pero cuando cuando hago el despliegue en firebase los estilos del contenedor se ven bien pero los del inbox no los reconoce.
Remote app’s getServerSideProps is not getting executed in host app. Do you know how to get it working?
Can you give me more context? what error is showing when you try use getServerSIdeprops or share the source code
css are not loading in microfrontend imported to the main app. any suggestions how to handle it?
Sure, The issue is that you have to import the styles in the module that you are exposing, for example if you are exposing the "Home" page you have to import the styles in that same component, not globally since the scope of the bundle is only the federated module
@@luisandrademe Oh ok. But for css, Im using tailwind. the css is working in port 3001 and not in port 3000 [main-app], provided I have tailwind configured in both [main-app] and other app which has the component currently exposing. Any feedbacks would be great. Thanks in advance!
@@arvindsuriya6342 in that case you should make share the package of tailwind as singleton and not setup tailwind on remotes only on the host this week i will upload a video explaining and config tailwind with mfe for nextjs. im working on that
@@luisandrademe Thank you. For the effort :)
que version de next usas?
luego de intentar varias horas resolvi lo de tailwind para que ande con module-federation con nextjs 13. pero que funcione con el directorio app y typescript no pude. Vos por casualidad pudeste?
hola, me pasa lo mismo, pudisteis encontrar la solucion??.. saludos
me gusto el video pero podrias subir correctamente a github el ejemplo? tenes en cada carpeta next1 y next2 en cada una tenes el directorio .git y tenés que eliminarlo de ahi porque no se puede ver el codigo fuente. hace el git init en el directorio padre para que pueda subir correctamente al repo los dos microfrontends
Muchas gracias Juan, no había notado que no se subió bien el git, ya esta en linea
Muchisimas gracias por tu video, me gustaria saber como es el tema de las rutas, un remoto puede compartir sus rutas o como es?
Lo malo de este metodo es que no funciona con app router...