Start from Worker

Use Workers Static Assets Instead

You should use Workers Static Assets to host full-stack applications instead of Workers Sites. Do not use Workers Sites for new projects.

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 file to point to it.

   wrangler.jsonc

   {
     "site": {
       "bucket": "./public"
     }
   }

   wrangler.toml

   [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.

Module Worker

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",
      });
    }
  },
};

Service Worker

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 ↗.

5. Run wrangler deploy 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