Basics & Prerequisites

The same requirements for Backstage development described in the Backstage documentation apply to plugin development. For DevPortal 3.x the versions come from the plugin workspaces, not from a generic Backstage app. Below are the most important ones:

• Node.js 22 or 24, as declared by each workspace ("node": "22 || 24" in the workspace package.json). We recommend using nvm to manage it.
  • Install nvm from here.
  • Check with node --version and compare the output with the workspace's package.json and backstage.json.
• Yarn 4.12.0, as pinned by each workspace ("packageManager": "yarn@4.12.0").
  • Enable Corepack: corepack enable, then check with yarn --version.
• Git.
• A proper IDE (for example, VS Code).
• Docker, for the local test run in devportal-local.

Plugin guidelines

A few critical points to consider when developing plugins:

• Write plugin code in TypeScript.
• Build related plugins together in one workspace from the devportal-plugins repository, instead of creating a standalone Backstage app.
• Develop against the workspace's development host, which loads the plugin statically as a local package. Ship to DevPortal as a dynamic plugin. The host is a harness; the dynamic export is the product artifact.
• Keep every @backstage/* dependency pinned to the DevPortal host line. New workspaces arrive pinned; do not upgrade past the host.
• Avoid reinventing the wheel—check if a plugin already does what you need.
• Build your UI with Backstage components and Material UI.

Official documentation

The official Backstage documentation provides useful information on plugin development. We recommend reading it to gain a better understanding of the process.

• Backstage Introduction to plugins
• Backstage Design Guidelines
• Backstage Plugin Development
• Backstage Plugin Structure

important

Backstage frontend and backend systems have changed considerably over time. You may find outdated documentation in many places, as well as legacy plugins that work but do not adapt to the new systems or function as dynamic plugins.

VeeCode Plugin Development

Continue reading our documentation to learn how to develop plugins for VeeCode DevPortal—the instructions are largely portable to any custom-built Backstage as well. Note that VeeCode DevPortal uses the same approach as Red Hat for dynamic plugins, so RHDH documentation may also be applicable.

Red Hat plugin development

Much of the RHDH (Red Hat Developer Hub) documentation on plugins is applicable to VeeCode DevPortal plugin development; however, we embed (pre-install) a different set of plugins in DevPortal container images.

• RHDH: Introduction to plugins — brief introduction to plugins.
• RHDH: Front-end plugin wiring — how to wire plugins to the Backstage frontend (compatible with VeeCode DevPortal).
• RHDH: Installing dynamic plugins using the Helm chart — similar to VeeCode DevPortal dynamic plugin syntax.
• RHDH: Dynamic plugin examples — you can build and install these in DevPortal (or use them as a reference).
• RHDH: Plugins repository — a long list of Red Hat plugins that you may also package and install in DevPortal (or ask us to include in our next release by opening a GitHub issue).