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.

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

Create a Vite‑React project with the official scaffolding.

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

Add a Node debugging script.

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

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.

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')
)

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.

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
}

The plugin injects runtime code into index.html to create a hot context, register components with RefreshRuntime.register, and trigger updates via RefreshRuntime.performReactRefresh.

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

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.