Migration guide
Create React App → Vite, step by step.
Create React App is deprecated and no longer recommended for new apps. Vite is where most projects land: a 10–100× faster dev server, smaller production builds, native ESM. Four things actually move during the migration: where index.html lives, what your env vars are named, how SVGs import, and the build config. Here's each one.
Refactyl doesn't migrate Create React App to Vite yet. This guide covers the manual path; the waitlist notifies you when the verified engine ships.
Why this migration is hard to get right
process.env.REACT_APP_* → import.meta.env.VITE_*
CRA exposes env vars prefixed REACT_APP_ via process.env, injected by webpack at build time. Vite uses import.meta.env with a VITE_ prefix. Every environment variable reference and .env file must be updated: a global find-and-replace that's easy to miss in dynamic string concatenation or non-standard .env.local setups.
index.html moves from public/ to root, with changes
CRA keeps index.html in public/ and injects the script bundle automatically. Vite requires index.html at the project root and a <script type='module' src='/src/main.tsx'> tag pointing to the entry file. The %PUBLIC_URL% placeholder, the manifest link, and the noscript fallback all need adjusting.
SVG imports and CRACO/react-scripts overrides
CRA's webpack config auto-handles SVG as React components via SVGR (`import { ReactComponent as Logo } from './logo.svg'`). Vite doesn't do this by default; you need vite-plugin-svgr and the ?react import suffix. Projects using CRACO or react-app-rewired for custom webpack config must map those overrides to Vite plugin equivalents.
How to migrate manually
Remove CRA, install Vite
Uninstall react-scripts. Install vite, @vitejs/plugin-react (or @vitejs/plugin-react-swc for faster builds), and @types/node if you use Node.js path aliases.
Create vite.config.ts
Minimum: `import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; export default defineConfig({ plugins: [react()] })`. Add resolve.alias for your @ or src path aliases. If you used CRACO for proxy, move the proxy config to vite.server.proxy.
Move index.html to the project root
Cut public/index.html to the root. Replace %PUBLIC_URL% with empty string (or your base path). Add `<script type="module" src="/src/main.tsx"></script>` (or main.jsx) before </body>. Remove any react-scripts-specific meta tags.
Rename REACT_APP_ env vars to VITE_
In every .env, .env.local, .env.production file: rename REACT_APP_* → VITE_*. In source code: replace process.env.REACT_APP_* → import.meta.env.VITE_*. Check .env.example and CI environment variables too.
Fix SVG imports
Install vite-plugin-svgr. Add svgr() to vite.config.ts plugins. Update import syntax: `import { ReactComponent as Logo } from './logo.svg'` → `import Logo from './logo.svg?react'`. For plain URL imports (src={logoSrc}), no change needed.
Update package.json scripts and run vite build
Replace `react-scripts start` → `vite`, `react-scripts build` → `vite build`, `react-scripts test` → `vitest` (see the Jest to Vitest guide), `react-scripts eject` → no equivalent (Vite is already config-first). Run `vite build` and fix any remaining import errors.
What Refactyl's verified version will do
Roadmap
Refactyl doesn't run this migration yet. When it ships, the bar will be the same as every other Refactyl path: every file gated by a real vite build run, repaired until clean, or clearly flagged with the reason. No unverified files ship.
The public benchmark methodology is at refactyl.com/benchmark . The same dual-metric approach will apply here.
Manual / DIY vs Refactyl (roadmap)
This table describes what Refactyl's Create React App→Vite engine will do. It isn't live yet.
| Concern | Manual / DIY | Refactyl (roadmap) |
|---|---|---|
| Dev server startup | CRA webpack: 15–60s cold start for medium projects | Vite native ESM: under 500ms; HMR stays fast as project grows |
| REACT_APP_ → VITE_ rename | Manual find-and-replace across source, .env files, and CI config | Will rename across all files including .env.* and dynamic string references |
| index.html migration | Move file, rewrite manually, find the right script tag | Will restructure the file with correct entry-point injection |
| SVG import syntax | Each `{ ReactComponent }` import manually updated to ?react suffix | Will detect all SVGR import patterns and rewrite them in batch |
| Verification gate | CI catches build failures after you merge | A passing vite build will be required before delivery |
FAQ
Create React App → Vite migration: common questions
Real questions engineers ask before migrating Create React App to Vite, answered honestly.
On the roadmap
Want Refactyl to do this for you?
Join the waitlist and we'll notify you when the Create React App→Vite engine ships. The bar is the same as every other Refactyl path: every file gated by a real vite build run before handoff.
Refactyl doesn't migrate Create React App to Vite yet. No misleading trial, no fake demo.
Other migrations