DevTools Backend

Welcome to the DevTools backend plugin! This plugin provides data for the DevTools frontend features.

Setup

Here's how to get the DevTools Backend up and running:

First we need to add the @backstage/plugin-devtools-backend package to your backend:

# From the Backstage root directory
yarn add --cwd packages/backend @backstage/plugin-devtools-backend

Then we will create a new file named packages/backend/src/plugins/devtools.ts, and add the following to it:

import { createRouter } from '@backstage/plugin-devtools-backend';
import { Router } from 'express';
import type { PluginEnvironment } from '../types';

export default function createPlugin(
  env: PluginEnvironment,
): Promise<Router> {
  return createRouter({
    logger: env.logger,
    config: env.config,
    permissions: env.permissions,
  });
}

Next we wire this into the overall backend router, edit packages/backend/src/index.ts:

import devTools from './plugins/devtools';
// ...
async function main() {
  // ...
  // Add this line under the other lines that follow the useHotMemoize pattern
  const devToolsEnv = useHotMemoize(module, () => createEnv('devtools'));
  // ...
  // Insert this line under the other lines that add their routers to apiRouter in the same way
  apiRouter.use('/devtools', await devTools(devToolsEnv));

Now run yarn start-backend from the repo root
Finally open http://localhost:7007/api/devtools/health in a browser and it should return {"status":"ok"}

New Backend System

The DevTools backend plugin has support for the new backend system, here's how you can set that up:

In your packages/backend/src/index.ts make the following changes:

  import { createBackend } from '@backstage/backend-defaults';
+ import { devtoolsPlugin } from '@backstage/plugin-devtools-backend';

  const backend = createBackend();

  // ... other feature additions

+ backend.add(devtoolsPlugin());

  backend.start();

README.md

DevTools Backend

Setup

New Backend System

Links