VuePress is a minimalistic Vue.js-based documentation generator with component layout system and extensive plugin architecture.
—
VuePress provides specialized process management classes for handling development server operations and production builds with webpack integration.
Manages the development server lifecycle, webpack configuration, and hot module replacement functionality.
/**
* Development server process manager
*/
class DevProcess {
/**
* Create a new DevProcess instance
* @param context - App instance context
*/
constructor(context: App);
/** Development server properties */
readonly context: App;
readonly host: string;
readonly port: number;
readonly server: any;
}Usage Examples:
const { createApp } = require("vuepress");
const app = createApp({ sourceDir: "./docs" });
await app.process();
// Start development process
const devApp = await app.dev();
// DevProcess is managed internally
// Access dev server properties through the app
console.log("Development server running");Prepares development server configuration and webpack setup.
/**
* Prepare development server configuration
* @returns Promise resolving to DevProcess instance
*/
async process(): Promise<DevProcess>;Usage Examples:
// Internal usage during app.dev()
const devProcess = new DevProcess(app);
await devProcess.process();
// Webpack config prepared for developmentCreates webpack development server instance with hot module replacement.
/**
* Create webpack dev server instance
* @returns DevProcess instance for chaining
*/
createServer(): DevProcess;Starts the development server and begins listening for requests.
/**
* Start the development server
* @param callback - Function called when server is ready
* @returns DevProcess instance for chaining
*/
listen(callback?: () => void): DevProcess;Usage Examples:
// Internal dev server lifecycle
const devProcess = new DevProcess(app);
await devProcess.process();
devProcess
.createServer()
.listen(() => {
console.log("Development server ready!");
});Manages production build operations, static file generation, and webpack compilation.
/**
* Production build process manager
*/
class BuildProcess {
/**
* Create a new BuildProcess instance
* @param context - App instance context
*/
constructor(context: App);
/** Build process properties */
readonly context: App;
readonly outDir: string;
readonly publicPath: string;
}Usage Examples:
const app = createApp({
sourceDir: "./docs",
dest: "./dist",
});
await app.process();
// Start build process
const builtApp = await app.build();
// BuildProcess is managed internally
console.log(`Built to ${app.outDir}`);Prepares build configuration and validates output directory.
/**
* Prepare build configuration and validate output directory
* @returns Promise that resolves when preparation is complete
*/
async process(): Promise<void>;Usage Examples:
// Internal usage during app.build()
const buildProcess = new BuildProcess(app);
await buildProcess.process();
// Build configuration prepared and output directory validatedCompiles all pages and renders them to static HTML files.
/**
* Compile and render all pages to static HTML
* @returns Promise that resolves when rendering is complete
*/
async render(): Promise<void>;Usage Examples:
// Internal build lifecycle
const buildProcess = new BuildProcess(app);
await buildProcess.process();
await buildProcess.render();
// All pages compiled to static HTML in output directoryAdditional options available for development server configuration:
interface DevServerOptions {
/** Server host (default: 'localhost') */
host?: string;
/** Server port (default: 8080) */
port?: number;
/** Open browser automatically */
open?: boolean;
/** Clear screen on reload */
clearScreen?: boolean;
/** Enable HTTPS */
https?: boolean;
/** Public path for assets */
publicPath?: string;
}Additional options for production builds:
interface BuildConfiguration {
/** Output directory path */
outDir?: string;
/** Public path for deployed assets */
publicPath?: string;
/** Maximum concurrent renders */
maxConcurrency?: number;
/** Silent build output */
silent?: boolean;
/** Debug mode */
debug?: boolean;
/** Source maps generation */
sourcemap?: boolean;
}Usage Examples:
// Custom development configuration
await dev({
sourceDir: "./docs",
siteConfig: {
// Development options applied internally
devServer: {
host: "0.0.0.0",
port: 3000,
open: true,
clearScreen: false,
},
},
});
// Custom build configuration
await build({
sourceDir: "./docs",
dest: "./public",
siteConfig: {
// Build options applied internally
build: {
maxConcurrency: 4,
silent: false,
sourcemap: true,
},
},
});The development process follows this sequence:
createApp() initializes the app instanceapp.process() loads configuration, plugins, and pagesapp.dev() creates and configures DevProcessThe build process follows this sequence:
createApp() initializes the app instanceapp.process() loads configuration, plugins, and pagesapp.build() creates and configures BuildProcessInstall with Tessl CLI
npx tessl i tessl/npm-vuepress