0
# CLI Commands
1

2
Command-line interface for running the development server and building static versions of Storybook. These tools provide the core development and deployment workflows for Storybook projects.
3

4
## Capabilities
5

6
### Start Storybook
7

8
Starts the development server with hot reloading and live story updates.
9

10
```bash { .api }
11
start-storybook [options]
12
```
13

14
**Required Options:**
15
- `-p, --port <number>` - Port to run Storybook (required)
16

17
**Optional Options:**
18
- `-h, --host <string>` - Host to run Storybook
19
- `-s, --static-dir <dir-names>` - Directory where to load static files from
20
- `-c, --config-dir <dir-name>` - Directory where to load Storybook configurations from
21
- `--dont-track` - Do not send anonymous usage stats
22

23
**Usage Examples:**
24

25
```bash
26
# Basic usage - start on port 6006
27
start-storybook -p 6006
28

29
# Custom host and port
30
start-storybook -p 9001 -h 0.0.0.0
31

32
# With static file directory
33
start-storybook -p 6006 -s ./public
34

35
# Multiple static directories
36
start-storybook -p 6006 -s ./public,./assets
37

38
# Custom configuration directory
39
start-storybook -p 6006 -c ./.storybook-custom
40

41
# Disable usage tracking
42
start-storybook -p 6006 --dont-track
43

44
# Combined options
45
start-storybook -p 8080 -h localhost -s ./public -c ./.storybook --dont-track
46
```
47

48
### Build Storybook
49

50
Builds a static version of Storybook for deployment to web servers or CDNs.
51

52
```bash { .api }
53
build-storybook [options]
54
```
55

56
**Optional Options:**
57
- `-s, --static-dir <dir-names>` - Directory where to load static files from
58
- `-o, --output-dir <dir-name>` - Directory where to store built files
59
- `-c, --config-dir <dir-name>` - Directory where to load Storybook configurations from
60
- `--dont-track` - Do not send anonymous usage stats
61

62
**Usage Examples:**
63

64
```bash
65
# Basic build - outputs to storybook-static/
66
build-storybook
67

68
# Custom output directory
69
build-storybook -o ./dist/storybook
70

71
# With static files
72
build-storybook -s ./public -o ./build
73

74
# Custom configuration directory
75
build-storybook -c ./.storybook-custom -o ./output
76

77
# Complete build command
78
build-storybook -c ./.storybook -s ./public,./assets -o ./dist --dont-track
79
```
80

81
### Storybook Server
82

83
Alias for the start-storybook command, provides the same functionality.
84

85
```bash { .api }
86
storybook-server [options]
87
```
88

89
This command accepts the same options as `start-storybook` and provides identical functionality.
90

91
**Usage Examples:**
92

93
```bash
94
# Same as start-storybook -p 6006
95
storybook-server -p 6006
96

97
# All start-storybook options work
98
storybook-server -p 8080 -h 0.0.0.0 -s ./public
99
```
100

101
### Environment Variables
102

103
CLI commands can be configured using environment variables, which override command-line options.
104

105
**Available Environment Variables:**
106

107
```bash { .api }
108
# Port configuration
109
SBCONFIG_PORT=6006
110

111
# Hostname configuration  
112
SBCONFIG_HOSTNAME=localhost
113

114
# Static directories (comma-separated)
115
SBCONFIG_STATIC_DIR=./public,./assets
116

117
# Configuration directory
118
SBCONFIG_CONFIG_DIR=./.storybook
119

120
# Disable usage tracking
121
SBCONFIG_DO_NOT_TRACK=true
122
```
123

124
**Usage Examples:**
125

126
```bash
127
# Using environment variables
128
export SBCONFIG_PORT=9001
129
export SBCONFIG_HOSTNAME=0.0.0.0
130
export SBCONFIG_STATIC_DIR=./public
131
start-storybook
132

133
# Inline environment variables
134
SBCONFIG_PORT=8080 SBCONFIG_STATIC_DIR=./assets start-storybook
135

136
# Override environment with command line
137
SBCONFIG_PORT=6006 start-storybook -p 7007  # Uses port 7007
138
```
139

140
### Development Workflow
141

142
Typical development workflow using CLI commands.
143

144
**Development Setup:**
145

146
```bash
147
# Install Storybook
148
npm install @kadira/storybook
149

150
# Create configuration directory
151
mkdir .storybook
152

153
# Create basic config file
154
cat > .storybook/config.js << 'EOF'
155
import { configure } from '@kadira/storybook';
156

157
configure(() => {
158
  const req = require.context('../stories', true, /\.stories\.js$/);
159
  req.keys().forEach(filename => req(filename));
160
}, module);
161
EOF
162

163
# Start development server
164
start-storybook -p 6006
165
```
166

167
**Package.json Integration:**
168

169
```json
170
{
171
  "scripts": {
172
    "storybook": "start-storybook -p 6006",
173
    "storybook:build": "build-storybook -o docs",
174
    "storybook:serve": "start-storybook -p 6006 -s public"
175
  }
176
}
177
```
178

179
**Usage with npm scripts:**
180

181
```bash
182
# Development
183
npm run storybook
184

185
# Build for deployment
186
npm run storybook:build
187

188
# Serve with static files
189
npm run storybook:serve
190
```
191

192
### Production Deployment
193

194
Building and deploying Storybook for production use.
195

196
**Static Site Deployment:**
197

198
```bash
199
# Build static version
200
build-storybook -o ./storybook-static
201

202
# Deploy to various platforms
203
# GitHub Pages
204
npm install -g gh-pages
205
gh-pages -d storybook-static
206

207
# Netlify
208
netlify deploy --dir=storybook-static --prod
209

210
# AWS S3
211
aws s3 sync storybook-static/ s3://my-storybook-bucket --delete
212
```
213

214
**Docker Deployment:**
215

216
```dockerfile
217
# Dockerfile for Storybook
218
FROM node:12
219
WORKDIR /app
220
COPY package*.json ./
221
RUN npm install
222
COPY . .
223
RUN npm run build-storybook
224
EXPOSE 80
225
CMD ["npx", "http-server", "storybook-static", "-p", "80"]
226
```
227

228
### Troubleshooting
229

230
Common CLI issues and solutions.
231

232
**Port Issues:**
233
```bash
234
# Check if port is in use
235
lsof -i :6006
236

237
# Use different port
238
start-storybook -p 6007
239

240
# Use random available port
241
start-storybook -p 0
242
```
243

244
**Configuration Issues:**
245
```bash
246
# Verify config directory exists
247
ls -la .storybook/
248

249
# Use different config directory
250
start-storybook -p 6006 -c ./custom-storybook-config
251

252
# Debug configuration loading
253
DEBUG=@kadira/storybook* start-storybook -p 6006
254
```
255

256
**Static File Issues:**
257
```bash
258
# Verify static directory exists
259
ls -la public/
260

261
# Check static file serving
262
start-storybook -p 6006 -s ./public
263
# Access: http://localhost:6006/your-static-file.png
264
```