Skip to content

Migration playbook: Create React App (CRA) → Vite / Next.js

Create React App (CRA) to Vite or Next.js migration

Move off deprecated Create React App to Vite or Next.js for faster local development and builds.

Migration drivers

Why teams make this move

Driver 01

Deprecated tooling

The React team deprecated Create React App in 2025, so react-scripts and its dependency tree no longer get updates.

Driver 02

Slow dev server

Long Webpack cold starts and slow hot reloads.

Driver 03

No server rendering

A client-only SPA that search engines and social previews see as an empty shell.

Execution sequence

How the migration runs

Each phase ends with a check you can verify — data parity, error rates, latency — and the rollback path is agreed before any traffic moves.

  1. 01Phase

    Dependencies and environment variables

    Replacing react-scripts with Vite plugins and renaming REACT_APP_ variables to VITE_ or NEXT_PUBLIC_.

  2. 02Phase

    index.html and entry points

    Moving index.html to the project root and loading the app as an ES module.

  3. 03Phase

    TypeScript and linting

    Updating tsconfig and ESLint, and replacing Babel with esbuild or SWC.

  4. 04Phase

    CI pipeline

    Updating build steps and caches for the new toolchain.

Risk prevention

Pitfalls that derail this migration

Risk 01

Node.js global and Buffer polyfills

CRA polyfilled Node built-ins automatically; Vite follows browser standards and needs explicit polyfills.

Risk 02

CommonJS vs ESM imports

Legacy packages that need specific optimizeDeps settings in vite.config.ts.

Risk 03

Import path aliases

Forgetting to mirror tsconfig paths in the resolve.alias setting of vite.config.ts.

Before and after

What we measure

We take a baseline before any change and report the same numbers after cutover, from your own tools. They are the evidence of whether the migration worked — not figures promised in advance.

Dev start
Cold start of the dev server, before and after
Build time
CI build duration, from your pipeline history
Dependency alerts
npm audit results once react-scripts is gone

Questions

Frequently asked migration questions

If the app is an internal dashboard where SEO doesn't matter, Vite is the shorter path. If you need SEO, fast first loads or server rendering, move to Next.js.

For an app with few Webpack customizations it is usually a small project; an ejected config, Node polyfills and the Jest setup add to it. We confirm the estimate after reading your config and test setup.

Rehearse the cutover before the real one

Tell us about your data volume, traffic and timeline. An engineer will reply within one business day to set up a call about the migration plan and its rollback path.