Skip to content

Customizing Backstage: CBA practice questions

Customizing Backstage means adding plugins, extending the entity pages, theming the interface and writing Software Templates. Much of it changed with the new frontend system, so read the documentation for the system your app uses.

By Ibrahim Yesilay · Published · Updated

Independent community practice, not affiliated with or endorsed by CNCF or The Linux Foundation.

What Customizing Backstage covers in CBA

Customizing Backstage means adding plugins, extending the entity pages, theming the interface and writing Software Templates. Much of it changed with the new frontend system, so read the documentation for the system your app uses.

New plugins are generated from the project root with yarn new, choosing frontend-plugin for a UI plugin; the docs show that the generated plugin is added to the app and reachable on its route, for example /my-plugin, while yarn start inside the plugin directory serves it on its own for local development, using the setup in its dev directory. Existing plugins are installed into the workspace that needs them: frontend plugins into packages/app, for example yarn --cwd packages/app add followed by the package, and backend plugins into packages/backend, where backend.add registers them in src/index.ts. With feature discovery enabled through app.packages: all in app-config.yaml, an installed frontend plugin needs no code change; otherwise its alpha entry point is imported and passed to createApp in the features array. In the new frontend system plugins that provide a page add their own sidebar item, and the sidebar is customized by overriding the app/nav extension; editing Root.tsx belongs to the old system.

Entity pages are extended with tabs and cards. In the old frontend system this happens in packages/app/src/components/Catalog/EntityPage.tsx: EntitySwitch with EntitySwitch.Case and isKind chooses the layout per kind, and an EntityLayout.Route with a path and title adds a tab around the plugin's content. Inside the component, the useEntity hook from @backstage/plugin-catalog-react returns the entity being displayed. The new frontend system uses EntityCardBlueprint and EntityContentBlueprint instead.

Themes are registered in the themes array passed to createApp in packages/app/src/App.tsx. Each entry has an id, a title, a variant of light or dark, an icon and a Provider; the list replaces the defaults, which @backstage/theme exports as themes.light and themes.dark. Material UI themes are built with createUnifiedTheme from createBaseThemeOptions and a palette, with optional typography, font and component overrides, and are applied through UnifiedThemeProvider. Components from the newer Backstage UI library are themed with CSS variables such as --bui-bg-app, and a converter plugin can produce those variables from an existing Material UI theme as a starting point.

Software Templates live under /create. A template is an entity with apiVersion scaffolder.backstage.io/v1beta3 and kind Template. spec.parameters is a list of form steps written in JSON Schema with ui options, where ui:field can select pickers such as OwnerPicker or RepoUrlPicker. spec.steps runs actions in order, each with an id, name, action and input, for example fetch:template to render a skeleton, publish:github to create the repository and catalog:register to add the result to the catalog. Values are referenced as ${{ parameters.name }} in the template and ${{ values.name }} inside skeleton files, and output can show links when the run finishes. Custom actions should use camelCase ids because dashes break expressions that read step outputs.

Key points

  • yarn new generates a plugin; choose frontend-plugin for a UI plugin.
  • Frontend plugins are installed into packages/app and backend plugins into packages/backend.
  • Templates use apiVersion scaffolder.backstage.io/v1beta3 with parameters, steps and output.
  • A custom themes list passed to createApp replaces the built-in light and dark themes.

Three sample questions

42 CBA questions on Customizing Backstage, 42 with explanations. How practice works

Question 1

What is the correct way to add a new route in the Backstage app?
  1. A.
    <Routes>
  <Route path="/custom" component={CustomPage} />
</Routes>
  2. B.
    <FlatRoutes>
  <Route path="/custom" element={<CustomPage />} />
</FlatRoutes>
  3. C.
    <Router>
  <DefaultRoute path="/custom" component={<CustomPage />} />
</Router>
  4. D.
    <BackstageRoutes>
  <AddRoute path="/custom" component={CustomPage} />
</BackstageRoutes>

Correct answer: B

This is the correct way to add a new route in Backstage, using the FlatRoutes component with a Route element.

Question 2

How do you create a new frontend plugin in Backstage?
  1. A.yarn add --plugin frontend my-plugin
  2. B.backstage create-plugin my-plugin
  3. C.yarn new --select plugin
  4. D.yarn add @backstage/plugin-generator

Correct answer: C

To create a new frontend plugin, you use the yarn new --select plugin command, which runs the plugin creation wizard.

Question 3

Which command creates a new backend plugin?
  1. A.yarn new --select backend-plugin
  2. B.yarn create-backend-plugin
  3. C.backstage add backend-plugin
  4. D.yarn plugin --backend

Correct answer: A

The command to create a new backend plugin is yarn new --select backend-plugin.

Practice this topic

Focus mode keeps every question on Customizing Backstage until you leave it. 10 free guest answers, then a free account; no credit card.

Or open CBA practice across all topics.

Sources

The explanation above was checked against these official documents.

Frequently asked questions

Why should a custom scaffolder action not use dashes in its id?

Template expressions read step outputs as steps.<id>.output, and a dash in the id breaks that expression. The documentation recommends camelCase ids for custom actions and steps.