Plugin implementation is here
Note: This plugin is currently being designed and implemented, please do not use it in production environments.
- Add
@kcl-lang/plugin-backstage-kcl
dependency in yourpackage.json
.
"@kcl-lang/plugin-backstage-kcl": "*",
- Add KCL page to sidebar
// packages/app/src/components/Root/Root.tsx
+import { KCLLogo } from '@kcl-lang/plugin-backstage-kcl';
export const Root = ({ children }: PropsWithChildren<{}>) => (
<SidebarPage>
{/* ... */}
{/* End global nav */}
<SidebarDivider />
<SidebarScrollWrapper>
+ <SidebarItem icon={KCLLogo} to="backstage-kcl" text="KCL" />
</SidebarScrollWrapper>
{/* ... */}
</SidebarPage>
);
// packages/app/src/App.tsx
+import { KCLPage } from '@kcl-lang/plugin-backstage-kcl';
const routes = (
<FlatRoutes>
{/* ... */}
<Route path="/settings" element={<UserSettingsPage />} />
<Route path="/catalog-graph" element={<CatalogGraphPage />} />
+ <Route path="/backstage-kcl" element={<KCLPage />} />
{/* ... */}
</FlatRoutes>
);
- Run your Backstage instance and select the KCL sidebar.
You'll need to install dependencies before you can run the UI locally.
yarn install
yarn dev
yarn test
yarn lint
yarn prettier:check # Checks for any code formatting errors
yarn prettier:write # Formats code