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
yarn add --cwd packages/app backstage-plugin-jfrog-artifactory-libsAdd the artifact card to the entity page
Edit packages/app/src/components/catalog/EntityPage.tsx
Import the components
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
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
import React from 'react';
import { FlatRoutes, Route } from '@backstage/core-app-api';
import {
  JFrogLibVerPage,
  DefineNewLibraryButton,
} from 'backstage-plugin-jfrog-artifactory-libs';Add the route
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
import React from 'react';
import { ExploreLayout } from '@backstage/plugin-explore';
import { JFrogLibVerPageContent } from 'backstage-plugin-jfrog-artifactory-libs';Add it to ExploreLayout
<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
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
jfrog:
  artifactory:
    url: 'https://your-jfrog-artifactory-instance.com'
    proxyPath: '/artifactory-proxy/' # optionalSet ARTIFACTORY_TOKEN in your environment if your instance requires it
Register the proxy backend plugin
New backend system
Add the package
yarn add --cwd packages/backend @backstage/plugin-proxy-backend @backstage/backend-defaultsWire the plugin in packages/backend/src/index.ts
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
yarn add --cwd packages/backend @backstage/plugin-proxy-backendCreate packages/backend/src/plugins/proxy.ts
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
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
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' # optionalFor Docker use either a fully qualified name or a short name
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
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
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: stringWrite the annotations into catalog info from the template
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. It may not contain information about all commits. Releases and version bumps are intentionally omitted. This changelog is generated by AI.
Set up Backstage in minutes with Roadie
Focus on using Backstage, rather than building and maintaining it.
