0
# CLI Commands and Tools
1

2
Storybook provides comprehensive command-line tools for project initialization, development, building, and management. The CLI is the primary interface for working with Storybook projects.
3

4
## Capabilities
5

6
### Development Server
7

8
Start the Storybook development server for interactive development and testing.
9

10
```bash { .api }
11
# Start development server
12
storybook dev [options]
13

14
# Options:
15
--port, -p <port>          Port to run Storybook on (default: 6006)
16
--host <host>              Host to run Storybook on (default: localhost)
17
--config-dir, -c <dir>     Directory where to load Storybook config from
18
--https                    Enable HTTPS
19
--ssl-cert <cert>          Path to SSL certificate
20
--ssl-key <key>            Path to SSL key
21
--ssl-ca <ca>              Path to SSL certificate authority
22
--ci                       CI mode (skip interactive prompts)
23
--no-open                  Do not open browser window automatically
24
--quiet                    Suppress verbose build output
25
--debug-webpack            Display webpack stats
26
--webpack-stats-json       Write Webpack stats to stats.json
27
```
28

29
**Usage Examples:**
30

31
```bash
32
# Basic development server
33
storybook dev
34

35
# Custom port and host
36
storybook dev --port 8080 --host 0.0.0.0
37

38
# HTTPS with custom certificates
39
storybook dev --https --ssl-cert ./cert.pem --ssl-key ./key.pem
40

41
# Custom config directory
42
storybook dev --config-dir ./.storybook-custom
43
```
44

45
### Build Production Version
46

47
Build static version of Storybook for deployment.
48

49
```bash { .api }
50
# Build static Storybook
51
storybook build [options]
52

53
# Options:
54
--output-dir, -o <dir>     Directory where to store built files (default: storybook-static)
55
--config-dir, -c <dir>     Directory where to load Storybook config from
56
--webpack-stats-json       Write Webpack stats to stats.json
57
--quiet                    Suppress verbose build output
58
--debug-webpack            Display webpack stats
59
--test                     Build test version for test runners
60
--disable-telemetry        Disable telemetry collection
61
```
62

63
**Usage Examples:**
64

65
```bash
66
# Basic build
67
storybook build
68

69
# Custom output directory
70
storybook build --output-dir ./dist
71

72
# Build for testing
73
storybook build --test
74
```
75

76
### Project Initialization
77

78
Initialize Storybook in an existing project with automatic framework detection.
79

80
```bash { .api }
81
# Initialize Storybook
82
storybook init [options]
83

84
# Options:
85
--type <type>              Manually specify project type
86
--builder <builder>        Specify builder (webpack5, vite)
87
--use-npm                  Use npm for package management
88
--use-pnp                  Use Yarn PnP for package management
89
--yes                      Skip prompts and use default values
90
--packageManager <pm>      Specify package manager (npm, yarn, pnpm)
91
--skip-install             Skip package installation
92
--dev                      Enable development mode
93
--disable-telemetry        Disable telemetry collection
94
```
95

96
**Usage Examples:**
97

98
```bash
99
# Automatic initialization
100
storybook init
101

102
# Force specific type and builder
103
storybook init --type react --builder vite
104

105
# Skip installation (manual install later)
106
storybook init --skip-install
107
```
108

109
### Addon Management
110

111
Add and remove Storybook addons from your project.
112

113
```bash { .api }
114
# Add an addon
115
storybook add <addon-name> [options]
116

117
# Remove an addon
118
storybook remove <addon-name> [options]
119

120
# Options:
121
--package-manager <pm>     Specify package manager
122
--skip-postinstall         Skip post-install steps
123
--config-dir, -c <dir>     Directory where Storybook config is located
124
```
125

126
**Usage Examples:**
127

128
```bash
129
# Add popular addons
130
storybook add @storybook/addon-docs
131
storybook add @storybook/addon-controls
132
storybook add @storybook/addon-actions
133

134
# Remove an addon
135
storybook remove @storybook/addon-docs
136
```
137

138
### Version Management
139

140
Upgrade Storybook packages and get version information.
141

142
```bash { .api }
143
# Upgrade Storybook packages
144
storybook upgrade [options]
145

146
# Get environment information
147
storybook info [options]
148

149
# Options for upgrade:
150
--package-manager <pm>     Specify package manager
151
--prerelease              Upgrade to prerelease versions
152
--skip-check              Skip version compatibility checks
153
--config-dir, -c <dir>     Directory where Storybook config is located
154

155
# Options for info:
156
--config-dir, -c <dir>     Directory where Storybook config is located
157
```
158

159
**Usage Examples:**
160

161
```bash
162
# Upgrade to latest stable
163
storybook upgrade
164

165
# Upgrade to prerelease
166
storybook upgrade --prerelease
167

168
# Get environment info for debugging
169
storybook info
170
```
171

172
### Migration and Codemods
173

174
Run migration scripts and codemods to update project configuration.
175

176
```bash { .api }
177
# Run migrations
178
storybook migrate <migration-name> [options]
179

180
# Auto-migrate (detect and fix issues)
181
storybook automigrate [fix-id] [options]
182

183
# Options:
184
--glob <pattern>           Glob pattern for files to migrate
185
--dry-run                  Show what would be changed without making changes
186
--parser <parser>          Parser to use (babel, tsx, ts)
187
--config-dir, -c <dir>     Directory where Storybook config is located
188
--list                     List available migrations
189
--yes                      Skip confirmation prompts
190
```
191

192
**Usage Examples:**
193

194
```bash
195
# List available migrations
196
storybook migrate --list
197

198
# Run specific migration
199
storybook migrate csf-2-to-3
200

201
# Auto-migrate with dry run
202
storybook automigrate --dry-run
203

204
# Run auto-migration for specific issue
205
storybook automigrate angular12
206
```
207

208
### Sandbox Management
209

210
Create and manage Storybook sandbox projects for testing and development.
211

212
```bash { .api }
213
# Create sandbox
214
storybook sandbox [template] [options]
215

216
# Options:
217
--output <dir>             Output directory for sandbox
218
--branch <branch>          Git branch to use
219
--init                     Initialize Storybook in sandbox
220
--no-install               Skip dependency installation
221
```
222

223
**Usage Examples:**
224

225
```bash
226
# Create React sandbox
227
storybook sandbox react-vite
228

229
# Create Vue sandbox in custom directory
230
storybook sandbox vue3-vite --output ./my-sandbox
231
```
232

233
### Development Utilities
234

235
Additional utilities for development and debugging.
236

237
```bash { .api }
238
# Link local Storybook for development
239
storybook link <repo-url-or-directory> [options]
240

241
# Doctor - health check for Storybook project
242
storybook doctor [options]
243

244
# Options for doctor:
245
--config-dir, -c <dir>     Directory where Storybook config is located
246
--package-manager <pm>     Specify package manager
247
```
248

249
**Usage Examples:**
250

251
```bash
252
# Link local Storybook development
253
storybook link ../storybook-repo
254

255
# Run health check
256
storybook doctor
257
```
258

259
## Configuration Files
260

261
The CLI commands work with standard Storybook configuration files:
262

263
```typescript { .api }
264
// .storybook/main.ts - Main configuration
265
export default {
266
  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
267
  addons: [
268
    '@storybook/addon-essentials',
269
    '@storybook/addon-docs',
270
  ],
271
  framework: {
272
    name: '@storybook/react-vite',
273
    options: {},
274
  },
275
  typescript: {
276
    check: false,
277
    reactDocgen: 'react-docgen-typescript',
278
  },
279
};
280

281
// .storybook/preview.ts - Preview configuration
282
export const parameters = {
283
  actions: { argTypesRegex: '^on[A-Z].*' },
284
  controls: {
285
    matchers: {
286
      color: /(background|color)$/i,
287
      date: /Date$/,
288
    },
289
  },
290
};
291
```
292

293
## Environment Variables
294

295
Control CLI behavior with environment variables:
296

297
```bash { .api }
298
# Disable telemetry
299
STORYBOOK_DISABLE_TELEMETRY=true
300

301
# Custom cache directory
302
STORYBOOK_CACHE_DIR=/custom/cache/path
303

304
# Debug mode
305
DEBUG=storybook:*
306

307
# Custom configuration directory
308
STORYBOOK_CONFIG_DIR=./.custom-storybook
309

310
# Force specific package manager
311
STORYBOOK_PACKAGE_MANAGER=pnpm
312
```
313

314
## Exit Codes
315

316
```typescript { .api }
317
// CLI exit codes
318
0   // Success
319
1   // General error
320
2   // Configuration error  
321
3   // Build error
322
4   // Network error
323
130 // User interruption (Ctrl+C)
324
```
325

326
## Integration with Package Managers
327

328
Works seamlessly with all major package managers:
329

330
```bash
331
# NPM scripts integration
332
{
333
  "scripts": {
334
    "storybook": "storybook dev --port 6006",
335
    "build-storybook": "storybook build"
336
  }
337
}
338

339
# Yarn scripts
340
yarn storybook
341
yarn build-storybook
342

343
# PNPM scripts  
344
pnpm storybook
345
pnpm build-storybook
346
```