Vite Starter

[00:00:00]
>> And so we've got a full course website here, it's got these slides, it's got links to all the reboos we're gonna be using, it's got all of my notes. It's got extra content that we could tap into if we need to, or you can kind of use as an extension in a little bit.

[00:00:15]
But this is where everything that I say hopefully if all goes according to plan. Everything I say is listed here as well that you can refer to and build upon. So we'll head over there and we'll actually get started with our very first, Vite app. What we're gonna do in the very beginning is I have one repo in here that is called Vite starter.

[00:00:41]
And, there's nothing particularly special in this repo it's just mostly if we wanna show how to load an image or pull in JSON or process markdown that happens to be a repo that has some images in it. Has the mark down files, has some JSON files has, some tests written some helper functions that we can pull in, but it's just yeah.

[00:01:02]
It's just a bunch, it's a basically a toy chest full of fun things that we can kinda play around with. So you can kinda go here and grab this vite-starter, there's a bunch of ways that you can clone it down. There's a tool that's super useful called div git which will kind of clone down the repo, And actually keep that one up and running.

[00:01:31]
So I've got a copy of vite-starter in here, and let's just take a quick tour. Really, all that you truly need to get started with Vite is exactly two things, you need to NPM install Vite and you need an index.html file. Once you have those two things, if those are only the only things you have in this directory, you would be good to go, in terms of starting with the Vite project, I guess maybe you need to package JSON to.

[00:02:02]
But like, so NPM and knit dash dash yes and then NPM install Vite, and touch index.html, that's about all you need to get started, there's not a lot of configuration. In fact, for the like first few sections, I don't have a configuration file at all, right? We're just going to do what Vite does for us out of the box, and we're not going to like worry about configuring it in the very beginning, we will configure it.

[00:02:30]
That'll be what we spent a lot of our time together doing today, but we're gonna see how easy it is to get started. And then as we dive deep into how powerful it is, that's when we'll see all the different ways that we can configure it. So we'll go ahead here and if I look at my package, JSON, you got a few ways you can start up this application, as you can see, there's NPM, start and NPM run dev.

[00:02:47]
This is a common pattern that you'll see in a lot of Vite apps, but a lot of apps because if you're using something PM, PM or something that supports mono repos, right? That will then start all the packages all at once and apply across all of them. For us, we really don't care.

[00:03:02]
So if you like NPM start great, if you like NPM run dev, very cool. To build the application, it's just going we yeah, we can choose to run the TypeScript checker, if you're just using JavaScript really all you need is vite build, so on and so forth. So I could for instance, type make that a little bit bigger npx vite and that will start up my server.

[00:03:28]
I can do npm run dev, that'll start it up, I can do npm start let's do that one. And you can see that it starts up a development server and a few options here. One is that the default port is 5173, why is that number? I have no idea.

[00:03:45]
If you don't like that you can do -- port 3,333 whatever port makes you the happiest. You can also set that in the configuration later if you really don't have this port number you don't feel like you'll ever remember it. I'll give you a hint, mine's set to 3,000 at work.

[00:04:00]
So you can also do the -- host to expose it locally on the network in case you wanna pull out your phone and go visit your site on the network and then see what it actually looks like on a physical device. But for the most part, we can kind of just go to this site, and you see my beautiful page.

[00:04:18]
Right now there's no JavaScript, there's no CSS, there is, I guess, some amount of HTML for a counter, that doesn't work because there's no JavaScript or CSS. And we're gonna add a few things to it. And if I look, like I said before, right now, you can start with just the index.html file.

[00:04:37]
A package JSON with vite in fact, if you haven't installed globally, I guess you don't even need the package JSON, you can just do it with index.html file in the same folder. And that's effectively all you need to get started. Now, that doesn't do a lot for us, but in terms of like my promise that like there's not a lot of configuration and boilerplate that you need to do in order to get started, I have at least kept that promise to you.

[00:04:59]
And so we'll talk about now how to kind of build it and extend on it from there. So, you know, there's right now nothing's just a plain old regular HTML document, there was nothing special in here at all. I could we don't need service workers, we can just say something like console.log and like nothing like everything you expect is gonna start this way, but let's go ahead and get a sense of it real quick.

[00:05:33]
There's to no one's surprise we log something to the console, right? What would be cool, though, is if we could import a file, right? I could, for instance, I can go into this index.js, and I could say something like console.log, hello from index.js. And just for funsies, I'm going to do a document., let's do query selector, go get me an h1 and let's set the text content to hello from index.js as well.

[00:06:11]
This is gonna blow up, we're gonna fix it, it's gonna blow up. So we can go back over, we didn't import here, so let's go back into index.html. And the first thing I can try to do is that I can just do src. Now, you'll notice that I'm using a local, am not using from the public directly, am actually just referencing a file on my file system, right?

[00:06:41]
Like relative to where this index.html is in my repo, and that's not normally what you would do on this first file. You'd be like, okay, when it's built, it's gonna be in disk, or it's gonna be at the root, or what have you, and it's all gonna be in there.

[00:06:54]
Actually, for us right now, we can actually reference a local file. And now it should blow up, can't set text context of no, and that is because it loads before the h1. But that's not really our big problem right now, it's just a problem that exists temporarily at this moment.

[00:07:16]
Which is, it would be cool then if I could I've got this counter file here and that's got some logic in it that wires up everything I need for the counter, right? What would be nice is if I could just say, okay, cool, I want to import, I think it's initialized counter from counter, right?

[00:07:38]
And you'll see that blows up in a different way can now use the import statement outside of a module? All right, right on. So the only thing that we really need to do here in order to get everything working the way that we want to watch, you're ready for it?

[00:07:55]
type = "module", and the nice part about this is this is not a vite specific thing, this is just the modern web. A lot of what we're doing is we're just going to assume that the modern web exists in everything, Mark.
>> We also don't have an h1

[00:08:12]
>> We have an h2 See what happens when I change stuff, here we'll change it to an h2. Cool, and you can see it found it. Now, if I take out that module, module actually waits till the very end to load, so the DOM content will be loaded as deferred, so you get the original content.

[00:08:34]
Let's take out the module and we'll see. This is what happens when you try to mark up from memory. Right on and you can see it blows up, e add the module. Two things happen, one, it loads after the DOM originally loads, and then two we can now use we can import whatever we want.

[00:08:53]
We can go initializeCounter, and we can use these import statements and everything just happens. And that is honestly the only vite specific thing that we did in this entire file to get up and running in the very beginning was using a local, just a relative file path to the actual files that we're working on.

[00:09:13]
And not necessarily where the initial the build will eventually be. Beyond that, there's no theoretically, no needed entry point that we needed to specify, nothing the index.html file is the entry point just like it would be on the web. And everything kind of works and is wired up from there.

[00:09:33]
And that is out of the box the only thing that we needed to do to get vite working at all. And so we have the ability to like pull stuff in we've got it in place, we know that it loads afterwards. Now let's take a look at what the production build will end up looking like.

[00:09:50]
So we'll do npm run build, and it's gonna build everything into this dist folder here. We can see it took everything in my public directory which is favicons and icons and stuff along those lines. And it went ahead and it built an index.html that is effectively the exact same code except for the instead of that relative path it swapped it in with a built version of my assets.

[00:10:19]
Which also put a little identifier at the end so that we deployed to production and somebody has cache headers set that this is a different URL. So they will not get the one cache they'll get the new JavaScript in this case as well even if they have the browser was gonna otherwise try to cache it.

[00:10:37]
But that is the only change that VITE really did to our HTML file it will actually look that you can do all sorts of stuff in here and we'll see some of that towards the end but you know for now like. Effectively, as long as you've got an index.html file, and you can reference the JavaScript file, you're configured and you're ready to go.

[00:10:53]
We can go and we can see, for instance, in assets, I've got that index.js, and there's lots of stuff in this directory. And you'll notice that none of that is in this assets folder all we've got this index I'm pretty sure if I hit save prettier will do its best to unmodified that slightly.

[00:11:12]
Which there's some code in here for actually that preloading that we're talking about and the changes based on the script tags. But other than that, it's simply our code compiled and you can see parts of it that we have in there, all thrown together for us. So, outta the box we didn't have to set up any configuration, we didn't have to do anything, we could get up and running with a new idea incredibly quickly.

[00:11:39]
I think that's very powerful and like I said, it wired up all our static assets for us, it swapped out that file with what we actually needed, so on and so forth. And generally speaking, if you have just one script tag, it will go ahead and just make you one file.

[00:11:59]
And if I imported something, you can see that I have one file, we went to index.js, index.js imported, that counter, right? But it's all one file because these like, well, if I get this one dynamically and then you instantly need the next one directly and not asynchronous or anything like that.

[00:12:18]
I should just bundle them together instead of making two HTTP requests, right? Like even with HTTP 2, where we think we can like parallelize a bunch of stuff, like not making requests is better than making requests. And in this case, the file is so small bundling it all together will make it easier for us to get everything than to try to make two requests for two different files.

[00:12:39]
We'll even see a little bit later that like if you have images or something along those lines and it's small enough added things that can inline them, it will just inline them, trying to save as many requests as possible and like other than us looking at it together, like you will get it for free.

[00:12:54]
And I'll show you how to like, opt in or out of it, as well, but like a lot of this stuff will just happen for you with very little, configuration on your end. Now, we could do some additional things here if we wanna just kind of see how vite works.

[00:13:09]
If you're only rendering one page, you probably need most of the JavaScript and/or CSS that we haven't added yet. But if you're building a single-page application that has some amount of client-side router, you know that unless you go that client-side route. You don't need the modules for that route until they navigate there, or a lot of times you can preload and stuff like that that a framework will handle, Mark.

[00:13:30]
>> Does it depend on the size of the script or it always happens? Like if it knows that it needs it, it will most likely, there's probably an upper bound. But generally speaking, it will go ahead and try to tree shake as much as possible and make one file unless we figure out ways to then basically through like asynchronous loading of additional files.

[00:13:48]
Whether that's through a router or about to do it by hand, right? There's probably an upper bound, but generally speaking, I haven't seen it.