Self-Hosting Overview

Why Self-Host?

Self-hosting Supasheet gives you complete control:

Full Control — Own your data and infrastructure
Customisation — Modify the codebase to fit your domain
Privacy — Keep sensitive data inside your perimeter
Cost-Effective — No platform fees beyond Supabase and your hosting bill
Compliance — Easier path to regulatory requirements (SOC 2, HIPAA, etc.)

Tech Stack

Layer	Stack
App	React 19.2 + Vite 7
Routing	TanStack Router (file-based, type-safe)
Data fetching	TanStack Query 5
Forms	TanStack Form
Tables	TanStack Table 8 + `react-data-grid`
Styling	Tailwind CSS 4
UI	shadcn/ui (Base UI variant)
Icons	Lucide React
Rich text	Lexical
Charts	Recharts
Drag & drop	dnd-kit
Tree view	`@headless-tree/react`
Backend	Supabase (Auth, Postgres, Storage, Edge Functions)
Build output	Static SPA in `dist/`

Project Structure

supasheet/
├── src/
│   ├── routes/                 # TanStack Router file-based pages
│   │   ├── __root.tsx          # Root layout & context
│   │   ├── index.tsx           # Entry redirect
│   │   ├── init.tsx            # Multi-project init flow (localStorage credentials)
│   │   ├── auth/               # Sign-in, sign-up, MFA, password reset
│   │   ├── account/            # Profile, security, identities, roles & permissions
│   │   ├── core/               # Users, user_roles, role_permissions, audit_logs, notifications
│   │   ├── storage/            # File browser per bucket
│   │   └── $schema/            # Dynamic schema: resource, dashboard, chart, report, template, sql-editor
│   ├── components/             # Feature modules
│   │   ├── ui/                 # shadcn/ui primitives
│   │   ├── layouts/            # App shell, sidebar, header, notifications
│   │   ├── resource/           # CRUD: forms, cells, fields, detail, sheets, comments, audit, list/tree
│   │   ├── data-table/         # TanStack Table wrapper
│   │   ├── data-grid/          # react-data-grid wrapper
│   │   ├── chart/              # Recharts widgets (area, bar, line, pie, radar)
│   │   ├── dashboard/          # Dashboard widget renderers
│   │   ├── report/             # Report tables
│   │   ├── editor/             # Lexical rich-text editor
│   │   ├── template/           # Template selector & apply dialog
│   │   ├── storage/            # File browser, upload, rename
│   │   ├── users/              # Admin users UI
│   │   ├── user-roles/         # Role assignments
│   │   └── role-permissions/   # Permission matrix
│   ├── hooks/                  # Permissions, user, data-table, mobile, etc.
│   ├── lib/                    # Utilities + types
│   │   ├── supabase/           # Client + per-domain data functions
│   │   ├── database-meta.types.ts  # TableMetadata, ColumnMetadata, view types
│   │   └── database.types.ts   # GENERATED — supabase gen types
│   ├── integrations/           # TanStack Query provider/devtools
│   └── config/                 # Constants (METADATA_COLUMNS, filter operators, …)
├── supabase/
│   ├── migrations/             # Ordered SQL (meta, users, roles, audit, storage, notifications, templates, comments…)
│   ├── functions/              # Deno edge functions (admin-*)
│   └── examples/               # 12 reference domains (desk, crm, hr, finance, inventory, …)
└── public/                     # Static assets

Deployment Options

Supasheet builds to a static SPA — anywhere that can serve static files with SPA fallback works:

Target	Notes
Vercel	One-click static site, env vars in dashboard
Netlify	Built-in SPA redirect support
Cloudflare Pages	Edge-deployed, free tier generous
Render / Railway / Fly	Static or container deployment
Docker + nginx	Self-managed container or k8s
VPS + nginx / Caddy	Plain `npm run build` and serve `dist/`
S3 + CloudFront / GCS + Cloud CDN	Standard cloud static hosting

The Supabase backend (Auth, Postgres, Storage, Edge Functions) runs on Supabase Cloud or your self-hosted Supabase stack.

Prerequisites

Supabase project — cloud or self-hosted
Node.js 18+ — for building the SPA
Supabase CLI — npm install -g supabase (used for migrations and type generation)
Git — to clone the repo

Quick Start

git clone https://github.com/supasheet/supasheet.git
cd supasheet

npm install

# 1. Environment
cp .env.example .env
# Edit .env with VITE_SUPABASE_URL + VITE_SUPABASE_PUBLISHABLE_KEY

# 2. (Optional) local Supabase
npx supabase start

# 3. Apply migrations
npx supabase db push                # cloud
# or
npx supabase db reset               # local — drops & re-applies

# 4. Regenerate types after schema changes
npx supabase gen types typescript --local \
  --schema public --schema supasheet \
  > src/lib/database.types.ts

# 5. Dev server
npm run dev

Available Scripts

npm run dev         # Start Vite dev server on port 3000
npm run build       # Production build → dist/
npm run preview     # Preview the production build locally
npm run typecheck   # tsc --noEmit
npm run lint        # ESLint
npm run format      # Prettier --check
npm run check       # Prettier --write + ESLint --fix
npm run test        # Vitest

npx supabase start  # Boot the local Supabase stack
npx supabase stop   # Tear it down

Next Steps

Prerequisites — System requirements
Environment Variables — All VITE_* variables
Database Setup — Apply migrations + expose schemas
Deployment — Deploy to Vercel, Netlify, Cloudflare, Docker, or a VPS
Production Checklist — Pre-launch checks

Self-Hosting Overview

On this page