Just an example of how you could use module federation to build a scalable site that could be developed by multiple different teams independently.
Find the article describes it in the details on a habr.
☝🏻 Remember, that this is just a POC and not a production ready code, it just proves that independent development of fragments + server side rendering is possible with the standard instruments we already have.
Ok, let's see how deep is the rabbit hole 🐇
Open the 3 terminal windows
Team A could be fully responsible for header component and to build and run the server they use the following commands:
cd greatsite/fragmentHeader
, in reality, fragmentHeader is another repo, it is not required be in the same foldernpm install
- Build and run a server:
npm run build-dev-server && npm run build-client && npm run start-server
Team B is responsible for the footer component and team builds their stuff via:
cd greatsite/fragmentFooter
, could be another repo againnpm install
- Build and run a server:
npm run build-dev-server && npm run build-client && npm run start-server
cd greatsite/appRenderer
, here where the magic and all fragments are being glued together, this repo is a site that users seenpm install
- Build and run a server:
npm run build && npm run start-server
and you're done!
- Open the greatsite via http://localhost:3000 - All fragments are server side rendered and rehydrated on client
- Make a change in fragment header component and restart ONLY the header by running the header bootstrap command from point #1
- Just reload the page - MAGIC new version of header without the whole site to be redeployed/restarted - that's a magic!!
Let me know if something is not clear, I could give you a consultation: egorvoronov@gmail.com