How Vite Powers React: Deep Dive into Middleware, Transformations, and HMR

Vite is a development server and bundler that uses native ESM support in browsers to provide a fast development experience for major frameworks such as Vue, React, Svelte, and Solid.

1. Start

Clone the Vite source code from GitHub and prepare the environment.

<code>git clone https://github.com/vitejs/vite.git
cd vite
yarn
cd packages/vite
yarn build
yarn link</code>

Create a Vite‑React project with the official scaffolding.

<code>yarn create @vitejs/app my-react-app --template react
yarn link vite
yarn dev</code>

Add a Node debugging script.

<code>"debug": "node --inspect-brk node_modules/vite/dist/node/cli.js"</code>

When the dev server starts, the generated

index.html

contains additional scripts such as

vite/client

and

@react/refresh

, both loaded as ES modules.

2. Middleware

Since Vite 2.x it switched from a Koa model to a native

http

+

connect

middleware stack. Requests are first handled by

connect-history-api-fallback

, then by

indexHtmlMiddleware

, which runs

createDevHtmlTransformFn

to inject the necessary scripts.

devHtmlHook – inserts

/@vite/client.js

for HMR support.

react-refresh – inserts the React Refresh runtime.

3. Transform

All resource requests from the entry

index.html

pass through

transformMiddleware

. The core transformation is performed by the built‑in

vite:esbuild

plugin, which converts JSX to

React.createElement

calls, replacing Babel for this step.

<code>import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import App from './App'

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
)</code>

The transformed code is then processed by the

vite:import-analysis

plugin, which rewrites bare module imports (e.g.,

import React from 'react'

) to real file URLs inside

/node_modules/.vite

and converts CommonJS modules to ESM equivalents.

4. @vitejs/plugin-react-refresh

This plugin replaces

@babel/preset-react

for most React handling and wraps the official

react-refresh

runtime to enable hot updates. Every JSX file is passed through

@babel/core

with a set of plugins that add HMR registration code only to components that need it.

<code>const result = transformSync(code, {
  babelrc: false,
  configFile: false,
  filename: id,
  parserOpts: { sourceType: 'module', allowAwaitOutsideFunction: true, plugins: parserPlugins },
  generatorOpts: { decoratorsBeforeExport: true },
  plugins: [
    require('@babel/plugin-transform-react-jsx-self'),
    require('@babel/plugin-transform-react-jsx-source'),
    [require('react-refresh/babel'), { skipEnvCheck: true }]
  ],
  ast: !isReasonReact,
  sourceMaps: true,
  sourceFileName: id
})

if (!/\$RefreshReg\$\(/.test(result.code)) {
  return code
}</code>

The plugin injects runtime code into

index.html

to create a hot context, register components with

RefreshRuntime.register

, and trigger updates via

RefreshRuntime.performReactRefresh

.

<code>import RefreshRuntime from "/@react-refresh"
RefreshRuntime.injectIntoGlobalHook(window)
window.$RefreshReg$ = () => {}
window.$RefreshSig$ = () => type => type
window.__vite_plugin_react_preamble_installed__ = true</code>

5. Summary

Vite scans the entry file, pre‑bundles dependencies, builds a module graph, and then uses a chain of plugins to transform source code, rewrite imports, and provide React‑specific HMR support. The result is a fast, module‑aware development environment for React applications.