---
title: Build your app
slug: optimizely-connect-platform/docs/building
docTags: 
createdAt: 2026-07-23T12:37:03.966Z
---

After you register and scaffold your app, you can start building. This section covers the key aspects of app development:

- **Settings form** – Your app's settings tab lets users configure authentication and preferences. Define the form in `src/forms/settings.yml`. See [Define the app settings form](https://docs.developers.optimizely.com/optimizely-connect-platform/v2.0_OCP-1796_build_an_app4/docs/building#define-the-app-settings-form) .
- **Lifecycle hooks** – Respond to install, upgrade, and uninstall events with lifecycle hooks in `Lifecycle.ts`. See Lifecycle hooks.
- **Functions and jobs** – Functions handle incoming requests and events. Jobs run background tasks on a schedule or on demand. See [Implement app logic.](https://docs.developers.optimizely.com/optimizely-connect-platform/v2.0_OCP-1796_build_an_app4/docs/building#implement-app-logic)
- **Environment variables** – Store secrets and configuration in an `.env` file. All variables must use the `APP_ENV_` prefix. See Environment variables.
- **Storage** – Persist data between executions using the settings store, key-value store, shared key-value store, or secrets store. See Storage.

## Configure the app manifest

The `app.yml` file defines your app's metadata, jobs, functions, and schema. See App manifest (app.yml) for a full reference of available configuration options.

## Understand the app structure

The scaffold generates a standard project layout with source code, schema definitions, and form definitions. See App structure for details on the directory layout and file purposes.

## Define the app settings form

OCP apps include a **Settings** tab that users access after installing the app. Use the **Settings** tab to define how users connect to and use your app.

OCP apps support several types of authentication, including OAuth, tokens, username and password, and API keys.

The following image shows an example **Settings** tab for an OCP app:

![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/CIL7KbHtYQ3pAxH1inw3K_6fabf692ad409178260631498a77a03bff51dceea3d73c9d8cc0b8b59360983e-image.png)

Manage your app settings in the `src/forms/settings.yml` file, which the scaffolding creates as a placeholder form. Your settings form consists of the following:

- **Sections** – Your form supports multiple sections. OCP expands the first section by default, and users can expand subsequent sections. Define all sections in the `src/forms/settings.yml` file. The `onSettingsForm` lifecycle hook processes and validates each section separately. The following example shows a settings form with two sections. The second section displays only after a successful login in the first section.

```yaml
sections:
- key: login
  label: Login
  properties:
    - successful
  elements:
    - ...
- key: lists
  label: Import Lists
  visible:
    key: login.successful
    equals: true
  elements:
    - ...
```

- **Form elements** – The different UI elements users interact with in your settings form. See [Form elements](docId\:V5iqIFcSz3Zl7fFExP8mL) for available form elements.

## Validate your app

Validate your app configuration at any time by running the following command in the OCP CLI:

```bash
ocp app validate
```

This checks your `app.yml`, schema definitions, and form definitions for errors before you publish.

## Run and test locally

Run and test your app locally using the OCP local testing tool:

```bash
ocp dev
```

This opens a web interface where you can preview your settings form, test functions, run jobs, and debug issues. See [Test your app](docId\:IH3R2qy152H7GY0LDg_Re) for details.

## Add dependencies

OCP apps have pre-defined dependencies in the `package.json` file. Add your own dependencies using `npm install` or `yarn add`, or by manually editing the `package.json` file.

For example, to add the [axios library](https://www.npmjs.com/package/axios) for HTTP calls:

```shell
npm install axios
```

If a dependency is only required at build and test time, add it as a `dev` dependency:

```shell
npm install --save-dev mocha
```

:::hint{type="info"}
**📘 Note**
OCP app templates include [Vitest](https://www.npmjs.com/package/vitest) by default for testing.
:::

For dependencies without types, add TypeScript type definitions to your `dev` dependencies.

:::hint{type="info"}
**📘 Note**
Add any dependency available in the [public NPM repository](https://www.npmjs.com). OCP does not support dependencies in private repositories. They can work locally, but the build fails when you push your app to OCP.
:::

## Implement app logic

Use the OCP App SDK to implement your app's core functionality:

- [Functions](docId\:Uu00e5AC-qCQ2uuN5mLwh) – Handle incoming requests and events.
- [Jobs](docId\:t9ZHi9VskKMzUybgk1Giw) – Run background tasks on a schedule or on demand.
- [Lifecycle hooks](docId\:nlHtCPtedxv2Kqyh8ZYQ6) – Respond to install, upgrade, and uninstall events.
- [Storage](docId\:yZCeulHJFlZmUIxHo88wl) – Persist data between function and job executions.
- [OAuth](docId\:fS7u929rUh_eCow3L6o3M) – Authenticate with external services.
- [Data sync sources](docId:6hgAikH6TMV9ClfpfPARu) – Provide data to the **Sync Manager** from an external system.
- [Data sync destinations](docId\:BTc-4lFtFEuRGxeCsjnk0) – Receive data from the **Sync Manager** and send it to an external system.
- [Agent Platform tools](docId\:partaPpjX0Gcet9jbZOns) – Extend Mark with custom tool capabilities.
- (Beta) [CMS UI extensions](docId\:NV6r9sjdc_6Dhs0_dvf6S) – Contribute your UI into the Optimizely Content Management System (CMS), backed by an OCP function. Supported surfaces are the content editor side panel, `sidebar`, a full page, `view`, and a custom editor for a single content property, `property-editor`. More panel types are planned for the future.

Use your preferred IDE or code editor to write your app's source code. OCP apps are TypeScript projects, so any editor with TypeScript support works.