{"id":16158926,"url":"https://github.com/markkos89/mfe-poc-react","last_synced_at":"2025-07-14T16:03:24.065Z","repository":{"id":99028861,"uuid":"492073014","full_name":"Markkos89/mfe-poc-react","owner":"Markkos89","description":"React micro-frontend PoC with Webpack Module Federation, Lerna and Typescript","archived":false,"fork":false,"pushed_at":"2022-05-15T22:31:47.000Z","size":493,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-07T02:27:49.311Z","etag":null,"topics":[],"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/Markkos89.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":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-05-14T00:19:21.000Z","updated_at":"2022-05-14T11:56:39.000Z","dependencies_parsed_at":"2023-06-19T00:59:02.238Z","dependency_job_id":null,"html_url":"https://github.com/Markkos89/mfe-poc-react","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Markkos89/mfe-poc-react","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Markkos89%2Fmfe-poc-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Markkos89%2Fmfe-poc-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Markkos89%2Fmfe-poc-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Markkos89%2Fmfe-poc-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Markkos89","download_url":"https://codeload.github.com/Markkos89/mfe-poc-react/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Markkos89%2Fmfe-poc-react/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265314143,"owners_count":23745201,"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":[],"created_at":"2024-10-10T01:55:29.566Z","updated_at":"2025-07-14T16:03:24.006Z","avatar_url":"https://github.com/Markkos89.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React micro-frontend PoC with Webpack Module Federation, Lerna and Typescript\n\n## 📚 Stack\n\n```\n- React\n- Typescript\n- Chakra-UI\n- Redux-Toolkit\n- RKT Query\n- Webpack\n- Webpack Module Federation\n- Babel\n- React Router\n- Yarn\n- Jest\n- React Testing Library\n- Lerna\n- ESLint\n- Prettier\n```\n\n## ℹ️ Requirements\n\nRequires Node JS version `14.17.0+`. Using `nvm`:\n\n```sh\nnvm install 14.17.0\nnvm use 14.17.0\n```\n\n## 🏃‍♀️ Running the app locally\n\n#### _Installing dependencies:_\n\n```\nyarn install\n```\n\n#### _Generating federate types:_\n\n\u003e For more info about this, have a look at the `Miscellaneous` section below.\n\n```\nyarn make-types\n```\n\n#### _Running in dev mode:_\n\n\u003e This will start all MFEs.\n\n```\nyarn start\n```\n\n#### _Build and serve:_\n\n\u003e This will build/serve all MFEs.\n\n```\nyarn build\nyarn serve\n```\n\n#### _Running a single MFE:_\n\n```\ncd apps/MFE_DIR\nyarn start\n```\n\n#### _Clean `dist` folders after a build:_\n\n```\nyarn clean\n```\n\n#### _Run scripts in batch:_\n\n\u003e You can run any remote (MFE) level script in a single batch by using the following format:\n\n```\nlerna run --parallel SCRIPT_NAME\n```\n\n## 🖥 Adding a new MFE\n\n\nTo generate a new remote (MFE) run the following command:\n\n```\nyarn generate-mfe\n```\n\nThis will run a CLI wizard (node app located in the `./cli-wizard` directory) that will generate a new remote (MFE) based on a set of 3 questions. Under the hood this CLI wizard clones a [mfe-boilerplate repository](https://github.com/Markkos89/mfe-boilerplate) and renames the content of certain files to match the prompts.\n\nAfter generating a new remote (MFE), make sure to update the port numbers, as follows:\n\n- `package.json` on `line 8`\n- `webpack.dev.js` on `line 19` and on `line 24`\n\n\u003e If MFE of type `Shell`, make sure you also update the `remotes` object in the `federation.config.json` file\n\nIn an ideal world this CLI would be a node module and the ports would be automatically assigned, however this is out of scope for this PoC.\n\n## 🧩 Miscellaneous\n\n- To automate the type generation for the federate modules, the app is making use of the [`@pixability-ui/federated-types`](https://github.com/pixability/federated-types). To generate the federate types run `yarn make-types`.\n\n- Each remote (MFE) is using a `federation.config.json` file to define the federate configuration. This config is then used in the webpack config files by both the `ModuleFederationPlugin` and `MFLiveReloadPlugin` plugins.\n\n## 🔍 Further reading\n\n- [Building Micro-Frontends](https://www.oreilly.com/library/view/building-micro-frontends/9781492082989/), by Luca Mezzalira\n\n- [Webpack Module Federation](https://webpack.js.org/concepts/module-federation/)\n\n- [Micro-frontends](https://martinfowler.com/articles/micro-frontends.html), by Martin Fowler\n\n## 🧭 Roadmap\n\n- Add fallback for when a MFE fails - done!\n- Automate port number assigment when generating a new remote (MFE)\n- Add CI integration example\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarkkos89%2Fmfe-poc-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmarkkos89%2Fmfe-poc-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarkkos89%2Fmfe-poc-react/lists"}