Vite is a next-generation frontend build tool that provides an extremely fast development experience through native ES modules and optimized production builds. It offers instant server start with on-demand file serving over native ESM, lightning-fast Hot Module Replacement (HMR) that stays fast regardless of app size, and highly optimized production builds powered by Rollup. Vite is framework-agnostic and provides both a powerful dev server and a build command, along with a rich plugin ecosystem and full TypeScript support.
npm install vite or pnpm add vite or yarn add viteimport {
createServer,
build,
preview,
defineConfig,
type UserConfig,
type ViteDevServer
} from 'vite';For CommonJS:
const { createServer, build, preview, defineConfig } = require('vite');import { createServer, build, defineConfig } from 'vite';
// Define configuration
export default defineConfig({
root: './src',
base: '/',
build: {
outDir: '../dist',
},
});
// Create dev server programmatically
const server = await createServer({
server: { port: 3000 }
});
await server.listen();
// Build for production
await build({
root: './src',
build: { outDir: '../dist' }
});Vite provides a command-line interface with four main commands:
# Start development server (default command)
vite
vite dev
vite serve
# Build for production
vite build
# Preview production build locally
vite preview
# Pre-bundle dependencies (deprecated)
vite optimize --forceCreate and configure a Vite development server with instant module serving, HMR, and middleware support.
function createServer(inlineConfig?: InlineConfig): Promise<ViteDevServer>;
interface ViteDevServer {
config: ResolvedConfig;
httpServer: HttpServer | null;
ws: WebSocketServer;
environments: Record<string, DevEnvironment>;
listen(port?: number, isRestart?: boolean): Promise<ViteDevServer>;
close(): Promise<void>;
restart(forceOptimize?: boolean): Promise<void>;
}Build your project for production with optimized bundling, code splitting, and asset handling.
function build(inlineConfig?: InlineConfig): Promise<RollupOutput | RollupOutput[] | RollupWatcher>;
function createBuilder(inlineConfig?: InlineConfig): Promise<ViteBuilder>;
interface ViteBuilder {
build(environment?: string): Promise<void>;
buildApp(): Promise<void>;
close(): Promise<void>;
}Locally preview your production build to test the final output before deployment.
function preview(inlineConfig?: InlineConfig): Promise<PreviewServer>;
interface PreviewServer {
config: ResolvedConfig;
httpServer: HttpServer;
listen(port?: number): Promise<PreviewServer>;
close(): Promise<void>;
}Define, load, and resolve Vite configuration with type safety and environment-specific settings.
function defineConfig(config: UserConfigExport): UserConfigExport;
function loadConfigFromFile(
configEnv: ConfigEnv,
configFile?: string,
configRoot?: string,
logLevel?: LogLevel,
customLogger?: Logger,
configLoader?: 'bundle' | 'runner' | 'native'
): Promise<{ path: string; config: UserConfig; dependencies: string[] } | null>;
function resolveConfig(
inlineConfig: InlineConfig,
command: 'build' | 'serve',
defaultMode?: string
): Promise<ResolvedConfig>;Create and configure plugins to extend Vite's functionality with custom transforms, hooks, and behavior.
interface Plugin extends RollupPlugin {
name: string;
enforce?: 'pre' | 'post';
apply?: 'serve' | 'build' | ((config: UserConfig, env: ConfigEnv) => boolean);
config?: (config: UserConfig, env: ConfigEnv) => UserConfig | null | void;
configResolved?: (config: ResolvedConfig) => void | Promise<void>;
configureServer?: (server: ViteDevServer) => (() => void) | void | Promise<(() => void) | void>;
// ... many more hooks
}
function perEnvironmentPlugin(
factory: (environment: Environment) => Plugin
): Plugin;Multi-environment support for client, SSR, and custom build targets with isolated module graphs and plugin pipelines.
class DevEnvironment {
name: string;
config: ResolvedConfig;
moduleGraph: EnvironmentModuleGraph;
transformRequest(url: string, options?: TransformOptions): Promise<TransformResult | null>;
warmupRequest(url: string): Promise<void>;
}
function createRunnableDevEnvironment(
name: string,
config: ResolvedConfig,
context?: RunnableDevEnvironmentContext
): RunnableDevEnvironment;
function createFetchableDevEnvironment(
name: string,
config: ResolvedConfig,
context?: FetchableDevEnvironmentContext
): FetchableDevEnvironment;Execute transformed modules in any JavaScript environment (Node.js, workers, tests) with HMR support.
class ModuleRunner {
constructor(options: ModuleRunnerOptions);
import(url: string): Promise<any>;
close(): Promise<void>;
}
function createServerModuleRunner(
environment: DevEnvironment,
options?: Partial<ServerModuleRunnerOptions>
): Promise<ModuleRunner>;Transform and execute modules for server-side rendering with proper externalization and module runner support.
interface SSROptions {
external?: string[];
noExternal?: string | RegExp | (string | RegExp)[] | true;
target?: 'node' | 'webworker';
resolve?: {
conditions?: string[];
externalConditions?: string[];
};
}
function fetchModule(
environment: DevEnvironment,
url: string,
importer?: string,
options?: FetchModuleOptions
): Promise<FetchResult>;
function createServerModuleRunner(
environment: DevEnvironment,
options?: Partial<ServerModuleRunnerOptions>
): Promise<ModuleRunner>;Server-side and client-side HMR systems for lightning-fast updates during development.
import.meta.hot API for accepting updatesTrack module dependencies, importers, and transforms for efficient HMR and incremental builds.
class EnvironmentModuleGraph {
getModuleByUrl(url: string): Promise<EnvironmentModuleNode | undefined>;
getModuleById(id: string): EnvironmentModuleNode | undefined;
invalidateModule(mod: EnvironmentModuleNode): void;
invalidateAll(): void;
}
interface EnvironmentModuleNode {
id: string | null;
url: string;
importers: Set<EnvironmentModuleNode>;
importedModules: Set<EnvironmentModuleNode>;
transformResult: TransformResult | null;
}Import and process static assets (images, fonts, media) with URL generation and inlining support.
interface BuildOptions {
assetsDir?: string;
assetsInlineLimit?: number;
assetsInclude?: string | RegExp | (string | RegExp)[];
}Process CSS, CSS Modules, preprocessors (Sass, Less, Stylus), and PostCSS with full HMR support.
function preprocessCSS(
code: string,
filename: string,
config: ResolvedConfig
): Promise<PreprocessCSSResult>;
interface CSSOptions {
modules?: CSSModulesOptions;
postcss?: string | object;
preprocessorOptions?: Record<string, any>;
lightningcss?: LightningCSSOptions;
}Transform TypeScript with esbuild for fast compilation without type checking.
function transformWithEsbuild(
code: string,
filename: string,
options?: ESBuildTransformOptions,
inMap?: object
): Promise<ESBuildTransformResult>;
interface ESBuildOptions {
include?: string | RegExp | string[] | RegExp[];
exclude?: string | RegExp | string[] | RegExp[];
jsxInject?: string;
target?: string | string[];
}import.meta.glob.env files with type-safe accessCommon utility functions for path normalization, config merging, filtering, logging, plugin management, and more.
function normalizePath(id: string): string;
function mergeConfig<T, U>(defaults: T, overrides: U): Record<string, any>;
function mergeAlias(a?: AliasOptions, b?: AliasOptions): AliasOptions | undefined;
function createFilter(
include?: FilterPattern,
exclude?: FilterPattern,
options?: { resolve?: string | false }
): (id: string | unknown) => boolean;
function createLogger(level?: LogLevel, options?: LogOptions): Logger;
function isCSSRequest(request: string): boolean;
function loadEnv(mode: string, envDir: string, prefixes?: string | string[]): Record<string, string>;
function searchForWorkspaceRoot(current: string, root?: string): string;
function isFileServingAllowed(file: string, server: ViteDevServer): boolean;
function isFileLoadingAllowed(file: string, server: ViteDevServer): boolean;
function send(req: IncomingMessage, res: ServerResponse, content: string | Buffer, type: string, options: SendOptions): void;
function buildErrorMessage(err: Error, args?: string[], includeStack?: boolean): string;
function parseAst(code: string, options?: any): Promise<any>;
function parseAstAsync(code: string, options?: any): Promise<any>;
function sortUserPlugins(plugins: (Plugin | Plugin[])[]): [Plugin[], Plugin[], Plugin[]];
function perEnvironmentPlugin(factory: (environment: Environment) => Plugin): Plugin;
function perEnvironmentState<T>(stateFactory: () => T): PerEnvironmentState<T>;
function runnerImport<T>(moduleId: string, inlineConfig?: InlineConfig): Promise<RunnerImportResult<T>>;
function isRunnableDevEnvironment(environment: DevEnvironment): environment is RunnableDevEnvironment;
function isFetchableDevEnvironment(environment: DevEnvironment): environment is FetchableDevEnvironment;
function moduleRunnerTransform(code: string, inMap: SourceMap | null, url: string, originalCode: string, options?: ModuleRunnerTransformOptions): Promise<TransformResult | null>;Vite is built around several key components:
Common types used throughout the Vite API are documented in each relevant section. Key base types include:
UserConfig - User configuration objectResolvedConfig - Fully resolved configurationPlugin - Plugin interfaceViteDevServer - Dev server instanceInlineConfig - Inline configuration for programmatic useFilterPattern - File filter patterns (string | RegExp | (string | RegExp)[])See individual capability documentation for detailed type definitions.