template-react

A sane, opinionated template for React applications built with Vite and TypeScript.

Tip

Using mise locally is the path of least friction: it manages the project-specific runtimes, tools, and tasks without requiring a container.

This template also includes an optional Arch Linux Dev Container based on mise-devcontainers. It is suggested if you do not normally use mise or want a consistent, preconfigured development environment.

Uses, among other tools/packages:

• pnpm as package manager
• React
• Vite+ (vp) for linting, formatting, type checking, and testing
• Lefthook for Git hooks
• Commitlint with config-conventional for commit message linting
• Vitest for testing

requirements and dependencies

Using mise locally is recommended and provides the least-friction setup. If you do not normally use mise, the included Dev Container is an optional way to get a consistent development environment with everything preconfigured.

To use the Dev Container you need:

• Docker or a compatible container runtime
• a Dev Container-compatible editor or the Dev Container CLI
• an SSH agent exposed through SSH_AUTH_SOCK with at least one key loaded

The SSH agent is forwarded into the container for Git authentication and commit signing. Private keys remain on the host.

If you use the Dev Container, once inside it, install the project dependencies:

pnpm install

The project-specific runtimes and development tools are managed by mise.

If you do not use the Dev Container, install mise locally and run mise install before installing the project dependencies.

Note

After mise installs the configured tools, the post-install hook installs project packages and then sets up the Lefthook Git hooks.

Note

Git hooks keep the tooling managed by mise and the project dependencies synchronized after checkouts and merges.

running

mise run dev

Starts the Vite development server.

mise run test

Runs the tests.

mise run check

Runs Vite+ checks: formatting, linting, and type checking. Pass --fix to apply fixes, or file paths to check specific files.

mise run build

Creates a production build.

ci

CI is provided by GitHub Actions through .github/workflows/checks.yml.

It runs:

• Vite+ checks (formatting, linting, and type checking)
• Vitest tests

license

MIT