Just got started with Vite. Wanted a really quick intro so I could jump into it and not have to waste time watching a 2hr tutorial. This was perfect. Anything I need, I'll learn on the way.
The developer experience is so much better! No more having to wait for the code to rebuild, and often you won't have to reload the whole component tree
I needed something that I could use to quickly build out a concept without all the bells and whistles of nextjs and I ran into Vite. This video was godsend. I was kind of overthinking it since I am also still learning some React and WebPack fundamentals in the background. After watching your video, I am realizing how simple getting a Vite project up and running is and I can still finish learning react since nothing is syntactically different at least as of now.
I am glad I found this clip. I actually didn't enjoy Vite at first. Felt confusing... you know why? With webpack and other solutions got used to the fact that I have to define paths to bundle-able assets, a lot of other boilerplate config beforehand, specific production config and optimizations that you have to set up - I was looking for that in Vite and got super confused when I found nothing like it. This has been the best switch I have done in build tools, ever.
You just made my life so cheerful ❤ I was in little panic when i heard new react docs got rid of cra & now they have mentioned to use next js by default. CRA official github repository also seems inactive. I did not want to learn Next js right now, but would still love to enjoy react on new projects without setting up things manually. This video really gave me confidence back.
thank u so much Mr Brad it was an amazing video about Vite Thank u so much, and I did %50 the javascript course on ur website so I love it thank u so much for all staff
Thank you so much for making a informative video about a good replacement for CRA. The video is great, we have the theory and the practice. Couldnt ask for more. Thank you c:
- [00:00](ua-cam.com/video/89NJdbYTgJ8/v-deo.html) 🎥 This video is a Vite crash course, covering its benefits and how it compares to traditional build tools like webpack. - [01:20](ua-cam.com/video/89NJdbYTgJ8/v-deo.html) 🧩 Webpack is a traditional module bundler that bundles development source code into a single JavaScript file for production use. - [02:44](ua-cam.com/video/89NJdbYTgJ8/v-deo.html) 🚀 Vite, unlike webpack, leverages native ES modules in modern browsers for faster development, avoiding repetitive bundling during code changes. - [03:38](ua-cam.com/video/89NJdbYTgJ8/v-deo.html) 📦 Vite uses Rollup for production bundling, making it a fast alternative for development compared to webpack or parcel. - [04:20](ua-cam.com/video/89NJdbYTgJ8/v-deo.html) 💡 Vite is gaining popularity as an alternative to create-react-app, offering speed advantages for front-end development. - [07:02](ua-cam.com/video/89NJdbYTgJ8/v-deo.html) 🛠 Setting up a Vite project is easy using a simple command like `npm create @latest`. You can choose different templates and frameworks like React or Vue. - [08:24](ua-cam.com/video/89NJdbYTgJ8/v-deo.html) 📄 Vite project structure is lightweight and simple, with a minimalistic `package.json` and straightforward configuration. - [12:24](ua-cam.com/video/89NJdbYTgJ8/v-deo.html) ♻ Vite offers Hot Module Replacement (HMR), allowing changes in code to be reflected immediately without requiring a full rebuild. - [13:49](ua-cam.com/video/89NJdbYTgJ8/v-deo.html) 🔧 You can easily set up environment variables like API URLs in a Vite project. - [14:07](ua-cam.com/video/89NJdbYTgJ8/v-deo.html) 🎨 Vite supports SCSS out of the box, making it simple to add and use CSS preprocessors in your project. - [15:05](ua-cam.com/video/89NJdbYTgJ8/v-deo.html) 🏗 Building a Vite project for production is straightforward with the `npm run build` command, and you can preview the production build with `npm run preview`. - [16:10](ua-cam.com/video/89NJdbYTgJ8/v-deo.html) 📚 Vite offers official and community plugins that extend its functionality, allowing for integration with various tools, libraries, and frameworks.
Vite is awesome. Our build time got so much faster when we switched to it from webpack. Until this video, I've pronounced it to rhyme with "byte", whoops.
The idea isn't about getting slow, but taking too much resources. for someone like me just started and not having the best laptop or computer tool like create-react-app is really heavy on my machine and take a lot of resources ram, cpu, ... to run, so the idea is simplicity and using resources as minimum as possible
3:21 I think this is not correct. esbuild is not used to serve ES Modules. As you say in the video, this is what the browser just does for us. esbuild is a module bundler. It is used to pre-bundle depencencies, and also when you run build the Vite application.
Thanks for the video, but it'd be better if it shows how to configure ESLint and add rules to the project and also how to add settings for unit tests (vitest or react-testing-library).
I have been learning DevOps this year, But my learning roadmap is getting distracted. What can i control that Brad? Please do a tutorial series on DevOps using Docker.
@@TraversyMedia I have been learning DevOps this year, But my learning roadmap is getting distracted. How can i control that Brad? Please do a tutorial series on DevOps using Docker.
I'm trying to bind nextjs landing page with client react app which uses vite but how can I define base: /lang/path as dynamic path to connect both apps? Is base static only because of linking assets?
Thanks for the video 😀🙏 How can I update vite version in an existing vite-react app Also can we have ( maybe later ) a video on how to set up pwa with vite-react app ? 🙏
Hey Brad !! thanks for Uploading, i have a question for you or the audience here, everytime i hear about upgrading a software or a website, they say it's need funding wich mean money, so how upgrading software or a website need money, it's just coding that all. because i recently heard about twitter and he will be upgrading his source code and they say that it's will take a lot of money. So any explanation please ?
As I understand during upgrades there is high possibility of broken code base, bugs , while the existing code is tested and proven to stand the test of time.
For the environment variables section, when you run tests on your react application, you get cannot use import.meta outside a module even though I define type="module" in my package.json. so what I did was, reversed engineered vite to use the process keyword instead of import.meta. so I can now do something like process.env.API_URL. But the issue with the process keyword is that, in production, I get process is not defined since the process keyword is not accessible in browser environments. How do I get around this
Thanks for this! I like vite precisely for its quickness. The only reason it took me so long to switch over: Dang they need a different logo! This one is just ugly.
Hi, make a video on your thoughts about the new react docs and the fact they recommend nextjs and others related frameworks. Is this good for beginners?
Hi people! I am completely new to learning react, I bought a udemy course, and they are teaching with CRA, should I continue or shift to VITE? I do not have enough information to make a decision, lemme know? plesss.
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.
HOW this is the third time I needed to learn a particular language quick and when I get ready to study it, you've released a video
Magic 🪄
I just got started with Vite today, and I just got a notification for this vid. It is magical lol.
Always happened to me, a couple years back
💯 exactly same for me
@@TraversyMedia what's the npm i command usage in this video please describe it little more.
Just got started with Vite. Wanted a really quick intro so I could jump into it and not have to waste time watching a 2hr tutorial. This was perfect. Anything I need, I'll learn on the way.
The future of frontend tooling is here, thank you Brad.
Anything taught by you simply gets into my head in a go. Thanks for such crystal clear lectures.
Brilliant ...love the way you go step by step, instead of rushing
The developer experience is so much better! No more having to wait for the code to rebuild, and often you won't have to reload the whole component tree
Thanks Brad! A replacement for CRA has been a long overdue! Vite looks really cool and excited to use it; starting today.
I needed something that I could use to quickly build out a concept without all the bells and whistles of nextjs and I ran into Vite. This video was godsend. I was kind of overthinking it since I am also still learning some React and WebPack fundamentals in the background. After watching your video, I am realizing how simple getting a Vite project up and running is and I can still finish learning react since nothing is syntactically different at least as of now.
I am glad I found this clip. I actually didn't enjoy Vite at first. Felt confusing... you know why? With webpack and other solutions got used to the fact that I have to define paths to bundle-able assets, a lot of other boilerplate config beforehand, specific production config and optimizations that you have to set up - I was looking for that in Vite and got super confused when I found nothing like it.
This has been the best switch I have done in build tools, ever.
Hey Brad, this was really useful to me, thank you for the long-form content on Vite, super clear explanation, love your style!
You just made my life so cheerful ❤
I was in little panic when i heard new react docs got rid of cra & now they have mentioned to use next js by default. CRA official github repository also seems inactive. I did not want to learn Next js right now, but would still love to enjoy react on new projects without setting up things manually. This video really gave me confidence back.
🤣🤣Same here
Exactly at the moment when I wanted to search for "vite tutorial" this showed up. Great timing!
Vite is really cool, i love the way it is so lightweight, giving the developer more control, and making the dev experience more enjoyable
thank u so much Mr Brad it was an amazing video about Vite Thank u so much, and I did %50 the javascript course on ur website so I love it thank u so much for all staff
I wish I could like this a million times. Thank you so much!
As expected of Brad, the best explanation. Thank u !
excellent tutorial, I followed along without a single issue. thank you so much.
It was a great video in order to get our hands dirty using Vite 👏🏻💯
Brad never disappoint
Thank you so much for making a informative video about a good replacement for CRA.
The video is great, we have the theory and the practice. Couldnt ask for more.
Thank you c:
It always feels special when I see a notif about a new video from you.
Excited to learn about vite
Awesome as always Brad. Thanks 😊
Ive been waiting for this!
Thank you so much for this video, was very useful, definitely learned a lot! Thanks!
"Through out this video It might seem like I'm bashing CRA but actually I'm just talking about vite", COLD.
I LOVE VITE
Thanks for doing staff like this vitejs for some of us. Appreciate that a lot. Am learning bro. Thanks
Thanks very much my mentor
Love the way, how you present things....
- [00:00](ua-cam.com/video/89NJdbYTgJ8/v-deo.html) 🎥 This video is a Vite crash course, covering its benefits and how it compares to traditional build tools like webpack.
- [01:20](ua-cam.com/video/89NJdbYTgJ8/v-deo.html) 🧩 Webpack is a traditional module bundler that bundles development source code into a single JavaScript file for production use.
- [02:44](ua-cam.com/video/89NJdbYTgJ8/v-deo.html) 🚀 Vite, unlike webpack, leverages native ES modules in modern browsers for faster development, avoiding repetitive bundling during code changes.
- [03:38](ua-cam.com/video/89NJdbYTgJ8/v-deo.html) 📦 Vite uses Rollup for production bundling, making it a fast alternative for development compared to webpack or parcel.
- [04:20](ua-cam.com/video/89NJdbYTgJ8/v-deo.html) 💡 Vite is gaining popularity as an alternative to create-react-app, offering speed advantages for front-end development.
- [07:02](ua-cam.com/video/89NJdbYTgJ8/v-deo.html) 🛠 Setting up a Vite project is easy using a simple command like `npm create @latest`. You can choose different templates and frameworks like React or Vue.
- [08:24](ua-cam.com/video/89NJdbYTgJ8/v-deo.html) 📄 Vite project structure is lightweight and simple, with a minimalistic `package.json` and straightforward configuration.
- [12:24](ua-cam.com/video/89NJdbYTgJ8/v-deo.html) ♻ Vite offers Hot Module Replacement (HMR), allowing changes in code to be reflected immediately without requiring a full rebuild.
- [13:49](ua-cam.com/video/89NJdbYTgJ8/v-deo.html) 🔧 You can easily set up environment variables like API URLs in a Vite project.
- [14:07](ua-cam.com/video/89NJdbYTgJ8/v-deo.html) 🎨 Vite supports SCSS out of the box, making it simple to add and use CSS preprocessors in your project.
- [15:05](ua-cam.com/video/89NJdbYTgJ8/v-deo.html) 🏗 Building a Vite project for production is straightforward with the `npm run build` command, and you can preview the production build with `npm run preview`.
- [16:10](ua-cam.com/video/89NJdbYTgJ8/v-deo.html) 📚 Vite offers official and community plugins that extend its functionality, allowing for integration with various tools, libraries, and frameworks.
Vite is awesome. Our build time got so much faster when we switched to it from webpack. Until this video, I've pronounced it to rhyme with "byte", whoops.
More like wheat than white 😉
Sweet! I just started using it.
Very simple and nice thank you Brad ❤
Would be nice with more Vite tutorials. Like setting up navbar and routing.
Amazing video Brad! so succinct :)
Remarkable instructor
The idea isn't about getting slow, but taking too much resources.
for someone like me just started and not having the best laptop or computer tool like create-react-app is really heavy on my machine and take a lot of resources ram, cpu, ... to run, so the idea is simplicity and using resources as minimum as possible
Amazing video, exactly what I needed.
Right on time!
Thanks a lot, traversy media, for this
3:21 I think this is not correct. esbuild is not used to serve ES Modules. As you say in the video, this is what the browser just does for us. esbuild is a module bundler. It is used to pre-bundle depencencies, and also when you run build the Vite application.
Thanks for the video, but it'd be better if it shows how to configure ESLint and add rules to the project and also how to add settings for unit tests (vitest or react-testing-library).
I enjoyed this! Thanks
Did Brad just upload a Crash Course from his hotel room? lol 😂 Thanks Brad. Keep up the good work!!
i love these videos.
Wow! Greate resource ever
Excellent stuff, thanks😊
Really helpful content. Thank You.
Thanks Brad!
Thank you, it was very helpful
Thank you so much !
When working with huge scss files, vite can also get fairly slow. It even crashes sometimes.
Try tailwind instead.
You give me Hope that i will be great in Tech space
If I can, you can. As long as you have the drive 💪
I have been learning DevOps this year,
But my learning roadmap is getting distracted.
What can i control that Brad?
Please do a tutorial series on DevOps using Docker.
@@TraversyMedia I have been learning DevOps this year,
But my learning roadmap is getting distracted.
How can i control that Brad?
Please do a tutorial series on DevOps using Docker.
you can look at books and content from Tech world with Nana and Jeff geerling they have some awesome tutorials on UA-cam.
Hi Brad. How did your VS code auto-suggest @12:01? Was it co-pilot?
Thank u Brad
Hi, how are called the theme you used in that video? Also what extension you use for vs code?
Thanks!
Cool!
Thanks a lot!
What's the theme you are using in the VS code?
Follow up on create a react app with Vite.
Do you use npm init vite@latest my-project or npm create vite@latest my-project?
Hi brad Great Stuff! I just been wandering could we use it to build our own Frontend Framework?
Great ! Simple and clear ~
Next time, could you do the same but including, nextjs, node and Mongo DB?
I'm trying to bind nextjs landing page with client react app which uses vite but how can I define base: /lang/path as dynamic path to connect both apps? Is base static only because of linking assets?
I love Vite, its like million times faster than Webpack
I like your vscode theme? would you tell me which theme you're using?
@TraversyMedia Loved the video. Can you also share the extensions u used for those autocomplete of imports, vite configs on ur vscode
excellent
It could have been fantastic if you had incorporated testing with Vite as well.
Thanks for the video 😀🙏
How can I update vite version in an existing vite-react app
Also can we have ( maybe later ) a video on how to set up pwa with vite-react app ? 🙏
Hey Brad !! thanks for Uploading, i have a question for you or the audience here, everytime i hear about upgrading a software or a website, they say it's need funding wich mean money, so how upgrading software or a website need money, it's just coding that all. because i recently heard about twitter and he will be upgrading his source code and they say that it's will take a lot of money. So any explanation please ?
There are many areas of cost. Developers, project managers, marketers, infrastructure. As applications grow, so do the technology demands.
Someone has to design this code and someone has to write it, thats the biggest chunk of cost. Im sure you don't do your work for free either?
@@badziobw i understand thanks but i talking about upgrading with existing workers, but you already have answered the questions thanks a lot
@@TraversyMedia thanks brad for the information ℹ
As I understand during upgrades there is high possibility of broken code base, bugs , while the existing code is tested and proven to stand the test of time.
What are the icons you are using and theme?
What theme do you use for vsc?
For the environment variables section, when you run tests on your react application, you get cannot use import.meta outside a module even though I define type="module" in my package.json. so what I did was, reversed engineered vite to use the process keyword instead of import.meta. so I can now do something like process.env.API_URL. But the issue with the process keyword is that, in production, I get process is not defined since the process keyword is not accessible in browser environments. How do I get around this
Very good
I was using CRA, but lately am using Vite it's fast and never looking back
Thanks - great demo.
Thanks for this! I like vite precisely for its quickness. The only reason it took me so long to switch over: Dang they need a different logo! This one is just ugly.
thanks man
which react snipets extension do u use?
Hi,
Brad
I have enrolled in your MERN stack app course in udemy should I continue with same. Or it will get updated
what is the name of the vs code theme and the icon pack that you are using ?? thanks )))
Hi, how can we setup testing library and jest, or is there better solution for testing?
Wow just saw an article about this vite
Hi,
make a video on your thoughts about the new react docs and the fact they recommend nextjs and others related frameworks. Is this good for beginners?
Can you please create a crash course on react with typescript
Why npm run preview shows blank white page ?
Cheers
Pls do it for angular projects also 👍
Please make Solidity crash course!
I am getting an error while choosing react with JavaScript and swc. The error says "[vite] Internal server error: Bindings not found"
hi, how we use Context API in Vite thankyou ...
is this the introduction of the course or this is the course i was excpecting more lool
GoodJob!
Videos have worked for me but how can I make my website fix on small device's
Hi people! I am completely new to learning react, I bought a udemy course, and they are teaching with CRA, should I continue or shift to VITE? I do not have enough information to make a decision, lemme know? plesss.
So does that mean you can't use vite with certain older browsers
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.
All code on the client is exposed no matter what bundler or library / framework you use.
Kindly create a video about how to configure vite