Dependency-Track Front-End

The Front-End is a Single Page Application (SPA) used in Dependency-Track, an open source Component Analysis platform that allows organizations to identify and reduce risk in the software supply chain.

The project is built with:

• Vue.js
• Bootstrap Vue
• CoreUI

Compatibility Matrix

Always use the Front-End version that is compatible with the Dependency-Track API Server in use.

Starting with Dependency-Track v4.2, the API Server and the Frontend now have the same major and minor (semantic) version. Patch versions however, may continue to be unique.

Binary Distributions

Pre-compiled distributions are available in two variants:

• Docker container running NGINX
• GitHub Release (zip archive)

The Docker container provides the fastest, most consistent deployment option and is recommended. The Docker container includes NGINX and a pre-deployed Front-End release.

Build Setup

# Install dependencies
npm install

# Serve with hot reload at localhost:8080
npm run serve

# Build for production with minification
npm run build

# Run linter
npm run lint

# Generates a CycloneDX software bill-of-materials
npm run bom

Development Setup

In order to test with a Dependency-Track instance, the .env.development file needs to be modified and the VUE_APP_SERVER_URL property updated to reflect the base URL of a Dependency-Track server.

Deployment

The front-end is deployed to a general purpose web server (e.g. NGINX or Apache). To configure the front-end for this scenario, simply change the value of API_BASE_URL in static/config.json.

{
  "API_BASE_URL": "https://drack-server.example.com"
}

Internationalization (i18n)

This project supports internationalization. Supported languages are:

• 🇩🇪 German
• 🇺🇸 English
• 🇪🇸 Spanish
• 🇫🇷 French
• 🇮🇳 Hindi
• 🇮🇹 Italian
• 🇯🇵 Japanese
• 🇵🇱 Polish
• 🇵🇹 Portuguese
• 🇧🇷 Portuguese (Brazil)
• 🇷🇺 Russian
• 🇺🇦 Ukrainian
• 🇨🇳 Chinese

Pull requests to add support for additional languages, or improve existing ones are highly encouraged.

[!NOTE] The core maintainers are currently able to support English and German. Other languages rely on community contributions, and will be subject to machine translation otherwise.

Dependency-Track tries to detect the language preference from the user's browser. If no matching language is available, it will fall back to English.

Users can customize their language preference via the profile dropdown menu:

[!NOTE] The page may need to be reloaded in order for the language preference to take affect across all elements of the application.

Adding or Improving Translations

Translations are defined in src/i18n/locales/{lang}.json, for example en.json. We recommend using VS Code with the i18n Ally extension when working on translation. The extension provides an overview of translation progress across all languages:

In case of missing translations, it is possible to translate automatically using Google Translate. To do this, hover over the No Translation item of a language, and click the globe icon:

Copyright & License

Dependency-Track is Copyright (c) OWASP Foundation. All Rights Reserved.

Permission to modify and redistribute is granted under the terms of the Apache 2.0 license. See the LICENSE file for the full license.