Scaffolding a Vite Project with `create-vite`

Why it exists

Modern web development involves a complex toolchain for bundling, transpiling, and serving code. Manually configuring these tools for every new project is time-consuming and error-prone. The create-vite package solves this by automating the entire initial setup, letting you start coding on a new project in seconds.

The mental model

Think of create-vite as a project wizard or a blueprint generator for your web app. Instead of building a house from raw materials by manually installing and configuring Vite, a framework, and TypeScript, you simply pick a pre-designed floor plan (like --template react-ts). The tool instantly builds the foundation and frame for you, resulting in a working, ready-to-code project.

How it works

You run a single command in your terminal, like npm create vite@latest. This executes the create-vite script, which presents an interactive prompt asking for your project name and desired template (e.g., Vue with TypeScript, vanilla JS). The script then creates a new directory, copies the necessary starter files, and generates a pre-configured package.json and vite.config.js. You can also bypass the interactive prompts by providing the project name and template as command-line arguments.

When to use it

Use create-vite whenever you are starting a new frontend project that will use Vite. It is the official and recommended way to begin, whether you're building a Single-Page Application with React or Vue, a simple static site with vanilla JavaScript, or a component library with Lit or Svelte. It supports a wide range of popular frameworks and variants out of the box.

When not to use it

You would not use create-vite to add Vite to an existing, mature project with its own build system. create-vite is a scaffolding tool for creating new projects from scratch, not a migration tool for converting existing ones. For migration, you would follow a manual integration process.

One canonical example

To create a new Vue project using TypeScript, you can run the command: npm create vite@latest my-vue-app -- --template vue-ts. The extra -- is critical when using npm (v7+) to ensure the --template flag is passed to the create-vite script, not to npm itself. After the command completes, you navigate into the new directory (cd my-vue-app), install dependencies (npm install), and start the dev server (npm run dev).