03 — Vite and the React Tooling Story — Why Nobody Uses create-react-app Anymore

"The tooling just works" was my React-tooling stance, which made the CRA-to-Vite shift look like fashion. The shift worth understanding: Vite replaced create-react-app as the default React starter because it's built around native ES modules in dev and esbuild/Rollup for the bundle, which means near-instant cold starts and hot-reload that actually feels hot. [1][2] The CRA era died because its dev server re-bundled the entire app on every change; Vite doesn't.

What a React app actually needs from its tooling

Before picking a tool, I had to see what the tool is doing. A modern React app needs four things out of the box:

• A dev server that serves the app over HTTP during development and rebuilds on save.
• Hot Module Replacement (HMR) — swap just the changed module into the running page without a full reload, preserving component state.
• A JSX/TypeScript compiler — browsers don't speak JSX or TS, so the tool converts (transpiles) it on the fly.
• A production bundler — for the final build, tree-shake (drop the code you don't use) and minify (shrink) everything into static assets.

create-react-app bundled all four behind a react-scripts black box, and it did it by re-running Webpack over the whole dependency graph whenever anything changed. On a large app that meant a 30-second cold start and multi-second reloads. That slowness is what killed it.

Why Vite is fast

Vite's core trick is the split between dev and build [1][2]:

• In dev, Vite serves the app unbundled. The browser loads modules natively (<script type="module">), and Vite only transpiles the module the browser asks for — on demand, one file at a time, using esbuild (which is orders of magnitude faster than Babel). Cold start time scales with the page you're viewing, not the size of node_modules.
• For the production build, Vite uses Rollup to produce the optimized bundle — tree-shaken, code-split, minified.

The practical effect: npm run dev is up before I've finished alt-tabbing to the browser, and edits show up in the page within milliseconds. That speed isn't a luxury; it changes how it feels to iterate.

Starting a project today

The roadmap's CLI section points at Vite as the default [1][3], and the command is one line. Vite ships official React templates for both JavaScript and TypeScript:

npm create vite@latest my-app -- --template react-ts
cd my-app && npm install && npm run dev

That's the whole onboarding. There's no react-scripts eject cliff — the build config is right there in vite.config.ts, and I can extend it with plugins (React Fast Refresh, path aliases, environment variables) without fighting an opaque wrapper.

One caveat the roadmap implicitly assumes: if I'm building a full app with routing, SSR (server-side rendering), and API routes, Vite alone isn't the whole answer — that's where Next.js or Remix (now folded into React Router v7) come in. Vite is the build tool underneath many of them, and it's the right default for a client-rendered SPA. The notes on SSR frameworks cover that layer.

How I use this

For any new client-rendered React project, I reach for npm create vite with the react-ts template, full stop. I haven't touched create-react-app in years, and I'd treat its presence in a codebase as a signal to migrate. When the project outgrows an SPA — needs server rendering, file-based routes, a backend — that's the moment to move to Next.js or a Vite-based meta-framework, not to bolt complexity onto a bare Vite setup. And because Vite is the engine under so many of those meta-frameworks, learning its config model pays off everywhere downstream.

References

[1] Vite team, "Vite — Next Generation Frontend Tooling," vitejs.dev, 2024. [Online]. Available: https://vitejs.dev

[2] Vite team, "Why Vite," Vite Docs, 2024. [Online]. Available: https://vitejs.dev/guide/why.html

[3] Vite team, "Getting Started with Vite," Vite Docs, 2024. [Online]. Available: https://vitejs.dev/guide/

[4] E. You, "Vite Crash Course," YouTube, 2023. [Video]. Available: https://youtu.be/LQQ3CR2JTX8

[5] T. Vejraka, "Vite Crash Course — Faster Alternative To CRA," YouTube, 2023. [Video]. Available: https://www.youtube.com/watch?v=89NJdbYTgJ8