Create a React Project with Vite, Step by Step

Full-project lesson · needs Node.js, npm and real project files, so it does not run in the in-page playground.

Vite (pronounced “veet”, French for “fast”) is a build tool. It starts a development server that updates the page almost instantly when you save a file, and it bundles your code into small, optimised files for production. It is the usual way to start a client-side React app today.

info

Why not create-react-app?

create-react-app used to be the standard. It is no longer maintained and no longer recommended. For a client-side app, use Vite, as in this lesson. For a project that needs server rendering or built-in routing, use a React framework instead; see Client-Side React vs React Frameworks.

Create the project

Open a terminal in the folder where you keep your projects and run:

terminal

BASH

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

This was run with Vite 8 and create-vite 9 for this course. Here is what each part means:

npm create vite@latest runs the newest project creator.
my-app is the name of the new folder.
--template react chooses the React template with JavaScript. (Use react-ts for TypeScript; see React with TypeScript.)

If you leave out the name or the template, the creator asks you questions instead. The wording of those questions can change between versions, so the command above is the reliable way.

Install and start

terminal

BASH

1
2
3

cd my-app
npm install
npm run dev

cd my-app moves into the new folder.
npm install downloads React, Vite and the other packages into node_modules. This can take a minute the first time.
npm run dev starts the development server.

You will see something like this:

code

OUTPUT

  VITE v8.3.4  ready in 325 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose

Open the Local address in your browser. You will see the starter page with a counter button. Congratulations, you have a running React app.

To stop the server press Ctrl + C in the terminal.

What Vite does for you

A fast dev server. It serves your files as native browser modules, so it starts in well under a second and updates changed files instantly (hot module replacement).
JSX support. Browsers cannot read JSX. Vite uses a plugin (@vitejs/plugin-react) to turn it into JavaScript as you work.
Production builds. npm run build bundles, minifies and fingerprints your files. Vite 8 uses Rolldown, a bundler written in Rust, for this.
Environment variables, CSS imports and asset handling with no extra setup.

If something goes wrong

Problem	Likely fix
`command not found: npm`	Node.js is not installed, or the terminal was opened before installing it. Install Node.js and open a new terminal.
An “unsupported engine” warning	Your Node.js is too old. Install the current LTS release.
Port 5173 is already in use	Vite picks the next free port and prints it. Use the address it prints.
The page is blank and the terminal shows an error	Read the first error line. It names the file and the line.

Key points

Create a project with npm create vite@latest my-app -- --template react.
Run npm install once, then npm run dev to start working.
Vite gives you a fast dev server, JSX support and production builds.