DEV Community

Cover image for 🚀 How I Migrated My Frontend Project to Vite (and Why You Should Too)
Devam Chaudhari
Devam Chaudhari

Posted on

🚀 How I Migrated My Frontend Project to Vite (and Why You Should Too)

#webdev #react #vite #vercel

Recently, I decided to give my project a serious performance boost by migrating from Create React App (CRA) with Webpack to Vite.

I’d been hearing about Vite’s insane speed and developer experience for months — and yes, it totally lived up to the hype.

Here’s my full migration story, including upgrading Node.js, modernizing SCSS, updating TypeScript paths, and making Vite work with my existing setup.

🧐 Why I Switched

CRA served me well for years, but lately:

  • Slow dev server start — waiting 20–40s just to load the app.
  • Sluggish HMR — changes took seconds to reflect, breaking flow.
  • Longer builds, heavier output.

Vite, on the other hand:

  • Near-instant startup (native ES modules in dev)
  • Millisecond HMR
  • Simpler config & smaller builds

📦 Step 1 – Upgrade Node.js

Vite works best on modern Node versions.
I upgraded from Node 18 → Node 22:

nvm install 22
nvm use 22
Enter fullscreen mode Exit fullscreen mode

This ensures maximum compatibility and speed.

🧹 Step 2 – Remove CRA (react-scripts)

CRA’s react-scripts is no longer needed. I uninstalled it:

npm uninstall react-scripts
Enter fullscreen mode Exit fullscreen mode

And removed CRA-specific config files like serviceWorker.js if not used.

📂 Step 3 – Install and Configure Vite 

npm install vite @vitejs/plugin-react --save-dev
npm install path --save
Enter fullscreen mode Exit fullscreen mode

Then I created 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'),
    },
  },
});
Enter fullscreen mode Exit fullscreen mode

🖊 Step 4 – Update TypeScript Config

In tsconfig.json, I adjusted the paths to remove the "./" prefix, and made sure to include Vite’s type declarations:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": ["src", "src/vite-env.d.ts"]
}
Enter fullscreen mode Exit fullscreen mode

This ensures TypeScript recognizes the alias and Vite’s types.

🎨 Step 5 – Migrate SCSS (with Automation)

Vite supports SCSS out of the box, but I also updated some old Sass syntax to match the modern spec.

Instead of manually editing dozens of files, I used the Sass migrator:

npm install -g sass-migrator
sass-migrator module --migrate-deps src/**/*.scss
Enter fullscreen mode Exit fullscreen mode

This automatically replaced deprecated @import with modern @use & @forward.

⚙️ Step 6 – Environment Variables

Vite requires env variables to be prefixed with VITE_.

Example change:

REACT_APP_API_URL → VITE_API_URL
Enter fullscreen mode Exit fullscreen mode

And accessed in code via:

import.meta.env.VITE_API_URL
Enter fullscreen mode Exit fullscreen mode

📜 Step 7 – Update Scripts in package.json 

"scripts": {
  "dev": "vite",
  "build": "vite build",
  "preview": "vite preview"
}
Enter fullscreen mode Exit fullscreen mode

🚀 Step 8 – Test & Deploy

Locally:

npm run dev
Enter fullscreen mode Exit fullscreen mode

Blazing fast — <1s startup time. 🎉

Production:

npm run build
Enter fullscreen mode Exit fullscreen mode

On Vercel, I just updated the build command to:

npm run build
Enter fullscreen mode Exit fullscreen mode

and set the output directory to dist/.

📈 Results After Migration

Metric CRA (Webpack) Vite
Dev Start 28s < 1s
HMR Update 2–3s < 100ms
Prod Build ~50s ~12s
Bundle Size ~1.3MB ~900KB

💡 Tips

  • Upgrade Node.js before switching
  • Remove CRA packages completely
  • Add path alias in vite.config.js
  • Update tsconfig.json to include vite-env.d.ts
  • Automate SCSS migration instead of doing it manually
  • Check dependencies for ES module support

🎯 Final Thoughts

Migrating to Vite gave me an instant speed boost, cleaner config, and a more enjoyable dev experience.
If you’re tired of slow builds and outdated tooling, this upgrade is worth every minute.

Top comments (0)