Skip to content

sublay-io/builder-starter-react

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

1 Commit
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Sublay Builder Starter (React + Vite)

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.

What is already wired (do not rebuild this)

  • The Sublay connection. src/config/sublay.ts is the single source of truth for the project. Its projectId is 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.tsx wraps the app in <SublayProvider projectId={…}>. Every Sublay hook must render inside it.
  • User auth. src/components/AuthGate.tsx is a signed-out / signed-in shell built on the project's built-in Sublay user auth (per-project Users). It uses useAuth() (signInWithEmailAndPassword, signUpWithEmailAndPassword, signOut) and useUser() (the current user). Keep reading auth state through these hooks — do not re-implement tokens or sessions.

App structure

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.

Building features

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.

Commands

  • 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.

About

Sublay React starter template — Vite + React + @sublay/react-js, used by the Sublay builder

Resources

Stars

0 stars

Watchers

0 watching

Forks

Releases

No releases published

Packages

 
 
 

Contributors