Why I Switched from Create React App to Vite

If you've been building React apps for a while, you've almost certainly used Create React App (CRA). It was the go-to solution for years — zero config, batteries included, and it just worked. But if you've noticed your dev server taking 30+ seconds to start, or hot reloads lagging behind your keystrokes, you're not alone.

I made the switch to Vite six months ago and it completely changed how I work.

The Problem with CRA

CRA uses Webpack under the hood. Webpack bundles your entire application before serving it — even in development. As your app grows, this means longer and longer cold starts. On a mid-size project with ~200 components, I was waiting 45 seconds just to see my app in the browser.

# CRA cold start (typical mid-size project)
> react-scripts start
Starting the development server...  # 45 seconds later...

Hot module replacement (HMR) was also sluggish. Changes to a component would take 3–5 seconds to reflect — long enough to break your flow completely.

Enter Vite

Vite takes a fundamentally different approach. Instead of bundling everything upfront, it serves source files over native ES modules. The browser does the module resolution, and Vite only transforms what's actually needed.

# Vite cold start
> vite
  VITE v5.0.0  ready in 312ms
  ➜  Local: http://localhost:5173/

312ms. On the same project.

What Actually Changed for Me

1. Faster feedback loop

HMR is near-instant — typically under 50ms. I type, I see. That tightness completely changes how you work. You stop context-switching while waiting for changes to reflect.

2. Simpler config

vite.config.ts is lean compared to a Webpack config. Here's a typical setup:

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

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: { '@': '/src' }
  }
})

Compare that to a custom Webpack config and you'll appreciate the difference.

3. TypeScript out of the box

Vite handles TypeScript natively without extra config. No ts-loader, no babel-loader chain. It just works.

Migration Steps

Moving from CRA to Vite is straightforward for most projects:

Remove react-scripts, install vite and @vitejs/plugin-react
Move index.html from /public to root
Add type="module" to your script tag
Replace process.env.REACT_APP_* with import.meta.env.VITE_*
Create vite.config.ts

The whole migration took me about 2 hours on a project with 150+ components.

Conclusion

If you're still on CRA, there's no reason not to switch. Vite is faster, simpler, and better maintained. The React ecosystem has largely moved on — and so should you.

The 312ms cold start alone is worth it.