create-react-extras

A CLI tool that creates supported React projects and adds deployment, editor, pre-commit, and API client setup.

Usage

Create a new project:

npm create react-extras

Or with your preferred package manager:

pnpm create react-extras
yarn create react-extras
bun create react-extras

You can also pass the project name up front:

npm create react-extras my-app

The CLI will:

1. Ask whether to create a Next.js App Router or TanStack Router app
2. Hand off to the official upstream scaffolder and preserve its interactive prompts
3. Detect the generated project's package manager, framework, and linting tools
4. Let you choose which extras to add
5. Show which files will be created and prompt before overwriting existing files
6. Generate the selected files, update package.json, and install required dependencies

Existing Projects

Navigate to an existing supported React project and run:

create-react-extras init

Available Extras

| Extra | Files / changes | | -------------------- | ------------------------------------------------------------------------------------------------------- | | Deployment + CI/CD | Dockerfile, .github/workflows/deploy.yml, and nginx.conf for TanStack Router projects | | Editor Setup | .vscode/extensions.json for all supported projects, plus .vscode/settings.json for Next.js projects | | Pre-commit Hook | .husky/pre-commit, prepare script, lint-staged config, and installs husky + lint-staged | | API Client | lib/api-client.ts and lib/config.ts or src/lib/* when a src/ directory exists |

The CLI also updates your package.json with:

• check and typecheck scripts when Deployment + CI/CD is selected
• prepare script and lint-staged config when Pre-commit Hook is selected

The generated check script depends on detected tooling:

• Biome: biome check .
• ESLint + Prettier: eslint . && prettier --check .

Requirements

• Node.js >= 20.9
• Bun >= 1 for local development of this CLI
• An existing Next.js or TanStack Router project when using create-react-extras init

Supported Frameworks

• Next.js App Router (Installation)
• TanStack Router (Quick Start)

Detection Rules

• Package manager: detected from lock files in this order: Bun, pnpm, Yarn, npm
• Framework: Next.js via next.config.* or the next dependency; TanStack Router via the @tanstack/react-router dependency
• Tooling: Biome via biome.json, biome.jsonc, or @biomejs/biome; otherwise ESLint + Prettier via dependencies