---
title: "Academy Lesson"
canonical_url: "https://academy.laioutr.com/en/lektionen/developer-build-a-first-app"
locale: en
meta:
  "og:title": "Academy Lesson"
---

[Go to home](https://academy.laioutr.com/en)

- [Agentic Developer](https://academy.laioutr.com/en/lernpfade/developer-learning-path)

- [The first custom app](https://academy.laioutr.com/en/lektionen/developer-build-a-first-app)

Connecting and configuring apps

# The first custom app

12 min

When an integration is missing, it is built as a custom app. This lesson shows the structure of an app, how it delivers data to Orchestr, how its configuration appears in Cockpit and how it is installed in the project. The apps behind the App Store are open source and serve as templates.

## Key takeaways

- An app delivers data to Orchestr.
- Its configuration appears in Cockpit.
- Existing apps are open source and serve as templates.

## Read more

- [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.
- [Find, install and configure apps](https://academy.laioutr.com/en/artikel/find-install-and-configure-apps)6 min

  Apps are listed in the Cockpit catalogue under Apps, installed per environment and set up under Configuration. The storefront uses them from the next deployment onwards.

## 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/lektionen/developer-build-a-first-app#webpage",
      "@type": "WebPage",
      "name": "Academy Lesson",
      "url": "https://academy.laioutr.com/en/lektionen/developer-build-a-first-app",
      "breadcrumb": {
        "@id": "https://academy.laioutr.com/en/lektionen/developer-build-a-first-app#breadcrumb"
      },
      "isPartOf": {
        "@id": "https://academy.laioutr.com/#website"
      },
      "potentialAction": [
        {
          "@type": "ReadAction",
          "target": [
            "https://academy.laioutr.com/en/lektionen/developer-build-a-first-app"
          ]
        }
      ]
    },
    {
      "@id": "https://academy.laioutr.com/en/lektionen/developer-build-a-first-app#breadcrumb",
      "@type": "BreadcrumbList",
      "itemListElement": [
        {
          "@type": "ListItem",
          "name": "Home",
          "item": "https://academy.laioutr.com/en",
          "position": 1
        },
        {
          "@type": "ListItem",
          "name": "Agentic Developer",
          "item": "https://academy.laioutr.com/en/lernpfade/developer-learning-path",
          "position": 2
        },
        {
          "@type": "ListItem",
          "name": "The first custom app",
          "item": "https://academy.laioutr.com/en/lektionen/developer-build-a-first-app",
          "position": 3
        }
      ]
    }
  ]
}
```