From Create React App to Vite: The Why and How
If you've been in the React ecosystem for a while, you're probably familiar with Create React App (CRA). For years, it was the go-to tool for bootstrapping new React projects. But the web moves fast, and today, there's a new champion of developer experience: Vite (pronounced "veet").
CRA is no longer actively maintained, and even the React team recommends other tools. If you're still using CRA, you're missing out on a faster, more modern development workflow.
This guide will walk you through why you should migrate and how to do it in the most painless way possible.
Why Ditch Create React App?
The difference is night and day. Here's why you'll love Vite:
- Blazing Speeds: Vite's dev server is built on native ES modules (ESM), which means it serves your code directly to the browser without a slow, heavy bundling step. This results in near-instant server start-up and lightning-fast Hot Module Replacement (HMR). No more waiting minutes for your project to load!
- A Better Developer Experience: Say goodbye to the "black box" of
react-scripts
. Vite's configuration is simple, transparent, and easy to extend. You get out-of-the-box support for modern features like TypeScript, JSX, and CSS pre-processors without the headache. - It's the Future: The ecosystem is rapidly moving towards modern, ESM-based tooling. Vite is at the forefront of this shift, and its popularity is soaring.
Level Up Your Package Manager: Why You Should Use pnpm
While you're upgrading your build tool, you should also consider your package manager. If you're coming from CRA, you're likely using npm
or yarn
. It's time to switch to pnpm.
Why pnpm?
- Massive Disk Space Savings:
npm
andyarn
duplicate packages across your projects.pnpm
uses a single, global content-addressable store and links files to your projects. This means you'll only ever have one copy of a package version on your disk, saving gigabytes of space. - Blazing-Fast Installs: Thanks to its efficient linking strategy,
pnpm
is significantly faster than its counterparts, especially when installing packages you've used before. - No More Phantom Dependencies:
pnpm
's strictnode_modules
layout means your code can't access packages you haven't explicitly declared in yourpackage.json
. This prevents a whole class of bugs and makes your projects more reliable.
A Quick Comparison:
Feature | npm / Yarn Classic | pnpm |
---|---|---|
Speed | Slow to Medium | Fast |
Disk Space | High (duplicates) | Efficient (linking) |
node_modules |
Flat (allows phantom deps) | Strict (no phantom deps) |
To get started, install it globally: npm install -g pnpm
. Then, simply use pnpm
commands (pnpm install
, pnpm add
, etc.) instead of npm
or yarn
.
How to Migrate: A Simple, Step-by-Step Guide
Migrating doesn't have to be a week-long ordeal. For most projects, you can get it done in under an hour. Here's the simplest way to do it:
Step 1: Create a New Vite Project
To ensure a clean setup, we'll start a new Vite project from scratch.
pnpm create vite your-new-app --template react
Step 2: Move Your Source Files
Copy your src
folder from your old CRA project directly into your new Vite project, replacing the existing src
folder.
If you have assets (like images or fonts) in your CRA public
folder, move them into the public
folder in your new Vite project.
Step 3: Update Your Dependencies
Open the package.json
from your old project and copy your dependencies
over to the new package.json
.
Important: Do not copy react-scripts
. This is a CRA-specific package that you no longer need.
Now, install the dependencies in your new project:
pnpm install
Step 4: Adjust Your index.html
This is a key difference. CRA keeps index.html
in the public
folder, while Vite keeps it in the root.
Open index.html
in your new project and make sure the script tag points to your main entry file:
<!-- index.html -->
<body>
<div id="root"></div>
<script type="module" src="/src/index.jsx"></script>
</body>
Notice there's no need for %PUBLIC_URL%
anymore. It just works.
Step 5: Update Environment Variables
If you use environment variables, you'll need to change the prefix from REACT_APP_
to VITE_
.
For example, REACT_APP_API_KEY
becomes VITE_API_KEY
.
You'll also need to update how you access them in your code:
// Before (CRA)
const apiKey = process.env.REACT_APP_API_KEY;
// After (Vite)
const apiKey = import.meta.env.VITE_API_KEY;
Common Gotchas (and Easy Fixes)
- JSX in
.js
files: Vite is stricter than CRA. If you're using JSX, your file needs a.jsx
or.tsx
extension. A quick rename is all you need. -
Path Aliases: If you want cleaner imports (e.g.,
import Component from '@/components/MyComponent'
), you can set up path aliases in yourvite.config.js
:
// vite.config.js import { defineConfig } from 'vite' import react from '@vitejs/plugin-react' import path from 'path' export default defineConfig({ plugins: [react()], resolve: { alias: { '@': path.resolve(__dirname, './src'), }, }, })
SVGs as Components: If you were importing SVGs as React components in CRA, you'll need a plugin for Vite.
vite-plugin-svgr
is a great choice.
Conclusion
Migrating from Create React App to Vite is one of the highest-leverage changes you can make to improve your development workflow. You'll get a faster, more modern toolchain that will make you a more productive and happier developer.
When you do this with one project, you'll want to migrate your entire legacy! Take your time :)
If this guide helped you, consider buying me a coffee ☕️
Top comments (0)