---
title: "Academy Article"
canonical_url: "https://academy.laioutr.com/artikel/erste-eigene-app-bauen-und-veroeffentlichen"
locale: de
meta:
  "og:title": "Academy Article"
---

[Zur Startseite](https://academy.laioutr.com/)

- [Für Entwickler](https://academy.laioutr.com/bereiche/fuer-entwickler)

- [Einstieg für Entwickler](https://academy.laioutr.com/leitfaeden/einstieg-fuer-entwickler)

- [Die erste eigene App bauen und veröffentlichen](https://academy.laioutr.com/artikel/erste-eigene-app-bauen-und-veroeffentlichen)

# Die erste eigene App bauen und veröffentlichen

Eine eigene App entsteht aus dem App Starter: Paketnamen setzen, Sections, Blocks oder Orchestr-Handler mit registerLaioutrApp registrieren und im Playground testen. Danach bringen npm publish und laioutr app release die Version ins Cockpit, und das nächste Deployment einer Umgebung rollt sie aus.

## Bevor du startest

<dl>

<dt>Tarif</dt>
<dd>Jeder Plan, auch Starter</dd>

<dt>Rolle</dt>
<dd>Mitglied der Organisation; für den Release ein Organisations-API-Key mit den Scopes registry:publish und app:publish</dd>

<dt>Dauer</dt>
<dd>20 Min.</dd></dl>

### Voraussetzungen

- Eingerichtete lokale Entwicklungsumgebung
- Login in die Registry npm.laioutr.cloud

Zuletzt geprüft am 15. Oktober 2026

Alle Integrationen in Laioutr sind Apps, und jede App ist ein Nuxt-Modul. Eine eigene App kann ein Backend über **Orchestr** anbinden (Queries, Actions, Links, Component Resolver), **Sections und Blocks** für Studio liefern oder als Page Wrapper jede Seite umschließen, etwa für Analytics.

Zentral ist der Aufruf `registerLaioutrApp` in `src/module.ts`. Der `configKey` des Moduls muss dem Paketnamen in `package.json` entsprechen, denn Laioutr übergibt die App-Konfiguration aus der `laioutrrc.json` über diesen Namen.

Vom Repository zur Storefront führen drei getrennte Schritte: **npm publish** legt die Version in die Registry, **laioutr app release** macht sie samt Einstellungsformular im Cockpit bekannt, und erst ein **Deployment** baut eine Umgebung mit der gewählten Version. Beim ersten Release erscheint eine Drittanbieter-App als private App der eigenen Organisation.

## Schritt für Schritt

1. 1 ### Schritt 1: Paketidentität festlegen

   In `package.json` `name`, `description` und `repository` anpassen und die Platzhalter der Vorlage ersetzen. Prüfen, dass `src/module.ts` denselben Namen als `configKey` nutzt.
2. 2 ### Schritt 2: Funktionen registrieren

   In `registerLaioutrApp` die Verzeichnisse für `orchestrDirs`, `sections` und `blocks` eintragen. Handler entstehen als Dateien wie `product/by-slug.query.ts` unter `src/runtime/server/orchestr/`.
3. 3 ### Schritt 3: Im Playground testen

   `pnpm dev` starten und Queries und Actions im **Orchestr Request Editor** der DevTools aufrufen. Sections und Blocks in Studio über **Developer: Use Localhost** prüfen.
4. 4 ### Schritt 4: Paket veröffentlichen

   `laioutr.manifest.json` unter `files` in `package.json` aufnehmen und das Paket mit `npm publish` in die Registry `npm.laioutr.cloud` veröffentlichen.
5. 5 ### Schritt 5: Version im Cockpit freigeben

   Im Paketordner `npx @laioutr/cli app release` mit einem Key mit Scope `app:publish` ausführen. Vorabversionen wie `1.5.0-beta.1` landen im Kanal **testing**, alle anderen in **stable**.
6. 6 ### Schritt 6: In einer Umgebung ausrollen

   In **Package Management** der Umgebung die Version wählen, Werte unter **Configuration** speichern und die Umgebung deployen. Gespeicherte Werte wirken erst mit dem nächsten Deployment.

## Ergebnis prüfen

In **Package Management** erscheint die neue Version ohne den Hinweis **Settings not released**, und das Einstellungsformular zeigt die Felder aus dem Manifest. Nach dem Deployment liefert die Storefront die Sections oder Daten der App aus.

## Häufige Fragen

Warum zeigt das Cockpit kein Einstellungsformular?

Meist fehlt `laioutr.manifest.json` im veröffentlichten Paket (prüfbar mit `npm pack --dry-run`), oder `laioutr app release` wurde für diese Version nicht ausgeführt. Ein korrigiertes Manifest braucht eine neue Version.

Ist die App danach in allen Projekten sichtbar?

Nein. Eine Drittanbieter-App startet als private App der Organisation und erscheint in keinem App-Katalog. Für die Aufnahme in den Katalog ist eine Abstimmung mit Laioutr nötig.

Muss der App Starter genutzt werden?

Nein, aber er liefert Struktur, Skripte und Registrierung bereits passend, sodass die Arbeit direkt bei der App-Logik beginnt.

## Passend dazu

- [Lokale Entwicklungsumgebung einrichten](https://academy.laioutr.com/artikel/lokale-entwicklungsumgebung-einrichten)15 Min.

  Mit dem App Starter, einem Login in die Laioutr-npm-Registry und der Projektkonfiguration aus dem Cockpit läuft eine eigene Laioutr-App in wenigen Minuten lokal. Der Studio-Befehl Developer: Use Localhost zeigt die lokale Version anschließend direkt in Studio.
- [Eigene Sections und Blocks für Studio definieren](https://academy.laioutr.com/artikel/eigene-sections-und-blocks-fuer-studio-definieren)15 Min.

  Jede Section und jeder Block ist eine Vue-Datei mit einer exportierten definition, erstellt mit defineSection oder defineBlock. Die definition legt Komponentenname, Studio-Metadaten, Felder und Slots fest, und Studio baut daraus Auswahl und Seitenleiste.
- [Orchestr: Entities, Queries, Actions und Resolver](https://academy.laioutr.com/artikel/orchestr-entities-queries-actions-und-resolver)8 Min.

  Orchestr ist die Datenschicht von Laioutr und läuft serverseitig im Nuxt-Server. Queries liefern Entity-IDs, Component Resolver laden die Daten dazu, Actions führen Änderungen aus, und Tokens bilden den Vertrag zwischen Frontend, Orchestr und Apps.
- [Apps finden, installieren und konfigurieren](https://academy.laioutr.com/artikel/apps-finden-installieren-und-konfigurieren)6 Min.

  Apps stehen im Cockpit unter Apps als Katalog bereit, werden je Umgebung installiert und unter Configuration eingerichtet. Die Storefront nutzt sie ab dem nächsten Deployment.
- [Die Laioutr CLI: Befehle und Authentifizierung](https://academy.laioutr.com/artikel/laioutr-cli-befehle-und-authentifizierung)6 Min.

  Die Laioutr CLI lädt die Projektkonfiguration laioutrrc.json, gibt App-Versionen im Cockpit frei und löst Deployments aus. Installiert wird sie mit pnpm install -g @laioutr/cli@latest oder ohne Installation per npx.

## In einer Lektion lernen

- [Die erste eigene App](https://academy.laioutr.com/lektionen/entwickler-erste-eigene-app)12 Min.

## [Einstieg für Entwickler](https://academy.laioutr.com/leitfaeden/einstieg-fuer-entwickler)

In diesem Leitfaden suchen

1. [Lokale Entwicklungsumgebung einrichten](https://academy.laioutr.com/artikel/lokale-entwicklungsumgebung-einrichten)15 Min.
2. [Die Laioutr CLI: Befehle und Authentifizierung](https://academy.laioutr.com/artikel/laioutr-cli-befehle-und-authentifizierung)6 Min.
3. [Die erste eigene App bauen und veröffentlichen](https://academy.laioutr.com/artikel/erste-eigene-app-bauen-und-veroeffentlichen)20 Min.
4. [Eigene Sections und Blocks für Studio definieren](https://academy.laioutr.com/artikel/eigene-sections-und-blocks-fuer-studio-definieren)15 Min.
5. [Orchestr: Entities, Queries, Actions und Resolver](https://academy.laioutr.com/artikel/orchestr-entities-queries-actions-und-resolver)8 Min.
6. [Content Collections im Code deklarieren](https://academy.laioutr.com/artikel/content-collections-im-code-deklarieren)15 Min.
7. [Performance und technisches SEO im Code](https://academy.laioutr.com/artikel/performance-und-technisches-seo-im-code)10 Min.

## Structured Data

```json
{
  "@context": "https://schema.org",
  "@graph": [
    {
      "@id": "https://academy.laioutr.com/#website",
      "@type": "WebSite",
      "inLanguage": "de",
      "name": "Default",
      "url": "https://academy.laioutr.com/",
      "workTranslation": {
        "@id": "https://academy.laioutr.com/#website"
      }
    },
    {
      "@id": "https://academy.laioutr.com/artikel/erste-eigene-app-bauen-und-veroeffentlichen#webpage",
      "name": "Academy Article",
      "url": "https://academy.laioutr.com/artikel/erste-eigene-app-bauen-und-veroeffentlichen",
      "@type": [
        "WebPage",
        "FAQPage"
      ],
      "breadcrumb": {
        "@id": "https://academy.laioutr.com/artikel/erste-eigene-app-bauen-und-veroeffentlichen#breadcrumb"
      },
      "isPartOf": {
        "@id": "https://academy.laioutr.com/#website"
      },
      "mainEntity": [
        {
          "@id": "https://academy.laioutr.com/artikel/erste-eigene-app-bauen-und-veroeffentlichen#/schema/question/1"
        },
        {
          "@id": "https://academy.laioutr.com/artikel/erste-eigene-app-bauen-und-veroeffentlichen#/schema/question/2"
        },
        {
          "@id": "https://academy.laioutr.com/artikel/erste-eigene-app-bauen-und-veroeffentlichen#/schema/question/3"
        }
      ],
      "potentialAction": [
        {
          "@type": "ReadAction",
          "target": [
            "https://academy.laioutr.com/artikel/erste-eigene-app-bauen-und-veroeffentlichen"
          ]
        }
      ]
    },
    {
      "@id": "https://academy.laioutr.com/artikel/erste-eigene-app-bauen-und-veroeffentlichen#breadcrumb",
      "@type": "BreadcrumbList",
      "itemListElement": [
        {
          "@type": "ListItem",
          "name": "Home",
          "item": "https://academy.laioutr.com/",
          "position": 1
        },
        {
          "@type": "ListItem",
          "name": "Für Entwickler",
          "item": "https://academy.laioutr.com/bereiche/fuer-entwickler",
          "position": 2
        },
        {
          "@type": "ListItem",
          "name": "Einstieg für Entwickler",
          "item": "https://academy.laioutr.com/leitfaeden/einstieg-fuer-entwickler",
          "position": 3
        },
        {
          "@type": "ListItem",
          "name": "Die erste eigene App bauen und veröffentlichen",
          "item": "https://academy.laioutr.com/artikel/erste-eigene-app-bauen-und-veroeffentlichen",
          "position": 4
        }
      ]
    },
    {
      "@id": "https://academy.laioutr.com/artikel/erste-eigene-app-bauen-und-veroeffentlichen#/schema/question/1",
      "@type": "Question",
      "inLanguage": "de",
      "name": "Warum zeigt das Cockpit kein Einstellungsformular?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "<p>Meist fehlt <code>laioutr.manifest.json</code> im veröffentlichten Paket (prüfbar mit <code>npm pack --dry-run</code>), oder <code>laioutr app release</code> wurde für diese Version nicht ausgeführt. Ein korrigiertes Manifest braucht eine neue Version.</p>"
      }
    },
    {
      "@id": "https://academy.laioutr.com/artikel/erste-eigene-app-bauen-und-veroeffentlichen#/schema/question/2",
      "@type": "Question",
      "inLanguage": "de",
      "name": "Ist die App danach in allen Projekten sichtbar?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "<p>Nein. Eine Drittanbieter-App startet als private App der Organisation und erscheint in keinem App-Katalog. Für die Aufnahme in den Katalog ist eine Abstimmung mit Laioutr nötig.</p>"
      }
    },
    {
      "@id": "https://academy.laioutr.com/artikel/erste-eigene-app-bauen-und-veroeffentlichen#/schema/question/3",
      "@type": "Question",
      "inLanguage": "de",
      "name": "Muss der App Starter genutzt werden?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "<p>Nein, aber er liefert Struktur, Skripte und Registrierung bereits passend, sodass die Arbeit direkt bei der App-Logik beginnt.</p>"
      }
    }
  ]
}
```