0
# Build Processes
1

2
VuePress provides specialized process management classes for handling development server operations and production builds with webpack integration.
3

4
## Capabilities
5

6
### DevProcess Class
7

8
Manages the development server lifecycle, webpack configuration, and hot module replacement functionality.
9

10
```javascript { .api }
11
/**
12
 * Development server process manager
13
 */
14
class DevProcess {
15
  /**
16
   * Create a new DevProcess instance
17
   * @param context - App instance context
18
   */
19
  constructor(context: App);
20
  
21
  /** Development server properties */
22
  readonly context: App;
23
  readonly host: string;
24
  readonly port: number;
25
  readonly server: any;
26
}
27
```
28

29
**Usage Examples:**
30

31
```javascript
32
const { createApp } = require("vuepress");
33

34
const app = createApp({ sourceDir: "./docs" });
35
await app.process();
36

37
// Start development process
38
const devApp = await app.dev();
39
// DevProcess is managed internally
40

41
// Access dev server properties through the app
42
console.log("Development server running");
43
```
44

45
### process Method
46

47
Prepares development server configuration and webpack setup.
48

49
```javascript { .api }
50
/**
51
 * Prepare development server configuration
52
 * @returns Promise resolving to DevProcess instance
53
 */
54
async process(): Promise<DevProcess>;
55
```
56

57
**Usage Examples:**
58

59
```javascript
60
// Internal usage during app.dev()
61
const devProcess = new DevProcess(app);
62
await devProcess.process();
63
// Webpack config prepared for development
64
```
65

66
### createServer Method
67

68
Creates webpack development server instance with hot module replacement.
69

70
```javascript { .api }
71
/**
72
 * Create webpack dev server instance
73
 * @returns DevProcess instance for chaining
74
 */
75
createServer(): DevProcess;
76
```
77

78
### listen Method
79

80
Starts the development server and begins listening for requests.
81

82
```javascript { .api }
83
/**
84
 * Start the development server
85
 * @param callback - Function called when server is ready
86
 * @returns DevProcess instance for chaining
87
 */
88
listen(callback?: () => void): DevProcess;
89
```
90

91
**Usage Examples:**
92

93
```javascript
94
// Internal dev server lifecycle
95
const devProcess = new DevProcess(app);
96
await devProcess.process();
97

98
devProcess
99
  .createServer()
100
  .listen(() => {
101
    console.log("Development server ready!");
102
  });
103
```
104

105
### BuildProcess Class
106

107
Manages production build operations, static file generation, and webpack compilation.
108

109
```javascript { .api }
110
/**
111
 * Production build process manager
112
 */
113
class BuildProcess {
114
  /**
115
   * Create a new BuildProcess instance
116
   * @param context - App instance context
117
   */
118
  constructor(context: App);
119
  
120
  /** Build process properties */
121
  readonly context: App;
122
  readonly outDir: string;
123
  readonly publicPath: string;
124
}
125
```
126

127
**Usage Examples:**
128

129
```javascript
130
const app = createApp({
131
  sourceDir: "./docs",
132
  dest: "./dist",
133
});
134

135
await app.process();
136

137
// Start build process
138
const builtApp = await app.build();
139
// BuildProcess is managed internally
140

141
console.log(`Built to ${app.outDir}`);
142
```
143

144
### process Method (BuildProcess)
145

146
Prepares build configuration and validates output directory.
147

148
```javascript { .api }
149
/**
150
 * Prepare build configuration and validate output directory
151
 * @returns Promise that resolves when preparation is complete
152
 */
153
async process(): Promise<void>;
154
```
155

156
**Usage Examples:**
157

158
```javascript
159
// Internal usage during app.build()
160
const buildProcess = new BuildProcess(app);
161
await buildProcess.process();
162
// Build configuration prepared and output directory validated
163
```
164

165
### render Method
166

167
Compiles all pages and renders them to static HTML files.
168

169
```javascript { .api }
170
/**
171
 * Compile and render all pages to static HTML
172
 * @returns Promise that resolves when rendering is complete
173
 */
174
async render(): Promise<void>;
175
```
176

177
**Usage Examples:**
178

179
```javascript
180
// Internal build lifecycle
181
const buildProcess = new BuildProcess(app);
182
await buildProcess.process();
183
await buildProcess.render();
184
// All pages compiled to static HTML in output directory
185
```
186

187
## Process Configuration
188

189
### Development Server Options
190

191
Additional options available for development server configuration:
192

193
```javascript { .api }
194
interface DevServerOptions {
195
  /** Server host (default: 'localhost') */
196
  host?: string;
197
  
198
  /** Server port (default: 8080) */
199
  port?: number;
200
  
201
  /** Open browser automatically */
202
  open?: boolean;
203
  
204
  /** Clear screen on reload */
205
  clearScreen?: boolean;
206
  
207
  /** Enable HTTPS */
208
  https?: boolean;
209
  
210
  /** Public path for assets */
211
  publicPath?: string;
212
}
213
```
214

215
### Build Configuration Options
216

217
Additional options for production builds:
218

219
```javascript { .api }
220
interface BuildConfiguration {
221
  /** Output directory path */
222
  outDir?: string;
223
  
224
  /** Public path for deployed assets */
225
  publicPath?: string;
226
  
227
  /** Maximum concurrent renders */
228
  maxConcurrency?: number;
229
  
230
  /** Silent build output */
231
  silent?: boolean;
232
  
233
  /** Debug mode */
234
  debug?: boolean;
235
  
236
  /** Source maps generation */
237
  sourcemap?: boolean;
238
}
239
```
240

241
**Usage Examples:**
242

243
```javascript
244
// Custom development configuration
245
await dev({
246
  sourceDir: "./docs",
247
  siteConfig: {
248
    // Development options applied internally
249
    devServer: {
250
      host: "0.0.0.0",
251
      port: 3000,
252
      open: true,
253
      clearScreen: false,
254
    },
255
  },
256
});
257

258
// Custom build configuration  
259
await build({
260
  sourceDir: "./docs",
261
  dest: "./public",
262
  siteConfig: {
263
    // Build options applied internally
264
    build: {
265
      maxConcurrency: 4,
266
      silent: false,
267
      sourcemap: true,
268
    },
269
  },
270
});
271
```
272

273
## Process Lifecycle
274

275
### Development Lifecycle
276

277
The development process follows this sequence:
278

279
1. **App Creation**: `createApp()` initializes the app instance
280
2. **Processing**: `app.process()` loads configuration, plugins, and pages
281
3. **Dev Process**: `app.dev()` creates and configures DevProcess
282
4. **Server Setup**: DevProcess prepares webpack and creates server
283
5. **Listening**: Server starts and listens for requests
284
6. **Hot Reload**: File changes trigger page recompilation
285

286
### Build Lifecycle
287

288
The build process follows this sequence:
289

290
1. **App Creation**: `createApp()` initializes the app instance
291
2. **Processing**: `app.process()` loads configuration, plugins, and pages
292
3. **Build Process**: `app.build()` creates and configures BuildProcess
293
4. **Preparation**: BuildProcess validates output and prepares configuration
294
5. **Compilation**: Webpack compiles all assets and pages
295
6. **Rendering**: Pages are rendered to static HTML files
296
7. **Output**: Static site is written to destination directory