Vite Introduction

Learning Objectives

By the end of this lesson, you will be able to:

1. Understand what Vite is and why modern React projects use it.
2. Understand the problem Vite solves.
3. Understand the difference between Vite and React.
4. Understand Vite's development-server architecture.
5. Understand how Vite handles ES modules during development.
6. Understand Vite's role in JSX and TypeScript development.
7. Understand Hot Module Replacement / Fast Refresh.
8. Understand Vite plugins.
9. Understand Vite configuration.
10. Understand environment variables in Vite.
11. Understand Vite's production build process.
12. Understand Vite's relationship with Rollup and modern production bundling.
13. Understand Vite's role in code splitting and asset processing.
14. Understand when Vite is appropriate and when a React framework is preferable.
15. Troubleshoot common Vite issues.
16. Explain Vite confidently in React interviews.
17. Understand Vite from a senior/architect perspective.

Introduction

In the previous lessons, we learned:

React
  ↓
Project Setup
  ↓
React + TypeScript + Vite

But an important question remains:

What exactly is Vite doing in our React application?

A common beginner misconception is:

Vite = React

That's incorrect.

Another misconception is:

Vite = React framework

That's also incorrect.

A better mental model is:

React
  │
  │ UI library
  ▼
Your Application
  │
  │ development/build tooling
  ▼
Vite
  │
  ├── Development Server
  ├── Module Handling
  ├── Fast Refresh integration
  ├── Build
  └── Asset Processing

So:

React helps you build the UI. Vite helps you develop and build the application.

What Is Vite?

Vite is a modern frontend build tool and development server.

It was created by Evan You, the creator of Vue, but Vite is not limited to Vue.

It supports multiple frontend ecosystems, including:

React
Vue
Svelte
Preact
Vanilla JavaScript

For our course, we're using:

Vite
+
React
+
TypeScript

The official Vite documentation describes Vite as a frontend tooling system providing a fast development experience and optimized production builds. Vite Documentation

Why Was Vite Needed?

To understand Vite, first understand the traditional frontend build problem.

Imagine a project with:

src/
├── App.tsx
├── components/
├── services/
├── hooks/
├── pages/
└── utils/

The browser needs to execute browser-compatible JavaScript.

But developers may write:

TypeScript
JSX
ES Modules
CSS
Imported Images
Modern JavaScript

Therefore, development tooling needs to process these files.

Historically, tools often created a large dependency graph and bundled a significant amount of the application before serving it.

Conceptually:

Source Code
     │
     ▼
Build Tool
     │
     ▼
Dependency Graph
     │
     ▼
Bundle
     │
     ▼
Browser

As projects became larger, this could lead to slower development startup and slower feedback loops.

Vite was designed to improve this development experience.

Vite's Core Idea

The key idea behind Vite's development architecture is:

Use the browser's native ES module support during development and transform modules on demand.

Modern browsers understand:

import { something } from "./module.js";

So instead of unnecessarily bundling the entire application before the browser can start developing, Vite can serve modules individually and transform them when requested.

Conceptually:

Browser
   │
   │ requests module
   ▼
Vite Dev Server
   │
   ▼
Transform requested module
   │
   ▼
Browser

This is one of the fundamental reasons Vite can provide a fast development experience.

Traditional Development Model

A simplified traditional workflow might look like:

                 Source Files
                     │
                     ▼
               Dependency Graph
                     │
                     ▼
                  Bundler
                     │
                     ▼
             Large Development Bundle
                     │
                     ▼
                  Browser

When the application becomes large:

More Files
   ↓
Larger Graph
   ↓
More Processing
   ↓
Slower Startup

This is a simplified model; modern bundlers have many optimizations.

Vite Development Model

Vite takes a different approach during development:

                Source Files
                     │
                     ▼
               Vite Dev Server
                     │
             ┌───────┼────────┐
             ▼       ▼        ▼
          Module A Module B Module C
             │       │        │
             └───────┼────────┘
                     ▼
                   Browser

The browser requests what it needs.

Vite transforms modules as required.

This helps keep development startup and updates fast.

Vite Is Not a Runtime

This is important.

Vite is primarily a development/build tool.

Your production browser application doesn't normally run:

Vite server

Instead:

Development
     │
     ▼
Vite Dev Server
     │
     ▼
Browser

Production:

Source
  │
  ▼
Vite Build
  │
  ▼
Production Assets
  │
  ▼
CDN / Web Server
  │
  ▼
Browser

So Vite is part of your development and build pipeline.

Vite + React Architecture

Our React application looks like:

                 Developer
                     │
                     ▼
              React + TypeScript
                     │
                     ▼
                    Vite
            ┌────────┼─────────┐
            ▼        ▼         ▼
          Dev      Transform   Build
         Server     Modules
            │                    │
            ▼                    ▼
         Browser              dist/

This separation is very important.

Creating a Vite React Project

The command we've already used is:

npm create vite@latest techlearningpro-react -- --template react-ts

Then:

cd techlearningpro-react

Install dependencies:

npm install

Start Vite:

npm run dev

The development server will provide a URL, commonly:

http://localhost:5173

The exact port may vary.

What Happens When npm run dev Runs?

Look at:

{
  "scripts": {
    "dev": "vite"
  }
}

When you execute:

npm run dev

npm effectively launches:

vite

The flow becomes:

Terminal
   │
   ▼
npm run dev
   │
   ▼
Vite
   │
   ▼
Development Server
   │
   ▼
Browser

What Does the Vite Development Server Do?

The development server is responsible for things such as:

Serving files
Transforming modules
Handling imports
Providing HMR
Processing assets
Handling development configuration

For example:

Browser requests:
    /src/main.tsx
        ↓
Vite receives request
        ↓
Vite transforms module
        ↓
Browser receives module
        ↓
Application runs

Native ES Modules

Modern browsers support ES modules.

For example:

import { calculateTotal } from "./cart.js";
console.log(calculateTotal());

This is a native module relationship.

Vite can leverage this capability during development.

Conceptually:

main.tsx
   │
   ├── App.tsx
   │     ├── Header.tsx
   │     └── CourseList.tsx
   │
   └── styles.css

The browser can request modules through the development server.

Vite handles the transformations necessary for the source format.

What About TypeScript?

Browsers do not execute TypeScript directly.

For example:

interface Course {
  title: string;
}

The browser doesn't understand the TypeScript type syntax.

Vite's development pipeline transforms the source appropriately for browser execution.

This means:

TypeScript
     │
     ▼
Vite Transformation
     │
     ▼
Browser-compatible JavaScript

Important distinction:

Vite does not replace the TypeScript type checker.

In a typical TypeScript project, type checking can be handled separately by TypeScript tooling.

This is why Vite projects often have build commands involving TypeScript checks.

JSX Transformation

React applications commonly use JSX:

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

The browser doesn't directly execute JSX syntax.

The tooling transforms it into JavaScript that React can use.

Conceptually:

JSX
 │
 ▼
Transformation
 │
 ▼
JavaScript
 │
 ▼
Browser

Vite's React integration handles the required transformation pipeline.

Vite React Plugin

A Vite React project commonly uses:

@vitejs/plugin-react

The configuration may look like:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
export default defineConfig({
  plugins: [react()]
});

The plugin integrates React-specific behavior into Vite.

For example, it supports the React development workflow including Fast Refresh.

What Is Fast Refresh?

Fast Refresh provides rapid feedback while developing React applications.

Imagine:

App.tsx

contains:

<h1>Welcome</h1>

You change it to:

<h1>Welcome to TechLearningPro</h1>

After saving:

Save
 ↓
Vite detects change
 ↓
React Fast Refresh
 ↓
Browser updates

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

Why Fast Refresh Matters

Imagine developing a large form:

Name
Email
Address
Phone
Country
State
City

You modify a button.

Without a good fast-refresh workflow, you might repeatedly:

Save
 ↓
Reload
 ↓
Re-enter data
 ↓
Navigate back
 ↓
Test

Fast Refresh makes the feedback loop much faster.

This improves:

Developer Productivity

rather than directly improving your application's production performance.

Vite HMR

HMR means:

Hot Module Replacement

It allows parts of an application to be updated without performing a complete page reload.

In React development, this works together with React Fast Refresh.

Conceptually:

Developer changes Component
           │
           ▼
          Vite
           │
           ▼
      HMR update
           │
           ▼
     React Refresh
           │
           ▼
        Browser

Development vs Production

This is one of the most important Vite concepts.

Development

npm run dev

Focus:

Fast startup
Fast updates
Debugging
Developer experience

Production

npm run build

Focus:

Optimized output
Small assets
Efficient loading
Production deployment

These are different optimization goals.

Vite Production Build

When you run:

npm run build

Vite generates production assets.

Conceptually:

React Source
     │
     ▼
Vite Build
     │
     ├── Transform
     ├── Bundle
     ├── Optimize
     ├── Process Assets
     └── Generate Chunks
     │
     ▼
dist/

You can inspect the output:

dist/
├── index.html
└── assets/
    ├── *.js
    ├── *.css
    └── other assets

Exact filenames depend on the build.

Rollup and Vite

You may hear:

Vite uses Rollup.

Historically and conceptually, this is an important part of understanding Vite's production build architecture.

Vite's production build has traditionally used Rollup, while newer Vite releases also incorporate newer internal build technology and tooling.

The important conceptual distinction is:

Development
   ↓
Vite Dev Server
   ↓
Native ESM-oriented workflow
Production
   ↓
Vite Build
   ↓
Production bundling/optimization

Don't reduce Vite to simply:

Vite = Rollup

Vite provides a complete development/build experience around its tooling pipeline.

Why Bundle for Production?

Browsers can load modules individually.

So why bundle?

Production applications benefit from optimization strategies such as:

Code splitting
Asset optimization
Chunking
Minification
Caching strategies
Dependency optimization

Imagine:

1000 JavaScript modules

Sending and managing every module individually may not be optimal.

Production tooling can produce a more efficient asset graph:

Application
    │
    ├── main.js
    ├── courses.js
    ├── dashboard.js
    └── vendor/chunks

This can improve network and loading behavior.

Code Splitting

Suppose your application contains:

Home
Courses
Dashboard
Admin
Reports

A user visiting Home may not need Admin immediately.

Code splitting allows:

Initial Load
    │
    ▼
Home chunk
Later:
    │
    ▼
Dashboard chunk

Conceptually:

Application
│
├── main.js
├── courses.js
├── dashboard.js
└── admin.js

We'll study this in detail when we reach lazy loading and routing.

Asset Processing

Vite also processes assets.

For example:

CSS
Images
SVG
Fonts
JavaScript
TypeScript

Suppose:

import logo from "./assets/logo.png";

Vite understands that this asset is part of the application's dependency graph.

During production:

logo.png
   │
   ▼
Build
   │
   ▼
Optimized / referenced asset

The exact processing depends on the asset type and configuration.

Static Assets

You can also put assets under:

public/

For example:

public/
├── robots.txt
├── favicon.ico
└── images/
    └── logo.png

Then they can be referenced through their public URL.

The important distinction is:

src/assets
    ↓
Part of module/build graph
public
    ↓
Served as static public assets

Choose intentionally.

Vite Configuration

The primary configuration file is:

vite.config.ts

Example:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
export default defineConfig({
  plugins: [react()]
});

You can configure:

Plugins
Server
Proxy
Aliases
Build
Environment behavior
Asset handling

Development Proxy

A common enterprise problem is:

Browser
   │
   ▼
localhost:5173
   │
   ▼
Backend API
localhost:8080

You might encounter CORS issues.

Vite can provide a development proxy.

Conceptually:

Browser
   │
   ▼
Vite
   │
   ├── /api/users
   │
   ▼
Backend

A simplified configuration can look like:

export default defineConfig({
  server: {
    proxy: {
      "/api": {
        target: "http://localhost:8080",
        changeOrigin: true
      }
    }
  }
});

Now:

/api/users

can be forwarded to the backend during development.

This is particularly useful when working with:

React
+
Spring Boot

which is a common enterprise architecture.

Vite Environment Variables

Vite exposes environment variables through:

import.meta.env

For example:

VITE_API_BASE_URL=https://api.example.com

Then:

const apiUrl =
  import.meta.env.VITE_API_BASE_URL;

The VITE_ prefix is significant for variables intended to be exposed to client-side code.

Environment Modes

Vite supports different modes.

Common concepts include:

development
production

You can have:

.env
.env.local
.env.development
.env.development.local
.env.production
.env.production.local

For example:

.env.development

might contain:

VITE_API_BASE_URL=http://localhost:8080

while:

.env.production

might contain:

VITE_API_BASE_URL=https://api.techlearningpro.com

Environment Security

This deserves repetition.

If the browser can access:

import.meta.env.VITE_API_KEY

you should assume users can potentially inspect it.

Therefore:

Client configuration
        ≠
Secret configuration

Never place:

Database Password
Private Signing Key
Secret API Credential

in browser-exposed Vite variables.

Instead:

React
  │
  ▼
Backend API
  │
  ▼
Secret

The backend should protect sensitive credentials.

Vite Dependency Optimization

During development, Vite may optimize dependencies.

Why?

Imagine:

Your App
  │
  ├── React
  ├── Library A
  ├── Library B
  └── Library C

Some dependencies may contain many modules or use formats that aren't ideal for direct browser loading.

Vite can pre-bundle dependencies to improve development performance.

Conceptually:

Dependencies
     │
     ▼
Dependency Optimization
     │
     ▼
Faster Development Loading

This is different from your application's final production bundle.

Vite and React Are Separate Concerns

Remember:

React
 └── Component / UI model
Vite
 ├── Dev server
 ├── Module transformation
 ├── HMR
 ├── Build
 └── Asset handling

This separation is architecturally useful.

You could use React with a different build system.

You could use Vite with another frontend framework.

Therefore:

Vite ≠ React

Vite vs Webpack

This is a common interview question.

A simplified comparison:

But don't say:

Webpack is slow and Vite is fast.

That's too simplistic.

Webpack has extensive optimization capabilities and remains widely used.

The better answer is:

Vite uses a different development architecture that can significantly reduce development startup and update overhead, while Webpack provides a highly mature and configurable bundling ecosystem.

Vite vs Create React App

This comparison is increasingly important because many older tutorials still use CRA.

Create React App

create-react-app

was historically a common React project generator.

But:

Create React App was deprecated for new applications by the React team in 2025.

For new projects, use modern React framework tooling or a build tool such as Vite when appropriate.

So:

Old tutorials
    ↓
Create React App

versus:

Modern setup
    ↓
React Framework
       OR
Vite + React

Vite vs Next.js

This is another important architectural comparison.

Vite

Primarily:

Build Tool
+
Development Server

Next.js

A React framework providing a broader application model.

Conceptually:

Vite
│
├── Dev Server
├── Build
└── Tooling

while a framework may provide:

Framework
│
├── Routing
├── Rendering strategies
├── Data loading
├── Build
├── Deployment integration
└── More application conventions

So:

Vite and Next.js aren't direct equivalents.

One is primarily a build tool; the other is an application framework.

When Should You Use Vite?

Vite is a strong choice when you want:

Fast frontend development
+
React
+
Client-side application
+
Control over architecture

Examples:

Admin Dashboard
Internal Enterprise Tool
SPA
Learning Application
Data Visualization
Frontend for REST APIs

When Should You Consider a React Framework?

Consider a framework when the application needs things such as:

Server rendering
Routing conventions
Server-side capabilities
Data-loading architecture
Advanced deployment integration

For a public production website, these requirements may become important.

React's current documentation recommends considering a framework for new applications. React — Creating a React App

Vite + Spring Boot Architecture

This is especially relevant to enterprise Java developers.

Imagine:

                 Browser
                    │
                    ▼
              React + Vite
                    │
                    │ HTTPS
                    ▼
              Spring Boot API
                    │
          ┌─────────┼─────────┐
          ▼         ▼         ▼
       Service    Database   Cache

During development:

React
localhost:5173
      │
      ▼
Vite Proxy
      │
      ▼
Spring Boot
localhost:8080

During production:

Browser
   │
   ▼
CDN / Web Server
   │
   ├── React static assets
   │
   ▼
API Gateway / Backend
   │
   ▼
Spring Boot Microservices

This is a very common enterprise architecture.

Vite Development Flow

Let's visualize the complete development cycle:

Developer
    │
    ▼
Edit App.tsx
    │
    ▼
Save
    │
    ▼
Vite detects change
    │
    ▼
Transform module
    │
    ▼
HMR
    │
    ▼
React Fast Refresh
    │
    ▼
Browser updates

This is why Vite feels fast during development.

Vite Production Flow

Production is different:

Developer
    │
    ▼
npm run build
    │
    ▼
Vite Build
    │
    ├── TypeScript/JSX processing
    ├── Module graph
    ├── Bundling
    ├── Code splitting
    ├── Asset processing
    └── Optimization
    │
    ▼
dist/
    │
    ▼
CDN / Web Server
    │
    ▼
Users

Common Mistakes

Mistake 1: Thinking Vite is React

Incorrect:

Vite = React

Correct:

React = UI library
Vite = development/build tool

Mistake 2: Using Vite as a production server

Normally:

npm run dev

is for development.

Production should use:

npm run build

and deploy the generated assets through appropriate infrastructure.

Mistake 3: Putting secrets in .env

Environment variables exposed to the browser are not secrets.

Mistake 4: Installing unnecessary plugins

Only install plugins that solve actual project requirements.

Every plugin increases:

Complexity
Maintenance
Upgrade risk

Mistake 5: Changing vite.config.ts without understanding it

Configuration should be intentional.

Don't copy a random configuration from Stack Overflow.

Mistake 6: Confusing HMR with production optimization

HMR improves the developer feedback loop.

It doesn't make your production application automatically faster.

Practical Exercise

Create a new project:

npm create vite@latest vite-learning -- --template react-ts

Then:

cd vite-learning
npm install
npm run dev

Exercise 1 — Change the Application

Open:

src/App.tsx

Replace the component with:

function App() {
  return (
    <main>
      <h1>Vite + React</h1>
      <p>
        This application is powered by
        React and Vite.
      </p>
    </main>
  );
}
export default App;

Save the file.

Observe how quickly the browser updates.

Exercise 2 — Inspect the Network

Open browser DevTools.

Go to:

Network

Reload the application.

Observe requests such as:

index.html
src/main.tsx
src/App.tsx

You can use this to understand the development module-loading model.

Don't worry if the exact requests differ between browser/tool versions.

Exercise 3 — Add a Vite Proxy

Assume your Spring Boot API runs on:

http://localhost:8080

Configure a development proxy:

export default defineConfig({
  plugins: [react()],
  server: {
    proxy: {
      "/api": {
        target: "http://localhost:8080",
        changeOrigin: true
      }
    }
  }
});

Then your React code can request:

/api/courses

and Vite can proxy that request during development.

Exercise 4 — Production Build

Run:

npm run build

Then inspect:

dist/

Understand:

src/
   ↓
Vite Build
   ↓
dist/

The src directory is development source code.

The dist directory is generated production output.

Interview questions & answers

Important Architecture Insight

A senior engineer shouldn't think:

Vite makes React fast.

That's incomplete.

Think:

React
   │
   ▼
UI Architecture
Vite
   │
   ├── Development experience
   ├── Module transformation
   ├── HMR
   └── Production build

And:

Browser Performance
       │
       ├── Network
       ├── JavaScript
       ├── Rendering
       ├── Images
       ├── Caching
       └── Application architecture

Vite can contribute to build and delivery optimization, but it doesn't automatically solve every performance problem.

Final Mental Model

Remember this architecture:

                         React Application
                                │
                                ▼
                       ┌─────────────────┐
                       │      Vite       │
                       └─────────────────┘
                                │
               ┌────────────────┼────────────────┐
               ▼                ▼                ▼
         Development        Transformation     Build
            Server              │                │
               │                │                │
               ▼                ▼                ▼
             HMR              JSX/TS          Production
               │              Modules           Assets
               │                │                │
               ▼                ▼                ▼
            Browser         Browser Code       dist/
                                │                │
                                └───────┬────────┘
                                        ▼
                                     Deploy

The most important sentence from this lesson is:

React defines how we build the UI; Vite provides the modern development and build infrastructure that turns that source code into something we can develop and deploy efficiently.

Next Lesson

**Vite Project Structure & Configuration**

Next we'll go deeper into:

vite.config.ts
       │
       ├── Plugins
       ├── Server
       ├── Proxy
       ├── Aliases
       ├── Environment
       ├── Build
       └── Dependency Optimization

We'll also build a React + Vite + TypeScript + Spring Boot development setup so you understand how the frontend and backend work together in a real enterprise application.