🔧 Renovate Playground

A web based playground for testing and debugging Renovate configurations in real-time.

Features • Quick Start • Usage • Development • Docker • Contributing

---

✨ Features

• 🧪 Test Configurations — Validate Renovate configs before deploying to production
• 🔍 Debug Issues — Real-time log streaming helps identify configuration problems
• 📊 Visualize Updates — See package files, proposed updates, and branch information
• 🔒 Safe Experimentation — Dry-run mode enabled by default, no actual changes made

📋 Prerequisites

Requirement	Version	Notes
Node.js	v22.x+	Required
pnpm	Latest	Package manager
Docker/Podman	Any	Optional, for containerized deployment

🚀 Quick Start

The fastest way to get started is using our pre-built Docker image:

podman run --platform linux/amd64 -p 8080:8080 ghcr.io/amadeusitgroup/renovate-playground:latest

Open your browser: Navigate to http://localhost:8080

💡 Tip: Browse all available versions on the GitHub Container Registry.

Building from Source

If you prefer to build locally:

# Clone the repository
git clone https://github.com/AmadeusITGroup/renovate-playground.git
cd renovate-playground

# Install dependencies
pnpm install

# Start the application
pnpm start

Access at http://localhost:4200 (UI with hot reload) or http://localhost:8080 (API)

📖 Usage

Using the Playground

1. Repository URL — Enter the full GitHub repository URL
   Example: https://github.com/owner/repo

2. Personal Access Token — Provide a GitHub PAT with repo scope

3. Renovate Configuration — Enter your configuration in JSON format

4. Submit — Click submit to run Renovate in dry-run mode

5. View Results — Monitor real-time logs and analyze the results

Example Configuration

For the below Dockerfile the following configuration is used which can be checked in the playground and verify whether the dependencies are picked.

# renovate: datasource=github-tags depName=node packageName=nodejs/node versioning=node
ENV NODE_VERSION=20.10.0
# renovate: datasource=github-releases depName=composer packageName=composer/composer
ENV COMPOSER_VERSION=1.9.3
# renovate: datasource=docker packageName=docker versioning=docker
ENV DOCKER_VERSION=19.03.1
# renovate: datasource=npm packageName=yarn
ENV YARN_VERSION=1.19.1

{
  "extends": ["config:recommended"],
  "customManagers": [
    {
      "customType": "regex",
      "description": "Update _VERSION variables in Dockerfiles",
      "managerFilePatterns": [
        "/(^|/|\\.)Dockerfile$/",
        "/(^|/)Dockerfile\\.[^/]*$/"
      ],
      "matchStrings": [
        "# renovate: datasource=(?<datasource>[a-z-]+?)(?: depName=(?<depName>.+?))? packageName=(?<packageName>.+?)(?: versioning=(?<versioning>[a-z-]+?))?\\s(?:ENV|ARG) .+?_VERSION=(?<currentValue>.+?)\\s"
      ]
    }
  ]
}

💻 Development

Available Scripts

Command	Description
pnpm start	Start both UI and API (recommended for development)
pnpm start:ui	Start Angular UI only (port 4200)
pnpm start:api	Start NestJS API only (port 8080)
pnpm build	Build all applications
pnpm test	Run all tests
pnpm lint	Lint all projects
pnpm format	Format code with Prettier

Development Modes

Unified Mode (Same as Docker)

Run everything on port 8080:

pnpm start:api

Access at http://localhost:8080

Separate Dev Servers (Hot Reload)

For Angular hot reload during development:

# Terminal 1 - API server
pnpm start:api

# Terminal 2 - UI dev server with hot reload
pnpm start:ui

Access at http://localhost:4200 (proxies API requests to port 8080)

🐳 Docker

Build and Run

# Build the image
docker build -t renovate-playground:latest .

# Run the container
docker run -p 8080:8080 renovate-playground:latest

Access at http://localhost:8080

Using Podman

podman build -t renovate-playground:latest .
podman run -p 8080:8080 renovate-playground:latest

📝 Note: The Docker image serves both the API and built UI from the same container on port 8080.

🏗️ Architecture

How It Works

┌─────────────┐     ┌─────────────┐     ┌──────────────┐
│   Browser   │────▶│  Angular UI │────▶│  NestJS API  │
│             │◀────│             │◀────│+Renovate CLI │
└─────────────┘     └─────────────┘     └──────────────┘

1. User Input — Enter repository URL, PAT, and Renovate configuration
2. Backend Processing — NestJS spawns Renovate in dry-run mode
3. Real-time Streaming — Logs streamed via Server-Sent Events (SSE)
4. Results Display — View package files, updates, and branch info

Project Structure

renovate-playground/
├── apps/
│   ├── api/                  # NestJS backend
│   │   └── src/app/
│   │       └── playground/   # Renovate execution service
│   └── ui/                   # Angular frontend
│       └── src/
├── Dockerfile                # Multi-stage production build
├── nx.json                   # Nx workspace configuration
└── package.json              # Dependencies and scripts

Technology Stack

Layer	Technology
Frontend	Angular 20, Amadeus Design Factory
Backend	NestJS 11, Renovate, Node.js child processes
Build	Nx monorepo, pnpm
Container	Docker / Podman

🤝 Contributing

We welcome contributions! Please see CONTRIBUTING.md for guidelines.

📄 License

See LICENSE for details.

---