Start from an Existing Worker

Worker Sites require Wrangler - make sure to be on the latest version - and the Workers Unlimited plan.

Make sure to be on the latest version.

If you have a pre-existing Worker project, you can use Workers Sites to serve static assets to the Worker. To do so, follow these instructions:

  1. Create a directory in the root of your project (e.g. workers-site) and add configuration to your wrangler.toml to point to it. Also add the path to your Worker script (probably index.js).

    # wrangler.toml
        
    account_id = "612bef.."
    [site]
    bucket = "./my-dir" # Add the directory with your static assets!
    entry-point = "./workers-site" # JS folder serving your assets 
    
  2. Add the @cloudflare/kv-asset-handler package to your project:

    npm i @cloudflare/kv-asset-handler
    
  3. Import the package’s code into your Worker script, and use it in the handler you’d like to respond with static assets:

    import { getAssetFromKV } from '@cloudflare/kv-asset-handler'
    
    addEventListener('fetch', event => {
      event.respondWith(handleEvent(event))
    })
    
    async function handleEvent(event) {
      try {
        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 see the template’s source.

  4. You should now be all set you can run preview or publish as you would normally with your Worker project!

     wrangler publish