Swoff Swoff

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-plugin

Configure 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:

AdapterOutput Directory
Static exportdist/
Vercel.vercel/output/
Netlifydist/
Node server.output/

Update your swoff/sw-generator.js to write to the correct output directory for your deployment target.

Notes

  • Set ssr: false for 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 build

Next Steps

On this page