Setting Up React with Vite
We show how to create a React and TypeScript project with Vite, run the dev server, build and deploy, and fix common errors.
Aurora YazılımEditorial team
6 min read
To set up React with Vite, first install the current LTS version of Node.js. Then run npm create vite@latest in the terminal, enter a project name and choose the React and TypeScript template. Go into the project folder, install dependencies with npm install and start the dev server with npm run dev; the site opens at localhost:5173 by default.
What Is Vite and Why Use It?
Vite is a build tool and dev server made for modern web projects. During development it serves code using the browser's native ES module support and processes only the file that is requested. That is why the server starts in seconds even as the project grows, and a change you save shows on screen without reloading the page.
For production, Vite bundles your code into minified, split files with cache-friendly names. It offers ready-made templates for libraries such as React, Vue and Svelte, and has become one of the most common starting points in the React ecosystem.
Vite as a Create React App Alternative
For many years React projects were started with Create React App. The React team no longer recommends this tool for new projects; the official documentation suggests starting with either a framework (such as Next.js) or a build tool such as Vite. If you are looking for a Create React App alternative, Vite is the fastest migration path with the least configuration.
If you need server-side page rendering, file-based routing and ready-made page output for SEO, see our Next.js setup guide. For an admin panel, internal tool or single-page application (SPA), Vite is usually the simpler choice.
Prerequisites
The only real prerequisite for Vite is Node.js. New Vite versions drop support for older Node versions, so installing the current LTS release from nodejs.org is the safest route. npm comes with Node.js.
- The current LTS version of Node.js and the npm that comes with it.
- A code editor; for installation and recommended extensions, see our VS Code setup article.
- Terminal: PowerShell or Windows Terminal on Windows, Terminal on macOS, and the shell of your choice on Linux.
- Optional: Git for version control.
Node.js by Operating System
You can download and install Node.js from nodejs.org. If you will use different Node versions across several projects, choosing a version manager makes life easier later.
Windows
Download the LTS installer from nodejs.org and install it with the default options, or use winget in PowerShell. After installing, close and reopen the terminal so PATH is updated.
winget install OpenJS.NodeJS.LTS
node -v
npm -vmacOS
You can use the official installer, or install with a single command if Homebrew is available.
brew install node
node -v
npm -vLinux
The Node version in distribution repositories is often outdated. Installing at user level with nvm gives you a current version and removes the need for sudo; after installing nvm with the script on its own GitHub page, run the following commands.
nvm install --lts
nvm use --lts
node -vSteps to Create a React Project
Once Node.js is ready, creating a React project is the same on every operating system. The command guides you interactively: it asks for the project name, the framework (React) and the variant (TypeScript). If you want to specify the template directly in the command, use the format below; in npm, extra parameters go after the double dash.
- If you want to work with JavaScript, the template name is react; for TypeScript it is react-ts.
- Open the address shown on the Local line in the terminal (localhost:5173 by default) in your browser.
- Change some text in src/App.tsx and save; if the page updates without reloading, HMR (hot module replacement) is working.
npm create vite@latest benim-uygulamam -- --template react-ts
cd benim-uygulamam
npm install
npm run devpnpm create vite benim-uygulamam --template react-ts
yarn create vite benim-uygulamam --template react-tsGet to Know the Project Structure
The first thing you notice in a Vite project is that index.html sits in the root directory. Vite uses this file as the entry point, and the script tag inside it calls src/main.tsx.
| File / folder | Purpose |
|---|---|
| index.html | The app's entry page; title and meta tags live here |
| src/main.tsx | The starter file that mounts React on the page |
| src/App.tsx | The main component; build your own pages from here |
| public/ | Files copied as is, unprocessed: favicon, robots.txt |
| vite.config.ts | Plugins, aliases, server and build settings |
| package.json | Dependencies and the dev, build and preview scripts |
Environment Variables
Vite exposes only variables that start with the VITE_ prefix to client code, and you access them through import.meta.env. These variables are embedded in the bundle sent to the browser; never put things like API secret keys here, keep them on the server side.
VITE_API_URL=https://api.ornek.comBuilding and Deploying
The dev server is for local work only. You produce the version you will deploy with npm run build; the output is written to the dist folder. npm run preview lets you test that output locally in a way that is close to real production.
The dist folder consists of plain HTML, CSS and JavaScript files; it can be uploaded to any static hosting or to a web server such as Nginx. For speed, it is important that files are compressed and served with long-lived cache headers; we explain these settings in detail on our speed and performance management page.
- If the app will be published in a subfolder (example.com/panel/), set the base option in vite.config.ts to that path.
- If you use React Router, add a rule on the server that redirects all unknown addresses to index.html.
- For content pages that must appear in search engines, client-side rendering alone may fall short; this is where an SEO-friendly web design approach becomes important.
npm run build
npm run previewCommon Errors and Fixes
Most errors in a Vite setup come from the Node version, the port or deployment settings. The table below summarizes the most common cases; for more commands, see our npm commands guide.
| Symptom | Why | Fix |
|---|---|---|
| “Vite requires Node.js version...” warning | Old Node version | Switch to the current LTS version |
| Port 5173 is in use | Port is open in another process | Vite tries the next port; set server.port for a fixed port |
| node command not found | PATH not updated | Close and reopen the terminal, restart the computer if needed |
| Blank white page in production | Wrong base path | Fix the base setting to match the deployment folder |
| 404 on page refresh | No SPA routing on the server | Redirect all paths to index.html |
Next Steps
Once you have a working project, you can add tools such as React Router for routing, TanStack Query for data fetching, and Tailwind CSS or CSS Modules for styling. For code quality, extend the ESLint settings that come with the template to suit your project.
Vite and React together make a strong foundation for business applications such as a booking panel, a stock screen, appointment tracking or QR code menu management. In products like these, the data model, authorization and backups matter as much as the interface; if you prefer to build on a ready-made foundation, industry-specific software solutions can save time.
The interface design matters as much as the technical foundation: planning the user flow and screen layout before writing components is the basis of the UI/UX design process. Thinking about mobile breakpoints from the start is also far cheaper than fixing them later for mobile-friendly design.
Frequently Asked Questions
01Is TypeScript required in a Vite React project?
No, the react template works with plain JavaScript. But in medium and large projects TypeScript catches errors as you write and makes teamwork easier. Migrating later is possible, but starting with react-ts from the beginning means less work.
02Can I migrate my existing Create React App project to Vite?
Yes. The basic steps are moving index.html to the root directory, installing Vite and the React plugin instead of react-scripts, and changing variables with the REACT_APP_ prefix to the VITE_ prefix. For large projects, try it first in a separate branch and run the tests.
03Is a site built with Vite good enough for SEO?
For dashboards and app screens it is fine. For content pages that need to rank in search engines, it is healthier for the content to be generated as HTML on the server; a framework such as Next.js or a pre-rendering solution is preferred for this.
04Should I use pnpm instead of npm?
pnpm uses disk space more efficiently and speeds up installs; Vite works fine with either package manager. Having everyone on the team use the same tool matters more than which one you choose.
Setting up React with Vite takes a few minutes; the real effort lies in the architecture of the application you build on top. If you need a custom panel, booking or management software for your business, explore our industry software solutions; for a fast, original website, take a look at our web design service.
