{"id":15683407,"url":"https://github.com/tillathehun0/webpack5-playground","last_synced_at":"2025-05-07T13:03:46.176Z","repository":{"id":47833273,"uuid":"258402069","full_name":"TillaTheHun0/webpack5-playground","owner":"TillaTheHun0","description":"My little playground for experimenting with Webpack 5 Module Federation","archived":false,"fork":false,"pushed_at":"2021-08-12T15:39:34.000Z","size":1213,"stargazers_count":10,"open_issues_count":1,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-05-07T13:03:41.625Z","etag":null,"topics":["federation","microfrontend","module","react","storybook","webpack"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/TillaTheHun0.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-04-24T04:07:37.000Z","updated_at":"2021-08-12T05:36:30.000Z","dependencies_parsed_at":"2022-09-11T08:51:05.781Z","dependency_job_id":null,"html_url":"https://github.com/TillaTheHun0/webpack5-playground","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TillaTheHun0%2Fwebpack5-playground","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TillaTheHun0%2Fwebpack5-playground/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TillaTheHun0%2Fwebpack5-playground/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TillaTheHun0%2Fwebpack5-playground/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/TillaTheHun0","download_url":"https://codeload.github.com/TillaTheHun0/webpack5-playground/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252883227,"owners_count":21819158,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["federation","microfrontend","module","react","storybook","webpack"],"created_at":"2024-10-03T17:05:05.380Z","updated_at":"2025-05-07T13:03:46.157Z","avatar_url":"https://github.com/TillaTheHun0.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Webpack 5 Playground\n\nThis is a playground to experiment with Webpack 5, in particular its new `ModuleFederationPlugin`\n\n## Getting Started\n\n`yarn \u0026\u0026 yarn dev`\n\nThis will start 3 webpack dev servers and 1 storybook server:\n\nWebpack Dev Servers:\n\n- The Header Server (`http://localhost:3001`)\n- The Footer Server (`http://localhost:3002`)\n- The App Server (`http://localhost:3000`)\n\nStorybook Server:\n\n- The \"Design System\" (Chakra-UI 'cause I ain't writing no fancy components. This is just to explore Storybook as a Webpack 5 remote entrypoint) (`http://localhost:6006`)\n\nThe Main App pulls dependencies from the Header, Footer, and Design System servers, at runtime, and \"stitches\" them together to form a full application. It's magic 🌟\n\n### Prove that it works\n\nNavigate to `http://localhost:3000` to see the awesome app ;)!\n\nNow let's say the Design System team wants to make a change. They want to remove that ugly border on the `Box` component in the design system. Let's go ahead and do that:\n\n`packages/design-system/src/components/Box/index.jsx`\n```javascript\nconst StyledBox = styled(Box)`\n  border: 2px solid black; \u003c-- Remove this line\n`\n```\n\nGo ahead and save and let Storybook rebuild your component. Now refresh the page on `http://localhost:3000`. Notice that the border on our header and footer is gone! Again, our app does not have a dependency on our Design System at build time (check its `package.json` if you don't believe me), but at _run time_. The components are fetched by Webpack at runtime using Module Federation and made available to our app. **Your Storybook is now a component host for your design system, the one source of truth for documentation and distribution.**\n\n### So what?\n\nThis means any updates to your design system happen the instant your design system changes, across all of your apps. No more bumping dependencies and creating new artifacts to get those design system changes live.\n\n## Why\n\nTypically, frontends are monolithic, having a manifest of dependencies, usually a `package.json`, and is deployed altogether as a single artifact. Any components that the application depends on is ususally included as a _versioned_ dependency in the `package.json` and then imported throughout the project. This works great for small applications.\n\nAs an application grows, different teams may have responsibility over different parts of the app or components the app depends on. Addtionally when new versions of the components are published, versions have to be bumped in the main application `package.json`, new artifact be built, and deployed, in order for those components to truly be \"live\". We now have multiple teams coupled to single release cycle -- Welcome to the Monolith!\n\nThis repo is cutting against that approach, and is effectively an experiment in a microfrontend architecture. There is a lot of baggage with the term \"microfrontend\", but here is a nice writeup about this approach [here](https://martinfowler.com/articles/micro-frontends.html)\n\n## What's in the repo\n\nIn this repo, we have the Header, Footer, Design System, and App \"teams\". These teams are responsible for parts of an application, developing, testing, and _deploying_ those pieces. The most valuable thing this approach gains us is that development teams can ship new versions of their parts of the application, live to production, without having to depend on the release cycle of the main application. The pieces are \"stitched\" at runtime in the main application using Webpack 5 Module Federation. **This feature is still in beta**\n\n![Dataflow](./docs/diagram.png)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftillathehun0%2Fwebpack5-playground","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftillathehun0%2Fwebpack5-playground","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftillathehun0%2Fwebpack5-playground/lists"}