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.
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?
I can code a site in a text editor and console from scratch, build javascript web-apps, facebook-ish sites, whatever... but I cannot understand why I would need vite, why I would want to bundle things, why I would want to put myself in a situation where I needed to compile front-end code, just so I could get excited about HMR. What in the world am I missing?
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.
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.
They prefer simplicity and ease of use, even though they are called developers !!. Additionally, many of their projects remain small in scope. This helps explain the trend of developers gravitating towards Vite.
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.
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.
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.
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?
@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.
@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.
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😢
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.
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.
@@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
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.
You have awesome content.I am stuck on a problem plz guide me on I am implementing server-side rendering for a datatable (e.g., blog listing) in my Laravel project. I need to create a JavaScript file for this purpose. Should I place this datatable JS file in the public directory? If so, how do I compile the JS file from the resources directory to the public directory using Laravel Vite?Where should be the file placement in the folder structure. project-root/ ├── resources/ │ ├── js/ │ │ ├── app.js │ │ └── datatable/ │ │ └── blogListing.js ├── public/ │ └── build/ ├── vite.config.js ├── package.json └── ...
+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.
![BLACK BAG - Official Trailer [HD] - Only in Theaters March 14](http://i.ytimg.com/vi/Du0Xp8WX_7I/mqdefault.jpg)
I think the speed alone is the winning factor. CRA takes longer than my wife takes to dress up
lol
🤣🤣🤣
Don’t be silly. No one who uses CRA Has a wife
😂
No one should be using CRA anyway
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.
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.
I treat the type checker like a linter. I wouldn't run the linter on every file change during dev
I appreciate a lot the quality of your videos, man! What do you think of React docs hiding Vite inside a little corner?
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?
I can code a site in a text editor and console from scratch, build javascript web-apps, facebook-ish sites, whatever... but I cannot understand why I would need vite, why I would want to bundle things, why I would want to put myself in a situation where I needed to compile front-end code, just so I could get excited about HMR. What in the world am I missing?
Nothing , people is just craving complexity
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.
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.
@@awesome-coding Thank you.
They prefer simplicity and ease of use, even though they are called developers !!. Additionally, many of their projects remain small in scope. This helps explain the trend of developers gravitating towards Vite.
For a beginner with frameworks this is an interesting take
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.
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.
How to migrate an enterprise level application built with creat-react-app to vite.
For react devs do you still use Vite or just use nextjs for personal projects? and why?
Nextjs (since its full stack) and you can implement Multiple Architectures such as SSR , SPA or ISR.
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.
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.
I use Vite for small sites. Nextjs is probably better for enterprise web applications. Both are fine
3:28 Have you tried to write plugins for Vite?
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?
@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.
@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.
Just converted my CRA app to vite. It was tedious but so worth it. Especially since CRA is all but deprecated.
What where the main pain points in the process?
@@awesome-coding getting vite to recognize the contents of my public folder. It wasn’t hard. Just took some time.
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😢
Sorry to hear that. I'm not doing any work on Windows, so I appreciate you mentioning this!
please make a video on how to migrate large react script project to vite with react script env
Waiting for next 10 exciting build tool to come out...!!!!
😂 I can see it happen
Shouldn't have to wait long, probably around a week from now.
@@Daijyobanaithe worst thing is that you are not even sarcastic, but telling facts...
It's a blessing so I don't have to configure the annoying webpack
Thanks! [ESP] Excelente vídeo, muchas gracias.
Glad you find it useful!Thank you for the kind words!
Vite is awesome I talk about it all the time lol
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.
Interesting. Could you elaborate, please?
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.
@@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
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 :(
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.
@@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
You have awesome content.I am stuck on a problem plz guide me on
I am implementing server-side rendering for a datatable (e.g., blog listing) in my Laravel project. I need to create a JavaScript file for this purpose. Should I place this datatable JS file in the public directory? If so, how do I compile the JS file from the resources directory to the public directory using Laravel Vite?Where should be the file placement in the folder structure.
project-root/
├── resources/
│ ├── js/
│ │ ├── app.js
│ │ └── datatable/
│ │ └── blogListing.js
├── public/
│ └── build/
├── vite.config.js
├── package.json
└── ...
I love vite
Are You AI ?
Aren't we all?
@@awesome-coding I'm all A and not much I.
@@awesome-coding dead lock .....
This dude's voice reminds me of LowSpecGamers idk why
I'm not sure if that's a good thing or not, but thanks! :))
+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.
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.
I'll also give you a comment, here it is...
I appreciate it!✌️
Vite is lit 😂
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.
Actually it's the other way around
I haven't used Webpack yet. Is it better than Parcel and Vite?
@@iamtharunraj webpack was the old standard. 90% of older web projects were built with webpack.
give us more..
its VAITEE
VIUUT
{2023-12-14}
Typescript is the reason i don't use vite
Could you explain this please? Vite is ore than a compiler if you are comparing them like that.
Links get deleted, search greenest programming languages and Ryan Dahl talking about typescript in deno as a first regret
why people keep pronouncing it veet(f-eet) instead of vite (l-ite)
Go to 1:05 and pause. Read the first sentence on the page.
🇫🇷🇫🇷🇫🇷
Vite is getting popular, right?
Yes it is!
So it's similar to the Turbopack build tool used in Next.js.
Yep