TanStack Router
Set up Swoff with TanStack Router + Vite.
TanStack Router
Setup for TanStack Router projects with Vite.
Install
npm create vite@latest my-app -- --template react-ts
cd my-app && npm install
npm install @tanstack/react-router
npm install -D @tanstack/router-pluginConfigure Vite
// vite.config.ts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { TanStackRouterVite } from "@tanstack/router-plugin/vite";
export default defineConfig({
plugins: [TanStackRouterVite(), react()],
});Entry Point (src/main.tsx)
import { createRouter, RouterProvider } from '@tanstack/react-router'
import ReactDOM from 'react-dom/client'
import { initServiceWorker } from '../swoff/sw-injector'
const router = createRouter({ /* routeTree */ })
initServiceWorker()
ReactDOM.createRoot(document.getElementById('app')!).render(<RouterProvider router={router} />)Output Directory
TanStack Router with Vite outputs to dist/ (same as standard Vite). See React + Vite for build script setup. The build script lives at swoff/sw-generator.js.
Notes
- SPA fallback is handled by Vite's
historyApiFallback - See TanStack Start if you need SSR (client-only mode)
Build & Test
npm version patch
npm run buildNext Steps
- React Hooks — all 9 generated hooks
- React Components —
UpdatePrompt,SWProgressBar
Swoff