Generated app anatomy

#What a generated app is

Every app Ripping builds is a Vite + React 19 + TypeScript project with Tailwind. It has no server of its own. Anything that needs one (accounts, saved data, uploads, payments, third-party APIs) goes through HTTP routes on Ripping under /api/apps/<projectId>/, and the app calls them with a session token.

The project starts from three layers:

The UI kit is not in the project. It is imported as @ripping/kit and resolves to a file Ripping serves at /kit/kit-<hash>.js. Its API is in The kit.

#The identity file

src/lib/app.ts is written once when the project is created:

export const APP_ID = "__APP_ID__";   // the project id
export const API = "__API__";         // the Ripping origin the app talks to

Every other lib module builds its URLs from these two. When API is a Ripping host, the bundler rewrites it to whichever origin is serving the app, so a preview and a published copy each talk to the origin that built them.

#The lib modules

Connected services (email, models, the owner's own Stripe, Google, a REST API) have no lib module; the app posts to the call route directly. See Connected services.

#The one route table

src/App.tsx holds every screen of the app in SCREENS, written app-relative:

const SCREENS: { path: string; render: (params: Record<string, string>) => ReactNode }[] = [
  { path: "/", render: () => <Home /> },
  { path: "/settings", render: () => <Settings /> },
  { path: "/purchases", render: () => <Purchases /> },
];

:id segments arrive in params. A screen renders inside <AppLayout>, whose NAV list in src/components/AppLayout.tsx is the sidebar and the phone tab bar (the first five entries fit the tab bar). PUBLIC holds pages anyone can open signed out; the skeleton ships /privacy and /terms.

Two switches in SITE decide the shape of the whole app:

With accounts, a signed-out visitor who opens an app screen is sent to /signin and returned there after signing in. The first sign-in shows <Welcome> once (it sets the synced key app.onboarded). With no accounts there is no sign-in, no Welcome and no per-account data; what someone adds stays in their browser.

App.tsx wraps everything in <KitProvider> (toasts and confirms) and an <ErrorBoundary> that reports the crash and shows <ErrorScreen>.

#Preview and published

Preview. The editor bundles the project in the browser with esbuild-wasm and runs it in a sandboxed frame. Bare imports resolve to esm.sh (React pinned to 19.1.0; other packages take the version in package.json). Screen views and crash reports are not sent from the preview.

Published. Ripping bundles the same files on the server into index.html and app-<hash>.js, uploads them to object storage under sites/<slug>/, and serves them at https://<slug>.<publish domain>. The slug ends with the first six characters of the project id. A verified custom domain can point at the same files. index.html is served with no-cache; the script is immutable.

Both copies call the same API with the same project id. The project id is compiled into the JS of every published app, so it is not a secret; everything that matters is gated by the session token.

#Where data lives

The browser also keeps a copy of per-account data under localStorage keys prefixed data:<userId>: (or data:local: when signed out), so screens open at once and keep working offline.

#Scaffolds

A scaffold is a whole starting point layered over the skeleton, chosen for a kind of business. The keys and blurbs are in src/lib/scaffolds.ts.

A scaffold's src/lib/collections.ts replaces the skeleton's, so its rules are the ones Ripping enforces.