What is Vite?

What is Vite?

Vite is a modern frontend build tool and development server used to create and run web applications built with technologies such as React, Vue, Svelte, and vanilla JavaScript.

In simple terms:

Vite provides the development environment that runs, builds, and bundles your React application.

Vite is not React.

React
  ↓
UI library
  ↓
Build components and application UI


Vite
  ↓
Development & build tool
  ↓
Run, bundle and optimize the React application

1. Why Do We Need Vite?

Suppose you create a React application.

Your project may contain:

src/
 ├── App.jsx
 ├── main.jsx
 ├── components/
 ├── pages/
 └── services/

public/
package.json

The browser cannot directly understand everything in a modern development project.

You may have:

import React from "react";
import Header from "./components/Header";

CSS:

import "./App.css";

npm packages:

import axios from "axios";

TypeScript:

const user: User = ...

JSX:

<h1>Hello {name}</h1>

These files need development and production tooling.

Vite handles much of this tooling for you.

2. Vite Provides Two Major Things

Vite is primarily:

1. Development Server
2. Production Build Tool

Development

Your Code
   ↓
Vite Dev Server
   ↓
Browser

Production

Your Code
   ↓
Vite Build
   ↓
Optimized Files
   ↓
Web Server

3. Creating a React Project with Vite

Instead of the old CRA command:

npx create-react-app my-app

you can use:

npm create vite@latest my-app

Vite asks you:

Project name:
my-app

Select a framework:
> React

Select a variant:
> JavaScript

or:

> TypeScript

Then:

cd my-app
npm install
npm run dev

You will get a local development URL similar to:

http://localhost:5173

4. Typical Vite + React Project

A newly created project might look like:

my-app/
│
├── node_modules/
│
├── public/
│
├── src/
│   ├── assets/
│   ├── App.css
│   ├── App.jsx
│   ├── index.css
│   └── main.jsx
│
├── .gitignore
├── eslint.config.js
├── index.html
├── package.json
├── vite.config.js
└── README.md

The important files are:

package.json

Contains your project dependencies and scripts.

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

5. npm run dev

When you execute:

npm run dev

npm looks at:

"dev": "vite"

and starts Vite's development server.

Conceptually:

npm run dev
      ↓
    Vite
      ↓
Development Server
      ↓
localhost:5173
      ↓
Browser

6. Why Vite Is Fast

One of Vite's major advantages is its development architecture.

Traditional tools such as older Webpack-based setups often bundle a large portion of the application before serving it during development.

Vite takes a different approach.

Modern browsers support ES Modules (ESM).

Vite can serve source modules on demand during development.

Conceptually:

Browser requests:

main.jsx
   ↓
Vite
   ↓
Serve module

Browser requests:

App.jsx
   ↓
Vite
   ↓
Serve module

Instead of having to create one enormous development bundle first.

This makes startup very fast, particularly as projects become larger.

7. HMR — Hot Module Replacement

Another important Vite feature is HMR.

Suppose you have:

function App() {
    return <h1>Hello</h1>;
}

You change it to:

function App() {
    return <h1>Hello Syed</h1>;
}

You save the file.

Vite detects the change and updates the browser immediately.

Edit Code
    ↓
Save
    ↓
Vite detects change
    ↓
HMR
    ↓
Browser updates

You normally don't need to manually refresh the page.

This makes development much faster.

8. Vite + React

When using React with Vite, there are two separate technologies:

             React Application
                    │
        ┌───────────┴───────────┐
        │                       │
      React                    Vite
        │                       │
 UI components            Development server
 State management         Build process
 JSX                      Asset handling
 Hooks                    Environment variables
                            Production build

For example:

function App() {
    return (
        <div>
            <h1>My React Application</h1>
        </div>
    );
}

React is responsible for the UI.

Vite provides the tooling around the application.

9. What Happens During npm run build?

When you're ready to deploy:

npm run build

Vite creates a production build.

Conceptually:

src/
 ↓
Vite
 ↓
Production Build
 ↓
dist/

You typically get:

dist/
├── assets/
│   ├── index-xxxxx.js
│   └── index-xxxxx.css
└── index.html

These are optimized files that can be deployed to a web server.

10. Vite's dist Folder

For example:

npm run build

produces:

dist/

You can deploy this folder to many hosting platforms.

For example:

React + Vite
      ↓
npm run build
      ↓
dist/
      ↓
Azure Static Web Apps
      ↓
Azure App Service
      ↓
Nginx
      ↓
IIS
      ↓
Cloudflare Pages
      ↓
Netlify
      ↓
Vercel

11. vite.config.js

Vite configuration is normally placed in:

vite.config.js

For example:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
    plugins: [react()]
});

Here:

react()

enables React-specific Vite functionality.

12. Vite Plugins

Vite supports plugins.

For React, you'll commonly see:

@vitejs/plugin-react

This provides React-related support such as JSX transformation and Fast Refresh.

Conceptually:

Vite
 │
 ├── React Plugin
 │
 ├── TypeScript Plugin
 │
 ├── SVG Plugin
 │
 └── Other Plugins

13. Vite Environment Variables

Vite also provides environment variable support.

For example:

.env

VITE_API_URL=https://api.example.com

In React:

const apiUrl = import.meta.env.VITE_API_URL;

Notice the important prefix:

VITE_

Variables exposed to client-side code should use the VITE_ prefix.

Never put secrets such as database passwords or private API keys in Vite client environment variables.

Anything shipped to browser code should be considered accessible to the user.

14. Vite vs Create React App

This is particularly important given your previous question about CRA.

So instead of:

npx create-react-app myapp

use:

npm create vite@latest myapp

15. Vite vs Webpack

Vite and Webpack are both build/development tools, but their architectures differ.

Webpack

Source Files
     ↓
Webpack
     ↓
Bundle
     ↓
Development Server
     ↓
Browser

Vite

Source Files
     ↓
Vite Dev Server
     ↓
Browser requests modules
     ↓
ES Modules

For production, Vite still performs bundling and optimization.

So don't think:

"Vite doesn't bundle anything."

A better understanding is:

Vite uses native ES modules during development and performs an optimized production build when you run vite build.

16. Vite Is Not a React Replacement

This is one of the most important things to understand.

Incorrect:

React vs Vite

Correct:

React + Vite

They solve different problems.

React

Handles:

Components
Props
State
Hooks
Events
Rendering
UI

Vite

Handles:

Development server
JSX transformation
Module handling
HMR
Build
Optimization
Environment configuration

17. React + Vite + Your .NET Web API

Since you're learning React for full-stack .NET development, the architecture would typically look like:

                  Browser
                     │
                     │
             React + Vite
                     │
                     │ HTTP/HTTPS
                     │
              Axios / Fetch
                     │
                     ▼
              ASP.NET Core
                  Web API
                     │
                     ▼
                EF Core
                     │
                     ▼
                SQL Server

During development:

React/Vite
localhost:5173
       │
       │ HTTP
       ▼
.NET Web API
localhost:7130
       │
       ▼
SQL Server

For example:

const response = await axios.get(
    "https://localhost:7130/api/articles"
);

Vite runs your React frontend; ASP.NET Core remains your backend/API.

18. Vite Development vs Production

Development

npm run dev

React Source
      ↓
Vite Dev Server
      ↓
localhost:5173

Used while developing.

Production

npm run build

React Source
      ↓
Vite
      ↓
dist/
      ↓
Deploy

Used when deploying your application.

The easiest way to remember

React
= UI Library

Vite
= Development + Build Tool

CRA
= Older React project setup tool

Or:

                    React Application
                           │
                  ┌────────┴────────┐
                  │                 │
                React              Vite
                  │                 │
            Build the UI      Run & build app
            Components        Dev server
            Hooks             HMR
            State             Production build
            JSX               Asset handling

For your React 19 roadmap, I recommend learning React 19 + Vite + TypeScript, rather than CRA.