Deploy GitHub Copilot metrics dashboard to Azure Static Web Apps

GitHub recently released their GitHub Copilot Metrics API in public beta which means it is now available for anyone who has licensed GitHub Copilot Business so they can report on usage and gain insights into the impact of Copilot adoption.

Alongside the public beta for the API there is also a sample metrics view static web application available on GitHub. While the sample includes a link to a deployed version of the dashboard, the deployment only uses static data.

I wanted to deploy this against a real organisation, so here are the steps I went through to get it working as a hosted site on an Azure Static Web Apps instance.

Setting up a Personal Access Token (PAT)

At present the metrics dashboard only supports using GitHub PATs for authentication. The newer (beta) fine-grained PATs are the best ones to select and you can limit the scopes to read-only as follows.

The GitHub user against whose account the PAT is created must either be and Organisation or Enterprise administrator so they have access to the appropriate API endpoints.

When you create the PAT, make sure to set Resource Owner to match the Organisation or Enterprise you want to report against.

Once you have set these details you will need to set two scopes: Organisation (or Enterprise) Read and GitHub Copilot Business Read.

Hit the Generate token button and keep the token handy (you can't retrieve it again) and we'll use it next as a GitHub Secret.

Configure deployment in Azure Static Web App

Create a new Azure Static Web App and configure the GitHub repository you have the dashboard stored in as the source repository.

This will generate a new GitHub Actions workflow file in your repository and deploy the site. On first deployment everything will work as the site will use static test data.

Using live data

The sample dashboard application contains an .env file with a configuration that will simply display static test data on deployment.

# Determines if mocked data should be used instead of making API calls.
VUE_APP_MOCKED_DATA=true

# Determines the scope of the API calls. 
# Can be 'enterprise' or 'organization' to target API calls to an enterprise or an organization respectively.
VUE_APP_SCOPE=organization

# Determines the enterprise or organization name to target API calls.
VUE_APP_GITHUB_ORG=octodemo

VUE_APP_GITHUB_ENT=

# Determines the GitHub Personal Access Token to use for API calls.
# Create with scopes copilot, manage_billing:copilot, admin:enterprise, or manage_billing:enterprise, read:enterprise AND read:org
VUE_APP_GITHUB_TOKEN=

It's bad practice to put anything sensitive into these sorts plain text files and commit them to source control, so we definitely won't do that here (you could actually delete the .env file if you wanted).

The way to override this file on deployment to Azure Static Web Apps requires two steps:

1. Add sensitive information as Actions Secrets in GitHub (for me, that's organisation and the PAT we generated).
2. Update your GitHub Action and add the following to your builddeploy step:

env: # Add environment variables here
    VUE_APP_MOCKED_DATA: false
    VUE_APP_SCOPE: organization # change to 'enterprise' for broader scope
    VUE_APP_GITHUB_ORG: ${{ secrets.VUE_APP_GITHUB_ORG }}
    # VUE_APP_GITHUB_ENT: ${{ secrets.VUE_APP_GITHUB_ENT }}
    VUE_APP_GITHUB_TOKEN: ${{ secrets.VUE_APP_GITHUB_TOKEN }}

You can see a sample of what this looks like in the repository I've forked and modified from the GitHub sample.

Once the deployment has finished, if we open the Azure Static Web App we should see the stats for our organisation (or enterprise) use of GitHub Copilot displayed.

At this stage you can either enable the in-bult (in-preview) basic authentication or look at using Entra ID (Azure Active Directory) authentication to make sure only authenticated users can see your metrics.

Happy Days!

😎