Skip to content

Commit

Permalink
docs: improvements
Browse files Browse the repository at this point in the history
  • Loading branch information
Atinux committed Mar 4, 2023
1 parent 1d2f57e commit f78619f
Show file tree
Hide file tree
Showing 4 changed files with 116 additions and 23 deletions.
7 changes: 3 additions & 4 deletions docs/content/1.guide/1.introduction/2.auto-imports.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,15 +5,14 @@ Nitro is using [unjs/unimport](https://github.com/unjs/unimport) to auto import
## Available Auto Imports

- `defineCachedFunction(fn, options)`{lang=ts} / `cachedFunction(fn, options)`{lang=ts}
- `defineCachedEventHandler(handler, options)`{lang=ts}
- `cachedEventHandler(handler, options)`{lang=ts}
- `defineCachedEventHandler(handler, options)`{lang=ts} / `cachedEventHandler(handler, options)`{lang=ts}
- `defineRenderHandler(handler)`{lang=ts}
- `useRuntimeConfig()`{lang=ts}
- `useStorage(base?)`{lang=ts}
- `useNitroApp()`{lang=ts}
- `defineNitroPlugin(plugin)`{lang=ts}
- `nitroPlugin(plugin)`{lang=ts}
- `defineRenderHandler`
"getRouteRules",
- `getRouteRules(event)`{lang=ts}

Check [the source code](https://github.com/unjs/nitro/blob/main/src/imports.ts) for list of available auto imports.

Expand Down
39 changes: 34 additions & 5 deletions docs/content/1.guide/1.introduction/3.routing.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,22 +6,32 @@ title: Routing

Nitro supports file-based routing for your API routes.

Handler files inside `routes/` directory will be automatically mapped to [unjs/h3](https://github.com/unjs/h3) routes.
Handler files inside `api/` and `routes/` directory will be automatically mapped to [unjs/h3](https://github.com/unjs/h3) routes.

::alert{type=primary}
Due to some providers like Vercel using top-level `api/` directory as a feature, Nitro also supports `routes/api/` to create API routes.
::

## Usage

```md
api/
test.ts <-- /api/test
routes/
api/
test.ts <-- /api/test
hello.ts <-- /hello
nitro.config.ts
```

If you are using [Nuxt](https://nuxt.com), move the `api/` and `routes/` inside the `server/` directory.


### Simple route

```ts
// routes/test.ts
export default eventHandler(() => 'Hello World!')
// api/hello.ts
export default eventHandler(() => {
return { hello: 'world' }
})
```

### Route with params
Expand All @@ -31,6 +41,25 @@ export default eventHandler(() => 'Hello World!')
export default eventHandler(event => `Hello ${event.context.params.name}!`)
```

::code-group
```md [/hello/nitro]
Hello nitro!
```
::

To include the `/`, use `[...name].ts`:

```js
// routes/hello/[...name].ts
export default eventHandler(event => `Hello ${event.context.params.name}!`)
```

::code-group
```md [/hello/nitro/is/hot]
Hello nitro/is/hot!
```
::

### Specific request method

API route with a specific HTTP request method (get, post, put, delete, options and so on).
Expand Down
81 changes: 69 additions & 12 deletions docs/content/1.guide/1.introduction/6.assets.md
Original file line number Diff line number Diff line change
@@ -1,28 +1,63 @@
# Assets Handling

Nitro handles assets via the public directory.
Nitro handles assets via the `public/` directory.

## Public Assets

All assets in `public/` directory will be automatically served.

```md
public/
image.png <-- /image.png
video.mp4 <-- /video.pm4
robots.txt <-- /robots.txt
package.json
nitro.config.ts
```

When building with Nitro, it will copy the `public/` directory to `.output/public/` and create a manifest with metadata:

```json
{
"/image.png": {
"type": "image/png",
"etag": "\"4a0c-6utWq0Kbk5OqDmksYCa9XV8irnM\"",
"mtime": "2023-03-04T21:39:45.086Z",
"size": 18956
},
"/robots.txt": {
"type": "text/plain; charset=utf-8",
"etag": "\"8-hMqyDrA8fJ0R904zgEPs3L55Jls\"",
"mtime": "2023-03-04T21:39:45.086Z",
"size": 8
},
"/video.mp4": {
"type": "video/mp4",
"etag": "\"9b943-4UwfQXKUjPCesGPr6J5j7GzNYGU\"",
"mtime": "2023-03-04T21:39:45.085Z",
"size": 637251
}
}
```

This allows Nitro to know the public assets without scanning the directory, giving high performance with caching headers.

## Server Assets

All assets in `assets/` directory will be added automatically to the server bundle.
All assets in `assets/` directory will be added to the server bundle.

They can be addressed by the key `assets:server:path:to:asset` using [storage layer](/guide/introduction/storage) and `useStorage`.
They can be addressed by the `assets:server` mountpoing using [`useStorage('assets:server')`](/guide/introduction/storage)

::alert
**Tip !**
:br
Assets keys can be written `assets/server/my_file_path` or `assets:server:my_file_path`.
Keys can be written `assets/server/my_file_path` or `assets:server:my_file_path`.
::

### Custom Server Assets

In order to add assets from a custom directory, path will need to be defined in the nitro config:

```js
::code-group
```js [nitro.config.ts]
import { defineNitroConfig } from 'nitropack'

export default defineNitroConfig({
Expand All @@ -32,6 +67,17 @@ export default defineNitroConfig({
}]
})
```
```ts [nuxt.config.ts]
export default defineNuxtConfig({
nitro: {
serverAssets: [{
baseName: 'my_directory',
dir: './server/my_directory'
}]
}
})
```
::

They can be addressed by the key `assets/my_directory/`.

Expand All @@ -48,8 +94,8 @@ export default defineEventHandler(async () => {

**Example:** Retrieving a html file from a custom `assets` directory:

```js
// nitro.config.ts
::code-group
```js [nitro.config.ts]
import { defineNitroConfig } from 'nitropack'

export default defineNitroConfig({
Expand All @@ -59,10 +105,21 @@ export default defineNitroConfig({
}]
})
```
```ts [nuxt.config.ts]
export default defineNuxtConfig({
nitro: {
serverAssets: [{
baseName: 'templates',
dir: './server/templates'
}]
}
})
```
::

```js
export default defineEventHandler(async () => {
const html = await useStorage().getItem(`assets/templates/success.html`)
return html
// routes/success.ts
export default defineEventHandler(async (event) => {
return await useStorage().getItem(`assets/templates/success.html`)
})
```
12 changes: 10 additions & 2 deletions docs/content/1.guide/1.introduction/7.typescript.md
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
# TypeScript Support

Nitro supports TypeScript by default.
Nitro supports TypeScript by default. If you are using the starter template, you have nothing to do :sparkles:.

To add type hints within your project, you should add the following to your `tsconfig.json` file:
To add type hints within your project, create a `tsconfig.json` file:

```json [tsconfig.json]
{
Expand All @@ -11,3 +11,11 @@ To add type hints within your project, you should add the following to your `tsc
```

Run `npx nitropack prepare` to generate the types for global auto-imports. This can be useful in a CI environment or as a `postinstall` command in your `package.json`.

If you are using [Nuxt](https://nuxt.com), your `tsconfig.json` can stay:

```json [tsconfig.json]
{
"extends": "./.nuxt/tsconfig.json"
}
```

0 comments on commit f78619f

Please sign in to comment.