Set up Backstage in minutes with Roadie
Focus on using Backstage, rather than building and maintaining it.
Installation steps
Install the plugin into your Backstage instance.
yarn add @backstage/plugin-cost-insights
Create a CostInsights client which implements the CostInsightsApi interface.
Cost Insights currently does not provide a CostInsightsApi client out of the box, but there are templates and examples in the Backstage repo. Here's an exploration into Cost Insights for AWS.
// path/to/CostInsightsClient.ts
import { CostInsightsApi } from '@backstage/plugin-cost-insights';
export class CostInsightsClient implements CostInsightsApi { ... }
Import the client and the CostInsights plugin API to your Backstage instance.
// packages/app/src/api.ts
import { createApiFactory } from '@backstage/core';
import { costInsightsApiRef } from '@backstage/plugin-cost-insights';
import { CostInsightsClient } from './path/to/file';
export const apis = [
createApiFactory({
api: costInsightsApiRef,
deps: {},
factory: () => new CostInsightsClient(),
}),
];
Add the CostInsightsPage extension to your App.tsx file.
// packages/app/App.tsx
import { CostInsightsPage } from '@backstage/plugin-cost-insights';
<FlatRoutes>
...
<Route path="/cost-insights" element={<CostInsightsPage />} />
...
</FlatRoutes>
Add plugin to your sidebar.
// packages/app/src/sidebar.tsx
export const AppSidebar = () => (
<Sidebar>
<SidebarItem icon={MoneyIcon} to="cost-insights" text="Cost Insights" />
</Sidebar>
)
Found a mistake? Update these instructions.
Things to know
To learn more about the Cost Insights plugin and how it is used inside Spotify, check out this RedMonk interview with Cost Insights product manager Janisa Anandamohan and her engineering colleague Tim Hansen. We also have brief notes from the video in this edition of our newsletter.
Set up Backstage in minutes with Roadie
Focus on using Backstage, rather than building and maintaining it.