{"id":21710800,"url":"https://github.com/jareechang/webpack-5-mod-federation-poc","last_synced_at":"2026-04-08T20:47:26.694Z","repository":{"id":39999426,"uuid":"275727440","full_name":"Jareechang/webpack-5-mod-federation-poc","owner":"Jareechang","description":"Webpack 5 module federation proof of concept","archived":false,"fork":false,"pushed_at":"2023-01-07T19:36:35.000Z","size":3366,"stargazers_count":2,"open_issues_count":32,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2026-03-04T04:13:44.355Z","etag":null,"topics":["aws","cloudfront","material-ui","microfrontend","microfrontend-architecture","microfrontend-react","microfrontends-demo","module-federation","react","react-router","s3","terraform","webpack"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/Jareechang.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-06-29T04:09:46.000Z","updated_at":"2024-02-02T15:46:10.000Z","dependencies_parsed_at":"2023-02-07T23:15:59.629Z","dependency_job_id":null,"html_url":"https://github.com/Jareechang/webpack-5-mod-federation-poc","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Jareechang/webpack-5-mod-federation-poc","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Jareechang%2Fwebpack-5-mod-federation-poc","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Jareechang%2Fwebpack-5-mod-federation-poc/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Jareechang%2Fwebpack-5-mod-federation-poc/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Jareechang%2Fwebpack-5-mod-federation-poc/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Jareechang","download_url":"https://codeload.github.com/Jareechang/webpack-5-mod-federation-poc/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Jareechang%2Fwebpack-5-mod-federation-poc/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31573788,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-08T14:31:17.711Z","status":"ssl_error","status_checked_at":"2026-04-08T14:31:17.202Z","response_time":54,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["aws","cloudfront","material-ui","microfrontend","microfrontend-architecture","microfrontend-react","microfrontends-demo","module-federation","react","react-router","s3","terraform","webpack"],"created_at":"2024-11-25T23:17:44.517Z","updated_at":"2026-04-08T20:47:26.674Z","avatar_url":"https://github.com/Jareechang.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Webpack 5: Module Federation (proof of concept) \n\nTesting out the module federation in webpack 5.\n\nThis is an experimental project and it is not intended for production use. \n\nProof of concept of isolated application stitched together with webpack 5 module federation. \n- [Getting started](#getting-startd)  \n- [Production](#production)  \n- [Project Summary](#project-summary)  \n- [Architeture](#architecture)  \n- [A/B testin](#ab-testing)  \n- [Technologies](#technologies)  \n- [Resources](#resources)  \n\n## Getting started\n\n\n#### 1. Starting the apps \n\n```sh\n// Install deps\nyarn\n\n// Within root directory\nyarn run start\n\n// Visit http://localhost:4000\n\n```\n## Production \n\n### 1. Create infrastructure (via terraform) \n\n```sh\nterraform plan\n\nterraform apply -auto-approve\n\n// Get the output vars and add to your github secrets for your actions \n```\n\n#### Note: Remember to run `terraform destroy -auto-approve` after your finish to not incur any charges from AWS\n\n### 2. Setup Build Environments Variables (Github actions)\n\nThese need to be set on the github secrets for your workflows to work. These will all be available and created via terraform.\n\n|  Name        | Description    |\n| ------------- |:-------------:| \n| WEBSITE_HOST  | Website domain or cloudfront domain |\n| AWS_ACCESS_KEY_ID  | Build AWS Access key id |\n| AWS_SECRET_ACCESS_KEY  | Build AWS Access key |\n| AWS_S3_BUCKET_NAME  | S3 bucket name where the assets are synced to |\n| AWS_CF_DISTRIBUTION_ID  | Cloudfront distribution id |\n\n## Project Summary \n\nKittygram. View and search for photos of cats, and manage your account.\n\n\n#### Teams\n\nTeams are divided are split up into respective functions. \n\n1. Marketing Team    - Host application (home page, common, and tying everything together)\n2. Accounts Team     - Account Flows (profiles, login, logout, favourites etc)\n3. Search Team       - Search Flows (Search results, display) \n\n\n## Architecture \n\nSeparate delivery pipeline which allows for independent releases in the holistic web application.\n\nEven though the teams and projects are separate, the code base is shared via monorepo (lerna).\n\n\n## AB testing\n\nIncluded Lambda@Edge functions to randomly weight the page being served from two s3 buckets (original and experiment).\n\n- View Request - Randomly adds cookie `source=` to `Origin-Response` \n- Origin Response - Handles the fetching data from the origin (s3 bucket), the lambda determines which page to be served based the cookie value\n\n\n#### Overview of architecture \n\n![Kittygram architecture](./assets/mfe-kittygram.svg \"Kittygram architecture\")\n\n## Technologies\n\n- [Webpack](https://github.com/webpack/webpack) Version ^5.4.0 \n- [React](https://github.com/facebook/react) Version ^17.0.1 \n- [React DOM](https://github.com/facebook/react) Version ^17.0.1 \n- [React Router](https://github.com/ReactTraining/react-router)\n- [Material UI](https://github.com/mui-org/material-ui) Version ^4.11.0 \n- AWS (cloudfront, s3)\n- Terraform \n\n## Resources\n\n- [Webpack 5 Module Federation: A game-changer in JavaScript architecture](https://indepth.dev/webpack-5-module-federation-a-game-changer-in-javascript-architecture/)\n- [Webpack 5 Documentation](https://webpack.js.org/concepts/module-federation/)\n- [Webpack 5 and Module Federation - A Microfrontend Revolution](https://dev.to/marais/webpack-5-and-module-federation-4j1i)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjareechang%2Fwebpack-5-mod-federation-poc","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjareechang%2Fwebpack-5-mod-federation-poc","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjareechang%2Fwebpack-5-mod-federation-poc/lists"}