Skip to content

These docs are for Miniflare 2 which is no longer supported apart from critical security updates.
Please see the migration guide to upgrade to Miniflare 3, and the updated API docs.

Miniflare
Visit Miniflare on GitHub
Set theme to dark (⇧+D)

⏩ Developing with esbuild

We'll now set up a worker development environment using Miniflare and esbuild: an extremely fast JavaScript bundler. See this repository 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/a 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.