Static Assets

[00:00:00]
>> All right, just some quick logistic notes is everything we did so far is in this live coding, importing JS and CSS. And we made that template repo on React, we're going back to the starter now. That was basically to show you the plugin in place, there's some React code.

[00:00:17]
If you've used Create React app before, just imagine if it was faster, right? And it calls it main.tsx instead of index or whatever, and it has index.html on the top level. If you've used React before,, it's basically very similar to the same thing. So let's get back to kinda little basic starter.

[00:00:44]
I would say that as I think about the four acts, act 1, Vite is simple, and then act 2, Vite is powerful. Being that easy to pull in.your framework of choice is like that fulcrum between simple and powerful, right? Cuz now, you've got whatever framework makes you the happiest.

[00:01:01]
You've got TypeScript configured the way that you want it with not that much work. So it's both simple and powerful. I think as we start to move into the powerful piece, we're gonna talk a little bit about some of the things that are best practices that maybe we don't always do, right, because sometimes I have deadlines, right?

[00:01:28]
And hand editing a bunch of images for various sizes ain't gonna happen, right? It would be great if my tooling could do stuff like that. It would be great if I could run my static assets through my tooling. And it's one of those things where there's wrapping your head around how Vite processes static assets is not that hard.

[00:01:53]
It's fairly simple. But it's one of those things where it's like, if you don't know the two or three core little things, and it feels like dark science versus if you just know how it works, then all of a sudden you have the ability to do whatever the thing that you need to do is.

[00:02:11]
So I'm gonna spin up the server again, it's at 5173. And let's say that we want to bring in some kinda static asset. By a static asset, I mean something that's not CSS or JavaScript in this case, right? Images, count, fonts, count, SVGs, I guess those are images, but you know what I mean, so on and so forth.

[00:02:36]
The other things in our web apps that are not the CSS, and the JS, and/or the HTML, right? And the most standard way to do this is, the wrong font, there we go. Let's do it. Yeah, if anything that's public directory, as when we saw that build, they got copied over as they were, right?

[00:03:02]
All of my assets that were from the build stuff, those got hashes on them, right? Anything in the public directory is effectively just lifted and shifted over into the district, except instead of being the public directory, they're putting the top level. So that when you do, whatever.com/images, it's not /public/images, it's just they're moved up to the root.

[00:03:25]
But effectively, that's all that happens. Now, that might not be what you want, right? Maybe you do want to hash them, right, so that they're cached appropriately. So the image changes, they're not getting the old one from cache. Maybe that's what you want. Maybe you wish that your build tool could theoretically process any of these static assets, depending on what they are.

[00:03:48]
And the cool thing about Vite is that, sure, we're gonna play with images at first. But with any of these plugins that we'll see towards the very end, if you wanted to be able to pull in Yamo and work on it like it was JSON, you can do that, right?

[00:04:03]
If you want to be able to run all the SVGs through SVG go, which is the optimizer takes out all the other craft and gets the file size down, you can do this. There are plugins for all of these things. So in the same way that CSS, you can't really, I guess, the correction to what I said before, there was a question like, the import syntax web standard, it is web standard when you're importing in JavaScript.

[00:04:28]
But as most of us know, you cannot import, you can't just run TypeScript in the browser, you can't import CSS. Vite is basically, if you saw when I looked at my Sources tab turning it into JavaScript, it then load. So those CSS modules were turned into five lines of JavaScript that's gonna add a link tag with that style or style tag with those styles in it onto the page.

[00:04:53]
And TypeScript has literally just turned it into JavaScript. But it's turning it into JavaScript, which is then web standard. Just gonna do something similar with the images as well. And so I've got one image here and it's called steve-after-a-workshop. There, that's me sitting in front of my house after two days of teaching, right?

[00:05:17]
And so right now, that's just copied wholesale into, that is literally my front porch, by the way. There's one dressed up like my son as well and I like that everyone in the neighborhood knew who it was as well. So If I wanna pull this up right now, it's in the images directory and I could theoretically go in and just like, it's just an image tag really.

[00:05:43]
I can go into index.html on this point and I can just say like, I don't know, put in the content. We'll say img and we'll say the source. And again, it's in the public directory under /images/, where is it? Could have picked a shorter file name 2020 hindsight.

[00:06:10]
Put that in there. Seemed like a good idea at the time that I wasn't understanding live coding. Pop that in and put it in place and we should see it on the page. It's angry about some other stuffs I changed. I think I change that to a TSP, so we'll fix that real quick while I was talking coding earlier.

[00:06:35]
Turn that back to a JS, because that's the file that we're requiring. And now, we'll get rid of that TypeScript annotation. And then I'll go back to my main point. All right, cool, I have an image. It is ginormous, cuz I literally just took it. I got a fancy phone now.

[00:06:58]
It takes nice pictures, and they're big and I just literally took the file wholesale. And I copied it in, cuz I was trying to make a point, which I'm about to make. So we can put an image tag in there. But now, it's basically my entire app is the file size of the image plus however many characters are live code written with you.

[00:07:19]
And it'd be great if we could actually figure out and work with the 7. We'll actually see that this will start very simple, and we'll see actually Vite has a few other non-webbish standard things that make this even better and practical for us in a little bit, but let's start with the kind of core piece.

[00:07:38]
So we know that that's one way to go about doing it, but that's just HTML, right? That's how we're all showing up here for today. So let's go ahead and let's look at some other ways to handle this. So what we can do instead is we can go ahead and say index.js.

[00:07:59]
Well, let's go ahead and let's import image. We're gonna take it, we're gonna move it. Anything in the public directory, we can't access, right? You can only get stuff in source, right, in that source folder. Otherwise, you can't go up five file directories in the file system and grab stuff.

[00:08:18]
It's like, I live here, I watch files here, please keep this easy for me. So we'll just go and we'll grab this, and we're just literally gonna move it into the source directory, right? Cool, yeah, I got it in there perfect. So I can do image from, check this out.

[00:08:40]
It does not out of the box, right? VS CODE, a little bit of tweaking is not super keen on knowing that I can autocomplete that. But steve-after-workshop.jpg, and really all they do real quick is I'm going to console log the image, right? So you can see what we're working with here.

[00:09:02]
We're not gonna do anything with it just yet, right? We'll go to the console and you can see that it knows the URL. It's basically giving me back the URL in this case of the image, right, so that's interesting. I think if I just build it right now, it'd be interesting to tree shaking does anything with it.

[00:09:25]
Let's go npm run build. So we can see when we run the build, that we actually get the hashed build. And you can see this was effectively 5 megabytes. We'll deal with that in a second.