Branch Manager

A web-based tool for managing Azure DevOps branches across multiple repositories. Easily view, filter, and bulk-delete stale branches, with support for Microsoft Entra ID (Azure AD) and Personal Access Token authentication.

Features

• 🔐 Microsoft Entra ID Authentication — Secure OAuth 2.0 sign-in with your work or school account (recommended)
• 🎫 Personal Access Token — Alternative authentication, no app registration required
• 🌳 Multi-Repository Support — View branches across all repositories in a project in one table
• 🔍 Advanced Filtering — Filter by repository, branch name, and age
• 📊 Sortable & Resizable Table — Click headers to sort, drag edges to resize columns
• 🛡️ Branch Protection — Branches with Azure DevOps policies are automatically locked from deletion
• 🗑️ Bulk Delete — Select and delete multiple stale branches with a single confirmation
• 🌓 Dark/Light Mode — Follows system preference with a manual toggle
• 📱 Responsive Design — Works on desktop, tablet, and mobile

Usage

Viewing Branches

1. Sign in (see Getting Started below)
2. Select a project from the dropdown and click Load
3. Narrow results with the filters:
   • Repository — limit to a specific repo
   • Branch Filter — search by name (e.g. feature/)
   • Older Than — show only branches older than X days
4. Click any column header to sort; click again to reverse

Deleting Branches

1. Check the boxes next to the branches you want to remove
2. Click Delete Selected (X)
3. Review the list in the confirmation dialog and click Confirm

Protected branches (those with Azure DevOps branch policies, or matching patterns like main, master, develop) are highlighted and cannot be selected for deletion. You can add custom protected patterns in the filter panel.

---

Getting Started

Prerequisites

• Node.js 18+ and npm
• An Azure DevOps organization
• (Recommended) An Azure AD app registration for Entra ID sign-in — see Configuration

1. Clone and Install

git clone https://github.com/jdgoeij/BranchManager.git
cd BranchManager/server
npm install

2. Start the Server

npm start

The app opens automatically at http://localhost:8080.

3. Sign In

• Microsoft Entra ID — Enter your Azure DevOps organization name and click Sign in with Microsoft
• Personal Access Token — Enter your organization name and PAT, then click Connect

---

Configuration

Branch Manager supports two authentication methods. Entra ID is recommended for shared or hosted deployments; PAT is the quickest option for personal use.

Option A: Microsoft Entra ID (Recommended)

Note: Entra ID OAuth requires a work or school (organizational) account. Personal Microsoft accounts (MSA) are not supported for Azure DevOps. See Microsoft docs for details.

Step 1 — Register the App in Entra

1. Sign in to the Microsoft Entra admin center
2. Navigate to Identity → Applications → App registrations → New registration
3. Enter a name (e.g. Branch Manager)
4. Under Supported account types, choose:
   • Accounts in any organizational directory (Multitenant) — for access across multiple Azure DevOps orgs
   • Single tenant — if you only need one org
5. Under Redirect URI, select Single-page application (SPA) and enter http://localhost:8080
6. Click Register
7. Copy the Application (client) ID and Directory (tenant) ID from the Overview page

Step 2 — Add Azure DevOps Permissions

1. In your app registration, go to API permissions → Add a permission
2. Select the APIs my organization uses tab
3. Search for Azure DevOps, select it
4. Select Delegated permissions, check user_impersonation, click Add permissions
5. (Optional) If you are a tenant admin, click Grant admin consent to pre-approve for all users

Step 3 — Configure the App

1. Copy server/.env.example to server/.env
2. Fill in the values from your app registration:

CLIENT_ID=your-application-client-id
CLOUD_INSTANCE=https://login.microsoftonline.com/
TENANT_ID=your-directory-tenant-id
# REDIRECT_URI defaults to http://localhost:8080 — only set this when hosting on Azure
# REDIRECT_URI=https://<your-app-name>.azurewebsites.net

Option B: Personal Access Token

No app registration or .env configuration needed. When connecting, enter:

• Your Azure DevOps organization name
• A Personal Access Token with at least Code (Read & Write) scope

To create a PAT: Azure DevOps → User Settings → Personal Access Tokens → New Token

---

Deploying to Azure App Service

The server/ folder is a self-contained Node.js app and deploys directly to Azure App Service.

Before You Deploy — Update the Redirect URI

When hosted on Azure the app is no longer on localhost. Before deploying:

1. Open your app registration in the Entra admin center → Authentication
2. Under Single-page application, add https://<your-app-name>.azurewebsites.net as a redirect URI (keep the http://localhost:8080 entry for local development)
3. Set REDIRECT_URI=https://<your-app-name>.azurewebsites.net as an environment variable on the App Service (see each option below)

---

Option 1: Azure CLI (quickest)

az login

# Create a resource group
az group create --name BranchManagerRG --location westeurope

# Create an App Service plan (free tier, Linux)
az appservice plan create \
  --name BranchManagerPlan \
  --resource-group BranchManagerRG \
  --sku F1 \
  --is-linux

# Create the Web App (Node 20)
az webapp create \
  --name <your-unique-app-name> \
  --resource-group BranchManagerRG \
  --plan BranchManagerPlan \
  --runtime "NODE:20-lts"

# Set environment variables
az webapp config appsettings set \
  --name <your-unique-app-name> \
  --resource-group BranchManagerRG \
  --settings \
    CLIENT_ID=your-application-client-id \
    TENANT_ID=your-directory-tenant-id \
    REDIRECT_URI=https://<your-unique-app-name>.azurewebsites.net

# Deploy from the server/ folder
cd server
az webapp up \
  --name <your-unique-app-name> \
  --resource-group BranchManagerRG

The app will be live at https://<your-unique-app-name>.azurewebsites.net.

---

Option 2: VS Code Extension

1. Install the Azure App Service extension in VS Code
2. Sign in to Azure via the Azure sidebar
3. Right-click the server/ folder in the Explorer and choose Deploy to Web App…
4. Follow the prompts to create or select an existing App Service
5. After deployment, open the App Service in the Azure portal → Configuration → Application settings and add:

Name	Value
CLIENT_ID	Your application (client) ID
TENANT_ID	Your directory (tenant) ID
REDIRECT_URI	https://<your-app-name>.azurewebsites.net

---

Option 3: GitHub Actions

Create .github/workflows/azure-deploy.yml in your repository:

name: Deploy to Azure App Service

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v4

      - name: Set up Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20'

      - name: Install dependencies
        working-directory: server
        run: npm ci --omit=dev

      - name: Deploy to Azure Web App
        uses: azure/webapps-deploy@v3
        with:
          app-name: <your-unique-app-name>
          publish-profile: ${{ secrets.AZURE_WEBAPP_PUBLISH_PROFILE }}
          package: server

Set up the publish profile secret:

1. Azure portal → your App Service → Overview → Download publish profile
2. GitHub repository → Settings → Secrets and variables → Actions
3. Add a secret named AZURE_WEBAPP_PUBLISH_PROFILE and paste the file contents

Set environment variables on the App Service (Azure portal → Configuration → Application settings):

Name	Value
CLIENT_ID	Your application (client) ID
TENANT_ID	Your directory (tenant) ID
REDIRECT_URI	https://<your-app-name>.azurewebsites.net

---

Project Reference

Project Structure

BranchManager/
├── server/
│   ├── server.js        # Express backend + Azure DevOps API proxy
│   ├── .env             # Local secrets & config (not committed)
│   ├── .env.example     # Template for .env
│   └── public/
│       ├── index.html   # Main UI
│       ├── app.js       # Frontend logic
│       ├── styles.css   # Styling
│       └── favicon.svg  # App icon
└── README.md

Tech Stack

• Backend: Node.js + Express
• Frontend: Vanilla JavaScript (no framework)
• Auth: MSAL Browser (client-side SPA auth code flow with PKCE)
• Styling: CSS with CSS Variables for theming
• API: Azure DevOps REST API

Environment Variables

Variable	Required	Description
CLIENT_ID	For Entra ID	Application (client) ID from app registration
CLOUD_INSTANCE	For Entra ID	Azure AD endpoint, default https://login.microsoftonline.com/
TENANT_ID	For Entra ID	Tenant ID, or organizations for multi-tenant
REDIRECT_URI	When hosted	Override when deploying to Azure; defaults to http://localhost:8080

See server/.env.example for the full template.

---

Security Notes

• ⚠️ Never commit server/.env — add it to .gitignore
• ⚠️ Never share your Personal Access Token
• PAT credentials are stored in browser sessionStorage (cleared when the tab closes)
• The app never stores or logs tokens server-side

Browser Support

Chrome/Edge 90+, Firefox 88+, Safari 14+

Contributing

Contributions are welcome! Please open an issue or submit a pull request.

License

MIT License — see LICENSE file for details.