This is the default scaffold for apps built with the Sublay builder. It is a
Vite + React + TypeScript app pre-wired to a Sublay project via
@sublay/react-js.
- The Sublay connection.
src/config/sublay.tsis the single source of truth for the project. ItsprojectIdis injected automatically by the builder when the app opens — it ships with a__SUBLAY_PROJECT_ID__placeholder that gets stamped with the real id. Never write connection wiring, never hardcode a projectId, never edit that field. Connecting to Sublay is the platform's job, not yours. - The provider.
src/components/SublayRoot.tsxwraps the app in<SublayProvider projectId={…}>. Every Sublay hook must render inside it. - User auth.
src/components/AuthGate.tsxis a signed-out / signed-in shell built on the project's built-in Sublay user auth (per-project Users). It usesuseAuth()(signInWithEmailAndPassword,signUpWithEmailAndPassword,signOut) anduseUser()(the current user). Keep reading auth state through these hooks — do not re-implement tokens or sessions.
src/
config/sublay.ts # connection config (projectId injected — don't edit)
components/
SublayRoot.tsx # <SublayProvider> wrapper
AuthGate.tsx # signed-out/in shell (built-in Sublay user auth)
Home.tsx # placeholder first screen — REPLACE this
App.tsx # SublayRoot → AuthGate → Home
main.tsx # React root
App.tsx nests SublayRoot → AuthGate → <your screens>. Keep that nesting;
replace Home with the real product and add screens beneath AuthGate.
Model content on entities first (posts, listings, items, …) via the entity hooks, and add bundle-backed features (comments, reactions, follows, spaces, …) as needed. Reach for a custom table only when the entity model genuinely does not fit. See the Sublay docs for the full hook and data-model reference.
npm install— install dependencies (only npm-published packages are used).npm run dev— start the Vite dev server (the preview).npm run build— type-check and build for production.