Get Roadie in your IDE with our new MCP Servers
Roadie
← Backstage Plugins Guides
JFrog Artifactory Libs plugin logo

Backstage JFrog Artifactory Libs plugin Plugin

Created by Vity

JFrog Artifactory Libs is a Backstage plugin that brings library and image details from your Artifactory instance into your software catalog. It reads artifact data through the Artifactory APIs then shows the group, artifact, repository, and the latest version on an entity page. It lets you copy dependency snippets for common package managers such as Maven, Gradle, Sbt, Pypi, Docker, NPM, Yarn, and Nuget. It relies on the Backstage proxy for access to your Artifactory instance.

The plugin ships a simple card for entity pages called JFrogLibArtifactCard. It also includes a browse view that lists components with the Artifactory annotations so engineers can scan versions across many services. These pieces help you spot what version is in use, standardize on a library, or jump to the repository page to inspect more details. You can use it to reduce guesswork when adding a dependency or when checking that teams are on the right release.

Installation Instructions

These instructions apply to self-hosted Backstage only.

Install the frontend package

Copy 
yarn add --cwd packages/app backstage-plugin-jfrog-artifactory-libs

Add the artifact card to the entity page

Edit packages/app/src/components/catalog/EntityPage.tsx

Import the components

Copy 
import React from 'react';
import { Grid } from '@material-ui/core';
import { EntitySwitch } from '@backstage/plugin-catalog';
import {
  JFrogLibArtifactCard,
  isJfrogArtifactAvailable,
} from 'backstage-plugin-jfrog-artifactory-libs';

Render the card inside your overview section

Copy 
const overviewContent = (
  <EntitySwitch>
    <EntitySwitch.Case if={isJfrogArtifactAvailable}>
      <Grid item md={4}>
        <JFrogLibArtifactCard />
      </Grid>
    </EntitySwitch.Case>
  </EntitySwitch>
);

Optional browse libraries page

This page lets people browse all component entities that contain the jfrog annotation.

Edit packages/app/src/App.tsx

Import the components

Copy 
import React from 'react';
import { FlatRoutes, Route } from '@backstage/core-app-api';
import {
  JFrogLibVerPage,
  DefineNewLibraryButton,
} from 'backstage-plugin-jfrog-artifactory-libs';

Add the route

Copy 
const routes = (
  <FlatRoutes>
    <Route
      path="/libver"
      element={<JFrogLibVerPage topComponents={<DefineNewLibraryButton />} />}
    />
  </FlatRoutes>
);

Optional explore page content

You can surface the library view inside the Explore page.

Edit packages/app/src/components/explore/ExplorePage.tsx or wherever your ExploreLayout is defined

Import the content component

Copy 
import React from 'react';
import { ExploreLayout } from '@backstage/plugin-explore';
import { JFrogLibVerPageContent } from 'backstage-plugin-jfrog-artifactory-libs';

Add it to ExploreLayout

Copy 
<ExploreLayout
  title={`Explore the ${organizationName} ecosystem`}
  subtitle="Discover solutions available in your ecosystem"
>
  <ExploreLayout.Route path="libver" title="Libraries">
    <JFrogLibVerPageContent />
  </ExploreLayout.Route>
</ExploreLayout>

Configure proxy and JFrog settings

Add the proxy endpoint and headers in app-config.yaml

Copy 
proxy:
  '/artifactory-proxy/':
    target: 'https://your-jfrog-artifactory-instance.com'
    headers:
      Authorization: Bearer ${ARTIFACTORY_TOKEN}
      X-Result-Detail: 'properties'
      Accept: '*'

Add the JFrog settings used by the UI

Copy 
jfrog:
  artifactory:
    url: 'https://your-jfrog-artifactory-instance.com'
    proxyPath: '/artifactory-proxy/' # optional

Set ARTIFACTORY_TOKEN in your environment if your instance requires it

Register the proxy backend plugin

New backend system

Add the package

Copy 
yarn add --cwd packages/backend @backstage/plugin-proxy-backend @backstage/backend-defaults

Wire the plugin in packages/backend/src/index.ts

Copy 
import { createBackend } from '@backstage/backend-defaults';
import { proxyPlugin } from '@backstage/plugin-proxy-backend';

const backend = createBackend();

backend.add(proxyPlugin());

backend.start();

Old backend system

Add the package

Copy 
yarn add --cwd packages/backend @backstage/plugin-proxy-backend

Create packages/backend/src/plugins/proxy.ts

Copy 
import { createRouter } from '@backstage/plugin-proxy-backend';
import { PluginEnvironment } from '../types';

export default async function createPlugin(env: PluginEnvironment) {
  return await createRouter({
    logger: env.logger,
    config: env.config,
  });
}

Mount it in packages/backend/src/index.ts

Copy 
import proxy from './plugins/proxy';

// inside the main bootstrap function
const proxyEnv = useHotMemoize(module, () => createEnv('proxy'));
apiRouter.use('/proxy', await proxy(proxyEnv));

Annotate catalog entities

Add annotations to each entity that represents a library to show the card

Copy 
metadata:
  annotations:
    jfrog.com/artifactory-artifact: 'artifact-name'
    jfrog.com/artifactory-repo: 'maven-local'
    jfrog.com/artifactory-group: 'com.mycompany' # optional
    jfrog.com/artifactory-scope: 'compile' # optional values compile test provided runtime classpath optional
    jfrog.com/artifactory-packaging: 'aar' # optional

For Docker use either a fully qualified name or a short name

Copy 
metadata:
  annotations:
    jfrog.com/artifactory-artifact: 'docker.mydomain.com/mygroup/my/artifact-name'
    jfrog.com/artifactory-repo: 'docker-local'

Optional scaffolder integration

Register the repository picker field extension so template users can pick a repository

Edit packages/app/src/App.tsx

Copy 
import React from 'react';
import { FlatRoutes, Route } from '@backstage/core-app-api';
import { ScaffolderPage } from '@backstage/plugin-scaffolder';
import { ScaffolderFieldExtensions } from '@backstage/plugin-scaffolder-react';
import { ArtifactRepositoryPickerFieldExtension } from 'backstage-plugin-jfrog-artifactory-libs';

const routes = (
  <FlatRoutes>
    <Route path="/create" element={<ScaffolderPage />}>
      <ScaffolderFieldExtensions>
        <ArtifactRepositoryPickerFieldExtension />
      </ScaffolderFieldExtensions>
    </Route>
  </FlatRoutes>
);

Use the field in a template schema

Copy 
parameters:
  - title: Library Artifact
    type: object
    properties:
      jfrogArtifactoryArtifact:
        title: Artifact name
        type: string
      jfrogArtifactoryRepo:
        title: Repository name
        type: string
        ui:field: ArtifactRepositoryPicker
        ui:options:
          allowArbitraryValues: true
          excludedRegex: ['/legacyRepoName/i']
          allowedTypes: ['virtual']
          allowedPackageTypes: ['maven', 'pypi', 'docker']
      jfrogArtifactoryGroup:
        title: Group name
        type: string
      jfrogArtifactoryScope:
        title: Artifact scope
        type: string
        enum: ['', 'compile', 'test', 'provided', 'runtime', 'classpath', 'optional']
      jfrogArtifactoryPackaging:
        title: Artifact packaging
        type: string

Write the annotations into catalog info from the template

Copy 
metadata:
  annotations:
    "jfrog.com/artifactory-artifact": ${{ parameters.jfrogArtifactoryArtifact }}
    "jfrog.com/artifactory-repo": ${{ parameters.jfrogArtifactoryRepo }}
    "jfrog.com/artifactory-group": ${{ parameters.jfrogArtifactoryGroup }}
    "jfrog.com/artifactory-scope": ${{ parameters.jfrogArtifactoryScope }}
    "jfrog.com/artifactory-packaging": ${{ parameters.jfrogArtifactoryPackaging }}

Changelog

This changelog is produced from commits made to the JFrog Artifactory Libs plugin plugin since a year ago, and based on the code located here. It may not contain information about all commits. Releases and version bumps are intentionally omitted. This changelog is generated by AI.

Features

  • Add Yarn support #8 11 months ago

Breaking changes

  • None

Set up Backstage in minutes with Roadie

Get a demo