diff --git a/.gitignore b/.gitignore index 7a3eb22b..08624b0e 100644 --- a/.gitignore +++ b/.gitignore @@ -1,8 +1,6 @@ # Dependencies node_modules -# Logs -*.log* # Temp directories .temp diff --git a/docs/content/docs/2.storage/1.database.md b/docs/content/docs/2.storage/1.database.md index c371f64c..85b64c5f 100644 --- a/docs/content/docs/2.storage/1.database.md +++ b/docs/content/docs/2.storage/1.database.md @@ -1,22 +1,28 @@ --- title: Database -description: How to create a database and store entries with NuxtHub. +description: Access a SQL database in your Nuxt application to store and retrieve relational data. --- -NuxtHub Database is a layer on top of [Cloudflare D1](https://developers.cloudflare.com/d1), a serverless SQLite databases. +::note +NuxtHub Database is a layer on top of [Cloudflare D1](https://developers.cloudflare.com/d1), a serverless SQL database. +:: ## Getting Started 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 } }) ``` +::tip +Checkout our [Drizzle ORM recipe](/docs/recipes/drizzle) to get started with the database by providing a schema and migrations. +:: + ## `hubDatabase()` Server composable that returns a [D1 database client](https://developers.cloudflare.com/d1/build-databases/query-databases/). diff --git a/docs/content/docs/2.storage/2.kv.md b/docs/content/docs/2.storage/2.kv.md index ee1e365a..8af3f667 100644 --- a/docs/content/docs/2.storage/2.kv.md +++ b/docs/content/docs/2.storage/2.kv.md @@ -1,16 +1,18 @@ --- title: KV -description: How to use key-value data storage with NuxtHub. +description: Add a key-value data storage to your Nuxt application. --- +::note NuxtHub KV is a layer on top of [Cloudflare Workers KV](https://developers.cloudflare.com/kv), a global, low-latency, key-value data storage. +:: ## Getting Started 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 } diff --git a/docs/content/docs/2.storage/3.blob.md b/docs/content/docs/2.storage/3.blob.md index 12261069..bb39210f 100644 --- a/docs/content/docs/2.storage/3.blob.md +++ b/docs/content/docs/2.storage/3.blob.md @@ -1,16 +1,18 @@ --- title: Blob -description: How to store objects with NuxtHub. +description: Store and upload images, videos and other unstructured data in your Nuxt application. --- +::note NuxtHub Blob is a layer on top of [Cloudflare R2](https://developers.cloudflare.com/r2), allowing to store large amounts of unstructured data (images, videos, etc.). +:: ## Getting Started 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 } diff --git a/docs/content/docs/3.server/1.logs.md b/docs/content/docs/3.server/1.logs.md new file mode 100644 index 00000000..b064b946 --- /dev/null +++ b/docs/content/docs/3.server/1.logs.md @@ -0,0 +1,34 @@ +--- +title: Server Logs +navigation.title: Logs +description: Access real-time logs of your deployed Nuxt application. +--- + +Access to live stream of your server logs from the deployed server. Useful to monitor or debug your Nuxt application. + +## 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 `Server > 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 +``` diff --git a/docs/content/docs/3.server/2.api.md b/docs/content/docs/3.server/2.api.md new file mode 100644 index 00000000..29a024f7 --- /dev/null +++ b/docs/content/docs/3.server/2.api.md @@ -0,0 +1,35 @@ +--- +title: Server API +navigation.title: API +description: Discover how to generate API documentation for your Nuxt project. +--- + +::warning +This is currently experimental and subject to change in the future. +:: + +## Getting Started + +NuxtHub uses Nitro's OpenAPI generation to access your Nuxt 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). + +## Nuxt Devtools + +In development, you can use Nuxt Devtools to access your API routes. using the `Server Routes` tab. + +It list all the API routes in your project as well as providing a playground to send and test your endpoints. + +Check out the [Nuxt Devtools](https://devtools.nuxt.com/) documentation for more information. diff --git a/docs/content/docs/3.server/3.cache.md b/docs/content/docs/3.server/3.cache.md new file mode 100644 index 00000000..42d4798a --- /dev/null +++ b/docs/content/docs/3.server/3.cache.md @@ -0,0 +1,71 @@ +--- +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`](https://nitro.unjs.io/guide/cache#cached-event-handlers) and [`cachedFunction`](https://nitro.unjs.io/guide/cache#cached-functions). + +## 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. + +::note{to="https://nitro.unjs.io/guide/cache#options"} +Read more about [Nitro Cache options](https://nitro.unjs.io/guide/cache#options). +:: + +## 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. + +::important +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). +:: diff --git a/docs/content/docs/3.server/_dir.yml b/docs/content/docs/3.server/_dir.yml new file mode 100644 index 00000000..e77419f2 --- /dev/null +++ b/docs/content/docs/3.server/_dir.yml @@ -0,0 +1 @@ +icon: i-ph-computer-tower-duotone \ No newline at end of file diff --git a/docs/content/docs/3.recipes/1.hooks.md b/docs/content/docs/4.recipes/1.hooks.md similarity index 100% rename from docs/content/docs/3.recipes/1.hooks.md rename to docs/content/docs/4.recipes/1.hooks.md diff --git a/docs/content/docs/3.recipes/2.drizzle.md b/docs/content/docs/4.recipes/2.drizzle.md similarity index 98% rename from docs/content/docs/3.recipes/2.drizzle.md rename to docs/content/docs/4.recipes/2.drizzle.md index 575830da..2be73482 100644 --- a/docs/content/docs/3.recipes/2.drizzle.md +++ b/docs/content/docs/4.recipes/2.drizzle.md @@ -3,7 +3,7 @@ title: Drizzle ORM description: Learn how to setup Drizzle ORM with NuxtHub. --- -::callout{icon="i-ph-link" to="https://orm.drizzle.team" external} +::callout{icon="i-simple-icons-drizzle" to="https://orm.drizzle.team" external} Learn more about **Drizzle ORM**. :: diff --git a/docs/content/docs/3.recipes/_dir.yml b/docs/content/docs/4.recipes/_dir.yml similarity index 100% rename from docs/content/docs/3.recipes/_dir.yml rename to docs/content/docs/4.recipes/_dir.yml diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 762d906d..e0f15e6f 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1864,11 +1864,11 @@ packages: diff: 5.2.0 execa: 7.2.0 global-directory: 4.0.1 - magicast: 0.3.3 + magicast: 0.3.4 pathe: 1.1.2 pkg-types: 1.1.0 prompts: 2.4.2 - rc9: 2.1.1 + rc9: 2.1.2 semver: 7.6.0 dev: false @@ -1926,7 +1926,7 @@ packages: is-installed-globally: 1.0.0 launch-editor: 2.6.1 local-pkg: 0.5.0 - magicast: 0.3.3 + magicast: 0.3.4 nuxt: 3.11.2(@types/node@20.12.7)(@unocss/reset@0.58.5)(eslint@9.1.1)(floating-vue@5.2.2)(rollup@3.29.4)(typescript@5.4.5)(unocss@0.58.5)(vite@5.2.8) nypm: 0.3.8 ohash: 1.1.3 @@ -1934,10 +1934,10 @@ packages: pathe: 1.1.2 perfect-debounce: 1.0.0 pkg-types: 1.1.0 - rc9: 2.1.1 + rc9: 2.1.2 scule: 1.3.0 semver: 7.6.0 - simple-git: 3.23.0 + simple-git: 3.24.0 sirv: 2.0.4 unimport: 3.7.1(rollup@3.29.4) vite: 5.2.8(@types/node@20.12.7)