STOP Wasting Time! Your Next App Needs Vite! | JS, Typescript, React

[@DaveGrayTeachesCode]

Ahhh this video was supposed to post on Tuesday but I must have missed changing the date. All links and resources are now available in the description. 🚀

[@ahmad-murery]

This is no excuse not to post a new video on Tuesday 😁 Vite is really fast and interesting, Thanks Dave,

[@musamutetwi1948]

No, actually Vite is so fast it actually build the video before actual date

[@DaveGrayTeachesCode]

@@musamutetwi1948 LOL that's funny!

[@DaveGrayTeachesCode]

@@ahmad-murery haha my friend! Maybe so!

[@abhishekmazumder2060]

Simple and crisp tutorial. Which font are you using btw? Thanks!

[@ScriptRaccoon]

What makes Vite so cool is that it immediately updates your changes in the browser. The browser doesn't even need to refresh! So sometimes (for some reason not always) the data from the browser even remains (such as text inputs). This is made possible by HMR - hot module replacement.

[@DaveGrayTeachesCode]

Right on!

[@mavdotj]

I use sveltekit and it is kinda fustrating when my stores reset after HMR

[@Sifsif__ma]

create react app does the same , no ?

[@nikoryu-lungma]

@@Sifsif__ma No, it doesn't. The difference is very huge. In ViteJS, it does not install a bunch of packages while creating the app. In React, create-react-app installs a bunch of packages while creating the app. When React reloads, it reloads the whole thing, from top to bottom. It takes very long, and sometimes causes the app to crash. For ViteJS, it did not happen. The packages were lighter, and if you want to install more, you get to decide it. I haven't even mentioned the Server Side Rendering that React does not have

[@rycka7260]

@@Sifsif__ma secret behind Vite is that it utilizes websockets, that's why it is so super fast.

[@harag9]

Recently new to the channel going through your react series as I'm a very old school front end developer (html, JQuery). But work has asked me to take over a react project. Vite looks very easy to setup too. Great video and thanks for all the tutorials, they are really easy to follow!

[@DaveGrayTeachesCode]

Glad I could help!

[@TVTtheis]

Thanks you for the overview ❤

[@chirag-sg4kd]

@Dave Gray I have a question as they say browser can't understand typescript it can only understand JavaScript then how we are writing .ts in our script tag in HTML file.

[@konidoniravirr6580]

You have a really good voice that i blindly subscribed. Thank you for this big video.😄

[@DaveGrayTeachesCode]

Welcome!

[@resulabdulla3825]

thanks you bro, This is awesome toolkit

[@ashharkausar413]

That's quick! In your career as an engineer can you give an example or 2 of projects that really challenged you? Was it an ecommerce site you built for someone? Perhaps you were creating some sort content management system or webdev tools such as an ORM. Sky is the limit for this question.

[@DaveGrayTeachesCode]

Inheriting a legacy codebase at work built with an OLD version of Adobe's ColdFusion and absolutely no project documentation. It is a hybrid of HTML & SQL combined. Adobe put it out to rival PHP. You don't hear much about it anymore. It has some tricky syntax... like instead of a comment in HTML that is

[@ashharkausar413]

@@DaveGrayTeachesCode Sometimes small things are not so small.

[@funtrap2289]

I have issue While save local host not re rendering I search in stack over flow then I added plugin in vite.config file even though it not resolved Please Share the solution

[@sergeantsausage2609]

I was surprised how easy it was to set up a full typescript react project. I was dreading setting up my webpack project, then i tried vite on a whim and was completely up and running in a few minutes.

[@DaveGrayTeachesCode]

Right on!

[@johnychinese]

Vite is now Dave Certified 🛡

[@DaveGrayTeachesCode]

🏆💯

[@CatsAndCode]

Thats an awesome vide. but can i ask why use windows?

[@gilbertardila]

Forget about Webpack, no more complications vite is wonderful!!!

[@DaveGrayTeachesCode]

Agreed!

[@Sifsif__ma]

is Webpack difficult to manage ?

[@codernerd7076]

💯 Vite is amazing just like this video!

[@DaveGrayTeachesCode]

Thank you!

[@Pareshbpatel]

This is an excellent introduction to Vite. Thanks, Dave {2023-03-15}, {2023-05-03}, {2023-06-23}

[@DaveGrayTeachesCode]

You're welcome!

[@siosaiafonua9286]

The question is, do i choose between VITE or Nextjs? I want to build a full stack big app

[@marcinzale]

Great content, as always! Thanks!

[@DaveGrayTeachesCode]

You're welcome! 🙏

[@SZaferUlgur]

Great job.. The installation process was really tiring. Thank you so much.

[@klp2513]

I still don't get the point of vite (or bundlers in general) as it seems like it is just loading up the server when there is so much unused capacity on the client.

[@NathanBudd]

I missunderstood this... how do you use Vite with NextJS?

[@AdharshScipy]

how to take build by rectifying errors and warnings in vite also ts

[@sherifashraf8008]

Keep it up. You are doing a great job.❤

[@DaveGrayTeachesCode]

Thank you!

[@konnichiwa01]

Yes! Yes! Yes! Dave, you did it again. I was looking for a way to understand vite. Right time, Right Video. I love you (professionally).

[@DaveGrayTeachesCode]

Glad I could help!

[@abdulazeez.98]

I have been hearing about Vite lately, this video made my mind to change to it!

[@DaveGrayTeachesCode]

Right on!

[@okonkwo.ify18]

Thank you Dave. I don’t know if u can help me get a remote job. I practically listen to every video u make and my head is full lol. Am in Nigeria, seems most companies focus on US and Europe

[@_MoshikoAz_]

thanks for the video, im gonna use vite in my next react app, any chance do you have a video explaining how to add noed express backend to the project using vite ?

[@DaveGrayTeachesCode]

I would make the backend a separate project and just use npm with it. I have a Node.js course on my channel that builds a complete backend REST API.

[@hamdiboujarra]

thank you so much. please steve when dart and flutter?

[@fafbk7773]

Is it from vite labs ??

[@anandraj1623]

How to upload the vite js project onto the docker

[@virgiliogervacioestadillo1389]

Hi Dave! Can you make another tutorial with the addition of integrating jest or vite, react testing library and eslint so that it would be easy for us to use it in our future projects.

[@DaveGrayTeachesCode]

Great request!

[@frankli7035]

amazing，long time required TS with vite

[@bkatsevych]

Thanks a lot for another great video! Keep up the good work!

[@DaveGrayTeachesCode]

You're welcome!

[@danielrauhut239]

Please rename this video, I was searching whether its possible to run a NextJS app on vite and you got my hopes up

[@willyhorizont8672]

This makes me want to migrate my CRA js app to VITE and Typescript 🚀

[@DaveGrayTeachesCode]

Great project!

[@faris.abuali]

Thank you! Great tutorial

[@DaveGrayTeachesCode]

Thank you for the kind words!

[@OnePiece_Fandom]

Sir can u plz tell me how can I use it with MERN app and it's safe for production and how can I do it ? Can u plz make a full video on this ?? ❤️❤️

[@DaveGrayTeachesCode]

This video should provide everything you need to use Vite - and yes, it is safe for production.

[@sonamohialdin3376]

It is looking very useful frontend tool thank you

[@DaveGrayTeachesCode]

Welcome!

[@ewaevva4375]

Dave, what about NestJS ? I'm currently learning it and would like to know your opinion about it, please 🙂

[@DaveGrayTeachesCode]

I've heard good things! I'd like to cover it in the coming months.

[@coderboysobuj]

I have a problem vite with react router dom. It's not Working on server when refresh the page It's shows me server 404 page. I need solution,, please help me

[@DaveGrayTeachesCode]

It sounds like this is just a react router hosting issue where you need to set the redirect/rewrite rule on the host.

[@MeloGrigorian]

If I'm using create-react-app, why should I use Vite when there's only one index.js file going into production anyway?? All these are for development mode correct?

[@DaveGrayTeachesCode]

It's definitely faster - but the choice is yours.

[@anish_dalvi]

Yes Vite is really a TIME SAVER

[@TravinskiyVladislav]

thank you, Dave

[@DaveGrayTeachesCode]

You're welcome!

[@dharmeshgohil9375]

awesome dev🤩🤩

[@DaveGrayTeachesCode]

Thank you!

[@3minutesbibletruth]

Thanks for your good work boss

[@DaveGrayTeachesCode]

You're welcome!

[@prashlovessamosa]

Thanks dave

[@DaveGrayTeachesCode]

Welcome!

[@ugurokur]

Hello Dave, can you tell me, what do you use Curly braces shower plugins

[@DaveGrayTeachesCode]

I'm not sure I understand your question, but I think you are asking how I get lines between my curly braces. If so, here is the answer: kzbin.infoMDaxWffMjrQ

[@ugurokur]

@@DaveGrayTeachesCode yes it is, thank you very much. You are an excellent person :)

[@ugurokur]

@@DaveGrayTeachesCode okey last questions. what do you use screen resizing on your lessons ? you drag right then screen fullsize or dragging left side, window is minimize , how do you do it ?

[@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.

[@swastikpatro6436]

How to add eslint to this vite react typescript setup?

[@DaveGrayTeachesCode]

Couple of links to help: stackoverflow.com/questions/71020035/setup-vite-template-react-and-eslint-airbnb and www.npmjs.com/package/vite-plugin-eslint

[@MigalYaroslav]

I like Vite and using for most of my projects

[@DaveGrayTeachesCode]

This makes sense!

[@krishnamurthyganeshb8543]

you are awesome.

[@安全保密]

I tried VITE now, and it is faster, but I wondering if should I learn or use these new tools when just a few companies choose them, as I know, many companies still use jquery anyway, and you don't know it you can't get the offer.

[@DaveGrayTeachesCode]

I do not recommend learning jQuery in 2023 unless you inherit a project that uses it at work. If you do, you should incrementally remove the jQuery dependency. Should you learn how to use Vite? Yes. It is always good to keep learning. The industry doesn't stop introducing new things.

[@安全保密]

@@DaveGrayTeachesCode Thanks for your advice!

[@imkir4n]

Does vite makes difference in the production?

[@DaveGrayTeachesCode]

No, it's a development tool. It definitely saves time in dev. 💯

[@changNoi1337]

I’m a little worried about using it for something serious. Like having trouble at the end building it and deploying. Do you think it is safe to use?

[@DaveGrayTeachesCode]

Yes, many devs are already using Vite. It is safe to use.

[@changNoi1337]

@@DaveGrayTeachesCode Thanks Dave 😘

[@akintobby]

Vite is the new cool✊

[@DaveGrayTeachesCode]

🚀🚀🚀

[@huzaifac137]

But vite never installs on my PC because I have space in name of my windows user folder. Is their any solution to this?

[@AmodeusR]

Have you tried installing it with both npm and yarn? Because if not, unfortunately you would need to reinstall windows and this time around write your username without spaces or special characters.

[@huzaifac137]

@@AmodeusR Yeah I think reinstalling windows is the only option unfortunately

[@ahmad-murery]

@@huzaifac137 Why not trying to create a new user (without spaces) and then login using the new account and reinstall it from there

[@tareq8022]

with next js ??

[@DaveGrayTeachesCode]

No, not "Nextjs". Just the true meaning of the word "next".

[@davronmaxmudov3972]

How about next js?

[@DaveGrayTeachesCode]

Right here: kzbin.info/aero/PL0Zuz27SZ-6Pk-QJIdGd1tGZEzy9RTgtj

[@sayedulkrm]

Hello I have a question. If anyone knows please answer. How can I run my Vite project in localhost:3000 ? Basically it run in 127.0.0.1:3000.

[@brendencallahan242]

They are the same thing. 127.0.0.1:3000 is localhost:3000.

[@martapfahl940]

Yes my Next(JS) project needs Vite lol :D

[@DaveGrayTeachesCode]

😄

[@abdulrahmanagboolaosho3582]

Thanks

[@nabinsaud4688]

I have already stopped using create react app

[@sahriar.shourov]

Where is the link??

[@DaveGrayTeachesCode]

vitejs.dev/

[@sahriar.shourov]

@@DaveGrayTeachesCode Discord Link?

[@DaveGrayTeachesCode]

@@sahriar.shourov for now, you can find it in the header of my channel banner or in the description of other recent videos. When I can I will add it to this one

[@sahriar.shourov]

@@DaveGrayTeachesCode Thanks For Your Reply!

[@raheem81kg]

appreciate it

[@DaveGrayTeachesCode]

Thank you!

[@RahulKumar-fp1gy]

Good evening/morning Dave, did you try "turbo" with NextJS?? It is a new bundler by the developers of webpack and relatively faster than "Vite".

[@DaveGrayTeachesCode]

I have not yet, but I have heard about it as it was recently introduced at their conference. I'll give it a little time.

[@abman1662]

They should mention the pronounciation on their site/git or soon it will be known as vyte.

[@noir4356]

No doubt it was fast. "Vite" means "fast" in French 😺

[@DaveGrayTeachesCode]

Nice! 💯🚀

[@LordFullStack]

Vite is also for Server side rendering . Check this out kzbin.info/www/bejne/oIGkq4CGaKZriJY

[@AuxiliaryOfficial]

Agree

[@rahmatyousefi8273]

Ok I found thank you

[@DaveGrayTeachesCode]

You're welcome!

[@somebody-17546]

I use vite with ts, eslint, prettier

[@AmodeusR]

If I could ask you something, I would ask you to stop using create-react-app and use Vite instead for you videos. It's much faster, versatile and thus modern. It's a dream yet to become true, since I use it for the reasons said and sometimes it causes some confusion working on a vite project watching a create-react-app video class 😅

[@DaveGrayTeachesCode]

As mentioned here, I'll be using Vite going forward. 🚀

[@hawks2271]

Nice🇧🇷

[@АндрейСердюк-э8ч]

if you like so much Vite, why waist time with garbage React, why not choose VUE?!!

[@mrngasa3415]

Thanks a lot Dave 🤍

[@DaveGrayTeachesCode]

You're welcome!

[@abuhossain4274]

sir what is your discord username ? pls give me

[@DaveGrayTeachesCode]

My Discord server is linked in the description. I'm Dave Gray in the server and in real life 😀