> ## Documentation Index
> Fetch the complete documentation index at: https://backstage.spotify.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Install the Azure DevOps plugin

> Install the Azure DevOps plugin to display pipeline results, pull requests, Git tags, and README files on Portal entity pages.

## Overview

This step will guide you through the process of installing the Azure DevOps plugin which will add a tab to show Pipeline results, Pull Requests, and Git Tags. It will also add a card to the Overview tab showing the `README` file from the related repo.

For more details checkout the [Azure DevOps Plugin documentation](https://github.com/backstage/community-plugins/tree/main/workspaces/azure-devops/plugins/azure-devops)

### Step Checklist

This is the fourth (4) step in this guide, once completed you can move onto the next step.

1. [Setup the Azure integration in App Settings](./azure-app-settings-integrations)
2. [Setup Azure DevOps Discovery](./azure-devops-discovery)
3. [Install the Azure DevOps Annotator Processor](./azure-devops-annotator-processor)
4. ***Install the Azure DevOps plugin***
5. [Install the Azure DevOps scaffolder actions](./azure-devops-scaffolder-actions)
6. [Install the Azure DevOps Wiki collator](./azure-devops-wiki-collator)

## Walkthrough

Here's how to install the Azure DevOps plugin:

1. Navigate to Plugins and click the "+ Install plugin" button
2. In the text box that says "Package name" paste in `@backstage-community/plugin-azure-devops`
3. Then check the "I accept that packages installed have access to all data and configuration in Portal." box and click the "Install" button
4. Once it's done the installation process you can click on the "Finish" button
5. You'll now find yourself back at the main Plugins screen, from here on the Azure DevOps cards click the "View" button
6. The configuration needed for this plugin is optional and we don't recommend providing any here as it will use the details from [Step 1 where we setup the Azure integration](./azure-app-settings-integrations). We do need to get it running, click the "Start" button to do that
7. In the top right you'll see a pulsing message "Applying new configuration..." as the settings get saved
8. The message will then change to "New configuration applied successfully." with a Reload button, click it to reload the configuration
9. You now have the Azure DevOps Plugin installed and running!

From here you can now move on to Step 5 where you'll [install the Azure DevOps scaffolder actions](./azure-devops-scaffolder-actions).

## Features

Here's an example of the Pipeline tab:

<Frame>
  <img src="https://mintcdn.com/spotify-89f50c35/FZ08uNumGsfd2d93/portal/assets/azure-devops-plugin-tab-pipelines.png?fit=max&auto=format&n=FZ08uNumGsfd2d93&q=85&s=0f43a3d3a6e71a83873988543ab09640" alt="Pipeline tab example" width="1676" height="581" data-path="portal/assets/azure-devops-plugin-tab-pipelines.png" />
</Frame>

And what the logs look like:

<Frame>
  <img
    src="https://mintcdn.com/spotify-89f50c35/FZ08uNumGsfd2d93/portal/assets/azure-devops-plugin-tab-pipelines-logs.png?fit=max&auto=format&n=FZ08uNumGsfd2d93&q=85&s=005cc17e7b0c2ba1c7f71fe68a48d9bb"
    alt="Pipeline logs
example"
    width="1920"
    height="1043"
    data-path="portal/assets/azure-devops-plugin-tab-pipelines-logs.png"
  />
</Frame>

The Pull Request tab displays like here:

<Frame>
  <img
    src="https://mintcdn.com/spotify-89f50c35/FZ08uNumGsfd2d93/portal/assets/azure-devops-plugin-tab-pull-requests.png?fit=max&auto=format&n=FZ08uNumGsfd2d93&q=85&s=2e6c37027afc8a39c959a1c96141b734"
    alt="Pull Request tab
example"
    width="1677"
    height="542"
    data-path="portal/assets/azure-devops-plugin-tab-pull-requests.png"
  />
</Frame>

Then the Git Tags appear like so:

<Frame>
  <img src="https://mintcdn.com/spotify-89f50c35/FZ08uNumGsfd2d93/portal/assets/azure-devops-plugin-tab-git-tags.png?fit=max&auto=format&n=FZ08uNumGsfd2d93&q=85&s=3be3f277d7fbe7b4b8e997821028cfbb" alt="Git Tags tab example" width="1672" height="581" data-path="portal/assets/azure-devops-plugin-tab-git-tags.png" />
</Frame>

And the last item, the `README` card is like this:

<Frame>
  <img src="https://mintcdn.com/spotify-89f50c35/FZ08uNumGsfd2d93/portal/assets/azure-devops-plugin-card-readme.png?fit=max&auto=format&n=FZ08uNumGsfd2d93&q=85&s=12ad880c6e7522fb26dab4c4cf69e154" alt="README card example" width="822" height="433" data-path="portal/assets/azure-devops-plugin-card-readme.png" />
</Frame>
