Vite Setup

[00:00:00]
>> So let's talk about Vite. And I've been pronouncing it Vite for so long that I probably will keep calling it that. It is pronounced Veet, not Vait. And it means quick in French, which is where the name comes from. So Vite is a tool put out by the view team.

[00:00:20]
It's going to be our build tool that we're gonna be using today. Previous versions of this class used Parcel, and before that it was Webpack. I think that's it. I don't think I ever use Browserify in this class. But I basically just described to you my history of build tools.

[00:00:38]
I used to use Browserify long time ago with Grunt and Gulp. Yeah, maybe we didn't used to do that. I'd have to go look at what version one actually used. Anyway, after that we used Webpack. And then for the longest time I've been using Parcel. I like Parcel because, and it's still super valid for you to use Parcel now.

[00:00:58]
Parcel is zero config. You just put it in a file, and the entire thing just works. Vite is create a very small file, and then everything just works. So it works really well. Vite under the hood is using roll up, right? Roll up is a very useful build tool created by Rich Harris, who's also the guy that created Svelte.

[00:01:22]
He's taught here Frontend Masters, very smart, very nice person. Works at Parcel now. So Vite, which is created by the view team, which was created by a person who created Svelte, which we're now gonna use for React, I feel like it's just a full circle now. It's like a framework group hug.

[00:01:44]
So Vite, awesome project. If you wanna use Parcel, just checkout v7 in this course. It works relatively similar. So let's go ahead and use Vite. So we're gonna install here, npm install- capital D. We're gonna do vite@3.1.4, and we're gonna do @vitejs/plugin-react@2.1.0. Okay, that'll take a second. It builds a lot of stuff.

[00:02:23]
Yeah, so it does use roll up. But it also uses es build as well. There's a bunch of stuff that goes into Vite. So I actually don't know all the misdirection that happens in there. Suffice to say, it's handling a lot of stuff for you that you don't have to really worry about.

[00:02:34]
It's also handling TypeScript. For the most part, you set up a little config file, everything else Vite just figures out for you, and you end up with a really good optimized output. Super valid tool to use in production today. Go back to your code in index dot HTML.

[00:02:51]
We're gonna delete these two script tags cuz for now we're actually going to bundle React into our project. Okay, and then we have to put type equals module here. This is for Vite to know that we're not doing common JS here, we're gonna be doing ES6 modules, right?

[00:03:16]
And then not dot slash app JS, we're actually gonna make this a JSX file. Next question that I know someone's thinking is, why are we doing JS and not, or why are we doing JSX and not JS? Famously, one of the React core Devs said, I just do JS.

[00:03:36]
Why doesn't everyone do JS? JSX is just an extension of JS, why do we need a different file extension for it? Frankly, a little inclined to agree previous versions of this class called them JS files. But Vite insists that you call it JSX, or it will not do the JSX translation.

[00:03:53]
So we have to call it that. Or we have to go configure Vite to look at JS files for JSX, which I didn't wanna do. So for my benefit, for your benefit, for this class, we're gonna say, JSX. So, dot JSX, we're gonna rename this app JSX up here momentarily, or we can just do it now, JSX.

[00:04:14]
And now all that stuff will work. Okay, now we need to create, again, at the root of our project, a, what is it, config.vit.js. All right, did I get that backwards, other way? Vite.config.js. I didn't get my cool little logo there, so that's how I knew that I messed it up.

[00:04:45]
Okay, in here we're gonna say import, define config from, not roll up. Thank you. Config from Vite. And we're going to import react from @vitejsplugin- react, okay? We're going to export a default to find config with an object, plugins. And we're gonna give it react with the invocation of the React function.

[00:05:23]
And then I'm gonna tell it that my route is source. So what I will tell you is, most people actually will put their index html file directly in the base of their project. So if you did that, then you wouldn't need this route. In retrospect, that probably would have been easier, but the entire course is written this way.

[00:05:46]
So just follow with me here. At the end it really doesn't matter, to be totally honest with you. Okay, we now have a build process. This is it. This is really all we need to do for our build process. We'll come back here and mess with it maybe a little bit later.

[00:06:01]
But for the most part, this is just done. Parcel is zero config. Vite is this much config, which is, I'm gonna judge acceptable, right? Not too bad. And so what's gonna happen is, it's going to go into your source directory. It's gonna find the index html file. And then it's going to find it's like, okay, you have an app dot JSX, and it crawls your graph from there, right?

[00:06:25]
So understands your JS. It'll understand your CSS, it runs all that stuff through Vite as well. And then, it'll come in into your app dot JSX, it'll find all of its dependencies. So it finds your graph all by itself. You don't have to do anything more than that.

[00:06:42]
That's how the black magic is happening here. If it's all coming from your index dot HTML. If you have other heads, right, index HTML being the head file that it crawls out of, you can identify that to Vite, and have a go find that. Maybe you have two different apps that need to be rendered out, right?

[00:06:58]
You would do that here in your config. So by default, this is just gonna work for us. So the next thing that we wanna do, we deleted the source or those script tags. So now we need to go install React so that it'll build correctly. So npm install -D.

[00:07:15]
And then when you react @ a team, and this isn't D, we actually want this. React.2.0, and react-dom@18.2.0. So NPM install without the capital D, it is not a dev dependency, it is a production dependency. And then we want 18.2.0, and react-dom@18.2.0. They release them in lockstep, so they're always the same version.

[00:07:52]
So you go in here, we see that we do have, in fact, Vite is in here, React, React-dom. Awesome, all good stuff. We're gonna go back to app dot JS. If you haven't renamed it app dot JSX, please do so now so it's app dot JSX. And we have this React is like I don't know what that is, React is not defined.

[00:08:12]
You can see here the saying es lint no undefined, just as a helpful thing by the way. If you click on this, no on def, this will actually take you directly to the esint doc telling you, it's opening Firefox for me, taking a sec. It'll take you directly to the rule that it's breaking so you can actually read, right?

[00:08:33]
That's just a helpful tip for VS Code that I quite like. So what we're gonna do up here is we're going to say, import react from react, and import react-dom from react-dom. So now, notice this isn't read anymore. If we run npm and lint, no problems anymore. Cuz now these are not undefined, they're defined.

[00:09:06]
Cuz we know where they're getting from. And again, V is smart not to say, you're importing react from react, I'm going to include that in your package now. So for the most part, we don't have to think about our build anymore. Vite just kind of takes care of it for us.

[00:09:19]
So one thing that I want to show you about ES6 modules. Let's say that right now we're only using create route, right? So I can come up here and I can delete this and I can say, I want just create route here. And I can go down here and instead of saying react-dom.

[00:09:37]
So this is how you import just parts of packages, right? In theory, this is what you wanna do for the most part. Vite has something that's called tree shaking, which is another word for live code inclusion, which is different than dead code elimination, right? Live code inclusion, aka tree shaking, only includes code that you're actively using.

[00:10:00]
Whereas dead code elimination actually we'll go through and see if we can find things that are never called. Live code inclusion is always better, right, for the most part. So if you do all of your code like this, where you're only including things that you use, it gives Vite the opportunity to eliminate code.

[00:10:15]
Let's say react-dom had some different part that you were never going to use. It wouldn't include that in your bundle anymore, right, which is objectively a good thing. Now, I think no matter what you do, because of react-dom, it includes everything every time. So I don't think we're actually saving anything here.

[00:10:32]
I'm just trying to get you in a good habit of an only including the things that you use. But that's what those Cali brackets mean. It's like I'm only including part of this, which I only use here, right? So, head back to your package.json to your scripts tag.

[00:10:49]
We have format, we have lint here. Let's put a couple more in here. We're gonna put Dev, which is just gonna be Vite. That's just gonna be like start my DevServer and get me going. Build, which is, get me ready for production, build me out to static files.

[00:11:11]
So this is what you would run in like CI or something like that, right? Okay, and then we want preview. I find this one to be useful and one of my favorite things that's different about Vite versus other build tools. I wanna see my production build before I go to production, right?

[00:11:32]
So what preview does is, it runs Vite build, and then it shows you what Vite build built for you. If you were doing this with Parcel or something like that, you'd have to do Parcel build, and then you'd have to use some sort of static web server to spin it up and shove yourself, right?

[00:11:48]
It's fine, it's not that hard to do. But with Vite preview, it does all that for you. Okay, and now I can say npm run dev, I get this nice little thing going here. And now I can say, open this in my browser. And now I have Adopt Me running on my local computer.

[00:12:15]
So I don't want that in Firefox, I want this here. So [INAUDIBLE] you have sort of file one here. Close this tab please. The one that we were using before, right? Please close that one that your file opened. And now just go to local host, 5173, that's what Vite runs on always.

[00:12:40]
And you should see the same thing. But the reason why I'm being very explicit like, please close this, itt's very easy to come back to your browser and not look at which tab you're on. And you're refreshing, it's like, why is this breaking, why is this not working?

[00:12:51]
It's cuz you're not using your DevServer. Cuz if I open that and I refresh that, you're gonna get not rendered, right? Because now React is no longer in the project, and so doesn't know what to do. So please make sure you're on localhost 5173. Any questions?
>> Getting the error you installed ES build for another platform than the one you're currently using?

[00:13:14]
>> That's interesting. So it sounds when MPM installed Vite, it chose the wrong ES build for you. I'm gonna guess it's an Intel Mac, yeah?
>> So my guess is [CROSSTALK]
>> I'm sorry, it's a-
>> M one? So this is an M one max. So it does work on M one max.

[00:13:41]
It probably installed the intel build for it, not the. So maybe notice, self identifying is the wrong architecture? That's what I look into. All right, so if you go back to your React hold courses here, we are all the way through Vite here and our JS tools. And you can see here we now have another.

[00:14:07]
If you're this far and all your stuff is not working correctly, please to top over 02 JS tools. And you can see all the stuff that we just did together here should be right here. And if you do open one of these. So let's say I installed it, cloned it, and I go into this directory, just make sure you do MPM install, right, to get all of the dependencies installed.

[00:14:31]
And then you can run MPM, run Dev, and everything should just be working.