--- title: "Academy Article" canonical_url: "https://academy.laioutr.com/en/artikel/set-up-a-local-development-environment" locale: en meta: "og:title": "Academy Article" --- [Go to home](https://academy.laioutr.com/en) - [For developers](https://academy.laioutr.com/en/bereiche/for-developers) - [Developer start](https://academy.laioutr.com/en/leitfaeden/developer-start) - [Set up a local development environment](https://academy.laioutr.com/en/artikel/set-up-a-local-development-environment) # Set up a local development environment With the App Starter, a login to the Laioutr npm registry and the project configuration from Cockpit, a custom Laioutr app runs locally within minutes. The Studio command Developer: Use Localhost then shows the local version directly in Studio. ## Before you start
Plan
Any plan, including Starter
Role
Access to the project in Cockpit and to its project secret
Duration
15 min
### Prerequisites - macOS, Linux or Windows with WSL2 - Node.js 22.12 or newer (current LTS recommended) - pnpm 10 or newer - A project in Cockpit Last reviewed on October 15, 2026 A Laioutr app is a Nuxt module. Developers who build custom Sections, Blocks or Orchestr integrations work locally in the **App Starter**, the official template with a playground, Laioutr registration and the required conventions. The playground loads the app together with the `laioutrrc.json`. This file is a complete snapshot of a project's frontend configuration: pages, Sections, field values and app settings. Without it, the playground only shows placeholder content. The playground also registers the Laioutr DevTools, so queries, actions and resolvers can be inspected directly in the browser. Studio can connect to the local server. Code changes then appear in the Studio preview, and field edits in Studio reach the local app. Laioutr packages come from a private npm registry, so a one-time login per machine is part of the setup. ## Step by step 1. 1 ### Step 1: Download the App Starter Run `npx giget@latest gh:laioutr/app-starter` and change into the `laioutr-app-starter` folder. 2. 2 ### Step 2: Log in to the Laioutr registry Run `npm login --registry https://npm.laioutr.cloud` and approve the login in the browser. The token is stored in the user-level `~/.npmrc` and never belongs in the project's `.npmrc`. 3. 3 ### Step 3: Install dependencies Run `pnpm install` in the project folder. An outdated Node.js version stops the installation with a message. 4. 4 ### Step 4: Fetch the project configuration Run `pnpm rc:fetch -p / -s `. Both slugs are part of the Cockpit URL, the project secret is in the project settings. 5. 5 ### Step 5: Start the playground Run `pnpm dev` and open **http://localhost:3000**. If apps listed in `laioutrrc.json` are missing, the command names them, and `pnpm add -D ` installs them. 6. 6 ### Step 6: Connect Studio to localhost Open Studio for the same project, press **Cmd+K** or **Ctrl+K** to open the command palette and run **Developer: Use Localhost**. If Chrome asks for local network access, confirm with **Allow**. ## Check the result localhost:3000 shows the project's real pages instead of placeholder content. After **Developer: Use Localhost**, Studio loads the local preview, and `npm whoami --registry https://npm.laioutr.cloud` prints the organisation when run in the project folder. ## Frequently asked questions Why does a new Section not appear in Studio? New Sections or Blocks require a restart of the playground and a reload of Studio. For changed fields on existing components, the command **Developer: Reload Client Context** is enough. Does the setup work on Windows? Yes, with WSL2. Windows PowerShell and Command Prompt are not supported. How does Studio switch back to the hosted version? Run **Developer: Use Remote Host** from the command palette. ## Related - [The Laioutr CLI: commands and authentication](https://academy.laioutr.com/en/artikel/laioutr-cli-commands-and-authentication)6 min The Laioutr CLI fetches the project configuration laioutrrc.json, releases app versions to Cockpit and triggers deployments. Install it with pnpm install -g @laioutr/cli@latest or run it without installation via npx. - [Build and release a first custom app](https://academy.laioutr.com/en/artikel/build-and-release-a-first-custom-app)20 min A custom app starts from the App Starter: set the package name, register Sections, Blocks or Orchestr handlers with registerLaioutrApp and test them in the playground. npm publish and laioutr app release then bring the version to Cockpit, and an environment's next deployment rolls it out. - [Define custom Sections and Blocks for Studio](https://academy.laioutr.com/en/artikel/define-custom-sections-and-blocks-for-studio)15 min Every Section and Block is a Vue file with an exported definition, created with defineSection or defineBlock. It sets the component name, Studio metadata, fields and slots, and Studio builds its picker and sidebar from it. - [Understanding the main, dev and stage environments](https://academy.laioutr.com/en/artikel/understanding-main-dev-and-stage-environments)5 min Every project starts with the main environment, which is the live storefront. Further environments such as stage or dev run beside it as separate copies with their own address, pages, apps and deployments until their work is promoted to main. ## Learn it in a lesson - [Local development and the Laioutr CLI](https://academy.laioutr.com/en/lektionen/developer-local-development-and-cli)12 min - [The Agentic Developer role](https://academy.laioutr.com/en/lektionen/developer-introduction)4 min ## [Developer start](https://academy.laioutr.com/en/leitfaeden/developer-start) Search this guide 1. [Set up a local development environment](https://academy.laioutr.com/en/artikel/set-up-a-local-development-environment)15 min 2. [The Laioutr CLI: commands and authentication](https://academy.laioutr.com/en/artikel/laioutr-cli-commands-and-authentication)6 min 3. [Build and release a first custom app](https://academy.laioutr.com/en/artikel/build-and-release-a-first-custom-app)20 min 4. [Define custom Sections and Blocks for Studio](https://academy.laioutr.com/en/artikel/define-custom-sections-and-blocks-for-studio)15 min 5. [Orchestr: entities, queries, actions and resolvers](https://academy.laioutr.com/en/artikel/orchestr-entities-queries-actions-and-resolvers)8 min 6. [Declare content collections in code](https://academy.laioutr.com/en/artikel/declare-content-collections-in-code)15 min 7. [Performance and technical SEO in code](https://academy.laioutr.com/en/artikel/performance-and-technical-seo-in-code)10 min ## Structured Data ```json { "@context": "https://schema.org", "@graph": [ { "@id": "https://academy.laioutr.com/#website", "@type": "WebSite", "inLanguage": "en", "name": "Default", "url": "https://academy.laioutr.com/", "translationOfWork": { "@id": "https://academy.laioutr.com/#website" } }, { "@id": "https://academy.laioutr.com/en/artikel/set-up-a-local-development-environment#webpage", "name": "Academy Article", "url": "https://academy.laioutr.com/en/artikel/set-up-a-local-development-environment", "@type": [ "WebPage", "FAQPage" ], "breadcrumb": { "@id": "https://academy.laioutr.com/en/artikel/set-up-a-local-development-environment#breadcrumb" }, "isPartOf": { "@id": "https://academy.laioutr.com/#website" }, "mainEntity": [ { "@id": "https://academy.laioutr.com/en/artikel/set-up-a-local-development-environment#/schema/question/1" }, { "@id": "https://academy.laioutr.com/en/artikel/set-up-a-local-development-environment#/schema/question/2" }, { "@id": "https://academy.laioutr.com/en/artikel/set-up-a-local-development-environment#/schema/question/3" } ], "potentialAction": [ { "@type": "ReadAction", "target": [ "https://academy.laioutr.com/en/artikel/set-up-a-local-development-environment" ] } ] }, { "@id": "https://academy.laioutr.com/en/artikel/set-up-a-local-development-environment#breadcrumb", "@type": "BreadcrumbList", "itemListElement": [ { "@type": "ListItem", "name": "Home", "item": "https://academy.laioutr.com/en", "position": 1 }, { "@type": "ListItem", "name": "For developers", "item": "https://academy.laioutr.com/en/bereiche/for-developers", "position": 2 }, { "@type": "ListItem", "name": "Developer start", "item": "https://academy.laioutr.com/en/leitfaeden/developer-start", "position": 3 }, { "@type": "ListItem", "name": "Set up a local development environment", "item": "https://academy.laioutr.com/en/artikel/set-up-a-local-development-environment", "position": 4 } ] }, { "@id": "https://academy.laioutr.com/en/artikel/set-up-a-local-development-environment#/schema/question/1", "@type": "Question", "inLanguage": "en", "name": "Why does a new Section not appear in Studio?", "acceptedAnswer": { "@type": "Answer", "text": "

New Sections or Blocks require a restart of the playground and a reload of Studio. For changed fields on existing components, the command Developer: Reload Client Context is enough.

" } }, { "@id": "https://academy.laioutr.com/en/artikel/set-up-a-local-development-environment#/schema/question/2", "@type": "Question", "inLanguage": "en", "name": "Does the setup work on Windows?", "acceptedAnswer": { "@type": "Answer", "text": "

Yes, with WSL2. Windows PowerShell and Command Prompt are not supported.

" } }, { "@id": "https://academy.laioutr.com/en/artikel/set-up-a-local-development-environment#/schema/question/3", "@type": "Question", "inLanguage": "en", "name": "How does Studio switch back to the hosted version?", "acceptedAnswer": { "@type": "Answer", "text": "

Run Developer: Use Remote Host from the command palette.

" } } ] } ```