CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-snowpack

A lightning-fast frontend build tool designed to leverage JavaScript's native ESM system for unbundled development with instant browser updates.

82

1.22x
Overview
Eval results
Files

cli.mddocs/

Command Line Interface

The Snowpack CLI provides commands for project initialization, development, building, and package management. It supports various flags for customizing behavior and integrates with the programmatic API.

Capabilities

CLI Entry Point

Main CLI function that processes command-line arguments and executes appropriate commands.

/**
 * Main CLI entry point
 * @param args - Command line arguments array
 * @returns Promise resolving when command completes
 */
function cli(args: string[]): Promise<void>;
import { cli } from "snowpack";

// Programmatic CLI usage
await cli(['node', 'snowpack', 'dev', '--port', '3000']);
await cli(['node', 'snowpack', 'build', '--verbose']);

CLI Commands

Available commands for project management and development.

Initialize Project

snowpack init

Creates a new Snowpack configuration file in the current directory.

// Equivalent programmatic usage
import { initCommand } from "snowpack/commands";
await initCommand({ config, lockfile });

Prepare Dependencies

snowpack prepare

Prepares dependencies for development (installs and processes packages).

// Equivalent programmatic usage  
import { preparePackages } from "snowpack";
await preparePackages({ config });

Development Server

snowpack dev

Starts the development server with hot module replacement.

// Equivalent programmatic usage
import { startServer } from "snowpack";
const server = await startServer({ config, lockfile });

Production Build

snowpack build

Builds the project for production deployment.

// Equivalent programmatic usage
import { build } from "snowpack";
const result = await build({ config, lockfile });

Package Management

snowpack add <package>
snowpack rm <package>

Add or remove packages from the project.

// Equivalent programmatic usage
import { addCommand, rmCommand } from "snowpack/commands";
await addCommand('react', { config, lockfile });
await rmCommand('lodash', { config, lockfile });

CLI Flags

Global Flags

Flags available for all commands.

/**
 * CLI flags interface
 */
interface CLIFlags {
  /** Display help message */
  help?: boolean;
  /** Display version information */
  version?: boolean;
  /** Clear local cache before running */
  reload?: boolean;
  /** Specify project root directory */
  root?: string;
  /** Path to configuration file */
  config?: string;
  /** Environment variables to set */
  env?: string[];
  /** URLs/browsers to open */
  open?: string[];
  /** Enable HTTPS */
  secure?: boolean;
  /** Enable verbose logging */
  verbose?: boolean;
  /** Enable minimal logging */
  quiet?: boolean;
  /** Additional custom flags */
  [flag: string]: any;
}

Help and Version

# Display help information
snowpack --help
snowpack -h

# Display version information  
snowpack --version
snowpack -v

Configuration

# Use custom config file
snowpack dev --config ./custom.config.js

# Set project root
snowpack build --root ./my-app

# Clear cache before running
snowpack dev --reload

Logging

# Verbose logging (show debug information)
snowpack build --verbose

# Quiet logging (minimal output)
snowpack build --quiet

Development Server Flags

# Custom port
snowpack dev --port 8080

# Custom hostname
snowpack dev --hostname 0.0.0.0

# Enable HTTPS
snowpack dev --secure

# Open in browser
snowpack dev --open chrome
snowpack dev --open "google chrome"

# Set environment variables
snowpack dev --env NODE_ENV=development --env DEBUG=true

Build Flags

# Watch mode (rebuild on changes)
snowpack build --watch

# Custom output directory
snowpack build --out ./dist

# Clean output directory
snowpack build --clean

# Generate source maps
snowpack build --sourcemap inline

Command Implementation

Command Structure

Each command follows a consistent structure with configuration loading and error handling.

// Basic command structure
export async function commandName(commandOptions: CommandOptions) {
  try {
    const { config, lockfile } = commandOptions;
    
    // Command-specific logic here
    await performCommandLogic(config, lockfile);
    
  } catch (error) {
    logger.error(error.message);
    logger.error(error.stack);
    process.exit(1);
  }
}

Error Handling

CLI commands include comprehensive error handling with helpful messages.

# Example error output
❌ Build failed: Configuration validation error
   → Missing required field "mount" in snowpack.config.js
   → See https://snowpack.dev/reference/configuration

❌ Development server failed to start
   → Port 3000 is already in use
   → Try using --port flag with a different port number

Configuration Loading

The CLI automatically loads configuration with the following precedence:

  1. Command-line flags (highest priority)
  2. Configuration file specified by --config
  3. Default configuration files (snowpack.config.js, etc.)
  4. package.json snowpack field
  5. Built-in defaults (lowest priority)
// CLI configuration loading process
const cliFlags = parseArgs(args);
const cliConfig = expandCliFlags(cliFlags);
const config = await loadConfiguration(cliConfig, cliFlags.config);

Binary Interface

Executable Files

Snowpack provides two binary aliases:

# Full name
snowpack dev

# Short alias
sp dev

Node.js Requirements

# Check Node.js version
node --version  # Must be 10.19.0 or higher

Package Manager Integration

# Using npm scripts
npm run dev     # "dev": "snowpack dev"
npm run build   # "build": "snowpack build"

# Using yarn
yarn dev
yarn build

# Using pnpm  
pnpm dev
pnpm build

Environment Variables

Snowpack Environment Variables

# Set via CLI
snowpack dev --env NODE_ENV=development

# Set in shell
export NODE_ENV=development
snowpack dev

# Public variables (available in browser)
export SNOWPACK_PUBLIC_API_URL=https://api.example.com

Configuration via Environment

# Override config file location
export SNOWPACK_CONFIG=./custom.config.js

# Set cache directory
export SNOWPACK_CACHE_DIR=./custom-cache

Exit Codes

The CLI uses standard exit codes:

  • 0: Success
  • 1: General error (build failure, configuration error, etc.)
  • 130: Interrupted by user (Ctrl+C)
# Check exit code in scripts
snowpack build
if [ $? -eq 0 ]; then
  echo "Build successful"
else
  echo "Build failed"
  exit 1
fi

Integration Examples

CI/CD Integration

# GitHub Actions example
- name: Build with Snowpack
  run: |
    npm ci
    npx snowpack build --verbose
    
# Docker example
RUN npm ci && npm run build

Development Workflow

# Development setup
npm install
snowpack prepare  # Optional: pre-install dependencies
snowpack dev      # Start development server

# Production build
snowpack build
snowpack build --watch  # Watch mode for testing

Package Scripts

{
  "scripts": {
    "start": "snowpack dev",
    "build": "snowpack build",
    "build:watch": "snowpack build --watch",
    "clean": "snowpack build --clean",
    "prepare": "snowpack prepare"
  }
}

Install with Tessl CLI

npx tessl i tessl/npm-snowpack

docs

build-system.md

cli.md

configuration.md

development-server.md

index.md

plugins.md

utilities.md

tile.json