Vite Crash Course
If you’re tired of waiting for your Create React App (CRA) projects to build, then you may want to consider using Vite as a faster alternative. Vite is a build tool that is designed to be extremely fast, with near instant hot module replacement and blazing fast builds.
Getting Started with Vite
Getting started with Vite is easy. You can simply use the following command to create a new Vite project:
npx create-vite my-vite-project
This will create a new Vite project with all the necessary dependencies and configuration files. You can then start the development server using the following command:
npm run dev
Features of Vite
One of the key features of Vite is its use of native ES modules, which allows for faster module loading and bundling. Vite also supports TypeScript out of the box, and has built-in support for CSS pre-processors like SCSS and Less.
Performance Benefits
Compared to CRA, Vite offers significant performance benefits. Builds are faster, and the development server has near instant hot module replacement, making for a smoother development experience.
Conclusion
If you’re looking for a faster alternative to Create React App, then Vite may be the perfect choice for your next project. Its speed and performance benefits make it a compelling option for developers who value efficiency and productivity.
excellent tutorial, I followed along without a single issue. thank you so much.
It could have been fantastic if you had incorporated testing with Vite as well.
What are the icons you are using and theme?
I wish I could like this a million times. Thank you so much!
Thank you so much !
Its a million time better than CRA
I enjoyed this! Thanks
Why npm run preview shows blank white page ?
Love this channel, but this video is trash
First line from the documentation is repeated back and worth back and worth without any explanation. "Vite doesn't bundle everything and that's why it fast. It fast because doesn't bundle everything" Just common words
But this really doesn't tell us what to do with the mess of truncated code that doesn't run on a host after it's been uploaded.
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.
Vite is really cool, i love the way it is so lightweight, giving the developer more control, and making the dev experience more enjoyable
– [00:00](https://youtu.be/89NJdbYTgJ8?t=0s) 🎥 This video is a Vite crash course, covering its benefits and how it compares to traditional build tools like webpack.
– [01:20](https://youtu.be/89NJdbYTgJ8?t=80s) 🧩 Webpack is a traditional module bundler that bundles development source code into a single JavaScript file for production use.
– [02:44](https://youtu.be/89NJdbYTgJ8?t=164s) 🚀 Vite, unlike webpack, leverages native ES modules in modern browsers for faster development, avoiding repetitive bundling during code changes.
– [03:38](https://youtu.be/89NJdbYTgJ8?t=218s) 📦 Vite uses Rollup for production bundling, making it a fast alternative for development compared to webpack or parcel.
– [04:20](https://youtu.be/89NJdbYTgJ8?t=260s) 💡 Vite is gaining popularity as an alternative to create-react-app, offering speed advantages for front-end development.
– [07:02](https://youtu.be/89NJdbYTgJ8?t=422s) 🛠 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](https://youtu.be/89NJdbYTgJ8?t=504s) 📄 Vite project structure is lightweight and simple, with a minimalistic `package.json` and straightforward configuration.
– [12:24](https://youtu.be/89NJdbYTgJ8?t=744s) ♻ Vite offers Hot Module Replacement (HMR), allowing changes in code to be reflected immediately without requiring a full rebuild.
– [13:49](https://youtu.be/89NJdbYTgJ8?t=829s) 🔧 You can easily set up environment variables like API URLs in a Vite project.
– [14:07](https://youtu.be/89NJdbYTgJ8?t=847s) 🎨 Vite supports SCSS out of the box, making it simple to add and use CSS preprocessors in your project.
– [15:05](https://youtu.be/89NJdbYTgJ8?t=905s) 🏗 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](https://youtu.be/89NJdbYTgJ8?t=970s) 📚 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.
Brad never disappoint
GOD how much I HATE webpack! I soaked myself along with my system inside a sanitizer for 2 hours I spent on configuring webpack. With Vite, it was literally 2 mins when my dev phase is up! HATE WEBPACK!
Vite is showing a blank page after using routing, anyone has the same problem?
My Hello world is not showing I don't know what I did wrong
Would be nice with more Vite tutorials. Like setting up navbar and routing.
This tutorial didn't tell me anything. I know nothing about React. I'd like to see a tutorial just on Vite with html css js to start. Most of the time I use Laravel with Tailwindcss or Vue3. I'm very green with Vite so in this tutorial I wasn't sure if I was looking at Vite functionality or React functionality. At this point, Vite is more of a hinderance than a benefit. Looking through the Vite docs, they don't provide any examples that I can see or examples of what can be done with Vite.