esb.deno.dev

esbuild as an edge service


Prefix any JavaScript, TypeScript, or CSS url with this site, and we'll run esbuild on it for you.

Runs in a nearby Deno Deploy edge worker.

Link to the output directly in the browser, or use the response anywhere you see fit.

When is this useful?

In short, whenever you don't have an esbuild binary around, and can make http calls. Think CI, prototypes, or hot-linking directly from a browser script tag.

Also when you don't necessarily care about maximum build performance, since this is probably the slowest way to run esbuild on the planet!

If you have TypeScript source with only relative or remote https url imports, you can skip your build step and reference your source code as if it were a bundled ESM JavaScript module, simply by prefixing the entry point source url with https://esb.deno.dev/

You can reference just parts of public npm libraries (provided they have no package.json deps), create bundles on the fly for any commit hash, branch, or tag.

Deno folks can use this as a deno bundle that also supports minification and treeshaking.

In addition to GETting our magic prefix urls, you can also provide local input via an http POST call.

This service is provided as a useful tool for anyone to use - the intention is to use scalable edge platforms like Deno Deploy to minimize costs and operational headaches.

Hope it helps!
- John


Inline all dependencies of the input file.
Return the emitted contents as an ES module.
Output 👉 (this handy form requires JavaScript to be enabled)

Full reference

GET

In general, take the url to your input file and prefix it with https://esb.deno.dev/ to build with the default options.

GET https://esb.deno.dev/https://github.com/mhart/aws4fetch/blob/master/src/main.js

Set custom options using comma-separated name=value pairs as the first path segment. If a value is unspecified for a boolean option, it is assumed to be true.

GET https://esb.deno.dev/target=es2015,minify/https://github.com/mhart/aws4fetch/blob/master/src/main.js

Options

Name Possible values Description
type bundle (default) or transform Call esbuild build (bundle: true) or transform
Use https://est.deno.dev/, which transforms by default, instead of type=transform for an even shorter url!
format esm (default), iife, or cjs See esbuild Format
target e.g. es2015, esnext (default), chrome79 See esbuild Target
legalcomments none, inline (default), or eof See esbuild Legal comments
sourcemap true or false (default) esbuild Sourcemap none or inline, respectively
minify true or false (default) See esbuild Minify
treeshaking true (default) or false See esbuild Tree shaking

POST

Send your input in the request body to https://esb.deno.dev/ to build with the default options.

$ echo "const msg = 'hi'; console.log(msg)" | 
curl -X POST --data-binary @- https://esb.deno.dev --output -

Set custom options using comma-separated name=value pairs as the first path segment. If a value is unspecified for a boolean option, it is assumed to be true.

$ echo "const msg = 'hi'; console.log(msg)" |
curl -X POST --data-binary @- https://esb.deno.dev/target=es2015,minify --output -

Dependency resolution

When bundling, local relative imports will be resolved against the initial url. Full remote import urls (e.g. in Deno code) will be followed as well.

Bare references to Node packages are not supported and will fail, since we'd have to find the package json and do full Node package resolution and NPM library extraction in the scope of a single request, which is a little much.

Headers

Output is returned with the most permissive CORS header, so it can be hot-linked directly from any other domain.

By default, no cache headers are set on the response, but if the input url looks immutable (like a github commit hash or release tag), it will be returned with cache-control: public, max-age=604800, immutable so browsers can cache the result.

Edge Caching

No per-region caching yet, but will be implemented soon in the Cloudflare version. Edge caching in the Deno Deploy version will be implemented once a cache feature is available.


Examples

Generate an ESM module from a single NPM file and its direct dependencies

https://esb.deno.dev/https://cdn.jsdelivr.net/npm/lodash@4.17.21/forOwnRight.js

Pretty-print minified CSS

https://est.deno.dev/https://s.yimg.com/nn/lib/metro/g/myy/grid_0.0.82.css

Pretty-print minified CSS, and inline dependencies (bundle)

https://esb.deno.dev/https://s.yimg.com/nn/lib/metro/g/myy/grid_0.0.82.css

Bundle and minify a given Deno entry point

In addition to minification, esbuild also performs treeshaking by default (neither are supported in deno bundle).

https://esb.deno.dev/https://deno.land/minify/std@0.145.0/datetime/mod.ts

Transpile a single Deno file to ES6

https://est.deno.dev/target=es6/https://deno.land/std@0.145.0/datetime/mod.ts

Github source browsing urls are also supported for convenience

Paste the browser url for any github source file, we'll redirect to the underlying raw.githubusercontent.com file.

https://esb.deno.dev/https://github.com/jquery/jquery/blob/main/src/jquery.js

Generate a module as of a specific git commit hash

We'll consider this output immutable and serve up immutable cache headers in the response.

https://esb.deno.dev/https://github.com/mhart/aws4fetch/blob/02184cff59e0f1d4b98d609538b7ab67b92e4e38/src/main.js