@cloudflare/kv-asset-handler

What is @cloudflare/kv-asset-handler?

@cloudflare/kv-asset-handler is a package designed to help developers serve static assets from Cloudflare Workers using Cloudflare's KV (Key-Value) storage. It simplifies the process of handling requests for static assets, such as HTML, CSS, JavaScript, and images, by providing a straightforward API to fetch and serve these assets efficiently.

What are @cloudflare/kv-asset-handler's main functionalities?

Serve Static Assets

This feature allows you to serve static assets stored in Cloudflare's KV storage. The code sample demonstrates how to use the `getAssetFromKV` function to handle fetch events and return the requested asset.

const { getAssetFromKV } = require('@cloudflare/kv-asset-handler');

addEventListener('fetch', event => {
  event.respondWith(handleRequest(event));
});

async function handleRequest(event) {
  try {
    const response = await getAssetFromKV(event);
    return response;
  } catch (e) {
    return new Response('Error fetching asset', { status: 500 });
  }
}

Custom Cache Control

This feature allows you to customize cache control settings for the assets served. The code sample shows how to set browser and edge TTL (Time To Live) values to control caching behavior.

const { getAssetFromKV, mapRequestToAsset } = require('@cloudflare/kv-asset-handler');

addEventListener('fetch', event => {
  event.respondWith(handleRequest(event));
});

async function handleRequest(event) {
  try {
    const options = {
      cacheControl: {
        browserTTL: 60 * 60 * 24, // 1 day
        edgeTTL: 60 * 60 * 24 * 30, // 30 days
      },
    };
    const response = await getAssetFromKV(event, options);
    return response;
  } catch (e) {
    return new Response('Error fetching asset', { status: 500 });
  }
}

Custom Asset Mapping

This feature allows you to customize how requests are mapped to assets in KV storage. The code sample demonstrates how to modify the request URL to remove a '/static' prefix before fetching the asset.

const { getAssetFromKV, mapRequestToAsset } = require('@cloudflare/kv-asset-handler');

addEventListener('fetch', event => {
  event.respondWith(handleRequest(event));
});

async function handleRequest(event) {
  try {
    const customKeyModifier = request => {
      let url = new URL(request.url);
      url.pathname = url.pathname.replace('/static', '');
      return new Request(url.toString(), request);
    };
    const response = await getAssetFromKV(event, { mapRequestToAsset: customKeyModifier });
    return response;
  } catch (e) {
    return new Response('Error fetching asset', { status: 500 });
  }
}

Other packages similar to @cloudflare/kv-asset-handler

express-static

The `express-static` middleware is used in Express.js applications to serve static files. It is similar to @cloudflare/kv-asset-handler in that it helps serve static assets, but it is designed for use with Express.js and does not integrate with Cloudflare Workers or KV storage.

serve-static

The `serve-static` package is a standalone middleware for serving static files. It is often used with Node.js servers and frameworks like Express. Unlike @cloudflare/kv-asset-handler, it does not provide integration with Cloudflare Workers or KV storage.

static-server

The `static-server` package is a simple, zero-configuration command-line HTTP server for serving static files. It is useful for local development and testing but does not offer the same level of integration with Cloudflare Workers or KV storage as @cloudflare/kv-asset-handler.

README

@cloudflare/kv-asset-handler

     

kv-asset-handler is an open-source library for managing the retrieval of static assets from Workers KV inside of a Cloudflare Workers function. kv-asset-handler is designed for use with Workers Sites, a feature included in Wrangler, our command-line tool for deploying Workers projects.

kv-asset-handler runs as part of a Cloudflare Workers function, so it allows you to customize how and when your static assets are loaded, as well as customize how those assets behave before they're sent to the client.

Most users and sites will not need these customizations, and just want to serve their statically built applications. For that simple use-case, you can check out Cloudflare Pages, our batteries-included approach to deploying static sites on Cloudflare's edge network. Workers Sites was designed as a precursor to Cloudflare Pages, so check out Pages if you just want to deploy your static site without any special customizations!

For users who do want to customize their assets, and want to build complex experiences on top of their static assets, kv-asset-handler (and the default Workers Sites template, which is provided for use with Wrangler + Workers Sites) allows you to customize caching behavior, headers, and anything else about how your Workers function loads the static assets for your site stored in Workers KV.

The Cloudflare Workers Discord server is an active place where Workers users get help, share feedback, and collaborate on making our platform better. The #workers channel in particular is a great place to chat about kv-asset-handler, and building cool experiences for your users using these tools! If you have questions, want to share what you're working on, or give feedback, join us in Discord and say hello!

• Installation
• Usage
• getAssetFromKV
  • Example
  • Return
  • Optional Arguments
    • mapRequestToAsset
    • Example
    • cacheControl
      • browserTTL
      • edgeTTL
      • bypassCache
    • ASSET_NAMESPACE (required for ES Modules)
    • ASSET_MANIFEST (required for ES Modules)
    • defaultETag

• Helper functions
  • mapRequestToAsset
  • serveSinglePageApp
• Cache revalidation and etags

Installation

Add this package to your package.json by running this in the root of your project's directory:

npm i @cloudflare/kv-asset-handler

Usage

This package was designed to work with Worker Sites.

getAssetFromKV

getAssetFromKV(Evt) => Promise

getAssetFromKV is an async function that takes an Evt object (containing a Request and a waitUntil) and returns a Response object if the request matches an asset in KV, otherwise it will throw a KVError.

Example

This example checks for the existence of a value in KV, and returns it if it's there, and returns a 404 if it is not. It also serves index.html from /.

Return

getAssetFromKV returns a Promise<Response> with Response being the body of the asset requested.

Known errors to be thrown are:

• MethodNotAllowedError
• NotFoundError
• InternalError

ES Modules

import manifestJSON from "__STATIC_CONTENT_MANIFEST";
import {
	getAssetFromKV,
	MethodNotAllowedError,
	NotFoundError,
} from "@cloudflare/kv-asset-handler";

const assetManifest = JSON.parse(manifestJSON);

export default {
	async fetch(request, env, ctx) {
		if (request.url.includes("/docs")) {
			try {
				return await getAssetFromKV(
					{
						request,
						waitUntil(promise) {
							return ctx.waitUntil(promise);
						},
					},
					{
						ASSET_NAMESPACE: env.__STATIC_CONTENT,
						ASSET_MANIFEST: assetManifest,
					}
				);
			} catch (e) {
				if (e instanceof NotFoundError) {
					// ...
				} else if (e instanceof MethodNotAllowedError) {
					// ...
				} else {
					return new Response("An unexpected error occurred", { status: 500 });
				}
			}
		} else return fetch(request);
	},
};

Service Worker

import {
	getAssetFromKV,
	MethodNotAllowedError,
	NotFoundError,
} from "@cloudflare/kv-asset-handler";

addEventListener("fetch", (event) => {
	event.respondWith(handleEvent(event));
});

async function handleEvent(event) {
	if (event.request.url.includes("/docs")) {
		try {
			return await getAssetFromKV(event);
		} catch (e) {
			if (e instanceof NotFoundError) {
				// ...
			} else if (e instanceof MethodNotAllowedError) {
				// ...
			} else {
				return new Response("An unexpected error occurred", { status: 500 });
			}
		}
	} else return fetch(event.request);
}

Optional Arguments

You can customize the behavior of getAssetFromKV by passing the following properties as an object into the second argument.

getAssetFromKV(event, { mapRequestToAsset: ... })

mapRequestToAsset

mapRequestToAsset(Request) => Request

Maps the incoming request to the value that will be looked up in Cloudflare's KV

By default, mapRequestToAsset is set to the exported function mapRequestToAsset. This works for most static site generators, but you can customize this behavior by passing your own function as mapRequestToAsset. The function should take a Request object as its only argument, and return a new Request object with an updated path to be looked up in the asset manifest/KV.

For SPA mapping pass in the serveSinglePageApp function

Example

Strip /docs from any incoming request before looking up an asset in Cloudflare's KV.

import { getAssetFromKV, mapRequestToAsset } from '@cloudflare/kv-asset-handler'
...
const customKeyModifier = request => {
  let url = request.url
  //custom key mapping optional
  url = url.replace('/docs', '').replace(/^\/+/, '')
  return mapRequestToAsset(new Request(url, request))
}
let asset = await getAssetFromKV(event, { mapRequestToAsset: customKeyModifier })

cacheControl

type: object

cacheControl allows you to configure options for both the Cloudflare Cache accessed by your Worker, and the browser cache headers sent along with your Workers' responses. The default values are as follows:

let cacheControl = {
	browserTTL: null, // do not set cache control ttl on responses
	edgeTTL: 2 * 60 * 60 * 24, // 2 days
	bypassCache: false, // do not bypass Cloudflare's cache
};

browserTTL

type: number | null nullable: true

Sets the Cache-Control: max-age header on the response returned from the Worker. By default set to null which will not add the header at all.

edgeTTL

type: number | null nullable: true

Sets the Cache-Control: max-age header on the response used as the edge cache key. By default set to 2 days (2 * 60 * 60 * 24). When null will not cache on the edge at all.

bypassCache

type: boolean

Determines whether to cache requests on Cloudflare's edge cache. By default set to false (recommended for production builds). Useful for development when you need to eliminate the cache's effect on testing.

ASSET_NAMESPACE (required for ES Modules)

type: KV Namespace Binding

The binding name to the KV Namespace populated with key/value entries of files for the Worker to serve. By default, Workers Sites uses a binding to a Workers KV Namespace named __STATIC_CONTENT.

It is further assumed that this namespace consists of static assets such as HTML, CSS, JavaScript, or image files, keyed off of a relative path that roughly matches the assumed URL pathname of the incoming request.

In ES Modules format, this argument is required, and can be gotten from env.

ES Module

return getAssetFromKV(
	{
		request,
		waitUntil(promise) {
			return ctx.waitUntil(promise)
		},
	},
	{
		ASSET_NAMESPACE: env.__STATIC_CONTENT,
	},
)

Service Worker

return getAssetFromKV(event, { ASSET_NAMESPACE: MY_NAMESPACE })

ASSET_MANIFEST (required for ES Modules)

type: text blob (JSON formatted) or object

The mapping of requested file path to the key stored on Cloudflare.

Workers Sites with Wrangler bundles up a text blob that maps request paths to content-hashed keys that are generated by Wrangler as a cache-busting measure. If this option/binding is not present, the function will fallback to using the raw pathname to look up your asset in KV. If, for whatever reason, you have rolled your own implementation of this, you can include your own by passing a stringified JSON object where the keys are expected paths, and the values are the expected keys in your KV namespace.

In ES Modules format, this argument is required, and can be imported.

ES Module

import manifestJSON from '__STATIC_CONTENT_MANIFEST'
let manifest = JSON.parse(manifestJSON)
manifest['index.html'] = 'index.special.html'

return getAssetFromKV(
	{
		request,
		waitUntil(promise) {
			return ctx.waitUntil(promise)
		},
	},
	{
		ASSET_MANIFEST: manifest,
		// ...
	},
)

Service Worker

let assetManifest = { "index.html": "index.special.html" }
return getAssetFromKV(event, { ASSET_MANIFEST: assetManifest })

defaultMimeType (optional)

type: string

This is the mime type that will be used for files with unrecognized or missing extensions. The default value is 'text/plain'.

If you are serving a static site and would like to use extensionless HTML files instead of index.html files, set this to 'text/html'.

defaultDocument (optional)

type: string

This is the default document that will be concatenated for requests ends in '/' or without a valid mime type like '/about' or '/about.me'. The default value is 'index.html'.

defaultETag (optional)

type: 'strong' | 'weak'

This determines the format of the response ETag header. If the resource is in the cache, the ETag will always be weakened before being returned. The default value is 'strong'.

Helper functions

mapRequestToAsset

mapRequestToAsset(Request) => Request

The default function for mapping incoming requests to keys in Cloudflare's KV.

Takes any path that ends in / or evaluates to an HTML file and appends index.html or /index.html for lookup in your Workers KV namespace.

serveSinglePageApp

serveSinglePageApp(Request) => Request

A custom handler for mapping requests to a single root: index.html. The most common use case is single-page applications - frameworks with in-app routing - such as React Router, VueJS, etc. It takes zero arguments.

import { getAssetFromKV, serveSinglePageApp } from '@cloudflare/kv-asset-handler'
...
let asset = await getAssetFromKV(event, { mapRequestToAsset: serveSinglePageApp })

Cache revalidation and etags

All responses served from cache (including those with cf-cache-status: MISS) include an etag response header that identifies the version of the resource. The etag value is identical to the path key used in the ASSET_MANIFEST. It is updated each time an asset changes and looks like this: etag: <filename>.<hash of file contents>.<extension> (ex. etag: index.54321.html).

Resources served with an etag allow browsers to use the if-none-match request header to make conditional requests for that resource in the future. This has two major benefits:

• When a request's if-none-match value matches the etag of the resource in Cloudflare cache, Cloudflare will send a 304 Not Modified response without a body, saving bandwidth.
• Changes to a file on the server are immediately reflected in the browser - even when the cache control directive max-age is unexpired.

Disable the etag

To turn etags off, you must bypass cache:

/* Turn etags off */
let cacheControl = {
	bypassCache: true,
};

Syntax and comparison context

kv-asset-handler sets and evaluates etags as strong validators. To preserve etag integrity, the format of the value deviates from the RFC2616 recommendation to enclose the etag with quotation marks. This is intentional. Cloudflare cache applies the W/ prefix to all etags that use quoted-strings -- a process that converts the etag to a "weak validator" when served to a client.