Why is Everyone Using Vite?

A quick look at Vite JS.
💬 Topics:
- JavaScript bundlers;
- Compiling and Transpiling;
- ES Modules;
- Working with Vite;
- Server side rendering.
#javascript

[@adidibrani]

I think the speed alone is the winning factor. CRA takes longer than my wife takes to dress up

[@seveneyedlamb]

lol

[@karasira2696]

🤣🤣🤣

[@nonstopper]

Don’t be silly. No one who uses CRA Has a wife

[@ashish_prajapati_tr]

😂

[@HiImKyle]

No one should be using CRA anyway

[@arpitdubey5938]

I still remember working on a react project in early 2019, the codebase was large the the local development was slow. I turned off the typechecking in the local environment and relied solely on the vs code ide to help me with the type checking with the good old red squglies, working that way with the code was a breeze.

[@dealloc]

Right. You want typechecking as a separate step from watching, for CI purposes. Let the CI catch errors you didn't catch in your IDE.

[@SamualN]

I treat the type checker like a linter. I wouldn't run the linter on every file change during dev

[@emmanuelgenga7421]

For a beginner with frameworks this is an interesting take

[@anunonim]

I appreciate a lot the quality of your videos, man! What do you think of React docs hiding Vite inside a little corner?

[@awesome-coding]

Thank you for your feedback! I believe they are fighting a loosing battle... I do most of my work in the React ecosystem, and I know everybody hates CRA. Don't get me wrong, CRA was great for a long time, since it was a pain to set up react projects before that. However, nobody can argue that Vite is a way better option. I honestly don't understand why they are just briefly mentioning it in the docs.. it's not like most devs don't know the alternatives. I guess it is a bit weird for them to directly push a tool coming from the Vue space maybe?

[@tuyindeme4462]

Vite (French word for "quick", pronounced /vit/, like "veet") is a build tool that aims to provide a faster and leaner development experience for modern web projects. It consists of two major parts: A dev server that provides rich feature enhancements over native ES modules, for example extremely fast Hot Module Replacement (HMR). A build command that bundles your code with Rollup, pre-configured to output highly optimized static assets for production.

[@SebaGomez]

Thanks! [ESP] Excelente vídeo, muchas gracias.

[@awesome-coding]

Glad you find it useful!Thank you for the kind words!

[@rahuljoshi8331]

How to migrate an enterprise level application built with creat-react-app to vite.

[@Steve-Richter]

I cannot get the chrome dev tools debugger to work correctly in my vite/vue/typescript projects The source maps do not align breakpoints correctly.

[@laurapeterson146]

Nice explanation. What did you use to do the animation on the video (like the moving hand icon at 1:07 for example)? I know it's very simple and people have been doing that a lot, but I'm just curious. Is it Premiere Pro or After Effects? Thanks.

[@awesome-coding]

Hey! I'm using Premiere Rush (which lacks some of the more advanced animation stuff you see on other videos, but does the job for me). PremierePro does wonders for animations in videos.

[@laurapeterson146]

@@awesome-coding Thank you.

[@TariqSajid]

please make a video on how to migrate large react script project to vite with react script env

[@filipkovac767]

@Avesome The SSR example you showed suffers from flash of unstyled content during development, bcs CSS link tags are not populated. I haven't found solution for that. Has anyone? There is no mention of that in docs and it seems like the problem is just ignored.

[@awesome-coding]

@filipkovac767 Thank you for outlining this. I will look into the topic further, and come up with a more detailed video on the matter since it is a pretty interesting subject.

[@Ivan-wm6gm]

For react devs do you still use Vite or just use nextjs for personal projects? and why?

[@kevinkelche8478]

Nextjs (since its full stack) and you can implement Multiple Architectures such as SSR , SPA or ISR.

[@okie9025]

In my projects I always make a separate REST API backend using some other framework/language, so on the frontend I use NextJS as a sort of "proxy" to the backend API. NextJS does the heavy work of making your app better for SEO and turning it into an SSR website rather than an SPA.

[@awesome-coding]

It really depends on the use case. Next JS is probably the most common React meta-framework these days, but if you need to build a plain and simple SPA without too many architectural constraints I'd still go with Vite + React.

[@ercansahin8430]

I am curious about ssg and ssr best practices with vite. I use Nextjs just because of the partial ssg and i am not happy with lack of control. Is Vite has more powerful ssg do you know anything about it?

[@ADRECT]

awesome

[@nate32396]

Just converted my CRA app to vite. It was tedious but so worth it. Especially since CRA is all but deprecated.

[@awesome-coding]

What where the main pain points in the process?

[@nate32396]

@@awesome-coding getting vite to recognize the contents of my public folder. It wasn’t hard. Just took some time.

[@gabrielmalek7575]

Vite is awesome I talk about it all the time lol

[@xxXAsuraXxx]

Note that Rspack is also coming up, compatible with webpack and also will make module federation as its first class citizen!

[@awesome-coding]

Thanks for mentioning it! I'll look into it!

[@VeaceslavBARBARII]

3:28 Have you tried to write plugins for Vite?

[@vaisakhkm783]

Waiting for next 10 exciting build tool to come out...!!!!

[@awesome-coding]

😂 I can see it happen

[@Daijyobanai]

Shouldn't have to wait long, probably around a week from now.

[@vasiovasio]

​@@Daijyobanaithe worst thing is that you are not even sarcastic, but telling facts...

[@compilejs110]

I love vite

[@kurtfth]

nobody mention that vite has huge performans penalty development on windows with relatively large codebase like 1k+ files. if it cannot handle by lazy loading, even with slower ssd😢

[@awesome-coding]

Sorry to hear that. I'm not doing any work on Windows, so I appreciate you mentioning this!

[@eli-sv]

Vite is lit 😂

[@jwoods9659]

Vite is hard to use and does not give clear errors it's been a pain to buidl my project with i will stick with webpack.

[@drinkintea1572]

This dude's voice reminds me of LowSpecGamers idk why

[@awesome-coding]

I'm not sure if that's a good thing or not, but thanks! :))

[@raenastra]

Speed and TS support are nice, but Vite is the reason why I can't easily set breakpoints in my Svelte projects or use WASM in Solid projects :(

[@awesome-coding]

I think you might be one step ahead of the bulk of the regular devs with your WASM use case. Not being able to breakpoint in Svelte seems weird though.

[@raenastra]

@@awesome-coding maybe it's been fixed, but last I checked, it's got some issues with source maps that makes it difficult to set breakpoints

[@anfytrion]

I'll also give you a comment, here it is...

[@awesome-coding]

I appreciate it!✌️

[@RolandAyala]

+1 vite is awesome (have used w/ several projects, including svelte-kit, solid-start, and qwik-city), but still no match for nextjs dx w/ stateful/live hmr updates, which is gold when iterating on ux.

[@awesome-coding]

I agree. However, one of the many strengths of Vite is it's versatility. As you said, you can use it with pretty much any type of stack.

[@mawill432]

give us more..

[@luisbrazilva]

I get it. It's fast but why is everyone ignoring the huge security risk of exposing your API connections and key because it serves the JSX files in the network activity tab without masking them or encoding them.

[@awesome-coding]

Interesting. Could you elaborate, please?

[@nikilk]

I think what Luis was referring to is the ES modules being shipped as such during development as no bundling happens at that point. The code at development phase is as clear and well maintained as the developer wrote it. Hence the lack of obfuscation that bundlers apply was the security risk he intended. This point is however mute as for any release vite actually bundles stuff.

[@luisbrazilva]

@@nikilk if you inspect the bundle created you will see the api key and anything you store in env exposed. Five what it’s worth, this is something CRA does as well. But exposing the entire JSX structure gives context to how the params were built to harvest from the api and as mentioned, you even have the key. I can’t do screenshots in this thread

[@Pareshbpatel]

{2023-12-14}

[@RudyRdx]

Are You AI ?

[@awesome-coding]

Aren't we all?

[@Daijyobanai]

@@awesome-coding I'm all A and not much I.

[@RudyRdx]

@@awesome-coding dead lock .....

[@samarnagar9699]

its VAITEE

[@awesome-coding]

VIUUT

[@sorinuka]

Vite is getting popular, right?

[@awesome-coding]

Yes it is!

[@pourlamouvance]

Typescript is the reason i don't use vite

[@awesome-coding]

Could you explain this please? Vite is ore than a compiler if you are comparing them like that.

[@pourlamouvance]

Links get deleted, search greenest programming languages and Ryan Dahl talking about typescript in deno as a first regret

[@SnazzieTV]

why people keep pronouncing it veet(f-eet) instead of vite (l-ite)

[@twinlamp]

Go to 1:05 and pause. Read the first sentence on the page.

[@awesome-coding]

🇫🇷🇫🇷🇫🇷