simplesthing avatar in waifu style

Federated Modules

Webpack 5 module federation demo using yarn workspace and storybook for react components.

The "Remote Container" application `components` is a storybook application that exposes UI components; `Button`, `SvgImage` and `Header`.

storybook screenshot

"Remote Host" applications `astrology` and `dreams` are consuming the remote UI from the storybook components application rather than bundling them into their own builds.

federated module config screenshotwebpack plugin screenshot

See video below for a simple contrived example of the consumption and live updating of a color value in header component CSS file from the storybook application. Both astrology and dreams applications are pulling their header component into their bundle from the live components application that is serving the remote components via webpack module federation.

Try it yourself: Code on github