out the server folder here. And let's take a look at a few examples here. So if you create a folder named server/api, then this will automatically create a route on the backend. So similar to how routes would be generated on the front end by creating files. So let's go ahead and grab this. Let's make that folder. So let's say server/api/hello.js or hello.ts, if you want TypeScript, and it spaces in. So now we should have a new backend route named /api/hello. And it should return this string here. So let's try that out. We might have to restart our server. Let's just try here. So /api/hello. And there it is, we now have routes on the server side, and we can execute any JavaScript there. So say for example, we returned an object here, that should convert it to JSON. So let's just say, return an object { foo: 'bar' }, let's try that out again. And now

my browser. And you can see my API key right here. So if we were to call this on the client, anyone can just view the source and see my API key, which is obviously not a good thing. So let's go ahead and do that first. So I'm gonna grab this, go back to our index.js, or index view. And let's duplicate this, put it down here. And let's name it weather. And let's put the endpoint in here. And let's make use of it in our template. So after this, let's make a new section here for our weather. And we want the description and also the temperature. Okay. So the description of the weather should be right here. So it's gonna be weather.weather. It's an array here. So the first value .description, okay. So weather.weather, first value, .description, I think. And the temperature is weather.main.temp. Okay. So let me just grab this. Put it here, weather.main.temp. Okay,

weather, weather, first value, dot description, I think. And the temperature is weather.main.temp. Okay. So let me just grab this. Put it here, weather.main.temp. Okay, does this work? But Celsius here. And let's see if this works. Back to our actual app. And the weather is showing right here. Cool. Like I said, we don't want to expose our key on the client side, which is what we're doing here. So anyone can just view the source and take a look at the API key here and use it for themselves. So typically, what you want to do here is call this endpoint on your own server, and then make use of that route instead. So now that we know how to define routes on the server side, we can do that here. So let's make a new file here named weather.js. Let's just grab what we have here. Let's paste that in. And let's make that API call here within the server. So let's grab that from index, we can't use the use.

file here named weather.js. Let's just grab what we have here. Let's paste that in. And let's make that API call here within the server. So let's grab that from index, we can't use the useFetch composable on the server, we have to make use of $fetch directly. So let's get rid of this. And I believe we don't need to destructure it just comes back as weather. Okay, and did that not grab the API key as well? I guess it didn't. So let's grab that as well. So we're gonna hard code it for now. And let's see if this works. So let's return the weather here. Or you can just return it directly. We can't use useFetch, we have to make use of $fetch here. And I believe this has to be async as well. So export default async. Okay, so let's save this. And let's see if this works. Now we should have that new route on the server side named API/weather. And it does work. Cool. So now on our front end, we can just make use of this endpoint.

And let's see if this works. Now we should have that new route on the server side named /api/weather. And it does work. Cool. So now on our front end, we can just make use of this endpoint directly. So /api/weather. So let's grab that back to our front end. Let's get rid of this or the entire endpoint. Let's make use of our own endpoint here. And the JSON data should be the same. So let's try this out. Back here. And it looks like it still works. Cool. But now we are no longer exposing the API key on the client. So one more cleanup here is on the server. Generally speaking, you don't want to have your API keys directly in the code, you want to make use of environment variables for this. Next does have support for environment variables right out of the box. So let's make use of that. So let's change this to a template string. Let's grab the API key here. Let's say process.env.OPEN_WEATHER_MAP_API_KEY. Okay. So let's save that. And obviously,

the box. So let's make use of that. So let's change this to a template string. Let's grab the API key here. Let's say process.env.OPEN_WEATHER_MAP_API_KEY. Okay. So let's save that. And obviously, this is not going to work anymore. So let's refresh. And that doesn't work anymore. Let's actually go to the actual route here. So /api/weather. Okay, and you can see we get unauthorized. But if we create a .env file, then we can put the API key in there. So .env, I named it OPEN_WEATHER_MAP_API_KEY equals this, save that does this work. And it doesn't seem to work, we might have to restart our server. Let's try again. And now it does work. But now we're making use of environment variables. So we don't have to check in our API keys into version control. Let's double check that the actual app still works. And it looks like it does. Cool. So if you need to run some code server side and are somewhat familiar with using node and JavaScript

Let's double check that the actual app still works. And it looks like it does. Cool. So if you need to run some code server side and are somewhat familiar with using Node and JavaScript on the server, definitely make use of Nitro, which is built right into Nuxt three.