STOP Wasting Time! Your Next App Needs Vite! | JS, Typescript, React
HTML-код
- Опубликовано: 6 июн 2024
- Web Dev Roadmap for Beginners (Free!): bit.ly/DaveGrayWebDevRoadmap
Your Next App Needs Vite! As a developer, you want efficient dev tools and set up time is often both redundant and inefficient. Vite provides "Next Generation Frontend Tooling" to speed up your project set up time and help get you to the part you like: writing code!
🚀 Become a full-stack web dev with Zero To Mastery Courses:
- The Complete Web Developer: bit.ly/WebDevMaster
- Master the Coding Interview: bit.ly/FAANGInterview
- Junior to Senior Dev Roadmap: bit.ly/WebDevRoadmap-JrtoSr
🚩 Subscribe ➜ bit.ly/3nGHmNn
📬 Course Updates ➜ courses.davegray.codes/
❓ Questions - Please post them to my Discord ➜ / discord
☕ Buy Me A Coffee ➜ www.buymeacoffee.com/davegray
👇 Follow Me On Social Media:
Github: github.com/gitdagray
Twitter: / yesdavidgray
LinkedIn: / davidagray
Your Next App Project Needs Vite!
(00:00) Intro
(00:18) Welcome
(00:39) Vite - pronounced Veet
(00:58) Install Node.js
(01:28) Create a Project with Vite
(03:51) Exploring the Project Files
(05:57) Create a React + TS Project with Vite
(08:36) Docs: Deployment & Env Variables
(09:47) Overall Verdict for Vite
📚 Tutorial References:
🔗 Vite: vitejs.dev/
🔗 Node.js & npm: nodejs.org/
⚙ Web Dev Tools:
🔗 Chrome Browser: www.google.com/chrome/
🔗 Visual Studio Code (VS Code): code.visualstudio.com/
🔗 Live Server VS Code Extension: marketplace.visualstudio.com/...
Was this introduction to Vite helpful? If so, please share. Let me know your thoughts in the comments.
#vite #web #app
![Eminem - Houdini [Official Music Video]](http://i.ytimg.com/vi/22tVWwmTie8/mqdefault.jpg)
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. 🚀
This is no excuse not to post a new video on Tuesday 😁
Vite is really fast and interesting,
Thanks Dave,
No, actually Vite is so fast it actually build the video before actual date
@@musamutetwi1948 LOL that's funny!
@@ahmad-murery haha my friend! Maybe so!
Simple and crisp tutorial. Which font are you using btw? Thanks!
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!
Glad I could help!
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.
Right on!
I use sveltekit and it is kinda fustrating when my stores reset after HMR
create react app does the same , no ?
@@abdousifelhak4486
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
Great job.. The installation process was really tiring. Thank you so much.
Thanks a lot for another great video! Keep up the good work!
You're welcome!
Thanks you for the overview ❤
Great content, as always! Thanks!
You're welcome! 🙏
You have a really good voice that i blindly subscribed. Thank you for this big video.😄
Welcome!
Great content here, thanks for the video!
Keep it up. You are doing a great job.❤
Thank you!
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.
Right on!
thanks you bro, This is awesome toolkit
I have been hearing about Vite lately, this video made my mind to change to it!
Right on!
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.
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
@@DaveGrayTeachesCode Sometimes small things are not so small.
Thank you!
Great tutorial
Thank you for the kind words!
This makes me want to migrate my CRA js app to VITE and Typescript 🚀
Great project!
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.
Great request!
💯 Vite is amazing just like this video!
Thank you!
thank you so much. please steve when dart and flutter?
It is looking very useful frontend tool thank you
Welcome!
amazing，long time required TS with vite
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).
Glad I could help!
thank you, Dave
You're welcome!
Dave, what about NestJS ? I'm currently learning it and would like to know your opinion about it, please 🙂
I've heard good things! I'd like to cover it in the coming months.
Thanks for your good work boss
You're welcome!
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
Forget about Webpack, no more complications vite is wonderful!!!
Agreed!
is Webpack difficult to manage ?
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 ?
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.
hi @Dave Gray can you do a tutorial on Turbopack? can it be used for react + typescript/ javascript as well?
Great request! Turbopack is from Vercel and they say "Webpack users can also expect an incremental migration path into the Rust-based future with Turbopack." You can read more here: vercel.com/blog/turbopack
Vite is now Dave Certified 🛡
🏆💯
awesome dev🤩🤩
Thank you!
@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.
Thats an awesome vide. but can i ask why use windows?
The question is, do i choose between VITE or Nextjs? I want to build a full stack big app
Please rename this video, I was searching whether its possible to run a NextJS app on vite and you got my hopes up
Thanks dave
Welcome!
I like Vite and using for most of my projects
This makes sense!
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 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
you are awesome.
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?
Yes, many devs are already using Vite. It is safe to use.
@@DaveGrayTeachesCode Thanks Dave 😘
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 ?? ❤️❤️
This video should provide everything you need to use Vite - and yes, it is safe for production.
Hello Dave, can you tell me, what do you use Curly braces shower plugins
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: ruclips.net/user/shortsMDaxWffMjrQ
@@DaveGrayTeachesCode yes it is, thank you very much. You are an excellent person :)
@@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 ?
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?
It's definitely faster - but the choice is yours.
Thanks
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".
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.
I missunderstood this... how do you use Vite with NextJS?
how to take build by rectifying errors and warnings in vite also ts
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.
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!
appreciate it
Thank you!
Vite is the new cool✊
🚀🚀🚀
Does vite makes difference in the production?
No, it's a development tool. It definitely saves time in dev. 💯
Agree
How to upload the vite js project onto the docker
Yes my Next(JS) project needs Vite lol :D
😄
But vite never installs on my PC because I have space in name of my windows user folder. Is their any solution to this?
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.
@@AmodeusR Yeah I think reinstalling windows is the only option unfortunately
@@huzaifac137 Why not trying to create a new user (without spaces) and then login using the new account and reinstall it from there
Is it from vite labs ??
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.
They are the same thing. 127.0.0.1:3000 is localhost:3000.
How to add eslint to this vite react typescript setup?
Couple of links to help: stackoverflow.com/questions/71020035/setup-vite-template-react-and-eslint-airbnb
and
www.npmjs.com/package/vite-plugin-eslint
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
It sounds like this is just a react router hosting issue where you need to set the redirect/rewrite rule on the host.
They should mention the pronounciation on their site/git or soon it will be known as vyte.
Yes Vite is really a TIME SAVER
Ok I found thank you
You're welcome!
with next js ??
No, not "Nextjs". Just the true meaning of the word "next".
No doubt it was fast. "Vite" means "fast" in French 😺
Nice! 💯🚀
How about next js?
Right here: ruclips.net/p/PL0Zuz27SZ-6Pk-QJIdGd1tGZEzy9RTgtj
I have already stopped using create react app
Where is the link??
vitejs.dev/
@@DaveGrayTeachesCode Discord Link?
@@shahriar.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
@@DaveGrayTeachesCode Thanks For Your Reply!
Nice🇧🇷
Vite is also for Server side rendering .
Check this out
ruclips.net/video/jPAzMP3A8R4/видео.html
I use vite with ts, eslint, prettier
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 😅
As mentioned here, I'll be using Vite going forward. 🚀
if you like so much Vite, why waist time with garbage React, why not choose VUE?!!
This is an excellent introduction to Vite. Thanks, Dave
{2023-03-15}, {2023-05-03}, {2023-06-23}
You're welcome!
Thanks a lot Dave 🤍
You're welcome!
sir what is your discord username ? pls give me
My Discord server is linked in the description. I'm Dave Gray in the server and in real life 😀