Vite Image Tools

[00:00:00]
>> We're gonna look at this thing called Vite Image Tools. However, if you are on an M1 MacBook, you might have to run this command if it doesn't immediately work. So I'm gonna kinda put this out here right now. But what we wanna do is this tool, Vite Image Tools relies on this thing called sharp, and sharp is basically a library for processing images, right?

[00:00:23]
And so basically it can allow you in your build process to dynamically resize images or anything along those lines. So we'll get it working in a second, but what I wanna do is just verify our setups. And like I said, if you have any issues, just basically making sure it's built for the right platform should do the trick.

[00:00:43]
But that way, if we have to triage anyone's set up, including those in the chat, we can try to do that a little bit during lunch as well. So what I'm gonna do is I am gonna install this now. I'm gonna just do npm install-vite-Imagetools. This will be the first plugin that we're gonna install by hand at this point.

[00:01:04]
And I do need a configuration file, don't I? Right, and this is the first time we've actually, we had one when we did the template. This is the first time we've done one on our own. But we've got that installed, and so now really all that I need to do is I can touch a vite.config.js.

[00:01:25]
If you are using TypeScript, you can use.ts at the end. If you are a CommonJS but you wanna import modules, you can do .mjs. If you want it to be CommonJS, you can do .cjs, it doesn't matter. Vite doesn't care, it'll look for any of those. I'm just gonna go for js for our purposes.

[00:01:45]
And we'll go ahead and we'll bring that back up in our editor. And in this empty file, you kinda saw before when we had the React stuff in place, so we'll just import {defineConfig} from 'vite'. And then we're gonna import image tools from Vite image tools as well.

[00:02:09]
We'll get that all ready to go. Just making sure, I think it's just imagetools in this case, find out together, from vite-imagetools. [SOUND] What you angry about? That colon is not a semicolon. Great, so we got that in place. And now what we're gonna do is we'll go ahead and we'll say, actually, it is a, imagetools.

[00:02:40]
And now really all we gotta do is export default defineConfig. And for me, I'm just gonna say this plugins is an array. And I'm gonna say, imagetools and verify that works. Now, I am pretty confident that my setup is working. If not, you can watch me triage it real quick.

[00:03:04]
But if you have any issues, again, I think it's only on certain Apple silicon. So generally speaking, if you are not on an M1, M2, or nobody's on an M3 at this moment, then it should work fine, but if you have that one issue, then we can deal with it.

[00:03:21]
So we'll go ahead and just do npm run dev. Cool, all right, so for me right now, since it doesn't blow up, it is mostly in place. If it blows up for you, like I said, if that command does not work, and again, that's a one-time thing. And generally speaking, the nice part is if you're using GitHub actions or whatever, all the Linux builds don't have that one issue that you have to deal with.

[00:03:47]
It's only on a select set of Macs at a certain point, and I believe it's mostly fixed, but in case you just have one of those situations.