FORM FOLLOWS DOMAIN. DOMAIN COMES FIRST.NODE.JS / REACT
Runtime Libraries
Project Structure
Integrations
COMPONENT → STORY → PREVIEW

PREVIEW
YOUR UI.

@domain-first/project-structure

Prepare Storybook on React + Vite through Project Structure, then generate UI components and widget stories in the same presentation layer.

01React + Vite Storybook
02Stories beside generated UI
03Explicit dev and build scripts
01 / ENABLE

Choose React + Vite Storybook.

Terminal
npx df-ps

Select Add integration → Storybook (React + Vite). This enables React scaffolding and sets storybookFramework to @storybook/react-vite.

WHAT THIS PRESET DOES

This integration configures Storybook’s Vite builder. It does not generate a standalone Vite application or replace your application’s own dev/build setup.

02 / OUTPUT

A home for UI previews.

Generated filesExample with rootFolder: src
src/presentation/react/.storybook/
  main.ts
  preview.ts

src/presentation/react/storybook-static/
  # output after the Storybook build

The config uses relative story paths and includes @vitejs/plugin-react. Its Vite alias @ resolves to the project root containing package.json, computed from the config location. Add your project CSS to preview.ts through relative or @/ imports.

Install missing dependencies using the commands printed by the CLI. Existing dependencies must be compatible with the Storybook, Vite and React plugin versions you use.

03 / STORIES

Generate the UI and its story together.

After setup, generate a UI-kit component or a widget with separated UI. The generator creates a story skeleton alongside the rendering component. Add representative props, states and interaction scenarios.

Terminal
npm run storybook

The generated development script opens Storybook on port 6006 using the presentation/react/.storybook configuration.

Terminal
npm run build-storybook

The build script writes the static Storybook to presentation/react/storybook-static. The preset adds that output to .gitignore.

See React ↗ for the generated component and widget layouts.

04 / EXISTING PROJECTS

Keep the surrounding project intact.

Unrelated scripts and package fields are preserved. Conflicting script names offer keep, replace or rename choices. Identical generated configuration is skipped on repeat setup; changed files require overwrite confirmation.

Setup writes configuration and prints commands. Run dependency installation, Storybook development and builds yourself.