DEV Community

Cover image for Migrate from Create-React-App to Vite
Alexander Polozhevets
Alexander Polozhevets

Posted on

Migrate from Create-React-App to Vite

#webdev #react #javascript #vite

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 and yarn 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 strict node_modules layout means your code can't access packages you haven't explicitly declared in your package.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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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 your vite.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)