Self-Hosting Overview

Why Self-Host?

Self-hosting Supasheet gives you complete control:

Full Control - Own your data and infrastructure
Customization - Modify the codebase as needed
Privacy - Keep sensitive data on your infrastructure
Cost-Effective - No platform fees
Compliance - Meet regulatory requirements

Tech Stack

Supasheet is built with:

App - React 19 + Vite
Routing - TanStack Router (file-based, type-safe)
Data Fetching - TanStack Query
Forms - TanStack Form
Tables - TanStack Table
Styling - Tailwind CSS v4
UI Components - shadcn/ui (Base UI variant)
Rich Text - Lexical
Charts - Recharts
Backend - Supabase (Auth, Database, Storage, Edge Functions)

Project Structure

supasheet/
├── src/
│   ├── routes/                 # TanStack Router file-based pages
│   │   ├── __root.tsx          # Root layout and context
│   │   ├── index.tsx           # App entry redirect
│   │   ├── auth/               # Sign-in, sign-up, MFA, password reset
│   │   ├── account/            # Profile, security, identities
│   │   ├── core/               # Users, roles, permissions, audit logs
│   │   ├── storage/            # File storage browser
│   │   └── $schema/            # Dynamic schema module (resources, dashboards, charts, reports)
│   ├── components/             # UI components by module
│   │   ├── ui/                 # shadcn/ui primitives
│   │   ├── layouts/            # Layout components
│   │   ├── resource/           # CRUD components
│   │   ├── dashboard/          # Dashboard widgets
│   │   └── ...                 # Other feature components
│   ├── hooks/                  # Shared React hooks
│   ├── lib/                    # Utilities and shared logic
│   │   └── supabase/           # Supabase client and query functions
│   ├── integrations/           # Third-party setup (TanStack Query provider)
│   └── config/                 # App-level configuration constants
├── supabase/
│   ├── migrations/             # SQL migration files
│   ├── functions/              # Deno edge functions (admin user operations)
│   └── examples/               # Example seed SQL files
└── public/                     # Static assets

Deployment Options

Supasheet builds to a static SPA and can be deployed to:

Netlify - Recommended (easy static hosting)
Vercel - Static site deployment
Cloudflare Pages - Edge deployment
Docker - Containerized with nginx
VPS - Self-managed server with nginx
AWS/GCP/Azure - Enterprise solutions

Prerequisites

Supabase Project - Create at supabase.com
Node.js 18+ - Runtime environment
Git - Version control

Quick Start

# Clone repository
git clone https://github.com/htmujahid/supasheet.git
cd supasheet

# Install dependencies
npm install

# Configure environment
cp .env.example .env
# Edit .env with your Supabase credentials

# Start local Supabase (optional)
npx supabase start

# Run migrations
npx supabase db push

# Start dev server
npm run dev

Available Scripts

npx supabase start  # Start local Supabase instance
npm run dev         # Start dev server on port 3000
npm run build       # Production build (outputs to dist/)
npm run preview     # Preview the production build locally
npm run typecheck   # TypeScript check
npm run lint        # ESLint
npm run check       # Format + lint fix
npm run test        # Run tests

Next Steps

Deployment - Deploy to production
Environment Variables - Configure settings
Production Checklist - Pre-launch checks

Self-Hosting Overview

On this page