{"id":18916358,"url":"https://github.com/kneyugn/gha-plugin-backstage","last_synced_at":"2026-05-19T03:35:23.757Z","repository":{"id":170517073,"uuid":"646607268","full_name":"kneyugn/gha-plugin-backstage","owner":"kneyugn","description":"The motivation behind this project is to show an example of how developer portal plugins can be made vendor-neutral. It converts a Backstage plugin written in React as a standalone micro frontend application so that it can be rendered inside of an Angular host application.","archived":false,"fork":false,"pushed_at":"2023-06-07T03:51:07.000Z","size":2442,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-08T15:06:11.673Z","etag":null,"topics":["backstage","developer-portal","devportal","github-actions","micro-frontend","microfrontend"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/kneyugn.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}},"created_at":"2023-05-28T23:20:43.000Z","updated_at":"2024-01-31T15:18:31.000Z","dependencies_parsed_at":null,"dependency_job_id":"46897ef1-8c69-4a38-9187-8f3405d979ba","html_url":"https://github.com/kneyugn/gha-plugin-backstage","commit_stats":null,"previous_names":["kneyugn/gha-plugin-backstage"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/kneyugn/gha-plugin-backstage","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kneyugn%2Fgha-plugin-backstage","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kneyugn%2Fgha-plugin-backstage/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kneyugn%2Fgha-plugin-backstage/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kneyugn%2Fgha-plugin-backstage/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kneyugn","download_url":"https://codeload.github.com/kneyugn/gha-plugin-backstage/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kneyugn%2Fgha-plugin-backstage/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264292946,"owners_count":23586062,"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":["backstage","developer-portal","devportal","github-actions","micro-frontend","microfrontend"],"created_at":"2024-11-08T10:19:19.743Z","updated_at":"2026-05-19T03:35:18.733Z","avatar_url":"https://github.com/kneyugn.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Portable Developer Portal Plugins\n\nThe motivation behind this is to show an example of how plugins can be made vendor-neutral when it comes to developer portal applications.\nThis poc runs a Backstage plugin as a standalone micro frontend application inside of an Angular host application.\n\nThis micro-frontend entirely uses Backstage and Roadie Plugin's exposed elements (functions, components etc). \nAt the top level, we provide the configurations in terms of entity, authentication, routing, and theming.\nHence, the entire application is composed of App.tsx.\n\nThen, webpack's configurations from create-react-app are extended to include ModuleFederationPlugin plugin so that a remoteEntry.js \nis produced for the host application to consume.\n\nhttps://github.com/kneyugn/gha-plugin-backstage/assets/21285877/bde74387-d6cb-4407-93fb-e6e5ef4f8b84\n\n## Notes\n- In the host application, if the routing does not match between the host and the mfe, the host will not render the mfe. You will not see errors. Instead, you will see only the element and no content in between the tags. This means that your function was executed successfully from remoteEntry.js but that the component defined is not rendering due to the routing mismatch.\n\n```typescript\n\u003cBrowserRouter\u003e\n  \u003cRoutes\u003e\n    \u003cRoute path=\"/gha/*\" element={\u003cRouter /\u003e} /\u003e\n    \u003cRoute path=\"*\" element={\u003cNavigate to=\"/gha\" /\u003e} /\u003e\n  \u003c/Routes\u003e\n\u003cBrowserRouter\u003e\n```\n\nIn the host applications, you only need this portion to get the mfe running in the angular host. Checkout the [WebcomponentWrapper](https://github.com/angular-architects/module-federation-plugin/blob/b651f99b5c2faf7c5bb692e6a281eb83516c1e95/libs/mf-tools/src/lib/web-components/web-component-wrapper.ts#L15) implementation. When in doubt about whether the script is running successfully,I would copy and paste this component into the router file itself and replace the \"WebcomponentWrapper\" with a local implementation.\n\n```typescript\nconst routes: Routes = [\n  {\n        path: 'gha',\n        component: WebComponentWrapper,\n        data: {\n          type: 'script',\n          remoteEntry: 'http://localhost:3023/remoteEntry.js',\n          exposedModule: './gha',\n          remoteName: 'gha',\n          elementName: 'gha-react-element',\n        } as WebComponentWrapperOptions\n    },\n];\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkneyugn%2Fgha-plugin-backstage","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkneyugn%2Fgha-plugin-backstage","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkneyugn%2Fgha-plugin-backstage/lists"}