# Vite PWA Starter (Archetype F) Lighter mobile PWA template — Vite + React + vite-plugin-pwa. No SSR, faster dev, simpler deploy. ## When to use this over Next.js - App is purely client-side (no SEO needs) - Faster dev cycle priority - Static hosting deploy (Cloudflare Pages, Netlify, S3) - Single-page or simple multi-route ## Setup ```bash pnpm create vite@latest my-app -- --template react-ts cd my-app pnpm add -D vite-plugin-pwa pnpm add tailwindcss @tailwindcss/vite # Copy starter files cp -r 00-templates/ui-kit/mobile/starters/vite-pwa/* . # Copy tokens mkdir -p src/styles/tokens cp 00-templates/ui-kit/tokens/{foundation,semantic}.css src/styles/tokens/ cp 00-templates/ui-kit/mobile/tokens-mobile.css src/styles/tokens/ cp 00-templates/ui-kit/brands/.brand.css src/styles/tokens/ pnpm dev ``` ## File structure ``` my-app/ ├── index.html # PWA meta + safe-area ├── vite.config.ts # PWA plugin config ├── src/ │ ├── main.tsx │ ├── App.tsx # Archetype F starter │ └── styles/ │ ├── index.css # imports tokens │ └── tokens/ # copied from ui-kit └── public/ ├── icon-192.png ├── icon-512.png ├── apple-touch-icon.png └── manifest.webmanifest # auto-generated by plugin ``` ## Anti-bug bake-ins - ✓ `` in `index.html` - ✓ Viewport meta with `viewport-fit=cover` - ✓ `theme-color` matches brand - ✓ Apple touch icon + capable meta - ✓ Service worker auto-registered via vite-plugin-pwa