CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-vuepress

VuePress is a minimalistic Vue.js-based documentation generator with component layout system and extensive plugin architecture.

Pending
Overview
Eval results
Files

build-processes.mddocs/

Build Processes

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

Capabilities

DevProcess Class

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");

process Method

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 development

createServer Method

Creates webpack development server instance with hot module replacement.

/**
 * Create webpack dev server instance
 * @returns DevProcess instance for chaining
 */
createServer(): DevProcess;

listen Method

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!");
  });

BuildProcess Class

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}`);

process Method (BuildProcess)

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 validated

render Method

Compiles 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 directory

Process Configuration

Development Server Options

Additional 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;
}

Build Configuration Options

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,
    },
  },
});

Process Lifecycle

Development Lifecycle

The development process follows this sequence:

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

Build Lifecycle

The build process follows this sequence:

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

Install with Tessl CLI

npx tessl i tessl/npm-vuepress

docs

app-management.md

build-processes.md

core-api.md

index.md

page-management.md

plugin-system.md

types-configuration.md

tile.json