DEV Community

Cover image for Create react app vs Vite

Create react app vs Vite

Keerthi on September 22, 2021

I have always relied on the npm command create-react-app to create the starter files for any React.js project. It does what it says on the tin, and...
Collapse
 
rizkimcitra profile image
R. Maulana Citra

Vite is cool, I love how things are fast on dev server.
I also made boilerplate for daily projects with Tailwind, if you want to check it out, see it on my GitHub here

Collapse
 
keefdrive profile image
Keerthi

Thats awesome, you should contribute to the community here github.com/vitejs/awesome-vite#tem... . They have one for react and tailwind already, maybe you can add yours as well.

Collapse
 
rizkimcitra profile image
R. Maulana Citra

thank you bro, I have added mine too, and it was merged already!

Collapse
 
jamesthomson profile image
James Thomson

I've recently switched a Vue CLI project to Vite. It's impressive how fast things are - but makes complete sense when there's no build step needed when developing.

One thing I've found less intuitive are images, especially dynamically referenced ones (e.g. in a loop). I've had to create a utility for this:

export function getImageUrl (name) {
  return new URL(`../assets/${name}`, import.meta.url).href;
}
Enter fullscreen mode Exit fullscreen mode

Is this also the case in React?

Collapse
 
keefdrive profile image
Keerthi

Yes , Similar in react

Collapse
 
herberthobregon profile image
Herberth Obregón

I moved to vitejs for lit-element (now only lit) and is amazing! 💯💯🚀 Web pack is very slow to spinup a dev server

Collapse
 
keefdrive profile image
Keerthi

Firts tme I am hearing of lit-elemnt, Intresting, what apps are you building with it?

Collapse
 
herberthobregon profile image
Herberth Obregón

It is one of the main "frameworks" of modern development, vitejs.dev/guide/#scaffolding-your... Vite support the main popular frameworks vue, react, lit-element and svelte
I choose Lit-element because is the closest thing to js vanilla with all the power of web components (the performance is amazing ⚡️). Eventually I consider that web components are going to be so robust that you won't need a framework. Lit-element is the framework for web components par excellence. Stencil I don't like like Lit

I build all empleo.gt with Lit Which next will be migrated to hirex.app for worldwide version

Thread Thread
 
keefdrive profile image
Keerthi

Thanks, Nice to know that about Lit, will look at it. Also good luck with your app too

Collapse
 
shimatai profile image
Wagner

Why don't you use package.json inside each directory and refers to files like "@components/MyCompoment"?!
You don't need do setup anything else. Just a package.json in each folder with content:

{ "name": "components" }

Collapse
 
ivan_jrmc profile image
Ivan Jeremic

This is so dirty I can't believe people do this.

Collapse
 
ivkemilioner profile image
ivkeMilioner

Stiil too much bugs

Collapse
 
danieltkach profile image
Daniel Tkach

On vite? I'm just researching if I should switch to vite.

Collapse
 
renanlazarotto profile image
Renan "Firehawk" Lazarotto

I have switched from CRA to Vite just because CRA is so slow! Vite is blazing fast even on my aging machine.

Collapse
 
keefdrive profile image
Keerthi

Thats good to hear. CRA has always been so slow. But I had to put up with it. Other option was configuring webpack, which was way worse in terms of time to setup.

Collapse
 
captaindev profile image
Rami

Vite is really cool,
I hope they support Angular in the near future.

Collapse
 
shimatai profile image
Wagner

Angular is a waste of time! A poor framework, too much verbose.

Collapse
 
jareechang profile image
Jerry

This is a great overview!

If you want a deep dive understanding of Vite, I wrote about here - jerrychang.ca/writing/vite-how-it-...

Collapse
 
ninganza profile image
Audace

I have the problem
Uploading image

Collapse
 
ninganza profile image
Audace

I have the problem with vite + react.
When I run the localhost, see in the terminal [vite] hmr update.
And after that in the browser nothing display on the screen.
Screen is blank.