Module Federation - Micro frontend architecture

Module Federation - Micro frontend architecture | nextjs

Рет қаралды 28,328

Күн бұрын

This is another approach to building a micro-frontend application and having a good user experience and development experience.
Scale the team and decouple the frontend app.
vsantos.info
Repo:
github.com/vic...
Part I Documentation:
vsantos.info/m...
UPDATE: Deployment
vsantos.info/m...
3:45 Run the apps
5:43 Add components to the Main App to share
9:25 Module Federation Configuration
15:28 Import dynamic components from the main app
18:28 Render nextjs Pages in Main App located in Shop App
13:25 Load components into the Main app located in Shop App
26:10 Export static assets and publish into AWS S3 bucket

Пікірлер: 120

@duytdl 8 ай бұрын

This is the most ASMR-like tutorial I've seen on this topic. lol. I like it! You have a very soothing voice.

@WanderersNation 8 ай бұрын

this is gold for beginner's like me who don't have idea of micro frontend apps, I am just starting to learn micro frontend and i understood everything, Thanks ❤❤

@kapilc Жыл бұрын

Hi Victor, thank your for this video, am still watching. My only feedback is to reduce background volume to be able to understand what you speaks :)

@kamrul91111 Жыл бұрын

Use a monorepo managing package like lerna or nx or turborepo to make this process simplified. Amazing tutorial Vic

@victors16811 Жыл бұрын

Good point, let me clarify this, for the demo I had both apps in the same repo, in reality, both apps live in different repo, that way they can be isolated and decoupled completely and can be deployed separately also different teams can manage their own app. I’ll share some documents about how the architecture will look like

@jagaAlien Жыл бұрын

beautuful explaination, but the background music volume could have been waymore low , nice explaination kudos

@mordecaii14 Жыл бұрын

Thanks for the contribution Victor, your example helped me a lot to solve my doubts about the architecture of micro-frontends. Now I just have to know the best way to deploy podruction 😅

@victors16811 Жыл бұрын

Hi Aramen, seems like this is a common question, I need to document my approach and share with you, about, how I'm handling different environments DEV, STAGIN, and PRODUCTION. A quick summary is to have those app deployed on multiple environments and each app only talk with the environment where they are using a variable in the build time like CURRENT_ENV=dev,st,prod

@victors16811 Жыл бұрын

Update about how I handled multi environments vsantos.info/module-federation-deployment-configuration-part-ii/

@zuojimmy1198 11 ай бұрын

thank you very much for the video. One small suggestion, maybe it would be better to turn down a bit of the background music. Thanks

@GuilhermeHenrique-fp1wo Жыл бұрын

fala vitao, dá pra conectar um microfront next com um projeto só em react? usando esse plugin? vi no git que os cara tão cobrando pra usar ele

@darkside2436 Жыл бұрын

Nice video. I knew many new things about how make microfrontends.

@raellawrence7116 Жыл бұрын

Great content, but would be better without background music. It's loud, distracting and unnecessary...

@menelikwilliams7504 9 ай бұрын

Hi Victor, great video, but please don't add background music

@abhilashm5236 Жыл бұрын

Great video , can you plz make a same kind of video with next 13

@gauravmithas2362 Жыл бұрын

it cant get any easier @victor santos, great tutorial!!

@manorinfinity Жыл бұрын

Bravo. You made it work mate. Thanks a ton.

@phongla5509 7 ай бұрын

Please, I have a question: if I have an update in component 1 and the information after the update requires component 2 to also update component 1, how can I do this? Please explain this question to me.

@khaitrung28 7 ай бұрын

I very appreciate, but could you have a tutorial with nextjs v14 & typescript, please.

@KamilLewandowski-id5xt 6 ай бұрын

Is there some valid way to load fallback content in case microfrontend consumed in container failed to load? I tried error boundary, chaining .catch block to import() inside dynamic but neither of them seems to work.

@MatejBasta 6 ай бұрын

Hello, thank you very much for the tutorial. It is really helpful and easy to follow. However, I have one question. In the video 17:57 , when you change a text in the footer, the shop-app gets automatically updated after the refresh. When I try to do the same, I get an error, stating that "the text content does not match the server-rendered HTML". This happens, because the HTML sent from the server does not get updated. Could someone please help me to solve this issue? I am a beginner in coding, and I cannot wrap my head around this problem for the last few days. I am getting this error even if I run the code from your repository.

@debs1991 Жыл бұрын

Hello Victor! Thanks for this tutorial. I followed this, I was trying to use Tailwind css in both the apps. But css rules are not getting applied from shop app when I am checking main app and vice versa. Any thoughts ? Thanks in advance!

@victors16811 Жыл бұрын

Did you try to add on share configuration tailwind dependency in both app something like that: shared: { tailwindcss: { eager: true, singleton: true, }, }, Try this out, also there’s another alternative, is create a custom npm package and share. Lmk if works

@VietLedeptrai Жыл бұрын

I tried, but it did not work. Please check

@divyaavutala2669 Жыл бұрын

@@victors16811 Hello Victor! Thank you for the tutorial, this makes a lot of things easy. I have having the same issue with tailwind unfortunately. What you suggested above didn't work. Can you think of another approach?

@nickcostello2810 Жыл бұрын

Module federation begins at 9:37

@ivanhueso Жыл бұрын

Hi, Lets say i have two apps and a developer i want to give access just to one of the apps. How will his app work if it's dependant of component from the second app i don't want to give access to?

@victors16811 Жыл бұрын

If you have the Main app(container) and you don’t want to give access to that repository you can make the configuration changes and deploy it in some sort of DEV environment that way the developer can work locally connected pointing to the dev env… is that what you trying to achieve? I also had to create some npm package like context API and UI library, install it on each app, and in the config file under module federation I had to add the property share to improve the dev experiences

@sebastiannietor9724 Жыл бұрын

How can i use export pages but for app folder router?

@piyushsharma7892 Жыл бұрын

thankyou very much Victor, you solved most of my doubts, If you are available kindly answer this question, I want to fetch remotes names and urls json using a API call, so that I don't need to redeploy host application if I release/deploy any new component, kindly suggest a way to make remotes dynamic (fetching data using api call)

@victors16811 11 ай бұрын

Repo: github.com/victors1681/module-federation-tutorial Part I Documentation: vsantos.info/micro-frontend-architecture/ UPDATE: Deployment vsantos.info/module-federation-deployment-configuration-part-ii/

@Jeevansarees 5 ай бұрын

can you upload a video for next.js 14^ with next- MF

@marwaehab9793 Жыл бұрын

when I run the app after adding the config file I got this 'Internal Server Error' and this error Error: 'entryOptions.layer' is only allowed when 'experiments.layers' is enabled

@marwaehab9793 Жыл бұрын

I am using typescript with Nextjs13

@VitorBoccio Жыл бұрын

Hey, tks for the tutorial. Very easy to follow. Sharing components are easy, but I am having a hard time sharing data and functions to use across child apps. Do you have an example of that? Tks

@victors16811 Жыл бұрын

Hi Vitor, don’t hace example but I explained what I had to do here vsantos.info/module-federation-deployment-configuration-part-ii/ - create a custom npm package - create a context api - configure the package in the shell and children app - configure the package using the eager option true in the module federation

@VitorBoccio Жыл бұрын

@@victors16811 not sure why you would need another package for that? What were the limitations you found along the way? My understanding is that you ended up sharing another component (the context component). So why would you create a separated library for that if you could use the same project (this main-app for this tutorial for example)? Worth a video or a more in depth article? Tks!!

@victors16811 Жыл бұрын

@@VitorBoccio in the video tutorial I have both app in the same reprepository, however, in production, I have each application in a separate repo, completely isolated one for the others, which helps me to have multiples teams contributing on each application, only if I need to share information between those 2 isolated apps do I use a share-context component to install it in the root app and the children. Feel free to share a repo example to see what are you trying to do

@VitorBoccio Жыл бұрын

@@victors16811 sure. Is there a discord or something that I can reach out instead of sending here on yt comments?

@dhavalradadiya9412 Жыл бұрын

What is the content of _document.js of shop-app? Is it required for sharing components across the apps?

@victors16811 Жыл бұрын

Hi! It is not required! Can works without it

@dhavalradadiya9412 Жыл бұрын

@@victors16811 Thanks - It worked. 🙌

@uttam8349 4 ай бұрын

Thank you for the post

@krishnachaitanyayelleti48 Жыл бұрын

@victorsantos Can i get github url for reference ..

@crypto4elik 11 ай бұрын

by the way if i have monorepository is that better to use as main host app a next js or react? i actually cant get how to handle routing when one the apps is react and the second is next

@victors16811 11 ай бұрын

@nomadplace Жыл бұрын

Someone knows how can i fix this error when i tryed to import a component with dynamic ? "Cannot find module 'main/footer' or its corresponding type declarations.ts(2307)"

@marcelinoborges5088 Жыл бұрын

A few questions above there is this answer from Victor Santos: Hi, you need to define your module on a global file. create a new file MyModules.d.ts then add into =>>. declare module 'main/footer';

@matildawang920 Жыл бұрын

Hi Victor, thank you for the awesome video! What would happen to shop app when the main app component is not available at some moment for example being deploying or the server went down? Any safe-guard should be use on the shop app? Could you please also provide possible solution that is commonly used? Thank you.

@victors16811 Жыл бұрын

You can use some fallback to present any custom messages, or some alternative when you're loading your components Async. ``` const ErrorComponent = ({ children }: any) => { return Error Fallback loading remote component {children}; }; const Layout = dynamic(() => import('main/Layout').catch(() => ErrorComponent), { loading: (props: DynamicOptionsLoadingProps) => { if (props.isLoading) { return Loading...; } if (props.error) { console.log(props.error); return Error; } return nothings; }, ssr: false, });```

@matildawang920 Жыл бұрын

@@victors16811 Thank you so much🙏

@crypto4elik 11 ай бұрын

so if i have for example 3 different mini frontend apps i have to build 3 bundles and deploy each of em on different servers so that my main host app could access them via real http address? i thought i can somehow merge em all into unite project and just deploy it once. no way?

@victors16811 11 ай бұрын

It's good to ask the questions 1- Why do you need module federation in the first place 2- what problem are you trying to solve with this. For small app or teams having modules or micro frontend can be really hard to maintain because the main goal is to isolate one application from the other

@crypto4elik 11 ай бұрын

@@victors16811 i wanna make a part of my app to be SSR and the rest of it to still be just react. and it will be intresting wxperience also

@majklzumberi1761 Жыл бұрын

How would you implement a auth dedicated mfe? Maybe using next auth library

@victors16811 Жыл бұрын

I was able to pass the Access Token from the Shell app to the other mfe modules, using context API so if the mfe module does not have the token you can fallback.

@ferelaskar7843 Жыл бұрын

Hello victor, excellent video! it served me for my project but I wanted to implement the nav in another microfrontend but when placing it in my host application does not find the module of next / Link, I am obviously breaking the nav app. I was looking and I can't find how to solve it, do you have any idea how to solve it?

@victors16811 Жыл бұрын

umm, make sure you're using the same nextjs version in both, if still doesn't work add 'next/link': { eager: false, singleton: true, requiredVersion: false, }, in theory, those modules are shared under the hood, but try this out and lmk

@Artydfx Жыл бұрын

after config webpack, the app throws error … 'client-only' cannot be imported from a Server Component module. It should only be used from a Client Component. :(

@victors16811 Жыл бұрын

That’s because you’re using the last version of module federation next, there are some breaking changes. Try the version I have in my repo in the description

@Artydfx Жыл бұрын

@@victors16811 I tried version 5.11.5 and now it throws an error "ReferenceError: __webpack_require__ is not defined", same with 6.0.4

@victors16811 Жыл бұрын

@@Artydfx umm did you install webpack manually?

@Artydfx Жыл бұрын

@@victors16811 yes, wp 5.75.0

@victors16811 Жыл бұрын

@@Artydfx try your node version, use 14.x

@dailydev5891 Жыл бұрын

Hi, this is a great video. However, im having difficulty using a css library (chakra-ui) it seems the apps dont share the styling. got an idea of a solution for this? Thanks!

@victors16811 Жыл бұрын

chakra-ui hasn't used it, also keep in mind the last version of the module federation has some breaking changes, and sharing dependencies, I'm looking into it, probably I'll have to update the video

@decadence7083 Жыл бұрын

Hello Victor, are there already stable solutions for implementing ssr, and if so, where to look for them? Thanks for your help!

@victors16811 Жыл бұрын

Haven't tried yet, and I'm planning to btw..

@Samuel-ql7tq Жыл бұрын

How do we share store between shop and the main apps?

@victors16811 Жыл бұрын

In the video description you can find a link where I explain this, however, keep in mind the concept of microservices, you should try to isolate those microservices as much as possible, which means the micro module should fetch data independently

@josephkishor6401 2 ай бұрын

Nice video. But this approach will not work for NextJS14 and trying with nextjs 14 is a suicidal attempt. Same approach cannot work just because of a single version upgrade means that MFE is not a way forward. Such a maintanance headache. Sepaare build, pipelines, inter team issues, version incompatibility...i can give 100 reasons not to go with Micro front end.

@NatarajPatil Жыл бұрын

Hello Victor, can I use Module Federation with nextJs 13 which uses Turbopack? If so, please share any related references

@victors16811 Жыл бұрын

Hi! I don't think so, module federation is a Webpack extension introduced in webpack 5 and turbopack is pretty new feature.

@TyoBaskara 8 ай бұрын

awesome! thanks

@Driveshive Жыл бұрын

Hello Victor, can you tell how to implement micro frontend with Next 13?

@victors16811 Жыл бұрын

Hi, im using nextjs13 in this tutorial, do you have more specific question?

@Driveshive Жыл бұрын

@@victors16811 Sorry its working now. Thank you for sharing this. can you share video for deploying NextJS micro frontends?

@victors16811 Жыл бұрын

@@Driveshive where are you trying to deploy your app? Firebase, versel, Heroku? Basically, you need to deploy your app independently 2 or 3 different apps and then use the URL for each one to connect reportedly in the config the same way you do locally.

@Driveshive Жыл бұрын

@@victors16811 Got it thank you.

@almostrandomnickname Жыл бұрын

thanks for the vid. you coud add the repo in the comments pls?

@victors16811 11 ай бұрын

@VietLedeptrai Жыл бұрын

Hi Victor, I'm using typeScript, however, i have a question about an warning. ```Cannot find module 'main/footer' or its corresponding type declarations.ts ``` while import footer from main app to shop app. Could you please tell me how I can fix it? How to declare the component? Thanks

@victors16811 Жыл бұрын

Hi, you need to define your module on a global file. create a new file MyModules.d.ts then add into =>>. declare module 'main/footer';

@VietLedeptrai Жыл бұрын

@@victors16811 Thanks so much. Can you add a version - share state in redux toolkits between 2 projects?

@victors16811 Жыл бұрын

@@VietLedeptrai you can use Hook to share information from the shell application to the child one, also try to keep everything isolated as much as posible because that's the main idea of MicrofronEnd

@mahdighoussein Жыл бұрын

const Header = dynamic(() => import("./header")); giving error

@victors16811 Жыл бұрын

why you're trying to import ./header dynamically? is it a local module? if you're trying to import a remote module you need the module name in front

@avinashtiwari8391 Жыл бұрын

is module-federation/nextjs-mf free?

@victors16811 Жыл бұрын

Yes MIT license, at the beginning the author had a pay version for the SSR but now is open source

@rajestark Жыл бұрын

can you share your code.. please ?

@victors16811 11 ай бұрын

@rbltv Жыл бұрын

Despite the content of the video being good, I fell asleep several times. Do not use this type of music, have the most active voice...

@victors16811 Жыл бұрын

I hear you! 😅

@julianyesidcarrenogomez1514 Жыл бұрын

En español

@victors16811 Жыл бұрын

Umm me pregunto si no has encontrado información de este tema en español.. en ese caso programare achacar uno