🙏 Help wanted: Support new frontend system

[christoph-jerolimov]

TL;DR: We would like to encourage plugin authors and the community to add support for the new frontend system to plugins.

A list of plugins and their status could be seen here:

https://github.com/backstage/community-plugins/blob/main/docs/compatibility/new-frontend-system.md

Existing frontend plugins

Here are some plugins that supports the new frontend system, links goes to the alpha entry point to learn from them:

• ADR
• Announcements
• Azure DevOps
• CICD Statistics GitLab module
• CICD Statistics
• Confluence
• Explore
• GitHub Actions
• GitHub Issues
• GitHub PR Board
• Grafana
• Graphiql
• Jenkins
• Linguist
• NPM
• Sentry
• Sonarqube
• Stack Overflow
• Tech Radar

Work in process

Please let us know if you have time to add the new frontend system to a plugin so we can share the effort.

Check the comments below; but I try to summarize it here.

How do I help?

Add alpha support to a frontend-plugin

1. Add to the frontend plugin package.json:

     "exports": {
       ".": "./src/index.ts",
       "./alpha": "./src/alpha.tsx",
       "./package.json": "./package.json"
     },
     "typesVersions": {
       "*": {
         "alpha": [
           "src/alpha.tsx"
         ],
         "package.json": [
           "package.json"
         ]
       }
     },

2. Add the alpha export based on your needs to src/alpha.tsx, for example (many plugins splits this import up into multiple files):

   import { createFrontendPlugin } from '@backstage/frontend-plugin-api';
   
   /**
    * Backstage frontend plugin.
    *
    * @alpha
    */
   export default createFrontendPlugin({
     id: 'your-plugin-id',
     extensions: [
       // TODO
     ],
   });

   For more details, check out the migration guide for plugins

3. If your plugin workspace has an packages/app you can add an packages/app-next to test your plugin within a backstage app.

Test new frontend system

See the testing plugins section in the new frontend system documentation.