Getting Started

Project Structure

Understand what each folder does so you can add routes, APIs, and shared logic without creating chaos.

Updated: 2026-03-04

Baseline Structure

Typical Vista app tree

txt
my-app/
  app/
    root.tsx
    index.tsx
    docs/
      page.tsx
      [...slug]/page.tsx
    api/
      health/route.ts
      typed.ts
  components/
  lib/
  data/
  public/
  vista.config.ts

Folder Responsibilities

  • `app/` contains routes and route-local UI.
  • `components/` contains reusable UI building blocks.
  • `lib/` contains pure helpers and adapters.
  • `data/` contains local data maps like docs catalogs or feature lists.
  • `app/api/` is for HTTP APIs, legacy route handlers, and typed API entrypoint.

Recommended Team Rule

Put code where you would expect to find it in 3 months, not where it was quickest today.

Next