How to Migrate from Create React App to Vite: A Complete Guide

Introduction

For years, Create React App (CRA) was the industry standard for starting new React projects. However, as web development has evolved, so have our tooling requirements. Today, Vite has emerged as the clear successor to CRA, offering lightning-fast server starts and highly optimized production builds. If you are still relying on react-scripts, migrating to Vite is the best way to supercharge your development workflow.

Why Migrate to Vite?

Moving away from CRA is not just about following trends; it is about tangible performance gains:

Faster Development: Unlike CRA, which bundles your entire application before starting the server, Vite uses native ES modules to serve code on-demand. This leads to near-instant HMR (Hot Module Replacement).
Optimized Build Performance: Vite leverages Rollup for production, which results in smaller, more efficient code bundles compared to Webpack-based CRA builds.
Modern Developer Experience: Enjoy improved error reporting, seamless support for TypeScript, and better integration with modern browser features.

Manual Migration Steps

While automation tools exist, performing a manual migration ensures a clean project structure and helps you understand your project's dependencies better.

1. Create a New Vite Project

Instead of patching your existing node_modules, it is best to initialize a fresh Vite environment:

npm create vite@latest my-vite-app --template react
cd my-vite-app
npm install

2. Migrate Source Files

Copy your src/ folder and public/ assets from your old CRA directory into the new Vite project. Be sure to verify your file extensions; Vite works best with .jsx or .tsx files.

3. Update Dependencies

Remove legacy CRA dependencies and install the Vite ecosystem packages:

npm uninstall react-scripts
npm install -D vite @vitejs/plugin-react

4. Configure index.html

Vite treats index.html as a source file located in the project root. Move it out of the public/ folder and ensure your script tag is updated:

Html

<script type="module" src="/src/main.jsx"></script>

5. Update package.json Scripts

Swap your old start and build commands for Vite-specific scripts:

Json

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

6. Handling Environment Variables

This is a common pitfall. Vite mandates that all environment variables must be prefixed with VITE_. You will need to:

Rename your existing .env variables from REACT_APP_ to VITE_.
Update your JavaScript code to access them via import.meta.env.VITE_YOUR_VAR instead of process.env.

Automating the Migration

If your project is large and complex, you might consider using the community-driven cra-to-vite tool. It automates much of the boilerplate transformation:

npx cra-to-vite

Note: Always review the changes made by automated tools before committing them to your repository.

Conclusion

Migrating from Create React App to Vite is a high-impact task that pays dividends in developer productivity. Whether you take the manual path to ensure configuration precision or use an automation tool, the result is a faster, leaner, and more modern React application. Start your migration today to future-proof your codebase.