> ## Documentation Index
> Fetch the complete documentation index at: https://docs.twenty.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Schnellstart

> Erstellen Sie in wenigen Minuten Ihre erste Twenty-App.

## Voraussetzungen

* **Node.js 24.5+** — [Hier herunterladen](https://nodejs.org/)
* **Yarn 4** — Wird mit Node.js über Corepack mitgeliefert. Aktivieren Sie es: `corepack enable`
* **Docker** — [Hier herunterladen](https://www.docker.com/products/docker-desktop/). Erforderlich, um einen lokalen Twenty-Server auszuführen. Überspringen Sie dies, wenn Twenty bereits anderswo läuft.

Das Erstellen einer Twenty-App umfasst drei Phasen. Das Scaffolding-Tool fasst sie zu einem einzigen Happy-Path-Befehl zusammen, aber jede Phase ist ein eigenes Konzept — wenn etwas fehlschlägt, hilft Ihnen das Wissen, in welcher Phase Sie sich befinden, zu erkennen, was zu beheben ist.

| Phase                   | Was Sie tun                                             | Tool                                | Ergebnis                                             |
| ----------------------- | ------------------------------------------------------- | ----------------------------------- | ---------------------------------------------------- |
| **1. Gerüst erstellen** | Den Quellcode der App erzeugen                          | `npx create-twenty-app`             | Ein TypeScript-Projekt auf der Festplatte            |
| **2. Server starten**   | Einen Twenty-Server starten, in den synchronisiert wird | Docker + `yarn twenty docker:start` | Eine laufende Twenty-Instanz                         |
| **3. Synchronisieren**  | Ihren Code live mit dem Server synchronisieren          | `yarn twenty dev`                   | Ihre Änderungen erscheinen in der Benutzeroberfläche |

***

## Phase 1 — Projektgerüst erstellen

Erstellen Sie eine neue App aus der Vorlage:

```bash filename="Terminal" theme={null}
npx create-twenty-app@latest my-twenty-app
```

Das Scaffolding-Tool ist nicht interaktiv: Der Verzeichnisname wird zum App-Namen. Übergeben Sie `--display-name` und `--description`, um die erzeugten Metadaten anzupassen (Sie können sie später auch in `src/constants/universal-identifiers.ts` bearbeiten). Dadurch wird ein TypeScript-Projekt in `my-twenty-app/` erzeugt, mit einer Startdatei `application-config.ts`, einer Standardrolle, CI/CD-Workflows und einem Integrationstest.

**Nach dieser Phase:** Sie haben den Quellcode einer App auf Ihrem Rechner. Es läuft noch nicht — das ist Phase 2.

***

## Phase 2 — Einen lokalen Twenty-Server starten

Ihre App benötigt einen Twenty-Server, in den sie synchronisieren kann. Der Server ist eine vollständige Twenty-Instanz — UI, GraphQL-API, PostgreSQL — die lokal in Docker läuft. Ihr lokaler Code lädt seine Definitionen auf diesen Server hoch, wodurch sie in der Benutzeroberfläche erscheinen.

Der Scaffolder startet eine Instanz für Sie: Bei laufendem Docker zieht er das `twentycrm/twenty-app-dev`-Image, startet es auf Port `2020` und authentifiziert die CLI für den vorbefüllten Demo-Workspace (`tim@apple.dev`) – keine Anmeldung erforderlich.

Um stattdessen eine Verbindung zu einem bestehenden Twenty-Server herzustellen, übergeben Sie `--url \<your-server-url>`. Remote-Server authentifizieren sich mit OAuth: Ein Browser öffnet sich, damit Sie sich anmelden und auf **Authorize** klicken können, wodurch die CLI Zugriff auf Ihren Workspace erhält. (Sie können lokal auch OAuth aktivieren mit `--authentication-method oauth` – melden Sie sich mit `tim@apple.dev` / `tim@apple.dev` an.)

<div style={{textAlign: 'center'}}>
  <img src="https://mintcdn.com/twenty/q7TCG2vqA_qoAvgz/images/docs/developers/extends/apps/login.png?fit=max&auto=format&n=q7TCG2vqA_qoAvgz&q=85&s=a0d3e98abf5567d1c3b340f8628dd5d9" alt="Twenty-Anmeldebildschirm" width="3024" height="1502" data-path="images/docs/developers/extends/apps/login.png" />
</div>

<div style={{textAlign: 'center'}}>
  <img src="https://mintcdn.com/twenty/q7TCG2vqA_qoAvgz/images/docs/developers/extends/apps/authorize.png?fit=max&auto=format&n=q7TCG2vqA_qoAvgz&q=85&s=093fb4273fe417875669c419aa1892f6" alt="Twenty-CLI-Autorisierungsbildschirm" width="3024" height="1502" data-path="images/docs/developers/extends/apps/authorize.png" />
</div>

Ihr Terminal bestätigt, dass alles eingerichtet ist.

<div style={{textAlign: 'center'}}>
  <img src="https://mintcdn.com/twenty/q7TCG2vqA_qoAvgz/images/docs/developers/extends/apps/scaffolded.png?fit=max&auto=format&n=q7TCG2vqA_qoAvgz&q=85&s=e16b9263c0632f1b9c0e97de197815dd" alt="App-Gerüst erfolgreich erstellt" width="1558" height="736" data-path="images/docs/developers/extends/apps/scaffolded.png" />
</div>

**Nach dieser Phase:** Sie haben einen laufenden Twenty-Server unter [http://localhost:2020](http://localhost:2020), und Ihre CLI ist autorisiert, mit ihm zu synchronisieren.

<Note>
  Wenn Docker nicht installiert ist oder nicht läuft, zeigt das Scaffolding-Tool den richtigen Startbefehl für Ihr Betriebssystem an. Sobald Docker läuft, können Sie mit `yarn twenty docker:start` fortfahren — ein erneutes Scaffolding ist nicht nötig.
</Note>

***

## Phase 3 — Ihre Änderungen synchronisieren

Das ist die innere Schleife, in der Sie die meiste Zeit verbringen werden.

```bash filename="Terminal" theme={null}
cd my-twenty-app
yarn twenty dev
```

Dies überwacht `src/`, baut bei jeder Änderung neu und synchronisiert das Ergebnis mit dem Server. Bearbeiten Sie eine Datei, speichern Sie, und innerhalb weniger Sekunden spiegelt der Server die Änderung wider. Sie sehen eine Live-Statusanzeige in Ihrem Terminal.

Für ausführlichere Ausgaben (Build-Protokolle, Sync-Anfragen, Fehlerspuren) fügen Sie `--verbose` hinzu.

<div style={{textAlign: 'center'}}>
  <img src="https://mintcdn.com/twenty/9xnC1ZSwZRaJYzPF/images/docs/developers/extends/apps/dev.png?fit=max&auto=format&n=9xnC1ZSwZRaJYzPF&q=85&s=cdd5b92700689e13988cc00af41cb462" alt="Terminalausgabe im Dev-Modus" width="656" height="605" data-path="images/docs/developers/extends/apps/dev.png" />
</div>

Öffnen Sie [http://localhost:2020/settings/applications#developer](http://localhost:2020/settings/applications#developer). Unter **Your Apps** sollte Ihre App angezeigt werden.

<div style={{textAlign: 'center'}}>
  <img src="https://mintcdn.com/twenty/9xnC1ZSwZRaJYzPF/images/docs/developers/extends/apps/app-in-ui-1.png?fit=max&auto=format&n=9xnC1ZSwZRaJYzPF&q=85&s=13b46336a6126fe56ee2f4e28ad9549e" alt="Liste &#x22;Your Apps&#x22;, die &#x22;My twenty app&#x22; anzeigt" width="2143" height="1326" data-path="images/docs/developers/extends/apps/app-in-ui-1.png" />
</div>

Klicken Sie auf **My twenty app**, um die **Anwendungsregistrierung** anzuzeigen — ein serverseitiger Datensatz, der Ihre App beschreibt (Name, Bezeichner, OAuth-Anmeldedaten, Quelle). Eine Registrierung kann in mehreren Arbeitsbereichen auf demselben Server installiert werden.

<div style={{textAlign: 'center'}}>
  <img src="https://mintcdn.com/twenty/9xnC1ZSwZRaJYzPF/images/docs/developers/extends/apps/app-in-ui-2.png?fit=max&auto=format&n=9xnC1ZSwZRaJYzPF&q=85&s=dff8941c6a9656c346b154cd0bc1fd14" alt="Details der Anwendungsregistrierung" width="2057" height="1214" data-path="images/docs/developers/extends/apps/app-in-ui-2.png" />
</div>

Klicken Sie auf **View installed app**, um die Installation im Arbeitsbereich anzuzeigen. Die Registerkarte **About** zeigt die Version und Verwaltungsoptionen.

<div style={{textAlign: 'center'}}>
  <img src="https://mintcdn.com/twenty/9xnC1ZSwZRaJYzPF/images/docs/developers/extends/apps/app-in-ui-3.png?fit=max&auto=format&n=9xnC1ZSwZRaJYzPF&q=85&s=78f30e7a8cc97fbd1fd21e0e87ebfd2b" alt="Installierte App" width="2124" height="1147" data-path="images/docs/developers/extends/apps/app-in-ui-3.png" />
</div>

**Nach dieser Phase:** Sie haben eine Live-Entwicklungsschleife. Bearbeiten Sie eine beliebige Datei in `src/`, und sie erscheint in der Benutzeroberfläche.

### Einmalige Synchronisierung für CI und Skripte

Verwenden Sie `plan` und `apply`, um dieselbe Pipeline einmalig ohne Watcher auszuführen:

```bash filename="Terminal" theme={null}
yarn twenty plan   # preview the metadata changes without applying them
yarn twenty apply  # show the plan, then apply it
```

| Befehl              | Verhalten                                                                                                                                                                                  | Wann verwenden                                                               |
| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------- |
| `yarn twenty dev`   | Überwacht und synchronisiert bei jeder Änderung erneut. Läuft, bis Sie es stoppen.                                                                                                         | Interaktive lokale Entwicklung.                                              |
| `yarn twenty apply` | Einmaliger Build + Sync, beendet sich mit `0` bei Erfolg, mit `1` bei Fehler. Fragt bei destruktiven Änderungen nach einer Bestätigung (übergeben Sie `--force`, um dies zu überspringen). | CI, Pre-Commit-Hooks, KI-Agenten, skriptgesteuerte Workflows.                |
| `yarn twenty plan`  | Erstellt und gibt die Metadatenänderungen aus **ohne sie anzuwenden**.                                                                                                                     | Prüfen Sie, was eine Synchronisierung ändern würde, bevor Sie sie ausführen. |

Alle Modi benötigen ein authentifiziertes Remote-Repository. Weitere Informationen zu `plan` finden Sie unter [Synchronisierung & Wiederherstellung](/l/de/developers/extend/apps/operations/sync-and-recovery#previewing-changes-plan).

<Note>
  `yarn twenty dev --once` und `yarn twenty dev --once --dry-run` sind veraltete Aliasse für `yarn twenty apply` und `yarn twenty plan`.
</Note>

### Dev-Modus-Optionen

| Flag                    | Beschreibung                                                                        |
| ----------------------- | ----------------------------------------------------------------------------------- |
| `--force`               | Wendet destruktive Änderungen (Löschungen) ohne Bestätigung an.                     |
| `--debounceMs \<ms>`    | Legt die Entprellzeit für Dateiänderungen in Millisekunden fest (Standard: `1000`). |
| `--verbose` / `--debug` | Zeigt ausführliche Build-Protokolle, Sync-Anfragen und Fehler-Traces an.            |

## Was Sie erstellen können

Apps bestehen aus **Entitäten** — jede ist als TypeScript-Datei mit einem einzigen `export default` definiert:

| Entität                    | Was es tut                                                                                        |
| -------------------------- | ------------------------------------------------------------------------------------------------- |
| **Objekte & Felder**       | Benutzerdefinierte Datenmodelle (Postkarte, Rechnung usw.) mit typisierten Feldern                |
| **Logikfunktionen**        | Serverseitiges TypeScript, ausgelöst durch HTTP-Routen, Cron-Zeitpläne oder Datenbankereignisse   |
| **Frontend-Komponenten**   | React-Komponenten, die in der UI von Twenty gerendert werden (Seitenleiste, Widgets, Befehlsmenü) |
| **Fähigkeiten & Agenten**  | KI-Funktionen — wiederverwendbare Anweisungen und autonome Assistenten                            |
| **Ansichten & Navigation** | Vorkonfigurierte Listenansichten und Seitenleisteneinträge                                        |
| **Seitenlayouts**          | Benutzerdefinierte Datensatz-Detailseiten mit Tabs und Widgets                                    |

Vollständige Referenz: [Konzepte](/l/de/developers/extend/apps/getting-started/concepts).

## Nächste Schritte

<CardGroup cols={2}>
  <Card title="Konfiguration" icon="screwdriver-wrench" href="/l/de/developers/extend/apps/config/overview">
    Anwendungsidentität, Standardrolle, Install- und Deinstallations-Hooks, öffentliche Assets.
  </Card>

  <Card title="Daten" icon="database" href="/l/de/developers/extend/apps/data/overview">
    Objekte, Felder und bidirektionale Relationen.
  </Card>

  <Card title="Logik" icon="bolt" href="/l/de/developers/extend/apps/logic/overview">
    Logikfunktionen, Skills, Agents und OAuth-Verbindungen.
  </Card>

  <Card title="Layout" icon="table-columns" href="/l/de/developers/extend/apps/layout/overview">
    Ansichten, Navigation, Seiten-Layouts, Front-Komponenten.
  </Card>

  <Card title="Operationen" icon="rocket" href="/l/de/developers/extend/apps/operations/overview">
    CLI, Tests, Remotes, CI und die Veröffentlichung Ihrer App.
  </Card>
</CardGroup>
