> ## Documentation Index
> Fetch the complete documentation index at: https://docs.cognite.com/llms.txt
> Use this file to discover all available pages before exploring further.

# About Flows custom app features

> Overview of Flows features for building custom apps for Cognite Data Fusion (CDF): scaffolding, authentication, Vite local development, TanStack Query, testing, code quality, TypeScript, and deployment.

**Flows** (`@cognite/cli`) is a CLI for building production-ready React apps that run inside **CDF**. You get project scaffolding, authenticated access to the Cognite SDK, a Vite-based dev workflow, and paths to deploy without assembling those pieces yourself.

For a hands-on path from install to first run, see [Get started with Flows](/cdf/flows/guides/getting-started).

## Scaffolding

You create a full app layout, configuration, and recommended tooling with a single command:

```bash theme={"languages":{"custom":["/_languages/kuiper.json","../_languages/kuiper.json"]}}
npx @cognite/cli@latest apps create
```

The generator captures org, project, and cluster in `app.json` and sets up **Cursor** rules when you use Cursor as your editor. See [Get started with Flows](/cdf/flows/guides/getting-started#create-and-run-your-app) for prompts and folder layout.

## Authentication in CDF

Flows integrates with CDF sign-in when your app runs in the CDF iframe. Call **`connectToHostApp()`** from **`@cognite/app-sdk`** to get a **`HostAppAPI`** instance, then use `getProject()`, `getBaseUrl()`, and `getAccessToken()` to construct an authenticated **`CogniteClient`**.

See the [Flows Auth API](/cdf/flows/reference/api/auth) for props, loading and error, and return values.

## Local development with Vite

Templates use **Vite** with **hot module replacement (HMR)**, **HTTPS** on localhost (locally trusted certificates), and optional **auto-open in CDF** via `fusionOpenPlugin`. With auto-open, you run the dev build inside the CDF iframe and hit the same sign-in flow and URLs you get when the app is published.

See [Run your app locally](/cdf/flows/guides/running-locally) and the [Vite plugin API](/cdf/flows/reference/api/vite).

## Build and deploy

Deploy to **CDF** directly:

```bash theme={"languages":{"custom":["/_languages/kuiper.json","../_languages/kuiper.json"]}}
npm run deploy
```

Preview deployments for pull requests:

```bash theme={"languages":{"custom":["/_languages/kuiper.json","../_languages/kuiper.json"]}}
npm run deploy-preview
```

For interactive deploy and CI/CD, see [Deploy your Flows app](/cdf/flows/guides/deploying).

## Testing

Generated custom apps include **Vitest** and **React Testing Library**. From your app directory, run:

```bash wrap theme={"languages":{"custom":["/_languages/kuiper.json","../_languages/kuiper.json"]}}
npm test           # Run tests
npm run test:watch # Watch mode
npm run test:ui    # Visual UI
```

Script names are defined in `package.json`.

## Code quality

The template ships with **ESLint** configuration (`eslint.config.mjs`) and npm scripts for linting and formatting. From your app directory, run:

```bash wrap theme={"languages":{"custom":["/_languages/kuiper.json","../_languages/kuiper.json"]}}
npm run lint       # Check for issues
npm run lint:fix   # Auto-fix issues
```

Script names are defined in `package.json`.

## Data fetching with TanStack Query

**TanStack Query (React Query)** is included so you can pair cached, declarative data loading with an authenticated SDK from `connectToHostApp()`:

```tsx wrap theme={"languages":{"custom":["/_languages/kuiper.json","../_languages/kuiper.json"]}}
import { useQuery } from "@tanstack/react-query";
import { CogniteClient } from "@cognite/sdk";

function Assets({ sdk }: { sdk: CogniteClient }) {

  const { data, isLoading } = useQuery({
    queryKey: ["assets"],
    queryFn: () =>
      sdk.instances.list({
        instanceType: "node",
        limit: 10,
        sources: [
          {
            source: {
              type: "view",
              space: "cdf_cdm",
              externalId: "CogniteAsset",
              version: "v1",
            },
          },
        ],
      }),
  });

  if (isLoading) return <div>Loading assets...</div>;

  return (
    <ul>
      {data?.items.map((asset) => (
        <li key={asset.externalId}>
          {asset.properties?.["cdf_cdm"]?.["CogniteAsset/v1"]?.name}
        </li>
      ))}
    </ul>
  );
}
```

## TypeScript

Apps are **TypeScript-first**, with strict settings suited to app development. Types from **`@cognite/sdk`** (for example, resources such as assets) work with your components and hooks as you build out the UI.

```tsx wrap theme={"languages":{"custom":["/_languages/kuiper.json","../_languages/kuiper.json"]}}
import type { Asset } from "@cognite/sdk";

function AssetCard({ asset }: { asset: Asset }) {
  return (
    <div>
      <h3>{asset.name}</h3>
      <p>{asset.description}</p>
    </div>
  );
}
```

## Further reading

* [Get started with Flows](/cdf/flows/guides/getting-started) — Create a project and run it in CDF.
* [Run your app locally](/cdf/flows/guides/running-locally) — Dev server, HTTPS, and troubleshooting.
* [Deploy your Flows app](/cdf/flows/guides/deploying) — Interactive deploy and CI/CD.