Adding Static Assets

[00:00:00]
>> Brian Holt: Let's just go test this out briefly, and then we'll be good. So first of all, make sure your API server is still running. I still have mine running here in the background, so you can see all these requests coming through just fine. Let's go to inside pizza.

[00:00:23]
We're going inside pizza, inside the div, under the paragraph. So here we're gonna put an image src = props.image. And the alt is just gonna be {props.name}, and then self-close that. So now we'll start having an image, and then we have to go provide that to it.
>> Brian Holt: So this is the line here, line six is what I added.

[00:01:01]
Now go to App.jsx.
>> Brian Holt: And for all of these, we're just gonna go add an image.
>> Brian Holt: Let me do the fun thing where you can do multiple cursors at once. image= /public/pizza/pepperoni.webp. And then we'll just change this for the Hawaiian, we'll put Hawaiian. And for the America I don't have a picture of that, thank God, I didn't wanna scare anybody.

[00:01:45]
So we'll just put big_meat cuz that's what I did, I do have that one.
>> Brian Holt: Okay, you'll see that eventually the lines get too long, it'll start putting all these on their own lines. I think it actually makes it pretty readable but,
>> Brian Holt: So image, that's the one there that we put in those three lines.

[00:02:16]
>> Brian Holt: The reason why this works now is that we have public available to us. And again, if we go back to our GitHub here, in the public directory you see we have style. We have a nice svg there, we have a font that we can use later, and then we have a bunch of these images.

[00:02:33]
Webp, if you're not familiar with it is just a file format from Google that's more efficient than JPEG or PNG or some of those. It's also what ChatGPT generates, and these are all from ChatGPT. So if they look strangely unappetizing, that looks terrible. I think those are supposed to be sardines, [LAUGH] fantastic.

[00:03:01]
I'm glad I picked the disgusting one, not all of them are that bad [LAUGH].
>> Brian Holt: All right, so you can see now we have pictures showing up here
>> Brian Holt: And pretty cool, one more thing that I want you to go add, go to your index.html. We're gonna put a link title here, a link:css, and that is just going to go to /public/, is it style or is it styles?

[00:03:37]
I can never remember, what did I do here? Style, okay, /public/style, right there in your index.html.
>> Brian Holt: Okay, and you should end up with something like this. Now we're at 03-jsx, so if you're behind or something didn't work and you wanna go take a look, just go pop into 03-jsx, which is this one.

[00:04:14]
>> Brian Holt: That is where we are.
>> Brian Holt: And again, just to make sure that it's clear, you need to run two npm processes at the same time. You have to be running your API server, so you have to go into the API, npm run dev or run start. You also need Vite running at the same time.

[00:04:34]
So in a different terminal, so open a new terminal, or if you're in VS code like me, you can click this little + sign here, that'll make something, or you can click the Split, that works as well. Just a second terminal, however you choose to manifest it, do that, and then you'll run npm run dev inside of your project as well.

[00:04:55]
So you have both the API server running, just leave that running. We don't have to stop that again, and then your Vite server will be running as well.