TanStack Start
Set up Swoff with TanStack Start (client-only mode).
TanStack Start + Vite
Setup for TanStack Start projects with client-only mode. Swoff does not use server API routes.
Install
npm create vite@latest my-app -- --template react-ts
cd my-app && npm install
npm install @tanstack/react-start @tanstack/react-router
npm install -D @tanstack/router-pluginConfigure Vite
// vite.config.ts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { tanstackStart } from "@tanstack/router-plugin/vite";
export default defineConfig({
plugins: [tanstackStart(), react()],
});Disable SSR
// app.config.ts
export default defineConfig({
ssr: false, // Required for offline-first
});Entry Point (src/main.tsx)
import { RouterProvider } from '@tanstack/react-router'
import ReactDOM from 'react-dom/client'
import { initServiceWorker } from '../swoff/sw-injector'
initServiceWorker()
ReactDOM.createRoot(document.getElementById('app')!).render(<RouterProvider router={router} />)Output Directory
TanStack Start's output directory depends on your hosting adapter:
| Adapter | Output Directory |
|---|---|
| Static export | dist/ |
| Vercel | .vercel/output/ |
| Netlify | dist/ |
| Node server | .output/ |
Update your swoff/sw-generator.js to write to the correct output directory for your deployment target.
Notes
- Set
ssr: falsefor offline-first - All logic runs in the browser via Service Worker + IndexedDB
- TanStack Start's server API routes are not used
Build & Test
npm version patch
npm run buildNext Steps
- React Hooks — all 9 generated hooks
- React Components —
UpdatePrompt,SWProgressBar
Swoff