Goodbye CRA, Hello Vite: 개발자를 위한 2026년 마이그레이션 생존 가이드

Source: Dev.to

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. For a typical SPA that doesn’t need the latest nuts and bolts like React Server Components, Vite is the best option.

What is Vite? 🤔

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

Why Choose Vite? ⚒️

Super‑Fast Development

Vite leverages ES modules (ESM) and an optimized dependency pre‑bundling process (esbuild), dramatically reducing cold‑start times compared with CRA.

Instant Hot Reloading

Vite provides truly instant updates with no page reload required, making the development experience smoother and more efficient.

Optimized Builds

Vite uses Rollup for production builds, ensuring efficient tree‑shaking, code‑splitting, and smaller bundle sizes.

Better ESM Support

Vite natively supports ES modules and can handle modern JavaScript without Babel in most cases, leading to significantly faster builds.

No More Webpack Config Hassles

Vite eliminates complex Webpack configurations with a plugin‑based system and a simple vite.config.js file.

Step-by-Step Guide: Migrating CRA to Vite

1. Uninstall Create React App

npm uninstall react-scripts
# or with Yarn
yarn remove react-scripts

2. Install Vite and Necessary Plugins

npm install vite @vitejs/plugin-react --save-dev

3. Update package.json Scripts

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  }
}

4. Move and Modify index.html

Move public/index.html to the project root and replace the script tag with:

5. Create vite.config.js

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

export default defineConfig({
  plugins: [react()],
  build: {
    outDir: 'build', // matches CRA's default output folder
  },
});

6. Update Project Start File

Rename the CRA entry file src/index.js to src/main.jsx (or create a new main.jsx) and adjust imports accordingly.

7. Update Static Asset Handling

CRA:

Vite:

![](/logo.png)

8. Adjust Environment Variables

Rename variables in .env from the REACT_APP_ prefix to VITE_:

# before
REACT_APP_API_KEY=yourapikey

# after
VITE_API_KEY=yourapikey

Access them in code:

const apiKey = import.meta.env.VITE_API_KEY;

9. Handle CSS and Global Styles

Import global CSS explicitly in main.jsx:

import './index.css';

CSS Modules work out of the box:

import styles from './App.module.css';

10. Migrate Testing (If you have Jest tests)

Install Vitest:

npm install vitest --save-dev

Update the test script:

{
  "scripts": {
    "test": "vitest"
  }
}

Add Vitest configuration to vite.config.js:

export default defineConfig({
  // ...other config
  test: {
    globals: true,
    environment: 'jsdom',
    setupFiles: './src/setupTests.js',
  },
});

11. Final Steps: Run Your Vite App!

npm run dev

This starts a fast development server.

Bonus: Deploying to Vercel

When deploying a Vite‑powered React app to Vercel, add a vercel.json to ensure client‑side routes are correctly handled:

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

Wrapping Up: Why This Migration Is Worth It

Migrating from CRA to Vite is a game‑changer. You’ll enjoy faster development, shorter build times, and modern React tooling. With CRA officially deprecated, moving to Vite ensures your React projects stay up‑to‑date and performant.