1.0.5 • Public • Published

ML Backstage Plugin

Custom ML/AI unified GUI/panel built with Backstage.

tanzu package available list accelerator.apps.tanzu.vmware.com --namespace tap-install
tanzu package install accelerator -p accelerator.apps.tanzu.vmware.com -v 1.0.1 -n tap-install -f resources/app-accelerator-values.yaml
Verify that package is running: tanzu package installed get accelerator -n tap-install
Get the IP address for the App Accelerator API: kubectl get service -n accelerator-system

Publish Accelerators:

tanzu plugin install --local <path-to-tanzu-cli> all
tanzu acc create ml-backstage-plugin-accelerator --git-repository https://github.com/agapebondservant/ml-backstage-plugin-accelerator.git --git-branch main

Setting up Backstage Plugin

Prerequisites: see Backstage docs

  1. Install Backstage:
source .env
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash
export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm
npm install --global yarn
yarn add @mui/icons-material @mui/material @emotion/styled @emotion/react material-table@1.36.0 @backstage/plugin-kubernetes \
@material-ui/icons @mui/styles @mui/lab axios js-yaml -W;
yarn add --cwd packages/app @backstage/plugin-kubernetes;
yarn add --cwd packages/backend @backstage/plugin-kubernetes-backend @backstage/plugin-catalog-backend-module-github;

NOTE: Steps 2-9 are only required if a Backstage app has not already been generated.

  1. Create Backstage app (follow prompts as shown):
source .env
echo $BACKSTAGE_APP_NM | npx @backstage/create-app@latest
yarn install
yarn dev
  1. Install Postgres dependency (on Mac - one-time op; skip if already performed):
xcode-select --install
sudo port install postgresql15
echo "ALTER USER postgres WITH PASSWORD '$BACKSTAGE_PG_PASSWORD'" | PGPASSWORD=postgres psql -U postgres
  1. Install the Postgres backend package for Backstage (one-time op; skip if already performed):
yarn add --cwd packages/backend pg
  1. Install the GitHub App integration and follow the instructions as prompted (one-time op; skip if already performed):
yarn backstage-cli create-github-app $BACKSTAGE_GITHUB_ORG
  1. Update app-config.yaml as directed by the instructions in the prior GitHub App integration step.

  2. Update configuration for the new backend package and GitHub App integration:

cp resources/*.yaml .
  1. (For running locally): Start the Kubernetes API proxy:
kubectl proxy
  1. Start the Backstage app:
yarn dev
  1. To create a new plugin:
echo "<name of plugin>" | yarn new --select plugin
  1. To create a new component extension,
  • Create the new component extension template:
export PLUGIN_NAME=<name of plugin>
export COMPONENT_NAME=<name of component>
echo "$PLUGIN_NAME" | yarn new --select plugin
rm -rf plugins/$PLUGIN_NAME/src/components/ExampleFetchComponent
mv plugins/$PLUGIN_NAME/src/components/ExampleComponent plugins/<name of component>/src/components/$PLUGIN_NAME
  • Add the code below to the plugin.ts file (replace COMPONENT_NAME and PLUGIN_NAME with the values configured above, and PLUGIN_NAME_CAMELCASE with the plugin in camel case - example, "mlworkflows-card" becomes "mlworkflowsCardPlugin"):
import { createComponentExtension } from '@backstage/core-plugin-api';
    component: {
      lazy: () => import('./components/COMPONENT_NAME').then(m => m.COMPONENT_NAME),
  • Add the code below to the index.ts file (replace COMPONENT_NAME with the values configured above):
export { COMPONENT_NAME } from './plugin';
  1. Create a new backend plugin:
export BACKEND_PLUGIN_NAME=<name of plugin>
echo "$BACKEND_PLUGIN_NAME" | yarn new --select backend-plugin
yarn add --cwd packages/backend @internal/plugin-${BACKEND_PLUGIN_NAME}-backend@^0.1.0

Run the Backstage plugin locally


yarn dev

Deploy the Backstage plugin as a TAP workload

  • Deploy the workload:
tanzu apps workload create ml-backstage-plugin-app -f config/workload.yaml --yes
  • Tail the logs of the main app:
tanzu apps workload tail ml-backstage-plugin-app --since 64h
  • Once deployment succeeds, get the URL for the main app:
tanzu apps workload get ml-backstage-plugin-app     #should yield image-processor.default.<your-domain>
  • To delete the app:
tanzu apps workload delete ml-backstage-plugin-app --yes




Package Sidebar


npm i @oawofolu/ml-backstage

Weekly Downloads






Unpacked Size

650 kB

Total Files


Last publish


  • oawofolu