Exploring the Vite Project Code

[00:00:00]
>> So we notice we have an index.html file. We're still in HTML and we're building stuff for the browser. HTML is not going anywhere. I'm gonna turn on the wrap. Okay, and in our index.html, we have a relatively simple HTML file. It's got a head with some stuff.

[00:00:19]
It's got a title, and it's got one little div in the [LAUGH] body with an id on it, and then it has this very important line right here, an empty script tag. [LAUGH] This tag is empty, but it is referring to by its source attribute a file called main.js that is in the root of their directory.

[00:00:45]
That's the slashes starting here, main js. And that is, basically, Vite is going to put that in here, and the browser is gonna think that it was there all along, the code in that module. And again, we've got to type module to make sure that we're in ES module land.

[00:01:03]
So let us go look at that code, main.js right here. My gosh, can you really not remember to just wrap everything, okay. All right, [LAUGH] what's happening? All right, we've got a lot of import statements. So we're definitely in ES module's land, we got a module type. We see this kind of syntax that we saw before, of importing a useful function or method from another module.

[00:01:30]
In this case, it's not an external package, it is another file in this code base. So it is the file counter.js that is in the same directory that we are in. And there's some other stuff going on that's a little bit more unusual. We're importing SVG files and CSS files.

[00:01:52]
And so this is a Vite thing where, essentially, in our JavaScript, we can be referring to all these other resources, styles, and images, and things like that, that Vite then will figure out from the ones that we're actually importing and actually using. If I have hypothetically a bajillion GIFs in a folder, in a project, hypothetically, Vite will only pull in those images that I'm actually using or those style sheets that I'm actually using, looking at all these different import statements.

[00:02:30]
And of course, the tree of, if I import something from counter, then whatever counter needs to import is also gonna be included. And so what Vite is doing is kind of leveraging a whole bunch of other tools to give us this experience of just, okay, I want that CSS, I want this image and that image, and blah, blah, blah, and allow us to work with that in our JavaScript.

[00:02:50]
And then we see this line right here, which I don't know about you, but makes me feel some kinda way. [LAUGH] So again, this is like a minimum viable Vite project. [LAUGH] The idea here from the Vite team is just to show people what is the structure of the Vite app?

[00:03:10]
Not to necessarily show us how we should be writing our JavaScript code. But what is interesting is that this kind of mimics with just some vanilla JavaScript, query selectors, and setting the inner HTML to a big, long template literal. Mimics a little bit what some of these flashy frameworks, these big things like React and whatever, are doing, when they essentially take a very simple, where did it go?

[00:03:40]
A very simple HTML file with one element in it, and put a whole bunch of other stuff in it for us. So this is not something we would wanna be doing. It's having a meaningless div element and then setting inner HTML on it. That's breaking a lot of, I think, HTML and Web standards people's heart.

[00:04:07]
But [LAUGH] it is kinda pointing us in the direction of, if we start working with bigger frameworks. I mean, it's not that different from really what they're gonna be doing when they flesh out our HTML with whatever we have written in their fancy framework syntax. So that's one justification of what's happening here.

[00:04:28]
But I don't know about you, I would feel a lot more comfortable if as much of this as possible was just in the HTML. Are we on the same page about that? Cool, so we can fix that in a minute. But let's move on with our lives, and let's see what's happening here.

[00:04:42]
So in this template literal, sorry.
>> I just have a quick question.
>> Yeah.
>> Is main.js, is that valid? Is that all valid JavaScript without Vite, or is Vite something special with this? Is this-
>> So the JavaScript, this up here without Vite's kind of fanciness, these parts?

[00:04:59]
>> Okay, yeah, I didn't know if you get it, that felt like importing a CSS file or an image, I wasn't sure-
>> No, there are certain things like JSON files, for example, you can use their basically-
>> So that's.
>> Stringify JSON object. But there's a little bit of magic happening here in order to do some conveniences of, for example, okay, when I tell you to import this logo from that SVG, give me the URL.

[00:05:25]
I would go to that, like the resolved path to that resource, which may be different in development and production, for example, or so on and so forth. So there is some magic happening here. But the syntax of import statements and importing stuff is JavaScripty. And this syntax without the curly braces here is also, fair, JavaScript.

[00:05:55]
We can talk about it a little bit later. But this, with a JavaScript file, like if I [COUGH] earlier in my Cowsay, I did import {say} from, and this is gonna not like it cuz it's like, well, I don't have Cowsay, I mean, all right, VS Code knows about it.

[00:06:11]
But the other option that I have is to import the entire module as Cowsay with this syntax where essentially I get that whole Cowsay object. So now I would do like Cowsay.say, what have you. Anyway, so there's a little bit more like, that is JavaScript, that's not Vite, but Vite is sort of using this JavaScripty syntax to help us do other useful things.

[00:06:46]
Okay, so then we're selecting our one element [LAUGH] and injecting a bunch of HTML in it. And in this HTML we are using some Vite magic to get the resolved URL for these images, or assets, if you will, and put it into our HTML, so that we can find those images or the browser can find those images when somebody looks at this page.

[00:07:12]
Which is how we get our very pretty, where did it go? Logos, exciting. And same with the JavaScript logo. And then we've got this code that's not particularly different from a lot of the stuff we've been doing, where we call a function. Where do we get that function?

[00:07:31]
We imported it from somewhere else, and then we are giving, passing in some, in this case, element to it. So this is not a whole lot different than when we created our forms, or set up our toggle switches, or what have you. So let's go look at counter and see what that's doing.

[00:07:51]
And keeping in mind that, yeah, all this page did, all this app did, was we click a button, and it counts for us. And that is basically all that functionality is coming from right here. So there's hopefully nothing super shocking going on in this code, but again, minimum viable Vite.

[00:08:15]
[LAUGH] The idea here is that we have a function that takes in an element, does some stuff to it, and we are exporting that function from this module, so that it can be imported into main. Okay, if I run my, what did I do here? Did I edit something?

[00:08:41]
Yeah, backticks everywhere. Okay, now,
>> Sorry, I just saw your browser change to your styling rules. It added a bunch of semicolons, my copy doesn't have them.
>> Indeed. We will talk about that.
>> All right
>> A bit later. Yeah, so VS Code is responsible for that, well, VS Code and some friends that VS Code has access to.

[00:09:10]
So we are also in a much larger environment than it would seem right now when I run this stuff in VS Code. So when I save, it does some stuff, we'll talk about that later. Okay, so now, we have an idea of what is actually happening when we run this code.

[00:09:26]
But I had quit my development server. So that was just still in my browser. It's not actually running. Let's try to run it. Npm run dev, which is gonna call Vite, and it's gonna start a new local server at whatever port. And we can customize that and everything, and this is the same thing that we saw before.

[00:09:48]
But I can now mess with stuff and have it be, for example-
>> What was the command you just entered to restart the server?
>> Yep, npm run dev.
>> Okay, got it.
>> npm run dev. And what that command is doing might differ from project to project, but many, many projects that we will find ourselves needing to work on will have a dev command for the dev server.

[00:10:20]
And often a build command for doing all that fancy optimization and stuff to create the production build. Okay, so anybody who watched Sesame Street? Four [SOUND] the count, no? Okay, so I just changed the string that's in the button, and boom, lo and behold, no refresh, no nothing, Vite just automagically updated only the modules that I changed in this app that I'm running.

[00:10:52]
Now, it doesn't look that special because we could have just edited this in HTML, in this case. But this becomes very, very useful when you're working on a complex project with lots of different modules, and you don't wanna have to be redoing everything every time you change something that really slows you down.

[00:11:10]
Especially if there are a whole bunch of tools involved in building the site to the development server, and then that could be a very slow iteration process. So this is one of the main advantages of Vite, is you get this very quick, which the name is French for quick or fast, via the very quick kind of iteration cycle.

[00:11:32]
So that you can mess with stuff and immediately see the results and mess with stuff and immediately see the results, and you don't have those moments in between to just ponder the nature of existence and your life and its choices. So basically just a win-win.