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

   wrangler.toml

   [site]
   bucket = "./public" # Add the directory with your static assets!

   wrangler.json

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

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

Was this helpful?

What did you like?

Accurate

Easy to understand

Solved my problem

Helped me decide to use the product

Other

What went wrong?

Hard to understand

Incorrect information

Missing the information

Other

Thank you for helping improve Cloudflare's documentation!