{"id":22253300,"url":"https://github.com/willacosta/microfrontend-application","last_synced_at":"2026-04-11T05:36:47.802Z","repository":{"id":172859146,"uuid":"649885447","full_name":"WillACosta/microfrontend-application","owner":"WillACosta","description":"A simple application to implement Webpack 5 Module Federation plugin, and handle multiple application modules and share dependencies.","archived":false,"fork":false,"pushed_at":"2023-06-09T18:11:36.000Z","size":547,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-08-02T01:44:01.838Z","etag":null,"topics":["aws","aws-s3","cloud-front","mfe-app","microfrontend","module-federation","react","vue"],"latest_commit_sha":null,"homepage":"https://d2etx549kucxg0.cloudfront.net/","language":"JavaScript","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/WillACosta.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":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2023-06-05T21:20:04.000Z","updated_at":"2023-07-29T20:56:20.000Z","dependencies_parsed_at":null,"dependency_job_id":"3a3264a5-51da-456a-99eb-58f84f94322d","html_url":"https://github.com/WillACosta/microfrontend-application","commit_stats":null,"previous_names":["willacosta/microfrontend-application"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/WillACosta/microfrontend-application","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WillACosta%2Fmicrofrontend-application","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WillACosta%2Fmicrofrontend-application/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WillACosta%2Fmicrofrontend-application/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WillACosta%2Fmicrofrontend-application/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/WillACosta","download_url":"https://codeload.github.com/WillACosta/microfrontend-application/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WillACosta%2Fmicrofrontend-application/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31670374,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-10T17:19:37.612Z","status":"online","status_checked_at":"2026-04-11T02:00:05.776Z","response_time":54,"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":["aws","aws-s3","cloud-front","mfe-app","microfrontend","module-federation","react","vue"],"created_at":"2024-12-03T07:17:44.215Z","updated_at":"2026-04-11T05:36:47.779Z","avatar_url":"https://github.com/WillACosta.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"### @micro-frontend application\n\nA micro frontend application to showcase Webpack 5 Module Federation plugin, and handle multiple modules with share dependencies.\n\n\u003cdiv style=\"text-align: center;\"\u003e\n  \u003cimg src=\"docs/screenshot.png\" width=\"700\" alt=\"screenshot\" style=\"margin-top: 35px\"/\u003e\n\u003c/div\u003e\n\n### Table of contents\n\n- [App Architecture](#app-architecture)\n- [Technical Resources](#technical-resources)\n- [Getting Started](#getting-started)\n\n## App Architecture\n\nThe project has three sub-applications using the concept of micro frontend, moreover, we've another application shell named `container` for handling whether we should or not show other apps, all these modules are managed by `Module Federation` plugin, from `Webpack 5`. As you can see below:\n\n```\n  .\n  |\n  |__ packages\n    |\n    |__ container\n    |__ auth\n    |__ dashboard\n    |__ marketing\n```\n\nWe use a generic mount function for custom rendering micro apps to get agnostic behavior for any frameworks that going used\ndown the road. Also, the communication between apps is made by the callbacks functions.\n\n## Technical Resources\n\n- Micro-frontend architecture with mono-repo\n- `Github Actions` workflows for automatically deploying each MFE (Micro-frontend)\n- Use of `Module Federation` plugin for managing applications\n- Use of `Amazon S3` and `Cloud Front` (CDN)\n- Callback communication between apps\n- Lazy load app modules\n- React and Vue based applications\n- `React Router DOM` for handling browser and memory routers\n\n## Getting Started\n\n1. First of all, you need to clone this repository:\n\n```shell\ngit clone\n```\n\n2. Go to each application directory and install dependencies:\n\n```shell\nnpm install\n```\n\n3. Finally, runs each one with:\n\n```shell\nnpm run dev\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwillacosta%2Fmicrofrontend-application","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwillacosta%2Fmicrofrontend-application","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwillacosta%2Fmicrofrontend-application/lists"}