So to define an endpoint, all you have to do is create a JS file or a TS file in the routes folder, and then create a method corresponding to the HTTP verb, for example, GET, POST, or PUT. So let's grab this example here for a GET request. We'll make a new file within our application. So let's put it within an API folder, so let's say new file, API, I'll make a TODOES endpoint, and we'll say index.js. Let's paste that in. And this looks very similar to the load method for data fetching. And like I said, this runs entirely in the backend, so you can do things like access

And this looks very similar to the load method for data fetching. And like I said, this runs entirely in the backend, so you can do things like access a database. We're not going to do that here, as that's an entire topic in itself, but we'll just put a comment here and say, get TODOES from database using an ORM like Prisma. So I'm just going to hard code a list of TODOES here. So let's say const TODOES equals, and let me just paste in a list of TODOES. And you can do error checking in here as well. But since we're hard coding it, I'll just stick to the happy path. So we'll get rid of this.

But since we're hard coding it, I'll just stick to the happy path. So we'll get rid of this. We can also add the status here. So I'll grab this, put a 200 status here. And for the body, we just want to return our TODOES here. Okay, let's get rid of this return down here. And now we should have an API endpoint that returns TODOES. So let me save this. Let's hit this in our browser. So my server is running here.

Let's hit this in our browser. So my server is running here. Let's go into our browser. Let's go to /api/todoes. And there are our TODOES. You can also make use of route params just like we did before. So let's add another endpoint here. Let's say we want to grab a single TODOE. So let's say id. And we can do pretty much the same thing here.

So let's say id.js. And we can do pretty much the same thing here. So let's grab all of this. Let's paste that in. And we're grabbing a single TODO. So how about we just hard code one of these here? So we'll get rid of this array here. And we'll just always return the first one. Okay. Actually, we'll make it somewhat dynamic.

Okay. Actually, we'll make it somewhat dynamic. So how about we make a ternary here? Let's say if params.id is one, then return one. But if it's anything else, return two or TODOID2. Sorry, I have the syntax backwards. This should be a : and this should be a ?. And I believe params.id comes back as a string. So let's make sure to cast it to a number. Okay.

So let's make sure to cast it to a number. Okay. And we are returning the TODOE here. Let me save that. Back here, we can say TODOES/1. Okay. Two should go to two. And it does, cool. And I hope you're understanding the benefit of this. We have a full API server available to us.

And I hope you're understanding the benefit of this. We have a full API server available to us within our project. So we can consume it from our front end. Let's do one more POST route here. So say we wanted to create a TODO. Usually you would like to POST to an endpoint. So let's do that. So let's POST to the same endpoint. So back to our index.

So let's POST to the same endpoint. So back to our index. Instead of a GET, it will be a POST. So let me just grab this method. Let's paste it down here. Let's change it to a POST request. And now to access the request params, we can destructure request from here. So we don't need this anymore. To grab the request params,

So we don't need this anymore. To grab the request params, we can say const data equals await. And we can say request.json, if it's coming in as JSON. Let's just console.log that data to make sure it's correct. And then for our status, how about we return a 201, which is a created response.

how about we return a 201, which is a created response. Let's say TODO. And let's just say created TODO. Actually made this a template string. And we'll just output the title here. So we'll say data.title. And somewhere in here, you would add your TODO to the database. We'll say add TODO to database.

you would add your TODO to the database. We'll say add TODO to database. Okay, so let's try this out. Let me save it. Since it's a POST request, we can't do it in the browser. So I'll make use of my REST client here. This is the endpoint. It is a POST request. And we have to pass through some JSON here.

It is a POST request. And we have to pass through some JSON here. So let's select JSON. So this would be whatever the user types into the form. So let's say title is my TODO. And let's say isComplete is false. Okay, let's try running this and see if we get a response. And we do. You can see we get a 201 created with this response here. Let's take a look at one more example.

You can see we get a 201 created with this response here. Let's take a look at one more example where we hide the API key for a third-party API. So for example, this OpenWeatherMap API has an API key associated with it. And here's the endpoint for it. You can see my API key right here. And if you were to call this in the client, this key would be exposed and anyone can just take a look at the source.

this key would be exposed and anyone can just take a look at the source and make use of it themselves. So usually what you wanna do is call this API from within a backend where the key is not exposed and then call that endpoint instead. So let's go ahead and do that. So let me grab this endpoint. We'll make a new route for weather. So we'll put it within API and we'll name it weather.js.

We'll make a new route for weather. So we'll put it within api and we'll name it weather.js. So weather.js. Let me just paste in the endpoint here. Let's grab the code from index here for our GET request. So this one here. Okay, let's go back. Let's paste that here. And again, now we're in the context of a backend. So this code shouldn't be exposed on the front end.

And again, now we're in the context of a backend. So this code shouldn't be exposed on the front end. So let's get rid of this. We should have access to fetch in here. So let's just make use of it. So let's say const response equals await fetch. And it's just this endpoint here. So let's grab this, let's paste it in here. And for the body, how about we make a new object? Let's specify a weather key.

And for the body, how about we make a new object? Let's specify a weather key. And let's just await the response here. response.json(), okay. So let's save that. This backend API route should now be available at /api/weather. So let's try that out here. /api/weather. And it does work.

API slash weather. And it does work. Now, how about we make an actual endpoint in our application which shows some of this information? So in here, let's make a new weather route. So back to our application. Let's make a new weather route here that shows some weather information. So how about we just grab the code from our Post and then we'll change this up.

So how about we just grab the code from our posts and then we'll change this up. So let's grab all of this. Let's make a new route for weather. weather.php. Let's paste that in. This is now weather information. And we don't need this anymore. So how about we show the temperature in here? Say temp in degrees Celsius.

So how about we show the temperature in here? Say temp in degrees Celsius. And then maybe another one for the description of the weather. Let's go ahead and add this to our nav. So it's /weather. Let's save that and make sure that shows. There it is. Let's go back to our Weather component. And now up here, where we're fetching data,

Let's go back to our weather component. And now up here, where we're fetching data, the endpoint is now /api/weather. There should be a weather key available to us. So we can just directly await the response.json(). So let's get rid of this, let's get rid of this, and this. And our props are just await response.json(). There should be a weather key within here because that's how we defined it within api/weather. We have this weather key here.

because that's how we defined it within API weather. We have this weather key here. Now we can accept the weather key here as a prop. And let's just make sure that's correct. So before we output it, let's just console.log the weather. And since there's no DevTools built in Svelte, I usually do this. So I just say console.log weather. Okay, let's save this back to our weather. Let's open up DevTools.

Okay, let's save this back to our weather. Let's open up DevTools. Let me just refresh here. And you can see we do get the weather information back here. Let me just make sure it works client-side as well. So if I navigate here and then I go to console.log, back here, there should be another console.log here. There it is. So now we should be able to grab the weather information here.

So now we should be able to grab the weather information here. For example, the temperature is within weather.main.temp. And the description should be within weather. There's another weather object here. It's an array. It's the first one. And there is a description here. So let's add that.

And there is a description here. So let's add that. So this one was weather.main.temp. And this one was weather.weather.firstItem.description. Okay, let's try that back here. And you can see the weather and description in the browser. Again, let me refresh to make sure it works server-side as well. And it does. And this undefined is coming from the console.log,

the page gets its props from the endpoint. So what we can do here is get rid of this entirely. So let me just comment this out. If we make a new file here called weather.js at the same level as the weather.svelte component, then it will do the request first and then pass it in as props to this component. So let's do that. Let's make a weather.js. And it's exactly what we have in our API weather.

Let's make sure it still works client-side. And it does. Let's finish off by extracting this API key here to an environment variable. So like I said, SvelteKit makes use of Vite. And Vite does have support for environment variables using the .env package. So I found this article here, which shows you how to do it. So it's pretty straightforward. We just have to define environment variables,

So it's pretty straightforward. We just have to define environment variables, but we have to prefix it with VITE_. So let's go ahead and do this. Let's add an environment file. Not sure if there is one in here already. There isn't, so we'll create one. Let's just say new file .env. And I'll just paste in my API key with a corresponding variable name.

And I'll just paste in my API key with a corresponding variable name. So VITE_OPENWEATHERMAP_API_KEY with the corresponding key. Let's save that. Now back to our endpoint here. We can get rid of this and just pull it from the environment variable. If you take a look at the article though, there seems to be errors when you build the application. So we have to take one more step here.

there seems to be errors when you build the application. So we have to take one more step here. So usually you would just access it like this. But like I said, there's an error when you build it. So we have to do one more step. And that's just to create a new file as a separate module and then import it from there. So let's go ahead and do that. Let's make a variables.js file within the lib folder is where they put it here in this example.

Let's make a variables.js file within the lib folder is where they put it here in this example. So we'll do that as well. So within our lib folder, let's add variables.js, space that in, and we'll name ours OpenWeatherMapAPIKey. And this should be the same. Okay, so let me save that. And now to make use of it, we can just import it like this. And then make use of it like this.

And now to make use of it, we can just import it like this. And then make use of it like this. So import that module we just created. So within our weather, we can import it up here and then we can make use of it down here. So it's variables.OpenWeatherMap API key. So let me save that. Let's make sure our app still works. Back here, let's refresh. And it does still work.

Back here, let's refresh. And it does still work. So let's make sure to do the same thing within our other endpoint. So this, and it's going to /api/weather and it's spaced out in. Okay, and that endpoint should work as well. But we're now making use of environment variables. So /api/weather, that works as well. So yeah, for the cases where you need

So /api/weather, that works as well. So yeah, for the cases where you need to write server-side code, definitely make sure to make use of API endpoints within SvelteKit.