Skip to content
← Public packages

@kentcdodds/package-app-kit

Design tokens, PWA install/update, About/version, cache helpers, and optional realtime notes sync for Kody package apps.

FollowFork

starter-tanstack/README.template.md

57 lines · 2.7 KB · Markdown

APP_TITLE

Intent

Desktop + mobile friendly Kody package app scaffolded from @kentcdodds/package-app-kit starter-tanstack/. Replace this Intent with the product goal before the first real publish.

Stack

  • TanStack Router + React under the framework-agnostic host — app/router.ts remounts + export default { fetch } (no kody.app.runtime)
  • Root tsconfig.json with "jsx": "react-jsx" + "jsxImportSource": "react" (standard React — not remix/component)
  • @tanstack/react-router route tree (app/routeTree.tsx) with Workers SSR via react-dom/server.edge renderToReadableStream (no TanStack Start / Vite)
  • Mount-prefixed routes (basepath + remount) and createRoutes(appBasePath) href helpers
  • Controllers + notes POST with packageStorage(); JSON Accept for client loaders
  • Browser hydrateRoot entry (app/assets/entry.ts) + RouterProvider
  • Static assets (public/styles.css, public/sw.js via __version.json)
  • Kit: design tokens CSS, record-version / About, install CTA + update banner, Notes form + double-check

List mark

Identity/list icon: .kody/icon.png (scaffold ships .kody/icon.svg). Replace with your logo. PWA icons stay under /icons/ via the kit — not in .kody/.

After scaffolding

See After scaffolding in AGENTS.md: brand the list mark + PWA icons, fill titles/description, keep local record-version, confirm the TanStack recipe, and match manifest theme colors to the mark.

Develop locally

You need Node 24+ and git.

git clone https://kody.codes/__PACKAGE_NAME__.git
cd __PACKAGE_ID__
npm install
npm run setup   # first time only: kody login + git access
npm run dev     # local app with mock data and fake credentials

Common scripts:

  • npm run dev: run the app locally on mock data (npm run dev:prod uses your real data)
  • npm run fetch -- /health: request one path without opening a browser
  • npm run job -- <name>, npm run webhook -- <name> --body fixtures/webhook.example.json, npm run emit -- <event> --body fixtures/event.example.json: trigger jobs, webhooks, and events once
  • npm run check, npm run typecheck, npm test: catch problems before you ship
  • npm run publish:kody: run tests and the pre-publish check, then publish what you pushed

Ship changes with git push, then npm run publish:kody. No terminal? Ask your Kody agent to make and publish changes instead; AGENTS.md has the full workflow.

After publish

Call this package's ./record-version (local packageStorage), not the kit's:

import recordVersion from 'kody:__PACKAGE_NAME__/record-version'
await recordVersion({ sha: '<published_commit>', message: '<commit message>' })