Skip to Content
AppTemplateApp-Aufbau

App-Aufbau (AppSDK)

Die AppSDK-App basiert auf Next.js 15 mit dem ProcessCube App SDK. Sie bietet eine moderne Web-Oberfläche für BPMN-Prozesse mit automatischem External Task Worker Management und UserTask-Formularen.

Die API-Referenz des App SDK (Components, Functions, Konfiguration) finden Sie unter App-SDK Dokumentation.

Verzeichnisstruktur

apps/appsdk_sample/
├── app/
│   ├── globals.css                  # ProcessCube Studio Design System
│   ├── layout.tsx                   # Root Layout
│   ├── page.tsx                     # Haupt-UI (Task-Liste + Detail)
│   ├── actions.ts                   # Server Actions (Engine-Kommunikation)
│   ├── tasks/
│   │   ├── page.tsx                 # Alternative Task-Liste (Route)
│   │   └── task-list.tsx            # Client-Komponente mit Polling
│   ├── usertask/[id]/
│   │   └── page.tsx                 # Server-Side Task-Detail
│   └── appsdk_greeting/
│       └── external_task.ts         # External Task Handler
├── public/                          # Statische Assets
├── .env.local                       # Umgebungsvariablen
├── Dockerfile                       # Multi-Stage Build
├── next.config.ts                   # AppSDK Plugin + esbuild
├── package.json                     # Next.js 15 + AppSDK + React 19
└── tsconfig.json                    # TypeScript-Konfiguration

Schlüsselkomponenten

DateiFunktion
next.config.tswithApplicationSdk() aktiviert External Task Worker, serverExternalPackages: ['esbuild']
actions.tsServer Actions nutzen getEngineClient() für Prozess-Start, Task-Abfrage, Task-Abschluss
page.tsxClient Component mit Polling (3s), Task-Liste und UserTask-Formular
external_task.tsHandler-Funktion, Verzeichnisname = BPMN-Topic
globals.cssProcessCube Studio Design System (Gold-Akzent, System-Fonts)

App-Startup

Beim Start der App scannt das AppSDK-Plugin automatisch das app/-Verzeichnis nach external_task.ts-Dateien und registriert Worker:

next.config.ts

Die zentrale Konfigurationsdatei bindet das AppSDK-Plugin ein:

import { withApplicationSdk } from '@5minds/processcube_app_sdk/server';
 
const nextConfig = {
  serverExternalPackages: ['esbuild'],
};
 
export default withApplicationSdk(nextConfig);
  • withApplicationSdk() — Aktiviert die automatische External Task Worker Discovery
  • serverExternalPackages — esbuild muss als externes Paket konfiguriert werden

Umgebungsvariablen

Die .env.local konfiguriert die Verbindung zur Plattform:

PROCESSCUBE_ENGINE_URL=http://engine:8000
PROCESSCUBE_AUTHORITY_URL=http://authority:11560
PROCESSCUBE_EXTERNAL_TASK_WORKER_CLIENT_ID=external_task_worker
PROCESSCUBE_EXTERNAL_TASK_WORKER_CLIENT_SECRET=external_task_worker_secret

Für lokale Entwicklung (ohne Docker-Netzwerk) die URLs auf localhost anpassen.

Nächste Schritte

External TasksUserTasks