TanStack Start Multi-Tenant Example

A production-ready example of a multi-tenant application built with TanStack Start, featuring custom subdomains for each tenant. This project is forked from Vercel's Next.js platforms example and converted to use TanStack Start.

🚀 Live Demo

Experience the multi-tenant functionality at multi-domain.learnjs.eu.org - hosted on Vercel!

Features

• ✅ Custom subdomain routing with TanStack Start
• ✅ Tenant-specific content and pages
• ✅ Shared components and layouts across tenants
• ✅ Redis for tenant data storage
• ✅ Admin interface for managing tenants
• ✅ Emoji support for tenant branding
• ✅ Support for local development with subdomains
• ✅ Compatible with Vercel preview deployments

Tech Stack

• TanStack Start - Full-stack React framework
• React 19
• Upstash Redis for data storage
• Tailwind 4 for styling
• shadcn/ui for the design system

Getting Started

Prerequisites

• Node.js 18.17.0 or later
• pnpm (recommended) or npm/yarn
• Upstash Redis account (for production)

Installation

1. Clone the repository:

   git clone https://github.com/xiaoyu2er/tanstack-platforms.git
   cd tanstack-platforms

2. Install dependencies:

   pnpm install

3. Set up environment variables: Copy the example environment file and fill in your values:

   cp .env.example .env

   Then edit .env with your values:

   KV_REST_API_URL=your_redis_url
   KV_REST_API_TOKEN=your_redis_token
   VITE_ROOT_DOMAIN=localhost:3000
   

4. Start the development server:

   pnpm dev

5. Access the application:

   • Main site: http://localhost:3000
   • Admin panel: http://localhost:3000/admin
   • Tenants: http://[tenant-name].localhost:3000

Multi-Tenant Architecture

This application demonstrates a subdomain-based multi-tenant architecture where:

• Each tenant gets their own subdomain (tenant.yourdomain.com)
• TanStack Start routes handle subdomain detection and tenant-specific content
• Tenant data is stored in Redis using a subdomain:{name} key pattern
• The main domain hosts the landing page and admin interface
• Subdomains are dynamically mapped to tenant-specific content

The application intelligently detects subdomains across various environments (local development, production, and Vercel preview deployments).

Deployment

This application is designed to be deployed on Vercel. To deploy:

1. Push your repository to GitHub
2. Connect your repository to Vercel
3. Configure environment variables
4. Deploy

For custom domains, make sure to:

1. Add your root domain to Vercel
2. Set up a wildcard DNS record (*.yourdomain.com) on Vercel