🎮 Foundations — Module 0

Welcome to the Arena

Tutorial

Welcome to the Arena

You're about to learn how to build custom applications that run inside Dynatrace. Not dashboards. Not extensions. Full React applications with their own UI, backend logic, and access to every byte of data in the platform.

And to prove the platform can handle anything — we're going to start by running DOOM inside it.

What Are Dynatrace Apps?

Dynatrace Apps are self-contained web applications that run on AppEngine — the platform's built-in app hosting layer. Each app is a React + TypeScript frontend paired with optional serverless backend functions, deployed as a single bundle.

They're fundamentally different from extensions:

  • Extensions collect data — SNMP polls, API calls, metric ingestion. They feed the platform.
  • Apps consume data — custom UIs, dashboards, workflows, tools. They use the platform.

An app can query any data in Grail using DQL, render it with Dynatrace's own design system (Strato), call external APIs through serverless functions, and navigate to other apps via intents. It's a full application framework that happens to live inside your observability platform.

The Architecture

┌─────────────────────────────────────────────┐
│  Dynatrace Platform                         │
│                                             │
│  ┌──────────────┐    ┌──────────────────┐   │
│  │  Your App    │    │  Grail Data Lake │   │
│  │  (React+TS)  │───▶│  metrics, logs,  │   │
│  │  in iframe   │◀───│  entities, events│   │
│  └──────┬───────┘    └──────────────────┘   │
│         │                                   │
│  ┌──────▼───────┐    ┌──────────────────┐   │
│  │ App Functions │    │  Strato Design   │   │
│  │ (serverless)  │    │  System (UI kit) │   │
│  │ 256MB / 120s  │    └──────────────────┘   │
│  └──────────────┘                           │
└─────────────────────────────────────────────┘

Key components:

  • Frontend — React + TypeScript, rendered in a sandboxed iframe. Uses Strato components for consistent DT look and feel.
  • App Functions — Serverless TypeScript functions in the api/ directory. Each .function.ts file becomes an endpoint. 256MB RAM, 120-second timeout.
  • Grail — The unified data lake. All metrics, logs, traces, entities, and events live here. You query it with DQL.
  • Strato Design System — Dynatrace's component library. DataTable, charts, buttons, layouts — everything you need to build UIs that look native.

DQL — The Query Language

DQL (Dynatrace Query Language) is how your app talks to Grail. Two key commands:

// Metric timeseries — CPU usage per host over 2 hours
timeseries avg(dt.host.cpu.usage), by:{dt.entity.host}, from:-2h

// Entity fetch — all hosts with their properties
fetch dt.entity.host
| fields entity.name, cpuCores, osType
| filter cpuCores > 4

In your React code, you use the useDql hook:

import { useDql } from "@dynatrace-sdk/react-hooks";

const { data, error, isLoading } = useDql({
  query: `timeseries avg(dt.host.cpu.usage), by:{dt.entity.host}, from:-2h`
});

That's it. One hook, one query, live data from the platform.

Why DOOM?

Running DOOM inside Dynatrace isn't just a party trick. It proves several things about the platform:

  • CSP is configurable — Content Security Policy can be relaxed for legitimate use cases (asm.js emulators, WebGL shaders)
  • The iframe sandbox is powerful — You can embed complex interactive content using srcdoc
  • Static assets work — Files in ui/assets/ are served alongside your app
  • The platform doesn't limit you — If you can build it in React, you can run it in Dynatrace

By Module 3, you'll have DOOM running. By Module 7, you'll have a real observability dashboard. Same skills, different payload.

What You'll Build

Across 15 modules in 4 tracks:

  • Track 1: Foundations — Environment setup, first app, DOOM running inside DT
  • Track 2: Data & UI — DQL queries, Strato components, charts, tables, building a real HUD
  • Track 3: Advanced — App functions, intents, workflows, production deployment
  • Track 4: Boss Level — Build a complete app from scratch, case studies of real apps

Prerequisites

  • TypeScript basics — interfaces, types, async/await. You don't need to be an expert.
  • React basics — components, hooks (useState, useEffect), JSX. Functional components only.
  • Node.js 22+ — The dt-app CLI requires it. Check with node --version.
  • A Dynatrace environment — SaaS or sprint. You need the apps URL (https://{id}.apps.dynatrace.com).

No prior Dynatrace experience needed. If you've done the Extensions course, great — but it's not required.

What's Next

In Module 1, we set up the development environment — Node.js, the dt-app CLI, and your first project scaffold. Think of it as picking up your BFG before entering the arena.

Setting Up Your BFG →