or run

npx @tessl/cli init

Version

Tile

Overview

Evals

Files

docs

index.md

tile.json

tessl/npm-create-vite

A CLI tool to quickly start Vite projects from templates for popular frameworks like Vue, React, Preact, Lit, Svelte, Solid, and Qwik

Workspace: tessl
Visibility: Public
Created: 3 months ago
Last updated: 3 months ago
Describes: pkg:npm/create-vite@7.1.x

To install, run

npx @tessl/cli install tessl/npm-create-vite@7.1.0

create-vite

create-vite is a CLI tool for quickly scaffolding Vite projects with popular frontend frameworks. It provides interactive prompts to choose frameworks like Vue, React, Preact, Lit, Svelte, Solid, and Qwik, with support for both JavaScript and TypeScript variants.

Package Information

Package Name: create-vite
Package Type: npm
Language: TypeScript (compiled to JavaScript)
Installation: npm create vite@latest or npm install -g create-vite

Core Imports

create-vite is a CLI-only tool designed to be executed via command line. It does not export any public APIs for programmatic use. The package is intended to be run using package managers' create commands:

npm create vite@latest
yarn create vite
pnpm create vite
bun create vite

Basic Usage

Command Line Usage

Interactive mode (prompts for all options):

npm create vite@latest
# or
yarn create vite
# or
pnpm create vite
# or
bun create vite

Specify project name:

npm create vite@latest my-vue-app

Specify template directly:

npm create vite@latest my-vue-app -- --template vue

Use current directory:

npm create vite@latest .

Architecture

create-vite is built around several key components:

CLI Interface: Interactive prompts using @clack/prompts for user input
Template System: Pre-built template directories for each framework/variant combination
File Operations: Utility functions for directory management, file copying, and validation
Package Manager Detection: Automatic detection and adaptation for npm, yarn, pnpm, and bun
Framework Definitions: Structured configuration for supported frameworks and their variants

Capabilities

CLI Commands

create-vite provides two binary commands for project scaffolding:

# Main command
create-vite [directory] [options]

# Short alias
cva [directory] [options]

Command Line Arguments

interface CLIArguments {
  /** Template name to use */
  template?: string;
  /** Show help message */
  help?: boolean;
  /** Overwrite existing files without prompting */
  overwrite?: boolean;
  /** Project directory (positional argument) */
  _: string[];
}

Available CLI Options:

-t, --template <name> - Specify template name
-h, --help - Show help message
--overwrite - Overwrite existing files without prompting

Framework Configuration

interface Framework {
  /** Internal framework name */
  name: string;
  /** Display name for UI */
  display: string;
  /** Color function for terminal output */
  color: ColorFunc;
  /** Available variants for this framework */
  variants: FrameworkVariant[];
}

interface FrameworkVariant {
  /** Internal variant name */
  name: string;
  /** Display name for UI */
  display: string;
  /** Color function for terminal output */
  color: ColorFunc;
  /** Custom command to run instead of built-in template */
  customCommand?: string;
}

type ColorFunc = (str: string | number) => string;

interface PkgInfo {
  /** Package manager name (npm, yarn, pnpm, bun) */
  name: string;
  /** Package manager version */
  version: string;
}

Supported Templates

create-vite includes built-in templates for popular frontend frameworks:

Built-in Template List

// All available templates (extracted from framework variants)
const TEMPLATES = [
  // Vanilla
  "vanilla-ts", "vanilla",
  // Vue
  "vue-ts", "vue",
  // React (includes SWC variants)
  "react-ts", "react-swc-ts", "react", "react-swc", 
  // Preact
  "preact-ts", "preact",
  // Lit
  "lit-ts", "lit",
  // Svelte
  "svelte-ts", "svelte",
  // Solid
  "solid-ts", "solid",
  // Qwik
  "qwik-ts", "qwik"
];

Template Directory Structure

Each template corresponds to a template-{name} directory containing:

Base templates: template-vanilla, template-react, etc.
TypeScript variants: template-vanilla-ts, template-react-ts, etc.
Special handling: SWC variants (react-swc, react-swc-ts) are dynamically created by modifying base React templates

Additional Framework Options

create-vite also provides options for frameworks that use external scaffolding tools:

// Custom command variants (sample from source)
const CUSTOM_COMMANDS = {
  // Vue ecosystem
  "custom-create-vue": "npm create vue@latest TARGET_DIR",
  "custom-nuxt": "npm exec nuxi init TARGET_DIR",
  
  // React ecosystem  
  "custom-react-router": "npm create react-router@latest TARGET_DIR",
  "custom-tanstack-router": "npm create -- tsrouter-app@latest TARGET_DIR --framework React --interactive",
  "redwoodsdk-standard": "npm exec degit redwoodjs/sdk/starters/standard TARGET_DIR",
  "rsc": "npm exec degit vitejs/vite-plugin-react/packages/plugin-rsc/examples/starter TARGET_DIR",
  
  // Other frameworks
  "custom-angular": "npm exec @angular/cli@latest new TARGET_DIR",
  "custom-analog": "npm create analog@latest TARGET_DIR",
  "custom-svelte-kit": "npm exec sv create TARGET_DIR",
  "custom-qwik-city": "npm create qwik@latest basic TARGET_DIR",  
  "custom-create-preact": "npm create preact@latest TARGET_DIR",
  "marko-run": "npm create -- marko@latest --name TARGET_DIR",
  
  // Community options
  "create-vite-extra": "npm create vite-extra@latest TARGET_DIR",
  "create-electron-vite": "npm create electron-vite@latest TARGET_DIR"
};

These commands are automatically adapted for different package managers (yarn, pnpm, bun) using the getFullCustomCommand function.

Usage Examples

Interactive Project Creation

# Start interactive mode
npm create vite@latest

# Follow prompts:
# ✔ Project name: my-app
# ✔ Select a framework: Vue
# ✔ Select a variant: TypeScript

Non-Interactive Project Creation

# Create React TypeScript project
npm create vite@latest my-react-app -- --template react-ts

# Create Vue project in current directory
npm create vite@latest . -- --template vue

# Create Svelte project with overwrite
npm create vite@latest my-svelte-app -- --template svelte --overwrite

Package Manager Specific Commands

# npm 7+ (extra double-dash needed)
npm create vite@latest my-app -- --template vue-ts

# yarn
yarn create vite my-app --template vue-ts

# pnpm
pnpm create vite my-app --template vue-ts

# bun
bun create vite my-app --template vue-ts

Error Handling

create-vite handles various error scenarios with user-friendly prompts:

Template Validation

Invalid template names: When --template specifies a non-existent template, shows available options and prompts for selection
Template argument precedence: CLI arguments override interactive prompts

Directory Management

Non-empty directories: Prompts with three options:
- Cancel operation - Exits without changes
- Remove existing files and continue - Calls emptyDir() to clear directory
- Ignore files and continue - Proceeds without clearing
Directory creation: Uses fs.mkdirSync(root, { recursive: true }) to ensure parent directories exist

Package Name Validation

Invalid package names: Uses regex validation /^(?:@[a-z\d\-*~][a-z\d\-*._~]*\/)?[a-z\d\-~][a-z\d\-._~]*$/
Auto-correction: toValidPackageName() converts invalid names to valid format
Interactive correction: Prompts for manual package name input when auto-correction isn't suitable

File System Operations

Copy failures: Reports errors during template file copying
Permission errors: Handles write permission issues
Missing templates: Validates template directory exists before copying

Custom Command Execution

Command failures: When external scaffolding commands fail, exits with the command's status code
Package manager adaptation: Automatically adjusts commands for different package managers
Process inheritance: Uses spawn.sync() with stdio: 'inherit' for real-time output

User Cancellation

Prompt cancellation: All interactive prompts can be cancelled with Ctrl+C
Graceful exit: Calls prompts.cancel('Operation cancelled') to exit cleanly

Template Structure

Each template directory (template-*) contains:

package.json - Template package configuration
README.md - Template-specific documentation
index.html - Main HTML file
src/ - Source code directory
public/ - Public assets directory
_gitignore - Git ignore file (renamed to .gitignore)
Framework-specific configuration files (e.g., vite.config.js, tsconfig.json)

Utility Functions

create-vite includes several utility functions for internal processing:

/**
 * Formats target directory by trimming and removing trailing slashes
 * @param targetDir - The target directory path
 * @returns Formatted directory path
 */
function formatTargetDir(targetDir: string): string;

/**
 * Validates if a string is a valid npm package name
 * @param projectName - The project name to validate
 * @returns True if valid package name
 */
function isValidPackageName(projectName: string): boolean;

/**
 * Converts a string to a valid npm package name
 * @param projectName - The project name to convert
 * @returns Valid package name
 */
function toValidPackageName(projectName: string): string;

/**
 * Extracts package manager info from npm user agent string
 * @param userAgent - The npm_config_user_agent environment variable
 * @returns Package manager info or undefined
 */
function pkgFromUserAgent(userAgent?: string): PkgInfo | undefined;

/**
 * Converts custom commands to work with different package managers
 * @param customCommand - The base custom command
 * @param pkgInfo - Package manager information
 * @returns Adapted command for the specific package manager
 */
function getFullCustomCommand(customCommand: string, pkgInfo?: PkgInfo): string;

Custom Commands

Some framework variants use custom commands instead of built-in templates. When selected, these options will execute external scaffolding tools.

Package Manager Adaptation

The getFullCustomCommand function automatically adapts commands for different package managers:

// Command adaptation examples:
// npm create vue@latest → yarn create vue
// npm exec nuxi init → pnpm dlx nuxi init  
// npm create qwik@latest → bun x create-qwik@latest

Adaptation rules:

npm create → yarn create, pnpm create, bun x create-
npm exec → yarn dlx, pnpm dlx, bun x
@latest → Removed for Yarn 1.x compatibility
TARGET_DIR → Replaced with actual target directory path