vite

Setup using npm 6.x

$ npm create vite@latest my-react-app --template react-ts

$ npm create vite@latest my-react-app -- --template react-ts

$ yarn create vite my-react-app --template react-ts

$ pnpm create vite my-react-app --template react-ts

As Vite is not a native Linux command, it's typically invoked via npx or within project scripts defined in package.json:

npx vite [command] [options]
npm run [script] (e.g., npm run dev, npm run build)

Common options applicable to various commands:

--host Specify hostname
--port Specify port for the server
--mode Specify environment mode (e.g., development, production)

dev
    Starts the development server. Provides lightning-fast Hot Module Replacement (HMR) for a smooth development workflow.

build
    Bundles the application for production deployment. Optimizes assets and code with Rollup for efficient loading and performance.

preview
    Serves the production build locally for testing and verification before actual deployment. Useful for checking the optimized output.

create [project-name]
    Scaffolds a new Vite project using a chosen template (e.g., vue, react, vanilla, lit). This is often run via npm create vite@latest or yarn create vite.

optimize
    Explicitly pre-bundles dependencies. This command is rarely needed as Vite automatically handles dependency pre-bundling on startup for performance.

Vite (French for "fast") is a build tool that significantly improves the frontend development experience. It consists of a dev server that provides rich feature enhancements over native ES modules, such as incredibly fast Hot Module Replacement (HMR), and a build command that bundles your code with Rollup for production. Unlike traditional bundler-based setups, Vite leverages the browser's native ES modules support for development, allowing it to start instantly and apply updates almost instantaneously. It's designed to be framework-agnostic, supporting Vue, React, Preact, Svelte, Lit, and vanilla JavaScript/TypeScript projects. Vite is primarily used via npm or yarn scripts and requires Node.js to run.

Vite is a JavaScript build tool and a development server, not a standalone Linux command-line utility. It requires Node.js and a package manager like npm or yarn to be installed and run. Its usage is confined to web development projects and is typically invoked via project-specific scripts defined in package.json or using npx.

Vite itself is not typically installed globally as a Linux command. Instead, it's added as a development dependency to your project. The most common way to start a new project with Vite is to use its scaffolding tool:

npm create vite@latest [project-name]
yarn create vite [project-name]
pnpm create vite [project-name]

This command sets up a new project with Vite configured. Inside an existing project, Vite is usually listed in devDependencies in package.json.

Vite is configured via a vite.config.js (or .ts, .mjs, .mts) file located in the project root. This file allows developers to customize various aspects of the dev server, build process, integrate plugins, define aliases, and much more. It supports JavaScript, TypeScript, or ESM syntax for flexible configuration.

Vite was created by Evan You, the creator of Vue.js, and was initially released in 2020. It emerged from the need for a faster development experience for large Vue projects, directly addressing the performance bottlenecks of traditional JavaScript bundlers during development. By leveraging native ES Modules in the browser and highly optimized build processes, Vite quickly gained traction as a modern and efficient alternative for frontend tooling across various frameworks, emphasizing speed and developer experience.

npm, yarn, webpack, rollup, parcel, esbuild