{"id":20414918,"url":"https://github.com/asifvora/react-mfe","last_synced_at":"2025-04-12T17:04:53.169Z","repository":{"id":47351909,"uuid":"364155111","full_name":"asifvora/react-mfe","owner":"asifvora","description":"Demo for the react Micro frontend apps","archived":false,"fork":false,"pushed_at":"2021-09-27T11:30:59.000Z","size":5722,"stargazers_count":10,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-26T11:21:22.514Z","etag":null,"topics":["application","javascript","lerna","lerna-monorepo","lernajs","micro-fronted","micro-frontend","micro-frontends-demo","microapp","microservice","react","reactjs","redux","rollup","router","scss","storybook","styled-components","typescript"],"latest_commit_sha":null,"homepage":"http://my-react-mfe.s3-website.us-east-2.amazonaws.com/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/asifvora.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-05-04T06:00:24.000Z","updated_at":"2024-01-04T16:18:33.000Z","dependencies_parsed_at":"2022-09-11T22:02:10.550Z","dependency_job_id":null,"html_url":"https://github.com/asifvora/react-mfe","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/asifvora%2Freact-mfe","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/asifvora%2Freact-mfe/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/asifvora%2Freact-mfe/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/asifvora%2Freact-mfe/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/asifvora","download_url":"https://codeload.github.com/asifvora/react-mfe/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248602275,"owners_count":21131613,"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":["application","javascript","lerna","lerna-monorepo","lernajs","micro-fronted","micro-frontend","micro-frontends-demo","microapp","microservice","react","reactjs","redux","rollup","router","scss","storybook","styled-components","typescript"],"created_at":"2024-11-15T06:13:20.102Z","updated_at":"2025-04-12T17:04:53.130Z","avatar_url":"https://github.com/asifvora.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003eReact-mfe ✨️\u003c/h1\u003e\n\u003cp align=\"center\"\u003eA micro frontend implementation for react js\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n\u003ca href=\"https://github.com/asifvora/react-mfe/blob/master/LICENSE\" target=\"blank\"\u003e\n\u003cimg src=\"https://img.shields.io/badge/%20license-MIT%20-green\" alt=\"react-mfe licence\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"https://github.com/asifvora/react-mfe/fork\" target=\"blank\"\u003e\n\u003cimg src=\"https://img.shields.io/github/forks/asifvora/react-mfe?style=flat-square\" alt=\"react-mfe forks\"/\u003e\n\u003c/a\u003e\n\u003ca href=\"https://github.com/asifvora/react-mfe/stargazers\" target=\"blank\"\u003e\n\u003cimg src=\"https://img.shields.io/github/stars/asifvora/react-mfe?style=flat-square\" alt=\"react-mfe stars\"/\u003e\n\u003c/a\u003e\n\u003ca href=\"https://github.com/asifvora/react-mfe/issues\" target=\"blank\"\u003e\n\u003cimg src=\"https://img.shields.io/github/issues/asifvora/react-mfe?style=flat-square\" alt=\"react-mfe issues\"/\u003e\n\u003c/a\u003e\n\u003ca href=\"https://github.com/asifvora/react-mfe/pulls\" target=\"blank\"\u003e\n\u003cimg src=\"https://img.shields.io/github/issues-pr/asifvora/react-mfe?style=flat-square\" alt=\"react-mfe pull-requests\"/\u003e\n\u003c/p\u003e\n\n[![React](https://img.shields.io/badge/React-20232A?style=for-the-badge\u0026logo=react\u0026logoColor=61DAFB)](https://reactjs.org/)\n[![Redux](https://img.shields.io/badge/Redux-593D88?style=for-the-badge\u0026logo=redux\u0026logoColor=white)](https://redux.js.org/)\n[![TypeScript](https://img.shields.io/badge/TypeScript-007ACC?style=for-the-badge\u0026logo=typescript\u0026logoColor=white)](https://www.typescriptlang.org/)\n[![ReactRouter](https://img.shields.io/badge/React_Router-CA4245?style=for-the-badge\u0026logo=react-router\u0026logoColor=white)](https://reactrouter.com/)\n[![Storybook](https://img.shields.io/badge/storybook-FF4785?style=for-the-badge\u0026logo=storybook\u0026logoColor=white)](https://storybook.js.org/)\n[![lerna](https://img.shields.io/badge/Lerna-blueviolet?style=for-the-badge\u0026logo=lerna\u0026logoColor=white)](https://lerna.js.org/)\n[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357\u0026colorA=db748e)](https://github.com/styled-components/styled-components)\n[![Cypress.io](https://img.shields.io/badge/tested%20with-Cypress-04C38E.svg)](https://www.cypress.io/)\n\n\n\n\n# Why?\n### To scale with multiple teams in a micro services environment\n\n- More cohesive codebase\n- Simplify maintenance\n- Allows to scale development teams\n- Simplify updates\n- Independent deploy\n\n# Read more about \u003ca href=\"https://microfrontends.com/ \"\u003eMicro frontends\u003c/a\u003e\n\n\n# 📖  App architecture \n\n- packages\n    - core-ui\n    - frontend-components    \n        - feature-01\n        - feature-02\n        - feature-03\n        - feature-04\n        - feature-05\n        - ...\n    - shared-components\n\n# 💻 Built With  \n- [Lerna 🐉](https://lerna.js.org/)\n- [React](https://reactjs.org/)\n- [Redux](https://redux.js.org/)\n- [TypeScript](https://www.typescriptlang.org/)\n- [Rollup](https://rollupjs.org/)\n- [Styled Component](https://styled-components.com/)\n- [SCSS](https://sass-lang.com/)\n- [Storybook](https://storybook.js.org/)\n- [Router](https://reactrouter.com/)\n- Some services and utils\n\n# 🛠️ Installation Steps\n\n### Clone the repository ⎘\n```bash\ngit clone https://github.com/asifvora/react-mfe.git\n\n```\n\n### Change the working directory 📂\n```bash\ncd react-mfe\n```\n\n### Install dependency 🚚\n```bash\nyarn\n```\n\n### Linking dependencies... 🔗\n```bash\nyarn bootstrap\n```\n\n### Start core-ui app :rocket:\n```bash\nyarn start:core-ui\n```\n\n### Start feature-01 app :rocket:\n```bash\nyarn start:feature-01\n```\n\n### Build all packages 🔨\n```bash\nyarn build\n```\n\nYou are all set! Open [localhost:3000](http://localhost:3000/) to see the app.\n\n\n# :whale: Docker\n### Build\n```bash\ndocker build -t \u003cdocker-image-name\u003e \u003cfilepath\u003e\ndocker build -t react-mfe .\ndocker image ls\n```\n\n### Run a Container\n```bash\ndocker run -d -p \u003cHost port\u003e:\u003cDocker port\u003e \u003cdocker-image-name\u003e\ndocker run -d -p 9090:5000 react-mfe\n\u003cimage-id\u003e\n```\n### Check the running container\n```bash\n docker ps -a\n```\n\n# 🛡️ License\n\nThis project is licensed under the MIT License - see the [`LICENSE`](LICENSE) file for details.\n\n# 👨‍💻 Author\n### 👤 Asif Vora\n- Github: [@asifvora](https://github.com/asifvora)\n- LinkedIn: [@asif-vora](https://www.linkedin.com/in/asif-vora/)\n- Twitter: [@007_dark_shadow](https://twitter.com/007_dark_shadow)\n- Instagram: [@007_dark_shadow](https://www.instagram.com/007_dark_shadow/)\n\n# 🍰 Contributing\n\n- Please contribute using [GitHub Flow](https://guides.github.com/introduction/flow). Create a branch, add commits, and [open a pull request](https://github.com/asifvora/react-mfe/compare).\n\n- Please read [`CONTRIBUTING`](CONTRIBUTING.md) for details.\n\n# 🙏 Support\nThis project needs a ⭐️  from you. Don't forget to leave a star ⭐️","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fasifvora%2Freact-mfe","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fasifvora%2Freact-mfe","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fasifvora%2Freact-mfe/lists"}