A lightning-fast frontend build tool designed to leverage JavaScript's native ESM system for unbundled development with instant browser updates.
82
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.
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']);Available commands for project management and development.
snowpack initCreates a new Snowpack configuration file in the current directory.
// Equivalent programmatic usage
import { initCommand } from "snowpack/commands";
await initCommand({ config, lockfile });snowpack preparePrepares dependencies for development (installs and processes packages).
// Equivalent programmatic usage
import { preparePackages } from "snowpack";
await preparePackages({ config });snowpack devStarts the development server with hot module replacement.
// Equivalent programmatic usage
import { startServer } from "snowpack";
const server = await startServer({ config, lockfile });snowpack buildBuilds the project for production deployment.
// Equivalent programmatic usage
import { build } from "snowpack";
const result = await build({ config, lockfile });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 });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;
}# Display help information
snowpack --help
snowpack -h
# Display version information
snowpack --version
snowpack -v# 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# Verbose logging (show debug information)
snowpack build --verbose
# Quiet logging (minimal output)
snowpack build --quiet# 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# 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 inlineEach 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);
}
}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 numberThe CLI automatically loads configuration with the following precedence:
--configsnowpack.config.js, etc.)package.json snowpack field// CLI configuration loading process
const cliFlags = parseArgs(args);
const cliConfig = expandCliFlags(cliFlags);
const config = await loadConfiguration(cliConfig, cliFlags.config);Snowpack provides two binary aliases:
# Full name
snowpack dev
# Short alias
sp dev# Check Node.js version
node --version # Must be 10.19.0 or higher# 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# 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# Override config file location
export SNOWPACK_CONFIG=./custom.config.js
# Set cache directory
export SNOWPACK_CACHE_DIR=./custom-cacheThe CLI uses standard exit codes:
0: Success1: 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# GitHub Actions example
- name: Build with Snowpack
run: |
npm ci
npx snowpack build --verbose
# Docker example
RUN npm ci && npm run build# 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{
"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-snowpackevals
scenario-1
scenario-2
scenario-3
scenario-4
scenario-5
scenario-6
scenario-7
scenario-8
scenario-9
scenario-10