Modern web development is a symphony of tools, but let's be honest: sometimes the orchestra is out of tune. Wrestling with complex bundler configurations, slow build times, and hefty node_modules directories just to minify a few CSS files can feel like a chore. The process should be simple, and above all, fast.
Enter esbuild, the revolutionary JavaScript bundler written in Go, renowned for its jaw-dropping speed. But what if you could harness that speed without installing a single local dependency?
That’s where esbuild.do comes in. We provide the blistering performance of esbuild as a simple, scalable API. In this guide, we'll show you how to go from scattered stylesheets to a single, minified CSS file in seconds using our agentic API.
esbuild.do is esbuild as a Service. It's a specialized agent on our workflow platform that exposes esbuild's powerful bundling, transpilation, and minification capabilities through a clean API.
Instead of running npm install esbuild and managing local binaries, you send your code to our endpoint and get production-ready assets back.
Why use an API for this?
Let's see just how easy it is to bundle and minify CSS. We'll take two separate CSS "files" (as strings), resolve their @import rule, and output a single, minified file.
First, you'll need our SDK to communicate with the esbuild.do agent.
import { Agent } from '@do-business/sdk';
// Initialize the agent for esbuild.do
const esbuild = new Agent('esbuild.do');
This simple line gives you a powerful build tool client ready to go.
The esbuild.do API works with a virtual file system. You provide your file contents as strings in a sources object. This is perfect for dynamically generating code or pulling it from a database.
Let's create a variables.css file and a main.css file that imports it.
const cssSources = {
'variables.css': `
:root {
--primary-color: #007bff;
--text-color: #333;
}
`,
'main.css': `
@import './variables.css';
body {
font-family: sans-serif;
color: var(--text-color);
}
a {
color: var(--primary-color);
}
`
};
Now, we call the bundle method. We tell it our entry point (main.css), provide the sources, and turn on bundle and minify options.
// Bundle multiple CSS files into one minified output
async function bundleCss() {
console.log('Sending CSS to esbuild.do for bundling...');
const { code } = await esbuild.bundle({
entryPoints: ['main.css'],
sources: cssSources,
bundle: true,
minify: true,
});
console.log('--- Bundled & Minified CSS ---');
console.log(code);
}
bundleCss();
// Expected output:
// --- Bundled & Minified CSS ---
// :root{--primary-color:#007bff;--text-color:#333}body{font-family:sans-serif;color:var(--text-color)}a{color:var(--primary-color)}
That's it! In a single API call, esbuild.do:
No build scripts. No config files. Just results.
The true power of a bundler shines when it handles multiple asset types. esbuild.do makes it trivial to bundle CSS directly from your JavaScript or TypeScript files—a common pattern in modern frameworks.
Simply import your CSS in your JS/TS entry point, and the agent will handle the rest.
import { Agent } from '@do-business/sdk';
const esbuild = new Agent('esbuild.do');
async function bundleWithCssImport() {
const { code } = await esbuild.bundle({
entryPoints: ['index.js'],
sources: {
'index.js': `
import './styles.css';
console.log('App is running and styles are loaded!');
`,
'styles.css': `
body { background: #f0f0f0; padding: 1rem; }
`
},
bundle: true,
minify: true,
platform: 'browser',
target: 'es2020'
});
console.log('--- Bundled JS (with CSS included) ---');
console.log(code);
}
bundleWithCssImport();
The resulting JavaScript bundle will contain the CSS in a way that esbuild handles for injection into the DOM, giving you a self-contained script.
esbuild.do provides esbuild's powerful bundling, transpilation, and minification capabilities as a simple and robust API. It allows you to integrate a high-speed build step into any application or workflow without installing or configuring local build tools.
Using esbuild.do abstracts away the complexity of managing binary dependencies, versions, and build environments. It's perfect for serverless functions, CI/CD pipelines, online playgrounds, and any environment where installing Node.js and npm packages is inconvenient.
Just like the underlying tool, our agent supports JavaScript (JS, JSX) and TypeScript (TS, TSX). It can also bundle CSS, load JSON files, and handle various output formats like IIFE, CommonJS (CJS), and ES Modules (ESM).
You provide an object where keys are filenames and values are the file content as strings. Our agent creates a virtual file system to process these, resolves imports between them, and returns the final bundled code.
Stop wrestling with build configurations and slow pipelines. With esbuild.do, you have an extremely fast bundling engine ready to serve you through a simple API. Speed up your development cycle, simplify your infrastructure, and focus on what you do best: building great applications.
Ready to give it a try? Visit esbuild.do to get started!