Vite 02 ⚡ Installation — Node requirements & create-vite scaffolding - KandZ

⏱️ Estimated read: 10 min | |

Vite is installed as a development dependency of the project, and the project itself is created with the create-vite scaffolding tool. The previous chapter explained why the dev server is unbundled; this chapter covers the commands that put that dev server into a working project. The installation has two requirements that the administrator must check first: the Node.js version and the package manager. The create-vite tool generates the project from a template, installs the dependencies, and produces the package.json scripts that start the dev server, build the production bundle, and preview the build.

Quick How-To Guides & Fast FixesNeed a quick fix or step-by-step solution? Browse our fast answers on HowTo.KandZ.me:

Operating Systems CLI →Dev Environment Languages →Web Network Tools →Security Accounts →Security Access Tech →Device Phone Basics →Social Messaging →Digital Files Media →

The Node.js requirement is the gate that fails the installation if it is not met. The current Vite versions require Node.js ^20.19.0 || >=22.12.0 . The create-vite package notes that some templates require a higher version, so the package manager may warn even when the base Vite requirement is met . The scaffolding is a single command, and the --template flag selects the framework preset. The available presets include the vanilla, the Vue, the React, the Preact, the Lit, the Svelte, the Solid, and the Qwik, each with the JavaScript and the TypeScript variants .

Key point: The npm create vite@latest command is the scaffolding tool, and the -- before the --template flag is required for npm 7 and later. The flag after the -- is passed to create-vite, not to npm. The . project name scaffolds into the current directory, which is the mechanism for adding Vite to an existing folder.

Why the installation requires the Node version check

The Node floor problem.

Vite is ESM-only since v7, and the Node.js 18 is no longer supported because it reached its end-of-life . The current floor is ^20.19.0 || >=22.12.0, and the same range applies to the @types/node in the TypeScript projects . A project that runs on the older Node.js fails the Vite startup, or the package manager refuses the install. The version check is the first step, and the node -v command is the mechanism that confirms it.

The template problem.

The create-vite tool generates the project from the template. The template determines the framework, the TypeScript, and the build plugins. A React template installs the react, the react-dom, and the @vitejs/plugin-react; a Vue template installs the vue and the @vitejs/plugin-vue . The template also determines the file structure: the src/main.tsx, the src/App.tsx, and the index.html. The wrong template produces the project with the wrong dependencies and the wrong structure.

The package-manager problem.

The create-vite command is invoked through the package manager’s create command. The npm create vite@latest, the yarn create vite, the pnpm create vite, and the bun create vite all work . The difference is the lockfile and the node_modules layout. The choice of the package manager should match the project’s convention, because the lockfile is the source of truth for the dependency versions.

a. The Node version check and the scaffolding command

The Node version check is the first command. The scaffolding is the second.

# Check the Node.js version
node -v
# The output must be v20.19.0 or later, or v22.12.0 or later

# Scaffold the project with the interactive prompts
npm create vite@latest

# Scaffold with the project name and the template
npm create vite@latest my-app -- --template react

The node -v output is the version string, and the comparison is manual or enforced by the package manager. The npm create vite@latest starts the interactive prompts: the project name, the framework, and the variant (the JavaScript or the TypeScript) . The npm create vite@latest my-app -- --template react skips the prompts and creates the project with the React template.

The --template flag accepts the preset names.

# The template presets
npm create vite@latest my-app -- --template vue
npm create vite@latest my-app -- --template react-ts
npm create vite@latest my-app -- --template svelte
npm create vite@latest my-app -- --template vanilla-ts

The vue is the Vue JavaScript template, the react-ts is the React TypeScript template, the svelte is the Svelte template, and the vanilla-ts is the vanilla TypeScript template . The preset list is the source of the valid names, and the invalid name produces an error.

b. The post-scaffold install and the dev server

The scaffolding creates the files, but the dependencies are not installed until the npm install runs.

# Enter the project
cd my-app

# Install the dependencies
npm install

# Start the dev server
npm run dev

The npm install reads the package.json and installs the vite and the framework dependencies. The npm run dev starts the Vite dev server, and the output shows the local URL, typically http://localhost:5173 . The server starts in milliseconds, because the dev server is unbundled and the dependencies are pre-bundled on the first request.

The package.json scripts are the lifecycle.

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  }
}

The dev script starts the dev server, the build script creates the production bundle, and the preview script serves the production build locally . The vite command is the same for the dev and the build, and the subcommand determines the mode.

c. The project structure

The scaffolded project has the standard structure: the index.html, the src/ directory, the public/ directory, the vite.config.ts, and the package.json.

my-app/
├── index.html          # The entry point
├── src/
│   ├── main.tsx        # The application entry
│   ├── App.tsx         # The root component
│   └── index.css       # The global styles
├── public/             # The static assets
├── vite.config.ts      # The Vite configuration
└── package.json

The index.html is the entry point, and it is in the project root, not in the public/ directory . The src/main.tsx is the application entry, and it imports the App and mounts it. The public/ directory contains the static assets that are served as-is. The vite.config.ts is the configuration file, and it is optional; the project works without it, and the file is created when the custom configuration is needed.

Complete Example Session

# ============================================
# PART 1: CHECK THE NODE VERSION
# ============================================
node -v
# The output must be v20.19.0+ or v22.12.0+

# ============================================
# PART 2: SCAFFOLD THE PROJECT
# ============================================
npm create vite@latest my-app -- --template react

# ============================================
# PART 3: ENTER THE PROJECT
# ============================================
cd my-app

# ============================================
# PART 4: INSTALL THE DEPENDENCIES
# ============================================
npm install

# ============================================
# PART 5: START THE DEV SERVER
# ============================================
npm run dev
# Open http://localhost:5173

# ============================================
# PART 6: BUILD FOR PRODUCTION
# ============================================
npm run build
# The output is in dist/

# ============================================
# PART 7: PREVIEW THE PRODUCTION BUILD
# ============================================
npm run preview
# Open the preview URL

The seven parts demonstrate the installation lifecycle: the Node check, the scaffold, the project entry, the install, the dev server, the production build, and the preview.

Quick Reference

Node Requirements

Vite Version	Node.js
Vite 8	`^20.19.0 \|\| >=22.12.0`
Vite 7	`^20.19.0 \|\| >=22.12.0`
Vite 6	18+ or 20+

Scaffolding Commands

Package Manager	Command
npm	`npm create vite@latest`
yarn	`yarn create vite`
pnpm	`pnpm create vite`
bun	`bun create vite`
Deno	`deno init --npm vite`

Template Presets

Preset	Framework
`vanilla` / `vanilla-ts`	Vanilla JS/TS
`vue` / `vue-ts`	Vue
`react` / `react-ts`	React
`svelte` / `svelte-ts`	Svelte
`solid` / `solid-ts`	Solid
`qwik` / `qwik-ts`	Qwik

Scripts

Script	Command	Purpose
`dev`	`vite`	Dev server
`build`	`vite build`	Production bundle
`preview`	`vite preview`	Preview the build

Best Practices

✅ Do This:

# Check the Node version first
node -v                                                        # ✅

# Use the -- separator for the npm template flag
npm create vite@latest my-app -- --template react              # ✅

# Install the dependencies after the scaffold
npm install                                                    # ✅

# Use the dev script for the development
npm run dev                                                    # ✅

# Use the build script for the production
npm run build                                                  # ✅

❌ Don’t Do This:

# Skip the Node version check
npm create vite@latest    # Fails on the old Node.js           # ❌

# Omit the -- before the template flag
npm create vite@latest my-app --template react    # npm error    # ❌

# Forget the npm install
npm run dev    # The vite binary is not installed              # ❌

# Use the build output as the dev server
# The dev server is the vite command, not the dist/ folder      # ❌

# Assume the index.html is in the public/ directory
# It is in the project root                                     # ❌

Common Pitfalls

Pitfall	Why It Happens	Fix
The Node version error	Node.js 18 or older	Upgrade to 20.19+ or 22.12+
The template flag ignored	No `--` separator	Use `-- --template`
The vite command not found	Dependencies not installed	`npm install`
The port 5173 in use	Another process	Stop the process or use `--port`
The index.html not found	Wrong project structure	Check the root `index.html`

Real-World Examples

1. Check the Node version

node -v

2. Scaffold with the React template

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

3. Scaffold with the Vue TypeScript template

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

4. Scaffold in the current directory

npm create vite@latest . -- --template react

5. Install the dependencies

cd my-app && npm install

6. Start the dev server

npm run dev

7. Build for production

npm run build

8. Preview the build

npm run preview

9. The project structure

my-app/
├── index.html
├── src/
│   ├── main.tsx
│   └── App.tsx
└── package.json

10. The vite.config.ts

// Optional; the project works without it
export default defineConfig({})

Visual

The Installation Flow

┌──────────────────────────────────────────────────────────────┐
│  CHECK → SCAFFOLD → INSTALL → DEV                            │
│                                                              │
│  node -v                                                     │
│       │                                                      │
│       ├── version ok → continue                              │
│       │                                                      │
│       └── version old → upgrade                              │
│                                                              │
│  npm create vite@latest my-app -- --template react           │
│       │                                                      │
│       ▼                                                      │
│  cd my-app && npm install                                    │
│       │                                                      │
│       ▼                                                      │
│  npm run dev                                                 │
│       │                                                      │
│       ▼                                                      │
│  http://localhost:5173                                       │
└──────────────────────────────────────────────────────────────┘

The Template Selection

┌──────────────────────────────────────────────────────────────┐
│  THE TEMPLATE DETERMINES THE PROJECT                         │
│                                                              │
│  --template react                                            │
│  ├── installs react, react-dom, @vitejs/plugin-react         │
│  ├── creates src/main.tsx, src/App.tsx                       │
│  └── configures the React Fast Refresh                       │
│                                                              │
│  --template vue                                              │
│  ├── installs vue, @vitejs/plugin-vue                        │
│  ├── creates src/main.ts, src/App.vue                        │
│  └── configures the Vue SFC compiler                         │
└──────────────────────────────────────────────────────────────┘

The Project Structure

┌──────────────────────────────────────────────────────────────┐
│  THE index.html IS IN THE ROOT                               │
│                                                              │
│  my-app/                                                     │
│  ├── index.html        ← the entry point                     │
│  ├── src/                                                    │
│  │   ├── main.tsx      ← the application entry               │
│  │   └── App.tsx       ← the root component                  │
│  ├── public/           ← the static assets                   │
│  ├── vite.config.ts    ← optional configuration              │
│  └── package.json                                            │
│                                                              │
│  The Vite dev server serves the root index.html.             │
└──────────────────────────────────────────────────────────────┘

Summary

Item	Value
Node requirement	`^20.19.0 \|\| >=22.12.0`
Scaffold command	`npm create vite@latest`
Template flag	`-- --template <preset>`
Install command	`npm install`
Dev server	`npm run dev`
Production build	`npm run build`
Preview	`npm run preview`
Entry point	`index.html` in the root
Config file	`vite.config.ts` (optional)

Key takeaways:

The Node.js version must be 20.19+ or 22.12+. Vite is ESM-only since v7, and the Node.js 18 is not supported. The node -v check is the first step, and the package manager refuses the install if the version is too old .
The create-vite command is the scaffolding tool. The npm create vite@latest starts the prompts, and the -- --template flag skips them with the selected preset. The -- separator is required for npm 7 and later .
The template determines the framework and the file structure. The React template installs the React dependencies and creates the .tsx files, and the Vue template installs the Vue dependencies and creates the .vue files .
The npm install is required after the scaffold. The scaffolding creates the package.json, but the dependencies are not installed until the npm install runs. The vite binary is in the node_modules/.bin after the install .
The index.html is in the project root. It is the entry point, and it is not in the public/ directory. The public/ directory is for the static assets that are served as-is .
The scripts are the lifecycle. The dev script starts the dev server, the build script creates the production bundle, and the preview script serves the build locally .

Remember: Vite installation is the Node version check, the create-vite scaffold, the npm install, and the npm run dev. The --template flag selects the framework, and the -- separator is the npm syntax. The index.html is in the root, and the vite.config.ts is optional. The result is a project that starts in milliseconds and is ready to develop, with the framework and the TypeScript configured from the first command.

Was this helpful?

Stop using slow, ad-bloated tool sites! 🤮

🔎 Search “KandZ Tools” on Google to use many professional utilities for free.

KandZ.me is the ultimate minimalist hub for:
✅ Finance (Mortgage, Interest, Inflation)
✅ Tech (Base64, JSON, Dev Suite, IP)
✅ Health (BMI, BMR, TDEE)
✅ Productivity (Timer, Workspace, QR)

⚡️ Fast & Private
🔒 No data leaves your device
💎 100% Free

🔗 Use it now: https://tools.kandz.me
🔖 Bookmark it—you’ll need it later!