Stable framework

React + Vite, with the complete FSD structure

Create a React single-page application with Vite, React Router, and every FSD layer ready from the start. The CLI downloads a dedicated template repository and saves your choices in fsd.config.json for subsequent generation.

Create a project

bash

npx create-fsd-architecture@latest my-react-app --framework react-vite

bash

npx create-fsd-architecture@latest my-react-app --framework react-vite --yes --no-start
cd my-react-app
npm run dev

The first command offers interactive stack choices. The second accepts the defaults below, installs dependencies with npm, and leaves starting the development server to you. Interactive creation also supports pnpm, Yarn, and Bun. React Query and forms can be disabled.

Default stack

Framework

React 19 + Vite

API client

Axios by default; native Fetch optional

Server state

TanStack React Query

Client state

Zustand by default; Redux Toolkit or none optional

Forms

React Hook Form + Zod

Styling

Tailwind CSS 4 and shared UI

Quality

TypeScript, ESLint, Steiger, Husky, Commitlint

Architecture and routing

text

src/
├── app/          # Bootstrap, providers, routing, and styles
├── pages/        # FSD page compositions
├── widgets/      # Large reusable UI blocks
├── features/     # User interactions and business actions
├── entities/     # Business entities
└── shared/       # API, assets, config, utilities, types, and UI

Page generation creates a slice in src/pages and registers its URL in src/app/routing/index.tsx using React Router. Preserve the fsd-cli marker comments used for route updates. Generating the account page below registers /account.

Generate slices and routes

Run these commands inside your generated project. The saved configuration controls the output without repeating stack prompts.

bash

npx create-fsd-architecture@latest --generate feature checkout
npx create-fsd-architecture@latest --generate entity product
npx create-fsd-architecture@latest --generate widget navbar
npx create-fsd-architecture@latest --generate page account
npx create-fsd-architecture@latest --generate feature auth

React components, API modules, state, and form integrations follow the selected capabilities. Connect generated API and auth flows to your own backend before using them with real users.

API configuration

Generated clients read VITE_API_URL, falling back to /api. Set the public backend base URL in your environment and restart the dev server. Public variables are not a place for secrets; the fallback does not create backend endpoints.

text

VITE_API_URL=https://api.example.com

Quality commands

bash

npm run fsd:check
npm run lint
npm run typecheck
npm run build
npm run ci

Use the equivalent commands for your selected package manager. New scaffolds receive template and CLI fixes; existing projects are not automatically migrated by running a newer CLI.

Template source

Open the React + Vite template on GitHub