Imagine splitting a massive app into smaller, independent pieces that different teams can build, deploy, and scale without stepping over each other. In this video, we’ll dive into how you can achieve this architecture with ReactJS & Vite module federation, explore its benefits, and even tackle challenges like shared state.
🔗Links
Github repo link: https://github.com/AkileshRao/microfrontend-react
Docs: https://github.com/originjs/vite-plugin-federation
Github issue for HMR: https://github.com/originjs/vite-plugin-federation/issues/525
Why pnpm: https://youtu.be/NIqcJU5-lVE
⌚Timestamps
0:00 - Intro
3:04 - Project setup
4:48 - Host and remote
9:00 - Vite build config and module federation config
13:20 - React components and integration
14:50 - Running both the apps and challenges
20:20 - HMR(kinda)
23:00 - Sharing state between apps
30:40 - Outro
🧑💻Other playlists:
Tanstack query - https://www.youtube.com/playlist?list=PL62km_yqC3ZHn5Wh9RaFNaEH3B7mxrv0B
Push Notifications using SW - https://www.youtube.com/playlist?list=PL62km_yqC3ZF5Dh9vFdjjRxvn1xQKqj4B
Service worker in Javascript (2023) - https://www.youtube.com/playlist?list=PL62km_yqC3ZEs7VWDF1BdmKwFHiXTDZPk
Javascript observers(2023) - https://www.youtube.com/playlist?list=PL62km_yqC3ZGEevgSAFoMcGl8tSVGO_cI
The Web components Playlist - https://www.youtube.com/playlist?list=PL62km_yqC3ZFk2A1JltWKGT0qy7gNspl_
The Git series(2023) - https://www.youtube.com/playlist?list=PL62km_yqC3ZH1Drj72q3W2HiQZcPO33kE
Multitasking in NodeJS - https://www.youtube.com/playlist?list=PL62km_yqC3ZEV0wKbLbd3CG-2zt3oDkes
NodeJS Authentication with Passport - https://www.youtube.com/playlist?list=PL62km_yqC3ZHlvkKVmR2f3W6SEzh8pRIf
Job scheduling in NodeJS - https://www.youtube.com/playlist?list=PL62km_yqC3ZEyoJa7JtdPOmzMgKuuZZ-x
NPM Tutorial Series - https://www.youtube.com/playlist?list=PL62km_yqC3ZG2su1cA-mY_6S3mSFafAS8
Javascript(Behind the scenes) - https://www.youtube.com/playlist?list=PL62km_yqC3ZE83FRlmER2sLH1T2RSoj4A
Socials
🐤 Twitter - https://twitter.com/themangalorian
📷 Instagram - https://www.instagram.com/_alt.ar_/
👔 LinkedIn - https://www.linkedin.com/in/akilesh-rao-610357137/
🧑💻 GitHub - https://github.com/AkileshRao
📝 Medium - https://medium.com/@akileshrao19