• Stars
    star
    2,174
  • Rank 21,215 (Top 0.5 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created almost 10 years ago
  • Updated over 2 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

🎬 a dev server for rapid prototyping

budō

build status stability NPM version Downloads js-standard-style

This is a browserify development server focused on incremental reloading, LiveReload integration (including CSS injection) and other high-level features for rapid prototyping.

To install it globally:

npm install budo -g

Running budo will start a server with a default index.html and incrementally bundle your source on filesave. The requests are delayed until the bundle has finished, so you won't be served stale or empty bundles if you refresh the page mid-update. Examples:

# serve file on port 9966 and open browser
budo index.js --open

# enable LiveReload on HTML/CSS/JS file changes
budo index.js --live

# default html will use src="static/bundle.js"
budo src/index.js:static/bundle.js

# pass some options to browserify
budo index.js --live -- -t babelify

# use HTTPS and enable CORS headers
budo index.js --ssl --cors

# LiveReload public directory without any bundling
# Add all extensions of file types you want to trigger reloads
budo --dir public/ --wg **/*.{html,css,js} --live

Then open http://localhost:9966/ to see the content in action.

By default, budo pretty-prints to terminal with garnish.

See docs for more details and integrations, such as React Hot Module Replacement, Pushstate Servers and HTTPS. PRs/suggestions/comments welcome.

features

At a glance:

  • serves a default index.html
  • fast incremental bundling, suspending the response until the new source is ready
  • watches HTML and CSS files for changes; CSS is injected without reloading the page
  • can emit ndjson logs to use another pretty-printer, like bistre.
  • provides clear error messaging during development in DOM and console
  • supports SSL and can generate a self-signed certificate
  • the rich API allows you to build more complex development tools on top of budo

Below is an example of how syntax errors look during development, using the babelify transform.

docs

usage

NPM

CLI

Details for budo command-line interface.

Usage:
  budo index.js [opts] -- [browserify opts]

Options:
  --help, -h       show help message
  --version        show version
  --port, -p       the port to run, default 9966
  --host, -H       the host, default internal IP (localhost)
  --dir, -d        a path, or array of paths for base static content
  --serve, -s      override the bundle path being served
  --live, -l       enable default LiveReload integration
  --live-port, -L  the LiveReload port, default 35729
  --open, -o       launch the browser once connected
  --pushstate, -P  always render the index page instead of a 404 page
  --base           set the base path for the generated HTML, default to '/'
  --onupdate       a shell command to trigger on bundle update
  --poll=N         use polling for file watch, with optional interval N
  --title          optional title for default index.html
  --css            optional stylesheet href for default index.html
  --ssl, -S        create an HTTPS server instead of HTTP
  --cert, -C       the cert for SSL (default cert.pem)
  --key, -K        the key for SSL (default key.pem)
  --cors           set header to use CORS (Access-Control-Allow-Origin: *)
  --ndjson         print ndjson instead of pretty-printed logs
  --verbose, -v    also include debug messages
  --force-default-index always serve a generated index.html instead of a static one
  --no-stream      do not print messages to stdout
  --no-debug       do not use inline source maps
  --no-portfind    will not attempt auto-portfinding
  --no-error-handler    disable default DOM error handling
  --watch-glob, --wg    glob(s) to watch for reloads, default '**/*.{html,css}'
  --static-options      subarg options to pass to serve-static module

By default, messages will be printed to process.stdout, and --debug will be sent to browserify (for source maps). You can turn these off with --no-stream and --no-debug, respectively.

Everything after -- is passed directly to browserify. Example:

budo index.js --live -- -t [ babelify --extensions .es6 ]

API

The API mirrors the CLI except it does not write to process.stdout by default.

var budo = require('budo')
var babelify = require('babelify')

budo('./src/index.js', {
  live: true,             // setup live reload
  port: 8000,             // use this port
  browserify: {
    transform: babelify   // ES6
  }
}).on('connect', function (ev) {
  console.log('Server running on %s', ev.uri)
  console.log('LiveReload running on port %s', ev.livePort)
}).on('update', function (buffer) {
  console.log('bundle - %d bytes', buffer.length)
})

See API usage for details.

See Also

budō combines several smaller and less opinionated modules.

Also, special thanks to beefy and wzrd which originally inspired budo.

License

MIT, see LICENSE.md for details.

More Repositories

1

canvas-sketch

[beta] A framework for making generative artwork in JavaScript and the browser.
JavaScript
5,019
star
2

lwjgl-basics

🔧 LibGDX/LWJGL tutorials and examples
Java
1,841
star
3

graphics-resources

📝 a list of graphic programming resources
1,748
star
4

color-wander

🎨 Generative artwork in node/browser based on a seeded random
JavaScript
1,615
star
5

promise-cookbook

📙 a brief introduction to using Promises in JavaScript
1,603
star
6

module-best-practices

📚 some best practices for JS modules
JavaScript
1,521
star
7

workshop-generative-art

A workshop on creative coding & generative art
JavaScript
1,362
star
8

svg-mesh-3d

🚀 converts a SVG path to a 3D mesh
JavaScript
1,169
star
9

workshop-webgl-glsl

A workshop on WebGL and GLSL
JavaScript
1,032
star
10

webgl-wireframes

Stylized Wireframe Rendering in WebGL
JavaScript
713
star
11

workshop-p5-intro

Intro to Creative Coding workshop with p5.js and Tone.js
711
star
12

canvas-sketch-util

Utilities for sketching in Canvas, WebGL and generative art
JavaScript
661
star
13

threejs-app

Some opinionated structure for a complex/scalable ThreeJS app
JavaScript
444
star
14

bellwoods

JavaScript
395
star
15

webgl-lines

some interactive content for a blog post
JavaScript
385
star
16

eases

a grab-bag of modular easing equations
JavaScript
372
star
17

audiograph.xyz

A visual exploration of Pilotpriest's 2016 album, TRANS.
JavaScript
335
star
18

jsconfeu-generative-visuals

Code for the generative projection mapped animations during JSConf EU 2018 in Berlin.
JavaScript
334
star
19

load-asset

Loads a single or multiple assets and returns a promise.
JavaScript
311
star
20

glsl-fxaa

FXAA implementation for glslify in WebGL
GLSL
310
star
21

dictionary-of-colour-combinations

palettes from A Dictionary of Colour Combinations
Python
290
star
22

shader-reload

An interface for reloading GLSL shaders on the fly.
JavaScript
284
star
23

penplot

[DEPRECATED] see canvas-sketch
JavaScript
262
star
24

mp4-wasm

[proof-of-concept] fast MP4 mux / demux using WASM
C
258
star
25

gifenc

fast GIF encoding
JavaScript
246
star
26

codevember

codevember
JavaScript
242
star
27

impressionist

🎨 generative painting using perlin noise for motion
JavaScript
242
star
28

three-line-2d

lines expanded in a vertex shader
JavaScript
224
star
29

three-orbit-controls

orbit controls for ThreeJS
JavaScript
216
star
30

physical-text

🌂 simulating text in the physical world
JavaScript
216
star
31

mp4-h264

[project suspended] MP4 + H264 encoding for the browser with WASM
C
212
star
32

prot

highly opinionated dev environment [Proof of concept]
JavaScript
201
star
33

template-electron-installation

a template for media art installations using Electron in kiosk mode
JavaScript
199
star
34

workshop-web-audio

Web Audio workshop with Frontend Masters
JavaScript
189
star
35

yyz

JavaScript
187
star
36

parametric-curves

JavaScript
185
star
37

fontpath

Font to vector path tools
JavaScript
183
star
38

ghrepo

:octocat: create a new GitHub repo from your current folder
JavaScript
177
star
39

google-panorama-equirectangular

gets equirectangular images from Google StreetView
JavaScript
172
star
40

image-sdf

generate a signed distance field from an image
JavaScript
171
star
41

glsl-film-grain

natural looking film grain using noise functions
JavaScript
171
star
42

subscapes

generative artwork hosted on Ethereum
JavaScript
169
star
43

pack-spheres

Brute force circle/sphere packing in 2D or 3D
JavaScript
161
star
44

polartone

experimental audio visualizer
JavaScript
154
star
45

dom-css

fast dom CSS styling
JavaScript
153
star
46

tiny-artblocks

Toolkit for small ArtBlocks projects
JavaScript
152
star
47

adaptive-bezier-curve

adaptive and scalable 2D bezier curves
JavaScript
138
star
48

atcq

An implementation of Ant-Tree Color Quantization
JavaScript
136
star
49

workshop-data-artwork

material & notes for a workshop on data artwork & creative coding
JavaScript
125
star
50

kami-demos

🚧 Some demos for the Kami WebGL renderer
JavaScript
122
star
51

rust

experiments
JavaScript
122
star
52

kami

🚧 Rendering ecosystem using Node style packaging
JavaScript
120
star
53

looom-tools

Svelte
115
star
54

esmify

parse and handle import/export for browserify
JavaScript
112
star
55

polyline-normals

gets miter normals for a 2D polyline
JavaScript
112
star
56

three-vignette-background

a simple ThreeJS vignette background
JavaScript
111
star
57

simple-input-events

Unified mouse & touch events for desktop and mobile
JavaScript
105
star
58

tweenr

minimal tweening engine
JavaScript
105
star
59

text-modules

✏️ a list of text/font modules
104
star
60

spectrum

a small tool to visualize the frequencies of an audio file
JavaScript
104
star
61

three-shader-fxaa

optimized FXAA shader for ThreeJS
JavaScript
102
star
62

lerp

bare-bones linear interpolation function
JavaScript
101
star
63

canvas-sketch-cli

A CLI used alongside canvas-sketch
JavaScript
92
star
64

svg-path-contours

gets a discrete list of points from svg
JavaScript
90
star
65

pen-plotter-blog-post

JavaScript
90
star
66

simplify-path

simplify 2D polyline of arrays
JavaScript
83
star
67

garnish

🍸 prettifies ndjson from wzrd and similar tools
JavaScript
81
star
68

get-rgba-palette

gets a palette of prominent colors from an array of pixels
JavaScript
81
star
69

keytime

[EXPERIMENT] keyframe animation tools
JavaScript
79
star
70

three-glslify-example

a simple example of ThreeJS with glslify
GLSL
77
star
71

canvas-text

[experiment] better Canvas2D text rendering
JavaScript
77
star
72

raylight

Experimental WebGL Music Visualizer
JavaScript
76
star
73

verlet-system

2D and 3D verlet integration
JavaScript
75
star
74

word-wrapper

wraps words based on arbitrary 2D glyphs
JavaScript
71
star
75

mp4-wasm-encoder

JavaScript
70
star
76

gl-sprite-text

bitmap font rendering for stackgl
JavaScript
69
star
77

tendril-webtoy-blog-post

A blog post for an interactive Tendril web toy
68
star
78

paper-colors

A small set of pastel and off-white paper colors
JavaScript
68
star
79

threejs-tree-shake

Tree-shakes and optimizes ThreeJS apps
JavaScript
66
star
80

gh-readme-scrape

a CLI to bulk download URLs (images/pdfs/etc) from GitHub readmes
JavaScript
65
star
81

fika

A figma plugin generator
JavaScript
60
star
82

shadertoy-export

render ShaderToy demos to PNG
JavaScript
59
star
83

glsl-random

pseudo-random 2D noise for glslify
C
59
star
84

electron-canvas-to-buffer

in Electron, turns a Canvas into a Buffer
JavaScript
55
star
85

gl-vignette-background

a soft gradient background in WebGL
JavaScript
55
star
86

webpack-three-hmr-test

test of ThreeJS + Webpack + HMR
JavaScript
53
star
87

workshop-generative-color

a workshop on color science for generative art and creative coding
JavaScript
52
star
88

filmic-gl

filmic GLSL shaders in ThreeJS
JavaScript
51
star
89

riso-colors

A list of Risograph printer colors
51
star
90

gsx-pdf-optimize

Optimize PDFs with Ghostscript command
JavaScript
50
star
91

raf-loop

a minimal requestAnimationFrame render loop
JavaScript
49
star
92

gdx-swiper

An example of a "Fruit Ninja" style swipe in LibGDX
Java
47
star
93

gsap-promise

promise wrapper for gsap (TweenLite)
JavaScript
47
star
94

browserify-example

a bare-bones, no-bullshit example of using browserify to dev + build a static demo
JavaScript
45
star
95

extract-svg-path

extracts a string of subpaths from an svg file
JavaScript
45
star
96

figma-plugin-palette

"Image Palette" Plugin in Figma
JavaScript
42
star
97

adaptive-quadratic-curve

adaptive and scalable 2D quadratic curves
JavaScript
42
star
98

three-geometry-data

Get vertex and face data from THREE.Geometry
JavaScript
40
star
99

budo-chrome

an extension of budo dev server that supports live script injection
JavaScript
39
star
100

three-tube-wireframe

Builds a tube-based wireframe geometry in ThreeJS
JavaScript
39
star