Vite

[00:00:00]
>> Brian Holt: Let's talk about Vite. And I did check it is pronounced that way, you can call it Vite, but it's supposed to be French for quick, that's what I'm told. I don't speak French. So Vite, a pretty cool project from the creator of Vue. What I found kind of interesting about Vite, it's not actually the bundler, the bundler is roll up, right?

[00:00:27]
And it has been since the beginning, I think. They just put a lot of much better developer experience around roll up, cuz roll up is a difficult thing to tune and get working correctly. Rollup is great, especially for bundling modules and things that you're gonna publish, but it's not made for developer experience, it's made for performance.

[00:00:50]
It's why I taught Parcel for so long as part of this course, I still like Parcel, you're very welcome to use Parcel. But Vite has kinda just won at this point, right? Everyone tends to use just Vite. There's not really a lot of questions, the tooling around it just keeps getting better and better.

[00:01:07]
You'll see when we get to the testing part of it. Vite makes V test very easy to use, and they're just making it better. They started a company around it now, and they're going to change from Rollup to Rolldown, as their bundler, which is a rust based bundler for JavaScript.

[00:01:31]
Kinda cool.
>> Brian Holt: So it's gonna do a bunch of stuff for us. Right now, we have one file being imported into one index.html directory, and that works with no build step, but now what happens if we wanna have multiple files? Right? And we wanna import in and we wanna pull in different libraries and stuff like that, the complexity just ratchets up exponentially.

[00:01:54]
And so Vite kinda helps us tame that down to, you can just kind of read and write files as if they were already present, which ends up being really helpful.
>> Brian Holt: It makes pulling things from NPM very easy and it'll handle everything like minifying our code, all the other optimizing techniques that you don't really wanna have to think about, they've already thought about that for you, so you don't have to worry about it.

[00:02:18]
So yeah previous versions we used Parcel, awesome projects. They also might use.
>> Brian Holt: Rollup, no, I think they actually wrote their own bundler, so anyway, Parcel is cool, and the old mainstay webpack, which has been around forever, right?
>> Brian Holt: So, we're gonna do this though, we're gonna get vite@5.4.2 and vite.js/plugin-react.

[00:02:47]
These are kind of our two minimum requirements to get started with Vite.
>> Brian Holt: So we're just gonna copy and paste that in here
>> Brian Holt: And that should install our stuff for us.
>> Brian Holt: Okay, and then what we're gonna do here is we're gonna go to index.html, close this for a second.

[00:03:14]
We wanna get rid of these two script tags.
>> Brian Holt: And then from here you have to do one more thing. You're gonna have to say type="module", you need to let Vite know that you're gonna be working with modules. And actually, I don't think it even works with common JS anymore.

[00:03:40]
They basically just said, look, if you wanna be using Vite, you got to be on ES modules. That's what we've been talking about this entire time. That's so, shouldn't be a big deal. But yeah, make sure you add that type=module or it's gonna yell at you.
>> Brian Holt: Okay, now make a vite.config.js files.

[00:04:07]
>> Brian Holt: And we are going to do import, defineConfig, not from roll up.
>> Brian Holt: From Vite.
>> Brian Holt: We're going to import, react from avitejs/plugin-react, cool. And then we're going to export default defineConfig.
>> Brian Holt: And we're gonna have plugins, I just love this autocompletion.
>> Brian Holt: And it's gonna be an array.

[00:04:46]
We're gonna give it react, which is a function that you have to invoke. And you should end up with something like this. So at its most basic, Vite handles most of this stuff out of the box so you don't really have to configure it very much. The only thing that we have to say is, this is a React project, you're gonna have to do React type things, and that's it.

[00:05:13]
>> Brian Holt: Okay?
>> Brian Holt: Let's go back to our terminal.
>> Brian Holt: And we're gonna do npm i, or install whatever you want, but not the dash capital D because we're going to install some production dependencies, not dev dependencies. As a total side note, it really doesn't matter very much cuz you're always gonna build your project before it goes out to production.

[00:05:40]
So whether it's the dev dependency or not, everything gets installed every time, but some people find that distinction extremely important. So npm install react, we're gonna do @18.3.1 and react-dom@18.3.1. Now, people are asking me, why are we not doing 19? 19 still is not officially stable yet, it's in release candidate, it's stable-ish, and we'll talk about it at the end of the course.

[00:06:16]
But once react 19 is stable, then we will come back and we'll do a complete intro to React v10.
>> Brian Holt: Will this course work with 19? Almost certainly, they're not changing very much they're not taking very much out, everything that I am teaching you today applies 100% to 19.

[00:06:33]
They've already told us all the stuff they're taking out, I'm not teaching you any of that stuff. It's just that, so, extremely likely that if 19 is out by the time that you're watching this course, you could just use 19, but if you do 18 .3.1. I can guarantee you everything I tested with 18 and also everything applies to 19, so have no fear of taking this even with react 18.

[00:07:06]
>> Brian Holt: Interesting, what's- says that there's a security vulnerability. By the way, by the time that you watch this course, there will certainly be lots of security vulnerabilities. That's very normal, I'm not telling you to install a Bitcoin miner on your computer, just mine, not anyone else's, right? So don't worry too much about that.

[00:07:27]
If you want to, you can see if npm audit fix will work. Sometimes it doesn't, look, we did, I did it, we fixed it, I fixed the Internet. All right.
>> Brian Holt: All this does is it goes and finds a package, so if there's a patch version that's available that just fixes the problem.

[00:07:43]
If it does, then it installs that, that's all it does. Okay, let's go use Vite.
>> Brian Holt: So we're gonna go to our source directory, and the first thing I wanna do here is we have deleted these script tags from our html, so that means React, just no longer available in our project, right?

[00:08:07]
So in app.js we're going to go import 'react' so that we can use it. We're gonna say import React from react and import {createRoot}.
>> Brian Holt: From 'react-dom'. And then down here, I think we'll have to go delete the ReactDOM.
>> Brian Holt: Okay, so Vite will take care of plugging in React here so that all these React references will now work, right?

[00:08:47]
And when you have no curly braces here, this means import the entire library as one top-level object, right? Or maybe a different way of saying is import whatever the library author has designated as the default export of whatever React is. And I will say that's normally all of the things as one giant object, but it doesn't have to be.

[00:09:12]
And then this is called a named import, where you're saying go to the ReactDOM library and only get the createRoot function in this particular case. That's what those curly braces mean. This is a default export, this is a named export.
>> Brian Holt: Okay? First of all, one of the cool things is, I think we fixed lint.

[00:09:37]
I think if you say npm run lint, you should get no errors now because now there's no globals, right? We know where everything is coming from.
>> Brian Holt: So that's pretty cool.
>> Brian Holt: And now let's go and make it so that we can actually run Vite to actually run our server.

[00:09:59]
So I want you to go to your package.json, and we're gonna add a couple more things into our scripts.
>> Brian Holt: I don't know why I have a habit of keeping these alphabetized, but it just became a compulsion one day and I just never stopped it. So build, vite build.

[00:10:21]
>> Brian Holt: Dev, vite and preview is vite,
>> Brian Holt: Preview.
>> Brian Holt: Some people might say, well, this looks better like this, I don't know. Honestly, it doesn't really matter what the order here, whatever you wanna do is fine with me. So let's talk about these commands we put in here.

[00:10:51]
Nine times out of ten, when you come to your local development environment, you're just gonna say Vite and you're just gonna get going, so you can do npm run dev and start your project.
>> Brian Holt: I have such strong muscle memory to go do npm run dev for any project I get into that I make sure that that's always the command that I wanna run.

[00:11:08]
[LAUGH]
>> Brian Holt: Build, this is something that you would run in a GitHub action that would actually build the project into static assets and such, that then you could ship off to Vercel or AWS or Netlify or Fly or something like that, and you could serve those from there.

[00:11:28]
And then preview is kind of an interesting one. I don't know if you've ever had a bug that only seemed to manifest whenever you built the project, as opposed to run it on the dev server, preview aims to help with that. It's like, I'm gonna build this for production, and then I'm gonna serve it to as if this was a production box to help you kinda figure out those problems.

[00:11:44]
So I almost never use it, but when I do need to use it, I'm glad it's there.
>> Brian Holt: And then one more thing, make sure you add a type module.
>> Brian Holt: And the order here is not important.
>> Brian Holt: This is just telling any tool that uses your project, this uses ES modules, as opposed to using common JS, which is the require style.

[00:12:21]
>> Brian Holt: So that can be helpful as well.
>> Brian Holt: All right, so, now in theory, npm run dev, she gets something that looks somewhat akin to this.
>> Brian Holt: So you might be wondering, why 5173? I did two, that's why I went looked it up, what's five in roman numerals?

[00:13:01]
V. V, do you get it now? [LAUGH] V-I-T-E. Common numerals and lead speak. Yeah, I was like, that's a stretch for sure, guys. [LAUGH] Yeah, but you can see now this all still works exactly the way that it was before, but now we're using imports from for our React stuff, and it's being served on 5173.

[00:13:26]
So go back to app.js.
>> Brian Holt: And I fixed it here already, but you see react-dom, this is originally what I had in here, the ReactDOM. You just need to put react-dom/client. This is the old way of writing it, this is the way that people used to write it, which is why it's still kind of burned in my brain.

[00:13:47]
And I think it'll work through React 18, but they might break it in React 19 or React 20 or something like that. So just put react-dom/client and everything should work.