Budo Quickstart

{"id":15302,"library":"budo","title":"Budo - Browserify Development Server","description":"Budo is a command-line interface (CLI) and programmatic tool designed for rapid prototyping with Browserify, providing a development server that focuses on incremental reloading and LiveReload integration. It serves a default `index.html`, bundles JavaScript with Browserify on the fly, and suspends HTTP responses until the bundle is ready, preventing stale content. A key feature is its ability to watch HTML and CSS files, injecting CSS changes without a full page reload, and providing clear error messages directly in the DOM and browser console. As of its latest stable release, 11.8.4 (published September 2017), the project appears to be in an abandoned state, with no significant updates in recent years. It differentiates itself by tightly integrating Browserify's bundling capabilities with a development server and LiveReload, offering features like SSL support and a rich API for custom development workflows, making it suitable for quick development cycles, especially for smaller client-side projects that leverage the Browserify ecosystem.","status":"abandoned","version":"11.8.4","language":"javascript","source_language":"en","source_url":"git://github.com/mattdesl/budo","tags":["javascript","browserify","watchify","browser","dev","development","server","beefy","wzrd"],"install":[{"cmd":"npm install budo","lang":"bash","label":"npm"},{"cmd":"yarn add budo","lang":"bash","label":"yarn"},{"cmd":"pnpm add budo","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Primary JavaScript bundling engine.","package":"browserify","optional":false},{"reason":"For fast incremental bundling; direct dependency since v4.0.0.","package":"watchify","optional":false},{"reason":"Used for pretty-printing terminal logs.","package":"garnish","optional":false}],"imports":[{"note":"Budo is a CommonJS package primarily used via its CLI. The main export is a function that can be used programmatically to configure and start a development server.","wrong":"import budo from 'budo'","symbol":"budo","correct":"const budo = require('budo')"},{"note":"The `budo` function returns an EventEmitter instance (`server`) which can be used to listen for events like `'connect'`, `'update'`, or `'error'` for programmatic control.","symbol":"serverEvents","correct":"const server = budo(entry, options); server.on('update', () => console.log('Bundle updated!'))"},{"note":"The most common way to use `budo` is through its globally installed command-line interface, `budo`, which provides a robust set of options for serving, bundling, and LiveReloading.","symbol":"budo CLI","correct":"budo index.js --live --open"}],"quickstart":{"code":"// First, install budo globally:\n// npm install -g budo\n\n// Create an entry JavaScript file, e.g., `src/main.js`:\n// console.log('Hello from Budo!');\n// const element = document.createElement('h1');\n// element.textContent = 'Welcome to your Budo app!';\n// document.body.appendChild(element);\n\n// Create a simple HTML file, e.g., `public/index.html`:\n/*\n\n\n\n \n \n Budo Quickstart\n \n\n\n \n\n\n*/\n\n// Create a simple CSS file, e.g., `public/style.css`:\n// body { font-family: sans-serif; margin: 20px; background-color: #f0f0f0; }\n// h1 { color: #333; }\n\n// Run Budo from your terminal in the project root:\n// budo src/main.js:bundle.js --dir public/ --live --open --host 0.0.0.0 --port 9988 -- -t [ babelify --presets=@babel/preset-env ]\n\n// Explanation:\n// - `src/main.js:bundle.js`: Bundles `src/main.js` and serves it as `bundle.js`.\n// - `--dir public/`: Serves static files from the `public/` directory.\n// - `--live`: Enables LiveReload for HTML, CSS, and JS changes (CSS injected, HTML/JS reloaded).\n// - `--open`: Automatically opens the server URL in your default browser.\n// - `--host 0.0.0.0 --port 9988`: Makes the server accessible on all network interfaces on port 9988.\n// - `-- -t [ babelify --presets=@babel/preset-env ]`: Passes a transform to Browserify (e.g., Babelify for modern JS syntax).\n// (Requires `npm install --save-dev babelify @babel/core @babel/preset-env`)\n","lang":"javascript","description":"This quickstart demonstrates how to use Budo's CLI to serve, bundle, and LiveReload a simple JavaScript application with Browserify and Babel, serving static assets from a separate directory."},"warnings":[{"fix":"Adjust CLI commands to prefix Browserify arguments with `--`. Explicitly set `--host localhost` if you require local-only access. Migrate away from `--live-plugin` functionality.","message":"Major breaking changes in v5.0.0 include requiring `--` before any Browserify arguments (e.g., `budo index.js -- --transform babelify`), `--host` now defaulting to your internal IP (instead of localhost), and the removal of `--live-plugin`.","severity":"breaking","affected_versions":">=5.0.0"},{"fix":"Remove `--outfile` or `-o` from your `budo` commands. If your HTML refers to `bundle.js`, ensure your `budo` command maps the entry point to `bundle.js` using the `entry:outfile` syntax, e.g., `budo src/index.js:bundle.js`.","message":"In v3.0.4, the `--outfile` and `-o` options were removed as Budo no longer performs file I/O for bundles. Additionally, `budo index.js` now directly serves `index.js` (or rather, the bundle for `index.js`), requiring adjustment if your HTML expects a `bundle.js` path.","severity":"breaking","affected_versions":">=3.0.4"},{"fix":"Always use `budo entry.js -- --transform browserify-shim` to correctly pass arguments to Browserify.","message":"Any arguments intended for Browserify (e.g., `--transform`, `--plugin`) must be preceded by a `--` separator on the command line, otherwise Budo will interpret them as its own options.","severity":"gotcha","affected_versions":">=5.0.0"},{"fix":"Always include the `--live` flag in your `budo` command to enable LiveReload features. For specific file types beyond default JS/HTML/CSS, use `--wg` (e.g., `--wg **/*.{html,css,js,jsx}`).","message":"LiveReload functionality for HTML, CSS, and JavaScript file changes is not enabled by default. CSS injection and full page reloads for HTML/JS require explicit activation.","severity":"gotcha","affected_versions":"*"},{"fix":"Use `budo --dir public/` to serve content from the `public` directory. You can specify multiple directories: `budo --dir public/ --dir assets/`.","message":"By default, Budo serves files from the current working directory. To serve additional static assets (like `index.html`, `images`, `css` from a separate folder), you must specify a `--dir` option.","severity":"gotcha","affected_versions":"*"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"fix":"Run `npm install some-module` or `npm install --save some-module` in your project directory. Ensure `some-module` is correctly exposed if it's a non-standard path or global.","cause":"A dependency required in your JavaScript file is not installed or Browserify cannot resolve it.","error":"Error: Cannot find module 'some-module'"},{"fix":"Ensure your `budo` command explicitly maps your entry file to `bundle.js`, e.g., `budo index.js:bundle.js`. If you're using `--dir`, make sure your HTML `script` tag's `src` attribute correctly matches the served bundle path.","cause":"The HTML file is requesting a JavaScript bundle at `bundle.js`, but Budo is either not configured to serve a bundle at that path, or no entry point was provided for bundling. This often happens if the HTML `script` tag references `bundle.js` but the `budo` command only provides `budo index.js`.","error":"GET http://localhost:9966/bundle.js net::ERR_ABORTED 404 (Not Found)"},{"fix":"Stop the conflicting process or specify an alternative port for `budo` using the `--port` or `-p` flag, e.g., `budo index.js --port 8000`.","cause":"Another process is already using the default port `9966` (or the port you specified).","error":"(node:...) UnhandledPromiseRejectionWarning: Error: listen EADDRINUSE: address already in use :::9966"},{"fix":"Add a Browserify transform like `babelify` to your `budo` command: `budo index.js -- --transform [ babelify --presets=@babel/preset-env ]`. Ensure `babelify` and its Babel presets are installed (`npm install --save-dev babelify @babel/core @babel/preset-env`).","cause":"Your JavaScript code uses ES modules (`import`/`export`) or other modern syntax not natively supported by the Browserify build without a transform like `babelify`.","error":"SyntaxError: Unexpected token import (or export)"}],"ecosystem":"npm"}