diff --git a/docs/content/1.guide/6.assets.md b/docs/content/1.guide/6.assets.md index fd439645f7..607e9a0807 100644 --- a/docs/content/1.guide/6.assets.md +++ b/docs/content/1.guide/6.assets.md @@ -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/ @@ -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 { @@ -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' }] }) ``` @@ -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' }] }) ``` @@ -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`) }) ```