Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: add server features #79

Merged
merged 9 commits into from
Apr 26, 2024
Merged
Show file tree
Hide file tree
Changes from 6 commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 0 additions & 2 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
# Dependencies
node_modules

# Logs
*.log*

# Temp directories
.temp
Expand Down
2 changes: 1 addition & 1 deletion docs/content/docs/2.storage/1.database.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ NuxtHub Database is a layer on top of [Cloudflare D1](https://developers.cloudfl
Enable the database in your NuxtHub project by adding the `database` property to the `hub` object in your `nuxt.config.ts` file.

```ts [nuxt.config.ts]
defineNuxtConfig({
export default defineNuxtConfig({
hub: {
database: true
}
Expand Down
2 changes: 1 addition & 1 deletion docs/content/docs/2.storage/2.kv.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ NuxtHub KV is a layer on top of [Cloudflare Workers KV](https://developers.cloud
Enable the key-value storage in your NuxtHub project by adding the `kv` property to the `hub` object in your `nuxt.config.ts` file.

```ts [nuxt.config.ts]
defineNuxtConfig({
export default defineNuxtConfig({
hub: {
kv: true
}
Expand Down
2 changes: 1 addition & 1 deletion docs/content/docs/2.storage/3.blob.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ NuxtHub Blob is a layer on top of [Cloudflare R2](https://developers.cloudflare.
Enable the blob storage in your NuxtHub project by adding the `blob` property to the `hub` object in your `nuxt.config.ts` file.

```ts [nuxt.config.ts]
defineNuxtConfig({
export default defineNuxtConfig({
hub: {
blob: true
}
Expand Down
33 changes: 33 additions & 0 deletions docs/content/docs/3.server/1.logs.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
---
title: Logs
description: How to use deployment server logs with NuxtHub.
---

Logs are live streams of the server logs from the deployment server. You can use them to monitor the progress of your deployments.


## NuxtHub admin

When you have a successful deployment, you can access to the logs of the deployment in the [NuxtHub admin](https://admin.hub.nuxt.com/).
Logs are available under the `Logs` section of your project page. You can also access to the logs of each successful deployment in the `Deployments` section.


## NuxtHub CLI

Using the NuxtHub CLI, you can access to the logs of both `production` and `preview` deployments.

### Production environment

NuxtHub will automatically detect the canonical deployment of your project and stream the logs of that deployment in the CLI.

```bash
nuxthub logs --production
```

### Preview environment

In preview environment, NuxtHub will stream the logs of the latest successful deployment in the CLI.

```bash
nuxthub logs --preview
```
28 changes: 28 additions & 0 deletions docs/content/docs/3.server/2.api.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
---
title: API
description: How to use API references with NuxtHub.
---

NuxtHub API generates a beautiful API documentation and playground for your NuxtHub project.

## Getting Started

NuxtHub uses Nitro's OpenAPI generation to access your NuxtHub project's API. To enable the API, you need to add enable Nitro's experimental `openAPI` feature. You can do this by adding the `nitro.experimental.openAPI` property to your `nuxt.config.ts` file.

```ts [nuxt.config.ts]
export default defineNuxtConfig({
nitro: {
experimental: {
openAPI: true
}
}
})
```

After you deploy your project, NuxtHub Admin will showcase your API documentation using [Scalar](https://scalar.com).

## API Routes in development

While in the development mode, you can use Nuxt Devtools to access your API routes. Using `Server Routes` tab in Nuxt Devtools, you can list all the API routes in your project. It provides a playground to send and test your endpoints.

Check out the [Nuxt Devtools](https://devtools.nuxt.com/) documentation for more information.
69 changes: 69 additions & 0 deletions docs/content/docs/3.server/3.cache.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
---
title: Cache
description: How to use cache storage with NuxtHub.
---

NuxtHub cache uses [Cloudflare Workers KV](https://developers.cloudflare.com/kv) to cache your server route responses or functions using Nitro's `cachedEventHandler` and `cachedFunction`.

## Getting Started

Enable the cache storage in your NuxtHub project by adding the `cache` property to the `hub` object in your `nuxt.config.ts` file.

```ts [nuxt.config.ts]
export default defineNuxtConfig({
hub: {
cache: true
}
})
```

Once you deploy your project, you can access to the cache storage in the [NuxtHub admin](https://admin.hub.nuxt.com/). You can manage your cache entries in the `Cache` section of your project page.


## Event handlers caching

Using the `cachedEventHandler` function, you can cache the response of a server route. This function will cache the response of the server route into the NuxtHub cache storage.

```ts [server/api/cached-route.ts]
import type { H3Event } from 'h3'

export default cachedEventHandler((event) => {
return {
success: true,
date: new Date().toISOString()
}
}, {
maxAge: 60 * 60, // 1 hour
getKey: (event: H3Event) => event.node.req.url
})
```

The above example will cache the response of the `/api/cached-route` route for 1 hour. The `getKey` function is used to generate the key for the cache entry.
atinux marked this conversation as resolved.
Show resolved Hide resolved

## Functions caching

Using the `cachedFunction` function, You can cache a function. This is useful to cache the result of a function that is not an event handler but a part of it and reuse it in multiple handlers.

```ts [server/utils/cached-function.ts]
import type { H3Event } from 'h3'

export const getRepoStarCached = defineCachedFunction(async (event: H3Event, repo: string) => {
const data: any = await $fetch(`https://api.github.com/repos/${repo}`)

return data.stargazers_count
}, {
maxAge: 60 * 60, // 1 hour
name: 'ghStars',
getKey: (event: H3Event, repo: string) => repo
})
```

The above example will cache the result of the `getRepoStarCached` function for 1 hour.

::callout{icon="i-heroicons-information-circle" class="prose-code:bg-gray-50 dark:prose-code:bg-gray-800"}
It is important to note that the `event` argument should always be the first argument of the cached function. Nitro leverages `event.waitUntil` to keep the instance alive while the cache is being updated while the response is sent to the client.

:br

[Read more about this in the Nitro docs](https://nitro.unjs.io/guide/cache#edge-workers).
::
1 change: 1 addition & 0 deletions docs/content/docs/3.server/_dir.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
icon: i-ph-computer-tower-duotone
Loading
Loading