esm-worker

A Cloudflare worker handles all requests of esm.sh at the edge(earth).

• Cache everything at the edge
• Store modules in KV
• Store assets in R2

Installation

npm install esm-worker@^0.135.0

Configuration

You need to add following configuration to your wrangler.toml:

kv_namespaces = [
  {
    binding = "KV",
    id = "YOUR_KV_ID",
    preview_id = "YOUR_PREVIEW_KV_ID"
  }
  # your other namespaces...
]

[vars]
ESM_ORIGIN = "https://esm.sh" # change to your self-hosting esm.sh server if needed
NPM_REGISTRY = "https://registry.npmjs.org/" # change to your private npm registry if needed
# your other vars...

[[r2_buckets]]
binding = "R2"
bucket_name = "YOUR_BUCKET_NAME"
preview_bucket_name = "YOUR_PREVIEW_BUCKET_NAME"

Other optional configurations in secrets:

• If you are using a self-hosting esm.sh server with authSecret option, you need to add the following configuration:

  wrangler secret put ESM_TOKEN
  

• If you are using a private npm registry, you need to add the following configuration:

  wrangler secret put NPM_TOKEN
  

Usage

Wrap your Cloudflare worker with the withESMWorker function:

import { withESMWorker } from "esm-worker";

// extend the `Env` interface
declare global {
  interface Env {
    // your other vars in `wrangler.toml` ...
  }
}

export default withESMWorker((req, env, ctx) => {
  const { url } = ctx;

  // using a custom homepage
  if (url.pathname === "/") {
    return new Response("<h1>Welcome to esm.sh!</h1>", {
      headers: { "Content-Type": "text/html" },
    });
  }

  // using the cache API
  if (url.pathname === "/boom") {
    return ctx.withCache(() =&gt;
      new Response("Boom!", {
        headers: { "Cache-Control": "public; max-age=3600" },
      })
    );
  }

  // return void to let esm-worker handle the rest requests
});

Deploy to Cloudflare Workers

wrangler deploy