DEV Community

Cover image for Goodbye CRA, Hello Vite: A Developer’s 2026 Survival Guide For Migration
Sanchit Bajaj
Sanchit Bajaj

Posted on

Goodbye CRA, Hello Vite: A Developer’s 2026 Survival Guide For Migration

#react #webdev #vercel #vite

Hey Developers 👋 for years, Create React App (CRA) was the go-to tool for setting up React projects quickly. However, as of Feb 2025, CRA is officially sunset. The React team no longer recommends using it due to slow build times, outdated configurations, and lack of support for modern features like ES modules and native ESM-compatible dependencies.

If you are still using CRA, it’s time to migrate. I have worked with a lot of teams, and in my opinion if you have a SPA application that doesn’t need the latest nuts and bolts like React Server Components, then Vite is the best option.

What is Vite? 🤔

Vite a fast, modern build tool that offers instant hot module replacement (HMR), optimized builds, and better DX (Developer Experience). It aims to provide a faster and leaner development experience for modern web projects.

In this guide, I walk through how to migrate your existing CRA project to Vite in just a few simple steps.

Why Choose Vite? ⚒️

Vite, developed by the Vue.js creator Evan You, has quickly become the preferred choice for modern frontend development. Here’s why:

  • ### Super-Fast Development

Vite leverages ES modules (ESM) and an optimized dependency pre-bundling process, making development incredibly fast. Unlike CRA, which processes all dependencies at runtime, Vite pre-bundles dependencies using esbuild, significantly reducing cold-start times. This means near-instant feedback when making changes.

  • ### Instant Hot Reloading

Unlike CRA, where hot module replacement (HMR) can sometimes be slow or unreliable, Vite provides truly instant updates with no page reload required. Changes are reflected in real time, making the development experience smoother and more efficient.

  • ### Optimized Builds

Vite uses Rollup as its bundler for production builds, ensuring efficient tree-shaking, code-splitting, and smaller bundle sizes. This results in faster load times for end users and better overall application performance.

  • ### Better ESM Support

CRA relies heavily on Webpack and Babel for module bundling, which can introduce unnecessary complexity and slower transpilation times. Vite natively supports ES modules (ESM) and can handle modern JavaScript without needing Babel in most cases, leading to significantly faster builds.

  • ### No More Webpack Config Hassles

Webpack configurations in CRA can be complex and difficult to customize. Vite eliminates this burden with a plugin-based system that provides sensible defaults while allowing easy customization through a simple configuration file (vite.config.js). This makes it much more developer-friendly and flexible.

Step-by-Step Guide: Migrating CRA to Vite

Here is a quick step-by-step guide to move to Vite from your basic CRA app.

Uninstall Create React App

Since we’re moving away from CRA, start by removing the CRA-specific dependencies:

npm uninstall react-scripts
Enter fullscreen mode Exit fullscreen mode

or if you are using yarn

yarn remove react-scripts
Enter fullscreen mode Exit fullscreen mode

Install Vite and Necessary Plugins

Vite requires its own React plugin to handle JSX and React Fast Refresh.

Run the following command:

npm install vite @vitejs/plugin-react --save-dev
Enter fullscreen mode Exit fullscreen mode

Update package.json Scripts

Replace the old CRA scripts in your package.json:

"scripts": {
  "dev": "vite",
  "build": "vite build",
  "preview": "vite preview"
}
Enter fullscreen mode Exit fullscreen mode

Move and Modify index.html

In CRA, the index.html file is inside public/. Vite requires it at the project root.

Move public/index.html to the root folder and update the script tag:

<script type="module" src="/src/main.jsx"></script>
Enter fullscreen mode Exit fullscreen mode

Create vite.config.js

To customize your Vite setup, create a vite.config.js file in the root:

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

export default defineConfig({
  plugins: [react()],
  build: {
    outDir: 'build', // CRA's default build output
  },
});
Enter fullscreen mode Exit fullscreen mode

Update Project Start File

In CRA, the start project start will be index.js. Rename it to main.jsx.

Update Static Asset Handling

CRA automatically serves files inside public/. In Vite, reference static assets directly in public/ or import them in JavaScript.

CRA:

<img src={process.env.PUBLIC_URL + "/logo.png"} />
Enter fullscreen mode Exit fullscreen mode

Vite:

<img src="/logo.png" />
Enter fullscreen mode Exit fullscreen mode

Adjust Environment Variables

CRA uses REACT_APP_ prefixes for environment variables, but Vite uses VITE_.

Rename .env variables from:

REACT_APP_API_KEY=yourapikey
Enter fullscreen mode Exit fullscreen mode

To:

VITE_API_KEY=yourapikey
Enter fullscreen mode Exit fullscreen mode

And access them as follows:

const apiKey = import.meta.env.VITE_API_KEY;
Enter fullscreen mode Exit fullscreen mode

Handle CSS and Global Styles

If your CRA project relies on index.css, import it explicitly inside main.jsx:

import './index.css';
Enter fullscreen mode Exit fullscreen mode

For CSS Modules, Vite supports .module.css files out of the box:

import styles from './App.module.css';
Enter fullscreen mode Exit fullscreen mode

Migrate Testing (If you have Jest tests)

If you’re using Jest, you might want to switch to Vitest, a testing framework optimized for Vite.

Install Vitest:

npm install vitest --save-dev
Enter fullscreen mode Exit fullscreen mode

Update package.json test script:

"scripts": {
  "test": "vitest"
}
Enter fullscreen mode Exit fullscreen mode

Configure Vitest in vite.config.js

test: {
  globals: true,
  environment: 'jsdom',
  setupFiles: './src/setupTests.js',
},
Enter fullscreen mode Exit fullscreen mode

Final Steps: Run Your Vite App!

You’re now ready to start your new Vite-powered React app! Run:

npm run dev
Enter fullscreen mode Exit fullscreen mode

This starts a fast development server.

Bonus: If you are getting issue hosting it!

When you deploy a Vite-powered React app to Vercel, there’s one small but important extra step: you need to tell Vercel how to handle your client-side routes. Since Vite apps use React Router for navigation, the browser updates the URL (like /about or /dashboard) but still expects the React app to load from the same index.html file. Vercel, on the other hand, tries to find an actual file at that path—and if it doesn’t exist, it shows a 404. To fix this, we add a simple vercel.json configuration that tells Vercel: “If you don’t find the requested file, just serve index.html and let the React app handle the routing.” This ensures that page refreshes, direct links, and deep links all work perfectly in your migrated Vite app.

{
  "rewrites": [
    {
      "source": "/(.*)",
      "destination": "/index.html"
    }
  ]
}
Enter fullscreen mode Exit fullscreen mode

Wrapping Up: Why This Migration is Worth It

Migrating from CRA to Vite is a game-changer. You will experience faster development, better build times, and modern React tooling. With CRA officially deprecated, moving to Vite ensures your React projects stay up-to-date with the latest best practices.

If you have read it till now, thank you so much for reading!, please leave your comments if any ✌️

Don't forget to bookmark this blog for the future 📌

Connect with the author:

Top comments (0)