- TypeScript 91.1%
- Nix 4.9%
- HTML 2.2%
- CSS 1.8%
418634b5c5
All checks were successful
CI / Check, test, and build (push) Successful in 27s
- add lazy routes, error handling, metadata, and validated environment config - expand browser tests with accessibility and coverage reporting - publish coverage artifacts in CI and document new template behavior |
||
|---|---|---|
| .forgejo/workflows | ||
| src | ||
| .env.example | ||
| .gitignore | ||
| devenv.lock | ||
| devenv.nix | ||
| devenv.yaml | ||
| index.html | ||
| package.json | ||
| pnpm-lock.yaml | ||
| pnpm-workspace.yaml | ||
| README.md | ||
| tsconfig.json | ||
| vite.config.ts | ||
Vite+ Frontend Template
A small standalone SPA template using React, TypeScript, Tailwind CSS, React Router, i18next, and Vite+. The project-local vite-plus development dependency provides the vp CLI in every environment.
Requirements
- Nix with flakes enabled
- devenv
- A package manager supported by Vite+ (
pnpmis pinned throughpackageManager)
Setup
devenv shell
pnpm install
Development
Start the Vite development server:
pnpm dev
The starter includes lazy-loaded home, about, and not-found routes, a localized loading state, route error handling, and accessible focus management. Each page updates localized document metadata through PageMetadata.
Configuration
Client environment variables are typed and validated in src/config/env.ts. Copy .env.example when local overrides are needed:
cp .env.example .env
VITE_APP_NAME changes the application name used in document titles. Optional VITE_API_URL must be an absolute URL when set.
Internationalization
English and Russian translations live in src/locales/. i18next detects the browser language, falls back to English, and saves manual language choices in localStorage. Translation resources are type-checked through src/i18next.d.ts.
Add another locale by creating its resource module, registering it in src/i18n.ts, and adding it to the language switcher.
Production
Create a production build in dist/:
pnpm build
Preview that build locally:
pnpm preview
This template uses BrowserRouter. Production hosts must rewrite unknown application routes, such as /about, to index.html so direct visits and page reloads work.
Quality checks
Run Vite+ formatting, linting, and type checks together:
pnpm check
Or run individual tasks:
pnpm lint
pnpm fmt
pnpm test
pnpm test:coverage
pnpm test runs browser-like Vitest tests covering routes, navigation, metadata, error handling, language switching, and automated accessibility checks. pnpm test:coverage writes text, HTML, and LCOV reports to coverage/. CI uploads the coverage report without enforcing a threshold.
Vite+ supplies the development, build, preview, check, lint, and formatting commands behind these package scripts.