DEV Community

Cover image for Use Vite for React Apps instead of CRA

Use Vite for React Apps instead of CRA

Nilanth on May 16, 2022

Most of us will be using Create React App for creating React App. It supports all the configurations out of the box. But when your project code gro...
Collapse
 
jonaspetri profile image
Jonas Petri

I love Vite!
Just to add one thing, to create a new Vite app with npm, do

npm init vite
Enter fullscreen mode Exit fullscreen mode

and let the selection menu do the rest! No parameters needed!

Collapse
 
andrewbaisden profile image
Andrew Baisden

I have heard many good things about Vite. My default is to use Create React App or Next.js. Might give Vite a go next time to see how it compares first hand.

Collapse
 
radandevist profile image
Andrianarisoa Daniel

Nice article about vite. I think it is a good idea too if you added another one on how to setup tests with it (vitest +react testing library).

Collapse
 
cathalmacdonnacha profile image
Cathal Mac Donnacha 🚀
Collapse
 
radandevist profile image
Andrianarisoa Daniel

Great! Gonna check that!

Collapse
 
yuridevat profile image
Julia 👩🏻‍💻 GDE

Thank you so much for pointing out the advanteges using Vite over CRA/webpack! Exactly what I needed right now! 💯

Collapse
 
seancassiere profile image
Sean Cassiere

Yup, I completely agree!

I recently migrated a large Typescript CRA app to Vite, and loved the dev server and build times.

Although I ran into a weird a couple bugs, which REQUIRED me have the import React statement in all my .tsx files (something which CRA didn't need), and the component exported from the react-moment package outright didn't work.

Outside of these couple issues, been loving the switch and improved dev experience.

Collapse
 
connor_cc profile image
Connor

Thank you. really good read.

Collapse
 
ilialuk profile image
Ilia luk

try comparing it to CRA with craco-esbuild, I believe they will compare the same and this whole migration argument of faster build times will be pointless.

Collapse
 
arjun_kayalmoni profile image
Full Stack Spiderman

using plugins: [react()] has no effect and I'm still receiving React reference error. Trying to find a way to avoid importing react in *.jsx

This happens when I migrated my app from CRA to vite.

Collapse
 
cathalmacdonnacha profile image
Cathal Mac Donnacha 🚀

Great article

Collapse
 
suryapranesh4 profile image
Surya Pranesh

Thank you for this great post ✨💯!!
I have updated my react app to use rocket fast vitejs⚡️ for faster dev!!