Setup the API Server

[00:00:00]
>> Brian Holt: Let's talk just a tiny tiny moment about the API server for the rest of this project, so let's just open it in GitHub, so in the project that I had you clone earlier. There is an API directory, I wrote a little API for the rest of your project so that we can do some get requests and post requests and all that kind of stuff.

[00:00:23]
It's just a little Fastify Node.js App, I'm not even gonna purport that it's any good, but it does work [LAUGH], I don't need you to edit it at all for the entire remainder of the course. You just got to run it, so let's just look at it, if we go to our GitHub here, it's this API directory, you can see it's a little package.json, it's got Fastify, and that's about it.

[00:00:55]
It has a SQLite database, and I think it's got all of our static assets in there as well, so it has the CSS, all of the pizza images and all of the CS, yeah, all that stuff I didn't want you to have to deal with. So, and then you can see here in the server.js, it's just a Fastify project, and doesn't really do any much more than this, but not stuff that you have to worry about at all.

[00:01:30]
Okay, so in whatever terminal that you're in, navigate to your API directory, so you can see I'm in complete Intruder React VM9-project/API, two things, npm install.
>> Brian Holt: Again, vulnerabilities doesn't matter, it's okay, and then npm, let's do run dev cuz that'll be just fine.
>> Brian Holt: Okay, and you should see something like this.

[00:02:12]
>> Brian Holt: So if you go to localhost, 3000 just gonna give you some sort of 404 error, or something like this.
>> Brian Holt: I think it's API/pizzas, yeah, if you go to API/pizzas on port 3000, you should get 31 pizzas, I think is how many I had in there, or 32 actually, so what we wanna do is we wanna use Vite as the proxy.

[00:02:39]
And again, this doesn't you don't really need to understand this too in depth but essentially we wanna run our front end and our back end on the same port, right. So we want everything running through port 5173 so that we don't have to worry about cores and if you don't know what that is bless you, if you do know what it is you've been where I am, right?

[00:03:01]
So we're gonna run everything through Vite, luckily, Vite makes this very easy to accomplish, so I want you to open your vite.config.js and we're just gonna add one little thing here. We're gonna add server, and we're gonna put a comma there and we're gonna add a Proxy,
>> Brian Holt: And so you add basically things that you wanna be proxied through this, and so for slash API.

[00:03:32]
>> Brian Holt: You want to run that through target.
>> Brian Holt: Http:localhost.
>> Brian Holt: 3,000, if you have not stopped your server from earlier in the course, please do that now or else this will interfere with this, by the way.
>> Brian Holt: And then you wanna add a change origin as well 3,000, change, origin to be true and we're gonna do that as well for public almost actually literally the exact same thing for public.

[00:04:17]
>> Brian Holt: That's it, so I added this.
>> Brian Holt: This is going to proxy all of the requests from localhost5173 on API and public to localhost3000, so just to prove my point here, I'm running my Vite server here, I'm gonna open this in my local host. And if I do /API/pizzas like we were just looking at, notice it still goes to that same API, so notice that this and this, despite the fact that they're on different ports, same thing, right.

[00:05:02]
>> Brian Holt: That's all that does for you, it makes local dev much easier, you used to have to do some black magic and some seances to get this to work correctly, now, Vite makes it very easy, yeah. Would that work for any local host number, then, it's just specifically looking for anything API.

[00:05:21]
Yep, so it's only processing things after the API, and it doesn't even have to be local host, right, you can proxy it to like your database in the the cloud, right? Because you're just saying what the target is, the target can be anything, right? We're just doing it now in local host, but this could be your lambdas on AWS, or something like that.

[00:05:43]
>> Brian Holt: It's a pretty cool feature, I think it's, even if this doesn't make total sense, as long as this is working, you don't have to think about it anymore, which is probably half the benefit as well.