Start from Worker

Use Workers Static Assets Instead

You should use Workers Static Assets to host full-stack applications instead of Workers Sites. It has been deprecated in Wrangler v4, and the Cloudflare Vite plugin does not support 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