Why and How to Migrate Your React App from CRA to Vite

1. vite

   1 906 72,829 9.9 TypeScript

   Next generation frontend tooling. It's fast!

   

   Vite is a modern frontend build tool created by Evan You (creator of Vue.js). Vite is framework agnostic and works on a plugin based approach.

2. SurveyJS

   surveyjs.io featured

   JavaScript Form Builder with No-Code UI & Built-In JSON Schema Editor. Add the SurveyJS white-label form builder to your JavaScript app (React/Angular/Vue3). Build complex JSON forms without coding. Fully customizable, works with any backend, perfect for data-heavy apps. Learn more.

   

3. create-react-app

   2 604 103,237 6.8 JavaScript

   Set up a modern web app by running one command.

   

   At the time(10/06/2024) of writing this article, CRA has been effectively in a semi-dead state for the past two years. It has not received any commits since last year nor has it received any important commits for the past two years in CRA commit history. Issues have been pilling and none of them are being addressed in CRA issues.

4. core

   3 361 50,129 9.7 TypeScript

   🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web. (by vuejs)

   

   Vite is a modern frontend build tool created by Evan You (creator of Vue.js). Vite is framework agnostic and works on a plugin based approach.

5. vitest

   4 153 14,334 9.9 TypeScript

   Next generation testing framework powered by Vite.

   

   I will not go into detail about migrating your unit tests, as every project has its own test setup, and generalizing it would be very difficult. You can read and learn more about both of them in JEST docs and Vitest docs.

6. vite-plugin-react

   5 6 720 9.2 TypeScript

   The all-in-one Vite plugin for React projects.

   

   As Vite works on a plugin based approach, we will have to install one of the two official React plugins. You can read more about them and choose the one that suits your needs from here @vitejs/plugin-react and @vitejs/plugin-react-swc

7. vite-plugin-react-swc

   6 6 964 7.6 TypeScript

   Speed up your Vite dev server with SWC

   

   As Vite works on a plugin based approach, we will have to install one of the two official React plugins. You can read more about them and choose the one that suits your needs from here @vitejs/plugin-react and @vitejs/plugin-react-swc

8. vite-tsconfig-paths

   7 7 1,479 8.6 TypeScript

   Support for TypeScript's path mapping in Vite

   

   To resolve imports using TypeScript's path mapping you will have to use one of the community plugins for Vite. You can read more about it here vite-tsconfig-paths

9. InfluxDB

   www.influxdata.com featured

   InfluxDB – Built for High-Performance Time Series Workloads. InfluxDB 3 OSS is now GA. Transform, enrich, and act on time series data directly in the database. Automate critical tasks and eliminate the need to move data externally. Download now.

   

10. Rollup

    8 87 25,774 9.5 JavaScript

    Next-generation ES module bundler

    

    Vite is not a bundler but a frontend tool that intelligently uses ESBuild and Rollup for their best use cases.

11. vite-plugin-svgr

    9 7 636 5.7 TypeScript

    Vite plugin to transform SVGs into React components

    

    You can check out vite-plugin-svgr to learn more about how to install and use svgr() and all the configuration options that it exposes.

12. browserslist

    10 57 13,269 8.0 JavaScript

    🦔 Share target browsers between different front-end tools, like Autoprefixer, Stylelint and babel-preset-env

    

    For a production build, you are likely using Browserslist, by default Vite targets browsers that support native ES Modules, native ESM dynamic import, and import.meta.

13. Next.js

    11 2,336 131,986 10.0 JavaScript

    The React Framework

    

    Here is the tricky situation and that's why CRA is in a semi-dead state, it has not been deprecated but isn't receiving any updates not even security updates, along with that the new React.dev documentation doesn't mention CRA but suggests using React meta-frameworks like Next and Remix for new projects. You can read more about React's reasoning for it in this github issue discussion.

14. esbuild

    12 356 38,953 9.2 Go

    An extremely fast bundler for the web

    

    Vite is not a bundler but a frontend tool that intelligently uses ESBuild and Rollup for their best use cases.

Suggest a related project