---
title: "Academy Article"
canonical_url: "https://academy.laioutr.com/artikel/lokale-entwicklungsumgebung-einrichten"
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)

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

# Lokale Entwicklungsumgebung einrichten

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.

## Bevor du startest

<dl>

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

<dt>Rolle</dt>
<dd>Zugriff auf das Projekt im Cockpit und auf dessen Project Secret</dd>

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

### Voraussetzungen

- macOS, Linux oder Windows mit WSL2
- Node.js 22.12 oder neuer (empfohlen: aktuelle LTS)
- pnpm 10 oder neuer
- Ein Projekt im Cockpit

Zuletzt geprüft am 15. Oktober 2026

Eine Laioutr-App ist ein Nuxt-Modul. Wer eigene Sections, Blocks oder Orchestr-Anbindungen entwickelt, arbeitet lokal im **App Starter**, der offiziellen Vorlage mit Playground, Laioutr-Registrierung und den nötigen Konventionen.

Der Playground lädt die eigene App zusammen mit der `laioutrrc.json`. Diese Datei ist ein vollständiger Schnappschuss der Frontend-Konfiguration eines Projekts: Seiten, Sections, Feldwerte und App-Einstellungen. Ohne sie zeigt der Playground nur Platzhalterinhalte. Außerdem registriert der Playground die Laioutr DevTools, damit Queries, Actions und Resolver direkt im Browser geprüft werden können.

Studio lässt sich mit dem lokalen Server verbinden. Änderungen im Code erscheinen dann in der Studio-Vorschau, und Feldänderungen in Studio kommen in der lokalen App an. Die Laioutr-Pakete stammen aus einer privaten npm-Registry, deshalb gehört ein einmaliger Login je Rechner zur Einrichtung.

## Schritt für Schritt

1. 1 ### Schritt 1: App Starter herunterladen

   `npx giget@latest gh:laioutr/app-starter` ausführen und in den Ordner `laioutr-app-starter` wechseln.
2. 2 ### Schritt 2: Bei der Laioutr-Registry anmelden

   `npm login --registry https://npm.laioutr.cloud` ausführen und den Login im Browser bestätigen. Der Token landet in der benutzerweiten `~/.npmrc` und gehört nie in die `.npmrc` des Projekts.
3. 3 ### Schritt 3: Abhängigkeiten installieren

   Im Projektordner `pnpm install` ausführen. Ein zu altes Node.js bricht die Installation mit einer Meldung ab.
4. 4 ### Schritt 4: Projektkonfiguration laden

   `pnpm rc:fetch -p <organisation>/<projekt> -s <project-secret>` ausführen. Beide Slugs stehen in der Cockpit-URL, das Project Secret in den Projekteinstellungen.
5. 5 ### Schritt 5: Playground starten

   `pnpm dev` ausführen und **http://localhost:3000** öffnen. Fehlen Apps aus der `laioutrrc.json`, nennt der Befehl sie, und `pnpm add -D <app>` installiert sie nach.
6. 6 ### Schritt 6: Studio mit localhost verbinden

   Studio für dasselbe Projekt öffnen, mit **Cmd+K** oder **Ctrl+K** die Befehlspalette aufrufen und **Developer: Use Localhost** ausführen. Fragt Chrome nach dem Zugriff auf das lokale Netzwerk, mit **Allow** bestätigen.

## Ergebnis prüfen

Unter localhost:3000 erscheinen die echten Seiten des Projekts statt Platzhalterinhalten. Studio lädt nach **Developer: Use Localhost** die lokale Vorschau, und `npm whoami --registry https://npm.laioutr.cloud` gibt im Projektordner die eigene Organisation aus.

## Häufige Fragen

Warum erscheint eine neue Section nicht in Studio?

Neue Sections oder Blocks brauchen einen Neustart des Playgrounds und ein Neuladen von Studio. Für geänderte Felder an bestehenden Komponenten reicht der Befehl **Developer: Reload Client Context**.

Funktioniert die Einrichtung unter Windows?

Ja, mit WSL2. Windows PowerShell und die Eingabeaufforderung werden nicht unterstützt.

Wie wechselt Studio zurück zur gehosteten Version?

In der Befehlspalette **Developer: Use Remote Host** ausführen.

## Passend dazu

- [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.
- [Die erste eigene App bauen und veröffentlichen](https://academy.laioutr.com/artikel/erste-eigene-app-bauen-und-veroeffentlichen)20 Min.

  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.
- [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.
- [Umgebungen main, dev und stage verstehen](https://academy.laioutr.com/artikel/umgebungen-main-dev-und-stage-verstehen)5 Min.

  Jedes Projekt startet mit der Umgebung main, der Live-Storefront. Weitere Umgebungen wie stage oder dev laufen als eigene Kopien mit eigener Adresse, eigenen Seiten, Apps und Deployments daneben, bis ihre Arbeit nach main übernommen wird.

## In einer Lektion lernen

- [Lokale Entwicklung und Laioutr CLI](https://academy.laioutr.com/lektionen/entwickler-lokale-entwicklung-und-cli)12 Min.
- [Die Rolle Agentic Developer](https://academy.laioutr.com/lektionen/entwickler-einfuehrung)4 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/lokale-entwicklungsumgebung-einrichten#webpage",
      "name": "Academy Article",
      "url": "https://academy.laioutr.com/artikel/lokale-entwicklungsumgebung-einrichten",
      "@type": [
        "WebPage",
        "FAQPage"
      ],
      "breadcrumb": {
        "@id": "https://academy.laioutr.com/artikel/lokale-entwicklungsumgebung-einrichten#breadcrumb"
      },
      "isPartOf": {
        "@id": "https://academy.laioutr.com/#website"
      },
      "mainEntity": [
        {
          "@id": "https://academy.laioutr.com/artikel/lokale-entwicklungsumgebung-einrichten#/schema/question/1"
        },
        {
          "@id": "https://academy.laioutr.com/artikel/lokale-entwicklungsumgebung-einrichten#/schema/question/2"
        },
        {
          "@id": "https://academy.laioutr.com/artikel/lokale-entwicklungsumgebung-einrichten#/schema/question/3"
        }
      ],
      "potentialAction": [
        {
          "@type": "ReadAction",
          "target": [
            "https://academy.laioutr.com/artikel/lokale-entwicklungsumgebung-einrichten"
          ]
        }
      ]
    },
    {
      "@id": "https://academy.laioutr.com/artikel/lokale-entwicklungsumgebung-einrichten#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": "Lokale Entwicklungsumgebung einrichten",
          "item": "https://academy.laioutr.com/artikel/lokale-entwicklungsumgebung-einrichten",
          "position": 4
        }
      ]
    },
    {
      "@id": "https://academy.laioutr.com/artikel/lokale-entwicklungsumgebung-einrichten#/schema/question/1",
      "@type": "Question",
      "inLanguage": "de",
      "name": "Warum erscheint eine neue Section nicht in Studio?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "<p>Neue Sections oder Blocks brauchen einen Neustart des Playgrounds und ein Neuladen von Studio. Für geänderte Felder an bestehenden Komponenten reicht der Befehl <strong>Developer: Reload Client Context</strong>.</p>"
      }
    },
    {
      "@id": "https://academy.laioutr.com/artikel/lokale-entwicklungsumgebung-einrichten#/schema/question/2",
      "@type": "Question",
      "inLanguage": "de",
      "name": "Funktioniert die Einrichtung unter Windows?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "<p>Ja, mit WSL2. Windows PowerShell und die Eingabeaufforderung werden nicht unterstützt.</p>"
      }
    },
    {
      "@id": "https://academy.laioutr.com/artikel/lokale-entwicklungsumgebung-einrichten#/schema/question/3",
      "@type": "Question",
      "inLanguage": "de",
      "name": "Wie wechselt Studio zurück zur gehosteten Version?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "<p>In der Befehlspalette <strong>Developer: Use Remote Host</strong> ausführen.</p>"
      }
    }
  ]
}
```