{"id":49453730,"url":"https://github.com/bmagrys/micro-frontend-architecture","last_synced_at":"2026-06-18T22:01:02.419Z","repository":{"id":36831238,"uuid":"191378620","full_name":"bmagrys/micro-frontend-architecture","owner":"bmagrys","description":"Examples of micro-frontend architecture patterns and templates","archived":false,"fork":false,"pushed_at":"2022-10-29T16:18:08.000Z","size":6271,"stargazers_count":13,"open_issues_count":44,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2023-03-07T11:53:58.254Z","etag":null,"topics":["angular","angular-elements","angular-lazy-load","angular-router","angular-routing","angular-template","lazy-loaded-modules","lazy-loading","micro-application","micro-apps","micro-frontend","micro-frontends","microfrontend","microfrontends","microfrontends-demo","microservices","microservices-architecture","ngx-build-plus","web-component-starter","web-components"],"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/bmagrys.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-06-11T13:35:38.000Z","updated_at":"2022-12-21T07:28:38.000Z","dependencies_parsed_at":"2023-01-17T05:30:44.659Z","dependency_job_id":null,"html_url":"https://github.com/bmagrys/micro-frontend-architecture","commit_stats":null,"previous_names":[],"tags_count":null,"template":null,"template_full_name":null,"purl":"pkg:github/bmagrys/micro-frontend-architecture","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bmagrys%2Fmicro-frontend-architecture","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bmagrys%2Fmicro-frontend-architecture/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bmagrys%2Fmicro-frontend-architecture/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bmagrys%2Fmicro-frontend-architecture/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bmagrys","download_url":"https://codeload.github.com/bmagrys/micro-frontend-architecture/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bmagrys%2Fmicro-frontend-architecture/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34508867,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-18T02:00:06.871Z","response_time":128,"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":["angular","angular-elements","angular-lazy-load","angular-router","angular-routing","angular-template","lazy-loaded-modules","lazy-loading","micro-application","micro-apps","micro-frontend","micro-frontends","microfrontend","microfrontends","microfrontends-demo","microservices","microservices-architecture","ngx-build-plus","web-component-starter","web-components"],"created_at":"2026-04-30T04:01:03.703Z","updated_at":"2026-06-18T22:01:02.414Z","avatar_url":"https://github.com/bmagrys.png","language":"TypeScript","funding_links":[],"categories":["📦 Legacy \u0026 Inactive Projects"],"sub_categories":[],"readme":"Micro-app frontend architecture (experimental) examples and templates of various approaches\n============================================================================\n\n[![Join the chat at https://gitter.im/micro-frontend-architecture/community](https://badges.gitter.im/micro-frontend-architecture/community.svg)](https://gitter.im/micro-frontend-architecture/community?utm_source=badge\u0026utm_medium=badge\u0026utm_campaign=pr-badge\u0026utm_content=badge)\n\nAt this moment, this example consists of a few Angular projects demonstrating\nan implementation of a main application called Envelope and micro applications\nthat can be attached not only at the build time (micro application as a _feature library_),\nbut above all, \u003cins\u003edynamically at runtime\u003c/ins\u003e (from external sources eg. CDN, dedicated gateway).\n\nThe business case used as an example here is Administration Panel for an E-commerce system.\n\nExample consists of following projects:\n- Envelope `/micro-frontend-envelope`: Starting application with layout and main navigation that aggregates other apps. That's entry layer for every nested content in panel [(read more)](./micro-frontend-envelope/README.md),\n- Orders `/micro-frontend-app-orders`: Demo micro application which acts as Orders section\n  - Micro-app model where bundles can be hosted separately and referenced at runtime in Envelope app [(read more)](./micro-frontend-app-orders/README.md),\n- (more coming soon)\n\n![](showcase.gif)\n\n---\n#### Assumptions\n\n- **No coupling with external frameworks and libraries dedicated\nto micro-frontend architecture**,\n- The quality of the micro application code shouldn't be drastically reduced\ndue to the adaptation to the technology used to attach micro applications to\nthe envelope application. \n- Micro applications can't be (very) toughly coupled to the technologies used\nonly for attaching them to envelope. They should be easy to rewrite\nto a traditional model in case of problems with architecture. Developing such\napps shouldn't be a one-way ticket.\n\n---\n#### Potential use cases / Pros / Cons\n\n- Multi-domain, big projects, especially if multiple teams are working on \nseparate, complicated domains or are skilled in different technologies \n(Angular / React / Vue.js),\n- Frequently changing website content, driven by A/B tests or AI decisions,\nwhen replacement at runtime has more pros compared to building dedicated release bundles\nand lets deliver features faster\n- Web content management systems (CMSs/WCMSs)\n\nPros and cons differs depending on which exact micro-frontend model is used.\nThey are listed in concrete projects.\n\n---\n#### All technologies and tools used across projects\n\n- Newest [Angular 8](https://angular.io/)\n  - Going beyond typical use cases of [Angular Elements](https://angular.io/guide/elements)\n  - Envelope and all micro applications compatible with [Lazy Loading Feature Modules](https://angular.io/guide/lazy-loading-ngmodules)\n    and [Angular Routing \u0026 Navigation](https://angular.io/guide/router)\n  - Extended Angular CLI possibilities without ejecting thanks to [ngx-build-plus](https://github.com/manfredsteyer/ngx-build-plus)\n- [Web Components](https://developer.mozilla.org/en-US/docs/Web/Web_Components)\n\n---\n#### Setup / Usage / How to\n\nIn every project:\n\n```\nnpm install\n```\n\nDevelopment of Envelope or any single micro application can be independent and easy as default:\n\n```\nnpm run start\n```\n\nTo run all together:\n\n1. Build and host bundles of every micro app that you want to test:\n\n    ```\n    npm run build\n    npm run server\n    ``` \n\n2. Serve or build Envelope application:\n\n    For development and live-reload:\n    \n    ```\n    npm run start\n    ```\n    \n    Production:\n    \n    ```\n    npm run bundle\n    npm run server \n    ```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbmagrys%2Fmicro-frontend-architecture","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbmagrys%2Fmicro-frontend-architecture","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbmagrys%2Fmicro-frontend-architecture/lists"}