developing-data-apps-locally

Guides local editing, validation, and uploading of Lightdash data apps via the CLI.

6.1k|768|Updated Mar 19, 2021
One-click install
npx skills add https://github.com/lightdash/lightdash --skill developing-data-apps-locally
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: developing-data-apps-locally
Source: https://github.com/lightdash/lightdash/tree/main/packages/cli/src/handlers/apps/authoring/developing-data-apps-locally
Command: npx skills add https://github.com/lightdash/lightdash --skill developing-data-apps-locally

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Editing a Lightdash data app locally involves strict constraints: data access only through the query SDK, a fixed template dependency set, read-only build configuration, and a specific edit-validate-upload loop. This Skill encodes those rules so changes are made correctly and uploads succeed.

Core Features & Use Cases

  • Edit-build-upload workflow: Edit files under src/, run lightdash apps validate (optionally with --build for Cloud-parity Vite builds), then lightdash upload --apps <slug> for the authoritative server rebuild.
  • SDK-only data access: All queries go through @lightdash/query-sdk; third-party APIs require lightdash.externalFetch against admin-configured external connections declared in lightdash-app.yml.
  • Dependency and security boundaries: Work within the preinstalled template libraries (React, Recharts, d3, Radix, Tailwind); custom dependencies require organization enablement and a regenerated pnpm-lock.yaml, with install scripts always disabled.
  • Use Case: After running lightdash download, you modify a chart component in src/, validate with lightdash apps validate --build, preview against real data with lightdash apps preview, and upload the finished app.

Quick Start

Ask the assistant to modify the downloaded Lightdash data app in this folder, then validate it with the CLI and upload it to the project.

Frequently Asked Questions about developing-data-apps-locally

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I develop a Lightdash data app locally?

Edit files under src/, run lightdash apps validate to check the source and manifest, optionally add --build for a Cloud-parity Vite build, then run lightdash upload --apps <slug>. The server rebuild on upload is the final authoritative result.

How do I preview a Lightdash data app with real data?

Run lightdash apps preview in the app folder after npm install succeeds. The CLI proxies SDK routes with your credential pinned to the app's project, so no API key is exposed to the browser or Vite environment.

Can I add new npm packages to a Lightdash data app?

Only if the Lightdash organization has custom dependencies enabled. Use pnpm add with plain semver registry packages, up to 60 direct dependencies, and regenerate pnpm-lock.yaml or the upload will be rejected.

How do Lightdash data apps call external APIs?

Apps call third-party APIs through lightdash.externalFetch with an alias linked to an admin-configured external connection declared in lightdash-app.yml. Direct fetch or vendored HTTP clients are not permitted.

Why does my Lightdash app work in preview but fail when deployed?

Preview is not a full sandbox: its CSP is more permissive and host-mediated features like externalFetch and Google Sheets export are not emulated. The deployed app page after upload is the final verification.