Check out a free preview of the full Vanilla JavaScript Projects course

The "Introduction to Vite" Lesson is part of the full, Vanilla JavaScript Projects course featured in this preview video. Here's what you'd learn in this lesson:

Anjana introduces Vite and explains why it's a valuable build tool for JavaScript developers. Vite is widely used and provides several of the necessary tools like a development server, code bundling, and a robust set of plugins.


Transcript from the "Introduction to Vite" Lesson

>> With that, let's learn a new hot tool, [LAUGH]. Okay, so at some point, we do need to pick some tools to do some things, like for example, we picked a JavaScript to write some code for the browser in. And that's not even our only choice, there's lots of other languages that we can use to write for an ENCODE, but we're going to stick with JavaScript because it's been doing the web favor since 1995.

So the, The tool that we're gonna talk about now is called Vite, you can read all about it at And it is a tool that has become, in my experience, increasingly known and used and liked in the JavaScript world for a few reasons. One of them is that it does some very fancy magic for your developer experience as you are building and like iterating on a project of a certain type, which we'll talk about later, that does things like, for example, allows you to change one little part of your code base and instantly see that update on your test page that you're looking at where we're looking things that localhost and whatever.

And it'll just instantly update all of these things underneath the hood without you having to go in and like reload everything and reset everything else that you'd already set up. So, there's some fanciness there, there's lots more fanciness to read about on the website and whatever. It also, it integrates and supports with a whole bunch of different frameworks.

So it's not like a React ecosystem tool, or a view ecosystem tool. Although there is a lot of the view and Vite, folks are quite close, so there is a lot of view related things for it, but there's also a ton of other React tooling for it, and vanilla stuff, and all this stuff.

So, the other thing is thing is that it uses another super popular tool called Rollup, which we're not gonna get into the details of but it has this very open kind of plug in system. So people can write little plug-ins that help you as a developer with your developer workflow, you can kind of customize it with this plug-in system.

So that's why a lot of people like it for JavaScript. Now, why are we talking about this tool in the context of this course? So, the reason that I chose this here is because I think it's approachable, I think it's like you don't have to learn a whole new set of things in order to kinda get productive.

It's also pretty widely used these days for certain types of projects, single page apps with perhaps a framework perhaps not, but basically like not a not the most massive web app that you've ever seen, but something that's on the scale of what we've been doing and bigger, but yeah, in this kind of order of magnitude.

And it provides lots of useful rabbit holes for learning more about like how all of this tooling works, all of the different options and magic and things that are happening, other tools in the ecosystem like Rollup, etc. So, it's kind of, I think, a good entry point, a main, if you will, for getting into a whole bunch of other tools and frameworks and concepts and in dev tooling.

That's why I picked it, if you hate it, that's cool, go use something else, but we're just gonna use it a little bit here and hopefully it's gonna make our lives a little easier.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now