Welcome to the toolbox plugin!
This plugin was created through the Backstage CLI
Your plugin has been added to the example app in this repository, meaning you'll be able to access it by running
yarn start
in the root directory, and then navigating to /toolbox.
You can also serve the plugin in isolation by running yarn start
in the plugin directory.
This method of serving the plugin provides quicker iteration speed and a faster startup and hot reloads.
It is only meant for local development, and the setup for it can be found inside the /dev directory.
Add the plugin to your frontend app:
cd packages/app && yarn add @drodil/backstage-plugin-toolbox
Expose the questions page:
// packages/app/src/App.tsx
import { ToolboxPage } from '@drodil/backstage-plugin-toolbox';
// ...
const AppRoutes = () => (
<FlatRoutes>
// ...
<Route path="/toolbox" element={<ToolboxPage />} />
// ...
</FlatRoutes>
);
An interface for toolbox is now available at /toolbox
.
You can also add your own tools to the plugin by passing them to the ToolboxPage as a property:
import { ToolboxPage, Tool } from '@drodil/backstage-plugin-toolbox';
const extraToolExample: Tool = {
name: 'Extra',
component: <div>Extra tool</div>,
};
<ToolboxPage extraTools={[extraToolExample]} />;
Also lazy loading is supported:
import React, { lazy } from 'react';
import { ToolboxPage, Tool } from '@drodil/backstage-plugin-toolbox';
const MyTool = lazy(() => import('./MyTool'));
const extraToolExample: Tool = {
name: 'Extra',
component: <MyTool />,
};
<ToolboxPage extraTools={[extraToolExample]} />;