Hey there! 👋 If you’ve been using Create React App (CRA) for your React projects, you might have heard the news: CRA is now deprecated. While it’s not disappearing overnight, it’s no longer receiving updates, which means it’s time to consider moving to a more modern tool. That’s where Vite comes in a fast and efficient build tool.
In this guide, I’ll walk you through migrating your project from CRA to Vite. Let’s get started!
Why Should You Migrate to Vite?
Before we dive into the migration steps, let’s talk about why Vite is worth considering:
1. Speed: Vite uses modern ES Modules and esbuild, which means your dev server starts up almost instantly, and hot reloads are lightning-fast.
2. Modern Tooling: Vite is built with the latest web standards, so you’re not just keeping up—you’re staying ahead.
3. Simplicity: Vite’s configuration is minimal and straightforward, making it easier to set up and maintain compared to CRA.
4. Security: since CRA is deprecated, it won’t receive security updates. Migrating to Vite ensures your project stays secure and up-to-date.
5. Better Developer Experience: from faster builds to a more intuitive setup, Vite makes development smoother and more enjoyable.
The Risks of Staying with CRA
Sticking with a deprecated tool like CRA isn’t just inconvenient, it can also pose risks:
- Security Vulnerabilities: without updates, your project could become vulnerable to security issues.
- Lack of Support: you won’t have access to new features, bug fixes, or community support.
- Compatibility Issues: over time, CRA might not work well with newer libraries or dependencies.
- Technical Debt: delaying the migration will only make it harder to switch later.
Migrating to Vite isn’t just about keeping up with trends, it’s about ensuring your project remains secure, maintainable, and future-proof.
Step-by-Step Migration Guide
Let’s walk through the process of migrating your project from CRA to Vite.
1. Back Up Your Project
Before making any changes, make sure to back up your project. It’s always better to be safe!
2. Remove CRA and Install Vite
First, let’s remove CRA and install Vite. Run these commands in your project’s root directory:
npm uninstall react-scripts # Removes CRA
npm install vite @vitejs/plugin-react --save-dev
This removes react-scripts (the core of CRA) and installs Vite along with its React plugin.
3. Create a vite.config.js File
Next, create a vite.config.js file in the root of your project. This is where you’ll configure Vite. Here’s a basic setup to get you started:
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
export default defineConfig({
plugins: [react()],
});
4. Update Your package.json Scripts
Now, update the scripts in your package.json to use Vite:
"scripts": {
"start": "vite",
"build": "vite build",
"serve": "vite preview"
}
5. Move and Update Your index.html
In CRA, your index.html file is located in the public folder. With Vite, it needs to be moved to the root of your project. You’ll also need to update any references to %PUBLIC_URL%. Here’s an example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My React App</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/index.jsx"></script>
</body>
</html>
Notice how %PUBLIC_URL% is gone? Vite handles paths differently, so you can use relative paths like /favicon.ico instead. I received a lot of errors because I forgot to change this.
6. Check Your Imports and File Extensions
Vite uses ES Modules by default, so double-check your imports to ensure they’re correct. If you’re using JSX, rename your .js files to .jsx (or .tsx for TypeScript).
7. Start the Dev Server
Once everything’s in place, start your dev server:
npm start
If all goes well, you should see your app running smoothly with Vite. 🎉
Bonus: Migrating to Vitest for Testing
If you’re using Jest for testing, you’ll appreciate Vitest. It’s built by the Vite team and is designed to work seamlessly with Vite. Plus, it’s fast and lightweight. Here’s how to make the switch.
1. Install Vitest
First, add Vitest to your project:
npm install vitest --save-dev
2. Configure Vitest
Update your vite.config.js to include Vitest’s configuration:
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
export default defineConfig({
plugins: [react()],
test: {
globals: true,
environment: 'jsdom',
},
});
3. Update Your Test Scripts
In your package.json, replace your Jest scripts with these:
"scripts": {
"test": "vitest",
"coverage": "vitest run --coverage"
}
4.Migrate Your Tests
Most Jest tests will work in Vitest without any changes. If you’re using Jest-specific functions like jest.mock, Vitest has you covered—just replace jest with vi:
import { vi, expect, test } from 'vitest';
test('example test', () => {
vi.mock('./myModule');
expect(1 + 1).toBe(2);
});
5. Run Your Tests
Finally, run your tests to make sure everything’s working:
npm test
That's all đź‘‹
Migrating from Create React App to Vite is a smart move for any React project. You’ll benefit from faster builds, a better development experience, and the peace of mind that comes with using a modern, actively maintained tool. Plus, with Vitest, your tests will run faster and more efficiently.
Top comments (0)