0
# Core Builder Functions
1

2
Primary builder interface implementing webpack5-based builds for the Storybook manager UI with development server integration and production optimization.
3

4
## Capabilities
5

6
### Start Development Server
7

8
Starts a development server with webpack dev middleware for hot reloading during development.
9

10
```typescript { .api }
11
/**
12
 * Start development server with webpack dev middleware
13
 * @param options - Build options including configuration and router
14
 * @returns Promise resolving to build result with stats and bail function
15
 */
16
function start(options: BuilderStartOptions): Promise<BuilderStartResult>;
17

18
interface BuilderStartOptions {
19
  /** High-resolution start time for performance tracking */
20
  startTime?: [number, number];
21
  /** Storybook configuration options */
22
  options: Options;
23
  /** Express router for middleware attachment */
24
  router: Router;
25
}
26

27
interface BuilderStartResult {
28
  /** Function to stop the build process and cleanup */
29
  bail: () => Promise<void>;
30
  /** Webpack compilation statistics */
31
  stats: Stats;
32
  /** Total build time */
33
  totalTime: [number, number];
34
}
35
```
36

37
**Usage Examples:**
38

39
```typescript
40
import { start } from "@storybook/manager-webpack5";
41
import express from "express";
42

43
const app = express();
44
const router = express.Router();
45

46
const result = await start({
47
  startTime: process.hrtime(),
48
  options: {
49
    configDir: '.storybook',
50
    outputDir: './storybook-static',
51
    presets: presetCollection,
52
    cache: cacheProvider,
53
    managerCache: true,
54
  },
55
  router,
56
});
57

58
// The router now has webpack dev middleware attached
59
app.use(router);
60

61
// Stop the build if needed
62
await result.bail();
63
```
64

65
### Production Build
66

67
Builds the manager for production with optimization and asset generation.
68

69
```typescript { .api }
70
/**
71
 * Build manager for production with optimization
72
 * @param options - Build options for production compilation
73
 * @returns Promise resolving to webpack Stats object
74
 */
75
function build(options: BuilderStartOptions): Promise<BuilderBuildResult>;
76

77
interface BuilderBuildResult extends Stats {
78
  // Webpack Stats object with compilation results
79
}
80
```
81

82
**Usage Examples:**
83

84
```typescript
85
import { build } from "@storybook/manager-webpack5";
86

87
const stats = await build({
88
  startTime: process.hrtime(),
89
  options: {
90
    configDir: '.storybook',
91
    outputDir: './storybook-static',
92
    presets: presetCollection,
93
  },
94
});
95

96
if (stats.hasErrors()) {
97
  console.error('Build failed with errors:', stats.toJson().errors);
98
} else {
99
  console.log('Build completed successfully');
100
}
101
```
102

103
### Get Webpack Configuration
104

105
Generates the complete webpack configuration for the manager build.
106

107
```typescript { .api }
108
/**
109
 * Generate webpack configuration for manager build
110
 * @param options - Storybook configuration options
111
 * @returns Promise resolving to webpack Configuration object
112
 */
113
function getConfig(options: Options): Promise<Configuration>;
114
```
115

116
**Usage Examples:**
117

118
```typescript
119
import { getConfig } from "@storybook/manager-webpack5";
120
import webpack from "webpack";
121

122
const config = await getConfig({
123
  configDir: '.storybook',
124
  outputDir: './storybook-static',
125
  presets: presetCollection,
126
});
127

128
// Use the configuration with webpack directly
129
const compiler = webpack(config);
130
```
131

132
### Bail Build Process
133

134
Stops the build process and performs cleanup of resources.
135

136
```typescript { .api }
137
/**
138
 * Stop build process and cleanup resources
139
 * @returns Promise that resolves when cleanup is complete
140
 */
141
function bail(): Promise<void>;
142
```
143

144
**Usage Examples:**
145

146
```typescript
147
import { bail, start } from "@storybook/manager-webpack5";
148

149
// Start a build
150
const buildPromise = start(options);
151

152
// Stop it if needed (e.g., on process signal)
153
process.on('SIGINT', async () => {
154
  await bail();
155
  process.exit(0);
156
});
157
```
158

159
### Webpack Executor
160

161
Provides access to the webpack instance with version validation.
162

163
```typescript { .api }
164
interface ExecutorInterface {
165
  /**
166
   * Get webpack instance with version validation
167
   * @param options - Storybook options for webpack resolution
168
   * @returns Promise resolving to webpack function
169
   */
170
  get(options: Options): Promise<typeof webpack>;
171
}
172

173
const executor: ExecutorInterface;
174
```
175

176
**Usage Examples:**
177

178
```typescript
179
import { executor } from "@storybook/manager-webpack5";
180

181
const webpackInstance = await executor.get(options);
182
const compiler = webpackInstance(config);
183
```
184

185
### Error Handling
186

187
Creates webpack Stats object from error string for consistent error reporting.
188

189
```typescript { .api }
190
/**
191
 * Create webpack Stats object from error string
192
 * @param err - Error message string
193
 * @returns Mock Stats object with error information
194
 */
195
function makeStatsFromError(err: string): Stats;
196
```
197

198
**Usage Examples:**
199

200
```typescript
201
import { makeStatsFromError } from "@storybook/manager-webpack5";
202

203
try {
204
  // Build operation
205
} catch (error) {
206
  const errorStats = makeStatsFromError(error.message);
207
  console.error('Build error:', errorStats.toJson().errors);
208
}
209

210
// Create mock error stats for testing
211
const mockErrorStats = makeStatsFromError("Webpack compilation failed");
212
console.log('Has errors:', mockErrorStats.hasErrors()); // true
213
console.log('Error count:', mockErrorStats.toJson().errors.length); // 1
214
```