{"id":13457640,"url":"https://github.com/unjs/serve-placeholder","last_synced_at":"2025-05-15T07:06:01.245Z","repository":{"id":37804963,"uuid":"150750093","full_name":"unjs/serve-placeholder","owner":"unjs","description":"♡  Smart placeholder for missing assets","archived":false,"fork":false,"pushed_at":"2025-05-13T14:48:45.000Z","size":582,"stargazers_count":161,"open_issues_count":8,"forks_count":5,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-05-13T15:54:26.937Z","etag":null,"topics":["404","connect","express","middleware","node","nuxt","ssr","vue"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/unjs.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2018-09-28T14:09:12.000Z","updated_at":"2025-04-04T04:46:15.000Z","dependencies_parsed_at":"2023-09-26T18:09:14.236Z","dependency_job_id":"d5627515-96c7-4f96-b49c-405234f241f0","html_url":"https://github.com/unjs/serve-placeholder","commit_stats":{"total_commits":75,"total_committers":9,"mean_commits":8.333333333333334,"dds":"0.45333333333333337","last_synced_commit":"bc2b5997e79b25d338dfc523c42eddac1e60dd20"},"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unjs%2Fserve-placeholder","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unjs%2Fserve-placeholder/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unjs%2Fserve-placeholder/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unjs%2Fserve-placeholder/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/unjs","download_url":"https://codeload.github.com/unjs/serve-placeholder/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254292042,"owners_count":22046426,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["404","connect","express","middleware","node","nuxt","ssr","vue"],"created_at":"2024-07-31T09:00:32.667Z","updated_at":"2025-05-15T07:05:56.235Z","avatar_url":"https://github.com/unjs.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# ♡ serve-placeholder\n\n\u003c!-- automd:badges color=yellow --\u003e\n\n[![npm version](https://img.shields.io/npm/v/serve-placeholder?color=yellow)](https://npmjs.com/package/serve-placeholder)\n[![npm downloads](https://img.shields.io/npm/dm/serve-placeholder?color=yellow)](https://npmjs.com/package/serve-placeholder)\n\n\u003c!-- /automd --\u003e\n\nSmart placeholder for missing assets\n\n## Why?\n\n**💵 Rendering Errors is costly**\n\nServing each 404 page for assets adds extra load to the server and increases crashing chances. This is crucial for setups with server-side-rendering and removes additional SSR loads when assets like `robots.txt` or `favicon.ico` don't exist.\n\n**👌 Meaningful Responses**\n\nWe can always send a better 404 response than an HTML page by knowing file extensions. For example, we send a fallback transparent 1x1 image for image extensions.\n\n**🔍 SEO Friendly**\n\nInstead of indexing invalid URLs with HTML pages, we properly send 404 and the right content type.\n\n## Usage\n\nInstall package:\n\n\u003c!-- automd:pm-install --\u003e\n\n```sh\n# ✨ Auto-detect\nnpx nypm install serve-placeholder\n\n# npm\nnpm install serve-placeholder\n\n# yarn\nyarn add serve-placeholder\n\n# pnpm\npnpm install serve-placeholder\n\n# bun\nbun install serve-placeholder\n```\n\n\u003c!-- /automd --\u003e\n\nImport:\n\n```js\n// ESM\nimport { servePlaceholder } from \"serve-placeholder\";\n\n// CommonJS\nconst { servePlaceholder } = require(\"serve-placeholder\");\n```\n\nCreate and add server middleware between serve-static and router middleware:\n\n```diff\napp.use('/assets', serveStatic(..))\n++ app.use('/assets', servePlaceholder())\napp.use('/', router)\n```\n\nAdditionally, we can have a default placeholder for arbitrary routes which handles known extensions **assuming other routes have no extension**:\n\n```diff\napp.use('/assets', serveStatic(..))\napp.use('/assets', servePlaceholder())\n++ app.use('/', placeholder({ skipUnknown: true }))\napp.use('/', router)\n```\n\n## Options\n\n### `handlers`\n\nA mapping from file extensions to the handler. Extensions should start with _dot_ like `.js`.\n\nYou can disable any of the handlers by setting the value to `null`\n\nIf the value of a handler is set to `false`, the middleware will be ignored for that extension.\n\n### `statusCode`\n\n- Default: `404`\n\nSets `statusCode` for all handled responses. Set to `false` to disable overriding statusCode.\n\n### `skipUnknown`\n\n- Default: `false`\n\nSkip middleware when no handler is defined for the current request.\n\nPlease note that if this option is set to `true`, then `default` handler will be disabled!\n\n### `placeholders`\n\n- Type: `Object`\n\nA mapping from handler to placeholder. Values can be `String` or `Buffer`. You can disable any of the placeholders by setting the value to `false`.\n\n### `mimes`\n\n- Type: `Object`\n\nA mapping from handler to the mime type. Mime type will be set as `Content-Type` header. You can disable sending any of the mimes by setting the value to `false`.\n\n### `cacheHeaders`\n\n- Default: `true`\n\nSet headers to prevent accidentally caching 404 resources.\n\nWhen enabled, these headers will be sent:\n\n```js\nconst headers = {\n  \"cache-control\": \"no-cache, no-store, must-revalidate\",\n  expires: \"0\",\n  pragma: \"no-cache\",\n};\n```\n\n### `placeholderHeader`\n\n- Default: `true`\n\nSets an `X-Placeholder` header with value of handler name.\n\n## Defaults\n\nThese are [default handlers](./src/defaults.ts). You can override every of them using provided options.\n\n| Handler   | Extensions                                                       | Mime type                | Placeholder               |\n| --------- | ---------------------------------------------------------------- | ------------------------ | ------------------------- |\n| `default` | any unknown extension                                            | -                        | -                         |\n| `css`     | `.css`                                                           | `text/css`               | `/* style not found */`   |\n| `html`    | `.html`, `.htm`                                                  | `text/html`              | `\u003c!-- page not found --\u003e` |\n| `js`      | `.js`                                                            | `application/javascript` | `/* script not found */`  |\n| `json`    | `.json`                                                          | `application/json`       | `{}`                      |\n| `map`     | `.map`                                                           | `application/json`       | [empty sourcemap v3 json] |\n| `plain`   | `.txt`, `.text`, `.md`                                           | `text/plain`             | [empty]                   |\n| `image`   | `.png`, `.jpg`, `.jpeg`, `.gif`, `.svg`, `.webp`, `.bmp`, `.ico` | `image/gif`              | [transparent 1x1 image]   |\n\n## Development\n\n\u003cdetails\u003e\n\n\u003csummary\u003elocal development\u003c/summary\u003e\n\n- Clone this repository\n- Install latest LTS version of [Node.js](https://nodejs.org/en/)\n- Enable [Corepack](https://github.com/nodejs/corepack) using `corepack enable`\n- Install dependencies using `pnpm install`\n- Run interactive tests using `pnpm dev`\n\n\u003c/details\u003e\n\n## License\n\n\u003c!-- automd:contributors author=pi0 license=MIT --\u003e\n\nPublished under the [MIT](https://github.com/unjs/serve-placeholder/blob/main/LICENSE) license.\nMade by [@pi0](https://github.com/pi0) and [community](https://github.com/unjs/serve-placeholder/graphs/contributors) 💛\n\u003cbr\u003e\u003cbr\u003e\n\u003ca href=\"https://github.com/unjs/serve-placeholder/graphs/contributors\"\u003e\n\u003cimg src=\"https://contrib.rocks/image?repo=unjs/serve-placeholder\" /\u003e\n\u003c/a\u003e\n\n\u003c!-- /automd --\u003e\n\n\u003c!-- automd:with-automd --\u003e\n\n---\n\n_🤖 auto updated with [automd](https://automd.unjs.io)_\n\n\u003c!-- /automd --\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Funjs%2Fserve-placeholder","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Funjs%2Fserve-placeholder","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Funjs%2Fserve-placeholder/lists"}