Swoff Swoff

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

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

Next Steps

On this page