About Flows custom app features

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.

Scaffolding

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

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 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 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 and the Vite plugin API.

Build and deploy

Deploy to CDF directly:

npm run deploy

Preview deployments for pull requests:

npm run deploy-preview

For interactive deploy and CI/CD, see Deploy your Flows app.

Testing

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

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:

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():

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.

import type { Asset } from "@cognite/sdk";

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

Build

Documentation Index

​Scaffolding

​Authentication in CDF

​Local development with Vite

​Build and deploy

​Testing

​Code quality

​Data fetching with TanStack Query

​TypeScript

​Further reading