Vite React Starter Kit

High-performance, client-rendered React 18 starter featuring TanStack Router, React Query, a top-of-page navigation progress line, and a modern development experience.

Features

• Routing & Data: TanStack Router (code-split routes), React Query with devtools, Suspense-friendly loaders.
• UI: React-Bootstrap components, AOS scroll animations, dark/light theme toggle, navigation progress bar, cookie consent banner with keyboard hotkeys (A/N/P/S).
• Build & DX: Vite 5, optional TypeScript, ESLint + Prettier, compression plugin for production assets.
• Server preview: Express + compression + sirv for running the built client.

Getting Started

Prerequisites

• Node.js ≥ 18.18
• npm ≥ 9 (or pnpm ≥ 8 / yarn ≥ 1.22)

Install

git clone https://github.com/yourusername/vite-react-starter-kit.git
cd vite-react-starter-kit
npm install

Environment Variables

Create .env.local:

VITE_API_BASE_URL=http://localhost:3000/api
VITE_OAUTH_CLIENT_ID=
VITE_OAUTH_AUTH_URL=
VITE_OAUTH_TOKEN_URL=
VITE_OAUTH_REDIRECT_URI=http://localhost:5173/oauth/callback
VITE_OAUTH_SCOPES="openid profile email"

Scripts

npm run dev      # start dev server
npm run build    # production build
npm run preview  # preview built app

Project Structure

src/
├── components/     # UI and layout pieces
├── hooks/          # Reusable hooks
├── lib/            # Shared libs (theme, query client, cookie consent)
├── pages/          # Route components
├── styles/         # Global styles (SCSS)
└── utils/          # Helpers

Cookie Consent

• Library: vanilla-cookieconsent
• Keyboard: [A] accept all, [N] accept necessary, [P] preferences, [S] save in preferences modal.
• Footer link opens preferences; banner shows only when consent is missing.

Contributing

PRs are welcome. Please open an issue first for significant changes.

License

MIT License - see LICENSE.

• React
• TanStack
• React-Bootstrap
• All the amazing open-source libraries we depend on

Project Structure

├── server/
│   ├── dev-server.js        # Vite middleware entry for local dev
│   ├── index.js             # Express preview server with compression
│   └── utils/               # template + asset helpers
├── src/
│   ├── entry-client.jsx     # Client bootstrap (RouterProvider + QueryClient)
│   ├── App.jsx              # Shell wrapper and global effects (AOS)
│   ├── router.jsx           # TanStack Router tree
│   ├── components/          # Layout + UI pieces (header, footer, sections)
│   ├── pages/               # Route components (Home, About, Privacy, 404)
│   ├── lib/                 # Theme, query client, API client, SEO, cookie consent
│   ├── hooks/               # Reusable hooks (e.g., useApi)
│   └── styles/main.scss     # Bootstrap imports + site styles
├── public/                  # Static assets served as-is
├── vite.config.js           # Vite config with compression
├── AGENTS.md                # Engineering playbook
└── README.md

Deployment

1. npm run build
2. Serve static assets from dist/client (or use npm run preview locally).
3. Put a reverse proxy (Nginx/Cloudflare) in front to terminate TLS and cache /assets.

Acknowledgments

• Vite
• React
• TanStack
• React-Bootstrap
• All the open-source libraries this starter depends on