⏩ Developing with esbuild

We'll now set up a worker development environment using Miniflare and esbuildOpen external link: an extremely fast JavaScript bundler. See this repositoryOpen external link for a complete example.

​Dependencies

# Create and move into a new empty directory for the project
$ mkdir esbuild-worker
$ cd esbuild-worker
# Initialise a package.json file
$ npm init -y
# Install esbuild and miniflare as dev dependencies
$ npm install -D esbuild miniflare

Update the main and scripts fields in package.json to the following:

package.json
{
  ...,
  "main": "./dist/index.js",
  "scripts": {
    "build": "esbuild --bundle --sourcemap --outdir=dist ./src/index.js",
    "dev": "miniflare --watch --debug"
  },
  ...
}

​Wrangler Configuration

Create the following wrangler.toml file in the new directory:

wrangler.toml
name = "esbuild-worker"
type = "javascript"
account_id = ""
workers_dev = true
route = ""
zone_id = ""
kv_namespaces = [
  { binding = "COUNTER_NAMESPACE", id = "", preview_id = "" },
]

[build]
command = "npm run build"
[build.upload]
format = "service-worker"

​Worker Script

Each time a path is accessed, our worker will increment that path's count in KV and return the new count. We'll store our request handling logic in a separate file to demonstrate esbuild's bundling. Create the following 2 scripts:

src/request.js
export async function handleRequest(request) {
  // Parse the request's url so we can get the path
  const url = new URL(request.url);
  // Get the path's current count
  const currentValue = await COUNTER_NAMESPACE.get(url.pathname);
  // Increment the path's count, defaulting it to 0
  const newValue = (parseInt(currentValue ?? "0") + 1).toString();
  // Store the new count
  await COUNTER_NAMESPACE.put(url.pathname, newValue);
  // Return the new count
  return new Response(newValue);
}

src/index.js
import { handleRequest } from "./request";

addEventListener("fetch", (event) => {
  event.respondWith(handleRequest(event.request));
});

​Running Miniflare

Finally, run the following command to start Miniflare:

$ npm run dev

This will run esbuild and launch an HTTP server. Try access http://127.0.0.1:8787/aOpen external link in your browser and refresh the page. The count should increment. Try edit src/request.js to increment the count by 2 each time. Miniflare will rebuild your code and reload your worker.