Cloudflare Docs
Workers
Workers
Visit Workers on GitHub
Set theme to dark (⇧+D)

Add static assets to an existing Workers project

Workers Sites require Wrangler — make sure to use the latest version.

If you have a pre-existing Worker project, you can use Workers Sites to serve static assets to the Worker.

​​ Getting started

  1. Create a directory that will contain the assets in the root of your project (for example, ./public)

  2. Add configuration to your wrangler.toml file to point to it.


    [site]
    bucket = "./public" # Add the directory with your static assets!
  3. Install the @cloudflare/kv-asset-handler package in your project:


    $ npm i -D @cloudflare/kv-asset-handler
  4. Import the getAssetFromKV() function into your Worker entry point and use it to respond with static assets.


import { getAssetFromKV } from '@cloudflare/kv-asset-handler';
import manifestJSON from '__STATIC_CONTENT_MANIFEST';
const assetManifest = JSON.parse(manifestJSON);
export default {
async fetch(request, env, ctx) {
try {
// Add logic to decide whether to serve an asset or run your original Worker code
return await getAssetFromKV(
{
request,
waitUntil: ctx.waitUntil.bind(ctx),
},
{
ASSET_NAMESPACE: env.__STATIC_CONTENT,
ASSET_MANIFEST: assetManifest,
}
);
} catch (e) {
let pathname = new URL(request.url).pathname;
return new Response(`"${pathname}" not found`, {
status: 404,
statusText: 'not found',
});
}
},
};

import { getAssetFromKV } from "@cloudflare/kv-asset-handler";
addEventListener("fetch", (event) => {
event.respondWith(handleEvent(event));
});
async function handleEvent(event) {
try {
// Add logic to decide whether to serve an asset or run your original Worker code
return await getAssetFromKV(event);
} catch (e) {
let pathname = new URL(event.request.url).pathname;
return new Response(`"${pathname}" not found`, {
status: 404,
statusText: "not found",
});
}
}

For more information on the configurable options of getAssetFromKV() refer to kv-asset-handler docs.

  1. Run wrangler dev or npx wrangler deploy as you would normally with your Worker project. Wrangler will automatically upload the assets found in the configured directory.


    $ npx wrangler deploy