{"id":21406657,"url":"https://github.com/ringcentral/ringcentral-mfe","last_synced_at":"2025-08-10T06:08:45.890Z","repository":{"id":224485348,"uuid":"763287038","full_name":"ringcentral/ringcentral-mfe","owner":"ringcentral","description":"A micro frontends framework based on Module Federation","archived":false,"fork":false,"pushed_at":"2025-07-07T03:15:06.000Z","size":880,"stargazers_count":11,"open_issues_count":0,"forks_count":1,"subscribers_count":6,"default_branch":"main","last_synced_at":"2025-08-08T21:54:20.605Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/ringcentral.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2024-02-26T02:06:14.000Z","updated_at":"2025-07-07T03:15:10.000Z","dependencies_parsed_at":"2024-02-26T08:30:22.704Z","dependency_job_id":"b83eee72-d7ec-42fc-a300-e0949e843195","html_url":"https://github.com/ringcentral/ringcentral-mfe","commit_stats":null,"previous_names":["ringcentral/ringcentral-mfe"],"tags_count":33,"template":false,"template_full_name":null,"purl":"pkg:github/ringcentral/ringcentral-mfe","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ringcentral%2Fringcentral-mfe","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ringcentral%2Fringcentral-mfe/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ringcentral%2Fringcentral-mfe/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ringcentral%2Fringcentral-mfe/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ringcentral","download_url":"https://codeload.github.com/ringcentral/ringcentral-mfe/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ringcentral%2Fringcentral-mfe/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":269663265,"owners_count":24455790,"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","status":"online","status_checked_at":"2025-08-09T02:00:10.424Z","response_time":111,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":[],"created_at":"2024-11-22T16:41:30.310Z","updated_at":"2025-08-10T06:08:45.867Z","avatar_url":"https://github.com/ringcentral.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# RingCentral Micro Frontends\n\n![Node CI](https://github.com/ringcentral/ringcentral-mfe/workflows/Node%20CI/badge.svg)\n[![npm version](https://badge.fury.io/js/@ringcentral%2Fmfe-core.svg)](https://badge.fury.io/js/@ringcentral%2Fmfe-core)\n![license](https://img.shields.io/npm/l/@ringcentral/mfe-core)\n\n`RingCentral Micro Frontends` is a micro frontends framework for building Web applications, and it's based on [Module Federation](https://webpack.js.org/concepts/module-federation/) of Webpack.\n\n- **@ringcentral/mfe-builder**: Provides Webpack plugin for RC MFE builds\n- **@ringcentral/mfe-cli**: A core MFE CLI for registry\n- **@ringcentral/mfe-core**: A core MFE runtime\n- **@ringcentral/mfe-react**: Provide React-based MFE runtime\n- **@ringcentral/mfe-shared**: Shared collection at runtime and build-time\n- **@ringcentral/mfe-transport**: Provide a global communication transport for MFE\n- **@ringcentral/mfe-service-worker**: Provide a service-worker for MFE\n- **@ringcentral/mfe-sentry**: Provide a global sentry for MFE\n- **@ringcentral/mfe-logger**: Provide a global logger for MFE\n\n## Features\n\n- **Dependencies management** - Set `site.config.json` or `site.config.js`\n- **Compatible with building local-only SPA** - Use `yarn build --env spa`\n- **Multiple types of rendering containers** - Support Micro-App/iframe/WebComponent\n- **MFE Lifecycle** - Provide `init`, `mount` and `unmount` APIs as lifecycles\n- **Generic Communication** - Use `@ringcentral/mfe-transport` as a global communication transport for MFE\n- **CSS isolation** - Support CSS modules CSS isolation injection for Webpack `style-loader` and so on.\n- **Debugger/Logger** - Provide meta info for Debugging/Logging.\n- **Version control** - Support custom registry for MFE remote entry version control\n\n## Installation\n\n```sh\nyarn add @ringcentral/mfe-builder -D\nyarn add @ringcentral/mfe-react\n```\n\nOr use npm\n\n```sh\nnpm install -D @ringcentral/mfe-builder\nnpm install @ringcentral/mfe-react\n```\n\n## Usage\n\n1. Set `site.config.js` or `site.config.json` in the root path.\n\n```js\n/** @type {import('@ringcentral/mfe-builder').SiteConfigFile} */\n\nmodule.exports = () =\u003e {\n  return {\n    name: '@example/app1',\n    dependencies: {\n      '@example/app2': 'http://localhost:3002/remoteEntry.js',\n    },\n    exposes: {\n      './src/bootstrap': './src/bootstrap',\n    },\n    shared: {\n      react: { singleton: true },\n      'react-dom': { singleton: true },\n    },\n  };\n};\n```\n\nAnd use `ModuleFederationPlugin` for Webpack config from `@ringcentral/mfe-builder`.\n\n```js\nconst { ModuleFederationPlugin } = require('@ringcentral/mfe-builder');\n\nmodule.exports = {\n  //...\n  plugins: [\n    new ModuleFederationPlugin(),\n  ],\n};\n```\n\n2. Define `app1` and `app2` exposed APIs in bootstrap files.\n\n```ts\nimport { expose } from '@ringcentral/mfe-react';\n\nexport default expose({\n  init: () =\u003e {\n    //\n  },\n  render: (element = document.getElementById('root')) =\u003e {\n    ReactDOM.render(\u003cApp /\u003e, element);\n    return () =\u003e {\n      ReactDOM.unmountComponentAtNode(element!);\n    };\n  },\n});\n```\n\n3. Consume `app2` MFE in `app1`.\n\n```ts\nimport { useApp } from '@ringcentral/mfe-react';\n\nconst App2 = useApp({\n  name: '@example/app2',\n  loader: () =\u003e import('@example/app2/src/bootstrap'),\n});\n```\n\n4. You can bootstrap `app1` and `app2` projects with RC MFE.\n\n## Usage in SharedWorker\n\n1. Use SharedWorker in host application with `getWorkerName`\n2. Dynamically import bootstrap file in worker thread\n3. Add another entry points with `target: 'webworker'` and set `output.publicPath` and `output.path` in MFE webpack config(e.g. `examples/basic/app3/webpack.config.js`).\n\n\u003e `webpack dev server` is not supported in multiple entry points, so you need to build and serve the worker file manually(e.g. `examples/basic/app3/dev.js`).\n\u003e After building, all files in the `worker` directory except for `remoteEntry.js` do not need to be deployed.This means that you will have two MFE bundled files in different directories, e.g. `http://localhost:3000/remoteEntry.js` and `http://localhost:3000/worker/remoteEntry.js`. The name of the `worker` directory config is hardcode here.\n\n## Contribution\n\n\u003e Note: `packages/builder/src/make.ts` and `packages/shared/src/*`\n\u003e \n\u003e Make sure that any variables of the function are serializable and passed in externally, and disable async await syntax, otherwise it will throw error in MFE runtime.\n\n1. Clone the repo\n\n```sh\ngit clone https://github.com/ringcentral/ringcentral-mfe.git\n```\n\n2. bootstrap the repo\n\n```sh\ncd mfe\nyarn install\n```\n\n3. Install and bootstrap the basic example\n\n```sh\ncd examples/basic\nyarn install\n```\n\n4. Watch the sub-project `@ringcentral/mfe-builder` and `@ringcentral/mfe-shared`.\n\n```sh\ncd ../..\nyarn watch\n```\n\n5. Start the basic example.\n\n```sh\nyarn start\n```\n\n6. Run testing\n\n- Write and watch unit testing\n\n```sh\nyarn test\n```\n\n- Write and run E2E testing with `playwright`\n\n```sh\nyarn e2e:test\n```\n\n- Write and run integration testing\n\n```sh\nyarn it:test\n```\n\n7. Submit commit with `commitizen`\n\n```sh\nyarn commit\n```\n\n8. Run all tests in CI.\n\n```sh\nyarn ci:test\n```\n\n9. Submit PR and wait for the CI to pass.\n\n10. Merge PR after the review.\n\n### Publish a new version\n\n1. Run `yarn update:version` to update the version of the package.\n2. Submit PR and wait for the CI to pass.\n3. Merge PR after the review.\n4. Draft a new release in the GitHub release page [https://github.com/ringcentral/ringcentral-mfe/releases](https://github.com/ringcentral/ringcentral-mfe/releases).\n\n\u003e Release title should be like `x.x.x`\n\n## License\n\n`RingCentral Micro Frontends` is [MIT licensed](https://github.com/ringcentral/ringcentral-mfe/blob/main/LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fringcentral%2Fringcentral-mfe","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fringcentral%2Fringcentral-mfe","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fringcentral%2Fringcentral-mfe/lists"}