{"id":13660714,"url":"https://github.com/eavichay/microfronts","last_synced_at":"2025-04-05T12:09:20.607Z","repository":{"id":36448222,"uuid":"204359025","full_name":"eavichay/microfronts","owner":"eavichay","description":"Polyglot Front-End Solution for running multiple frameworks as one","archived":false,"fork":false,"pushed_at":"2023-01-13T23:42:06.000Z","size":2135,"stargazers_count":320,"open_issues_count":76,"forks_count":17,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-04-05T01:07:57.713Z","etag":null,"topics":["frontend","javascript","microfrontends","polyglot-front","typescript"],"latest_commit_sha":null,"homepage":"","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/eavichay.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}},"created_at":"2019-08-25T22:56:26.000Z","updated_at":"2024-07-04T23:21:19.000Z","dependencies_parsed_at":"2023-01-17T01:33:49.411Z","dependency_job_id":null,"html_url":"https://github.com/eavichay/microfronts","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eavichay%2Fmicrofronts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eavichay%2Fmicrofronts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eavichay%2Fmicrofronts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eavichay%2Fmicrofronts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/eavichay","download_url":"https://codeload.github.com/eavichay/microfronts/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247332612,"owners_count":20921853,"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":["frontend","javascript","microfrontends","polyglot-front","typescript"],"created_at":"2024-08-02T05:01:24.910Z","updated_at":"2025-04-05T12:09:20.589Z","avatar_url":"https://github.com/eavichay.png","language":"TypeScript","readme":"# Microfronts\n\u003e \"One shell to rule them all, One shell to bind them, One shell to wrap them all and in the light to run them\"\n\n## Polyglot Front-End Solution\nMicro-Frontends approach enables us to split our products into separate modules as any of them is built with any web technology (i.e. React/Angular/Vue/...). A thin code layer orchestrates them as a single product, keeping the UX intact. The approach enables companies to suspend rewrites of old production code and combine new technologies with legacy ones without breaking everything.\n\nMicrofronts orchestrates multiple front-end applications with **shared** runtime and **fully controlled** sandboxing at the same time.\n\n### Creating the shell application\nThe shell application should be a super-thin layer of html, css and a tiny javascript file.\n\nThe shell contains the configuration for your front-ends bound with the relevant routes. The microfronts library will orchestrate the front-ends whenever route changes. It will also provide shared runtime fully accessible by demand.\n\n###### Quick example:\n```html\n\u003c!-- index.html --\u003e\n\u003cbody\u003e\n  \u003ca href=\"#/home\"\u003eHOME (react app)\u003c/a\u003e\n  \u003ca href=\"#/home\"\u003eSETTINGS (angular app)\u003c/a\u003e\n  \u003ca href=\"#/side-by-side\"\u003eSIDE-BY-SIDE (both apps)\u003c/a\u003e\n  \u003ciframe is=\"app-container\" app-id=\"react-app\"\u003e\u003c/iframe\u003e\n  \u003ciframe is=\"app-container\" app-id=\"angular-app\"\u003e\u003c/iframe\u003e\n  \u003ciframe is=\"app-container\" app-id=\"error\"\u003e\u003c/iframe\u003e\n  \u003cscript src=\"./shell.js\" type=\"module\"\u003e\u003c/script\u003e\n\u003c/body\u003e\n```\n\n`npm install microfronts` or `yarn add microfronts`\nMicrofronts should be installed in your **shell** application and *NOT* in your applications. This ensures the orchestrator remains a singleton.\n\n```javascript\n// shell.js\nimport { Microfronts } from 'microfronts';\nconst application = Microfronts();\nconst router = application.getRouter();\nconst context = application.getAppContext();\n\nconst REACT_APP = {\n    base: 'https://my.domain.com/app-1',\n    appId: 'react-app'\n};\nconst ANGULAR_APP = {\n    base: 'https://other.domain.com/app-2',\n    appId: 'angular-app'\n};\nconst NOT_FOUND = {\n    base: './404.html',\n    appId: 'error'\n}\n\nrouter.registerRoute('*', { active: [NOT_FOUND] });\nrouter.registerRoute('home', { active: [REACT_APP] });\nrouter.registerRoute('settings', { active: [ANGULAR_APP] });\nrouter.registerRoute('side-by-side', { active: [REACT_APP, ANGULAR_APP] });\n\nrouter.init();\n```\n\n\u003e **NOTE:** Ensure your servers provide cross-origin access from where the shell is deployed. This can be solved on the server side or by a reverse-proxy.\n\nTo see code example, take a look at the examples folder (available in the github repo).\n\n\u003e For type declarations you may install Microfronts and import only the **interfaces.d.ts** file.\n\n### Accessing the shared context\nMicrofronts provides a runtime-shared application context, which can be consumed by running front-ends. The context also enables the front-ends to **provide** utilities to other front-ends.\n\n###### For example\nAngular holds the user service, containing the data, login and other actions. It exposes a RxJs *Subject* object and would like to expose it to the rest of the world.\n\n```typescript\n// angular-app/services/User.service.ts\n@Injectable() class UserService {\n    public stream$ = new BehaviorSubject\u003cUserData|null\u003e(null);\n    constructor() {\n        window.AppContext.set('services.stream', this.stream$);\n    }\n}\n```\n\n```javascript\n// react-app/components/UserStatus.js\nexport default () =\u003e {\n    const [ user, setUserData] = useState(null);\n    useEffect(() =\u003e {\n        const subscription = window.AppContext.get('services.stream')\n                .subscribe(data =\u003e setUserData(data)));\n        return () =\u003e subscription.unsubscribe();\n        }\n    });\n    return user\n        ? \u003cdiv\u003e{user.name}, {user.lastLogin}\u003c/div\u003e\n        : \u003cdiv\u003e\u003c/div\u003e\n};\n```\n\nThis way the Angular service can be consumed at runtime within the React application. No need to rewrite or duplicate the business logic.\n\nFor asynchronous consumption, The AppContext provides the `provide` and `require` methods. The `require` receives a promise, fulfilled one `provide` is triggered with a value. This enables async dependency management across frameworks.\n\n### Adding more modules to your project\nNow that the shell contains at least one front-end, more screens can be added freely. Ensure all of your internal routers use the hash-strategy (for consistency). Use the Microfronts' `Router.Navigate` whenever possible, though the router can watch changes from the inside.\n\n### More to come\nMicrofronts provides more features, such as route guards (used for dirty-clean state checking, privileges, etc.), static data per-application, messaging and more.\n\n# We need your support!\nIf you wish to join - open an issue, suggest an improvement, create pull-request or join the team.\n\nCurrently documentation is only inside the code, we appreciate help wiring up a good documentation webpage.\n\n`#usetheplatform`\n","funding_links":[],"categories":["TypeScript","Tools"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feavichay%2Fmicrofronts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Feavichay%2Fmicrofronts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feavichay%2Fmicrofronts/lists"}