Skip to content

Commit

Permalink
docs: update the assets page
Browse files Browse the repository at this point in the history
  • Loading branch information
Barbapapazes committed Jan 16, 2024
1 parent cdb0ee4 commit 2b01fe9
Showing 1 changed file with 22 additions and 29 deletions.
51 changes: 22 additions & 29 deletions docs/content/1.guide/6.assets.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ Nitro handles assets via the `public/` directory.

## Public Assets

All assets in `public/` directory will be automatically served.
All assets in `public/` directory will be automatically served. This means that you can access them directly from the browser without any special configuration.

```md
public/
Expand All @@ -20,7 +20,9 @@ package.json
nitro.config.ts
```

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

When building your Nitro app, the `public/` directory will be copied to `.output/public/` and a manifest with metadata will be created and embedded in the server bundle.

```json
{
Expand Down Expand Up @@ -49,24 +51,29 @@ This allows Nitro to know the public assets without scanning the directory, givi

## Server Assets

All assets in `assets/` directory will be added to the server bundle.
All assets in `assets/` directory will be added to the server bundle. After building your application, you can find them in the `.output/server/chunks/raw/` directory. Be careful with the size of your assets, as they will be bundled with the server bundle.

They can be addressed by the `assets:server` mount point using [`useStorage('assets:server')`](/guide/storage)
They can be addressed by the `assets:server` mount point using the [storage layer](/guide/storage).

::alert
Keys can be written `assets/server/my_file_path` or `assets:server:my_file_path`.
::
For example, you could store a json file in `assets/server/data.json` and retrieve it in your handler:

```js
export default defineEventHandler(async () => {
const data = await useStorage('assets:server').getItem(`data.json`)
return data
})
```

### Custom Server Assets
## Custom Server Assets

In order to add assets from a custom directory, path will need to be defined in the nitro config:
In order to add assets from a custom directory, you will need to define a path in your nitro config. This allows you to add assets from a directory outside of the `assets/` directory.

::code-group
```js [nitro.config.ts]
export default defineNitroConfig({
serverAssets: [{
baseName: 'my_directory',
dir: './server/my_directory'
dir: './my_directory'
}]
})
```
Expand All @@ -82,27 +89,14 @@ export default defineNuxtConfig({
```
::

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

### Examples

**Example:** Retrieving a json data from default `assets` directory:

```js
export default defineEventHandler(async () => {
const data = await useStorage().getItem(`assets/server/data.json`)
return data
})
```

**Example:** Retrieving a html file from a custom `assets` directory:
You could want to add a directory with html templates for example.

::code-group
```js [nitro.config.ts]
export default defineNitroConfig({
serverAssets: [{
baseName: 'templates',
dir: './templates' // Relative to `srcDir` (`server/` for nuxt)
dir: './templates' // Relative to `srcDir` (`.` for nitro)
}]
})
```
Expand All @@ -118,11 +112,10 @@ export default defineNuxtConfig({
```
::

```js
// routes/success.ts
Then you can use the `assets:templates` base to retrieve your assets.

```ts [handlers/success.ts]
export default defineEventHandler(async (event) => {
return await useStorage().getItem(`assets/templates/success.html`)
// or
return await useStorage('assets:templates').getItem(`success.html`)
})
```

0 comments on commit 2b01fe9

Please sign in to comment.