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
 
ivanjrmc profile image
Ivan Jeremic •

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

Collapse
 
ivkemilioner profile image
dragos •

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.