0
# Configuration
1

2
System configuration for loading and organizing stories with hot module replacement support. The configuration system manages story discovery and loading with automatic reloading during development.
3

4
## Capabilities
5

6
### Configure
7

8
Sets up Storybook with story loading functions and enables hot module replacement for development.
9

10
```javascript { .api }
11
/**
12
 * Configures Storybook with story loaders and hot reloading
13
 * @param loaders - Function or array of functions that load stories
14
 * @param module - Webpack module for hot reloading support
15
 */
16
function configure(loaders: Function, module?: any): void;
17
```
18

19
**Usage Examples:**
20

21
```javascript
22
import { configure } from '@kadira/storybook';
23

24
// Basic configuration - single loader
25
configure(() => {
26
  require('../stories/button.stories');
27
  require('../stories/input.stories');
28
}, module);
29

30
// Multiple story files with require.context
31
configure(() => {
32
  const req = require.context('../stories', true, /\.stories\.js$/);
33
  req.keys().forEach(filename => req(filename));
34
}, module);
35

36
// Loading stories from multiple directories
37
configure(() => {
38
  // Load component stories
39
  const componentReq = require.context('../src/components', true, /\.stories\.js$/);
40
  componentReq.keys().forEach(filename => componentReq(filename));
41
  
42
  // Load page stories
43
  const pageReq = require.context('../src/pages', true, /\.stories\.js$/);
44
  pageReq.keys().forEach(filename => pageReq(filename));
45
}, module);
46

47
// Advanced configuration with conditional loading
48
configure(() => {
49
  if (process.env.NODE_ENV === 'development') {
50
    // Load development-only stories
51
    require('../stories/dev.stories');
52
  }
53
  
54
  // Always load main stories
55
  const req = require.context('../stories', true, /\.stories\.js$/);
56
  req.keys().forEach(filename => req(filename));
57
}, module);
58
```
59

60
### Configuration Files
61

62
Storybook supports various configuration files for customizing the setup.
63

64
#### Main Configuration (`.storybook/config.js`)
65

66
Primary configuration file where stories are loaded and global settings are applied.
67

68
```javascript
69
// .storybook/config.js
70
import { configure, addDecorator } from '@kadira/storybook';
71
import { withKnobs } from '@kadira/storybook-addon-knobs';
72

73
// Add global decorators
74
addDecorator(withKnobs);
75

76
// Configure story loading
77
configure(() => {
78
  const req = require.context('../stories', true, /\.stories\.js$/);
79
  req.keys().forEach(filename => req(filename));
80
}, module);
81
```
82

83
#### Webpack Configuration (`.storybook/webpack.config.js`)
84

85
Custom webpack configuration for handling additional file types and loaders.
86

87
```javascript
88
// .storybook/webpack.config.js
89
const path = require('path');
90

91
module.exports = {
92
  module: {
93
    loaders: [
94
      {
95
        test: /\.scss$/,
96
        loaders: ['style', 'css', 'sass'],
97
        include: path.resolve(__dirname, '../')
98
      }
99
    ]
100
  }
101
};
102
```
103

104
#### HTML Head Customization (`.storybook/head.html`)
105

106
Custom HTML head content for adding stylesheets, fonts, or meta tags.
107

108
```html
109
<!-- .storybook/head.html -->
110
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
111
<style>
112
  body {
113
    font-family: 'Roboto', sans-serif;
114
  }
115
</style>
116
```
117

118
#### Express Middleware (`.storybook/middleware.js`)
119

120
Custom Express middleware for handling API routes or additional server functionality.
121

122
```javascript
123
// .storybook/middleware.js
124
module.exports = function expressMiddleware(router) {
125
  router.get('/api/mock-data', (req, res) => {
126
    res.json({ message: 'Mock API response' });
127
  });
128
};
129
```
130

131
### Hot Module Replacement
132

133
Automatic story reloading during development when story files are modified.
134

135
```javascript { .api }
136
/**
137
 * Hot module replacement support
138
 * Automatically reloads stories when files change during development
139
 * Requires webpack module parameter in configure() call
140
 */
141
```
142

143
**Usage Examples:**
144

145
```javascript
146
// Enable HMR by passing module parameter
147
configure(() => {
148
  const req = require.context('../stories', true, /\.stories\.js$/);
149
  req.keys().forEach(filename => req(filename));
150
}, module); // module parameter enables HMR
151

152
// Individual story files also support HMR
153
storiesOf('Button', module) // module parameter here too
154
  .add('default', () => <Button>Default</Button>);
155
```
156

157
### Environment Configuration
158

159
Configuration options can be set via environment variables for different deployment scenarios.
160

161
**Environment Variables:**
162

163
- `SBCONFIG_PORT`: Override default port
164
- `SBCONFIG_HOSTNAME`: Set custom hostname  
165
- `SBCONFIG_STATIC_DIR`: Specify static file directories
166
- `SBCONFIG_CONFIG_DIR`: Custom configuration directory
167
- `SBCONFIG_DO_NOT_TRACK`: Disable usage tracking
168

169
```bash
170
# Example environment configuration
171
SBCONFIG_PORT=9001 SBCONFIG_HOSTNAME=0.0.0.0 start-storybook
172
```