Webpack 5 module federation demo using yarn workspace and storybook for react components.
The "remote" application, components
, is a storybook application that exposes some UI components; Button
, SvgImage
and Header
.
"Remote" applications astrology
and dreams
are consuming the remote UI from the storybook components application rather than bundling them into their own builds.
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.