Serve build when deving

README.md

@@ -54,7 +54,18 @@ To start the local development server:
 
     npm start
 
-And fire up __[http://localhost:9000](http://localhost:9000)__!
+And fire up __[http://localhost:9000](http://localhost:9000)__! Saving local JS and HTML files in `examples/`, `elements/` and so forth will rebuild the bundle and reload the page.
+
+## Browser console logging
+
+If you'd like to see helpful logs, warnings, and errors, you can enable logging from the console of your favourite developer tools:
+
+    localStorage.logs = 1
+
+And to disable:
+
+    localStorage.logs = 0
+
 
 ## Maintainers
 

package.json

@@ -2,11 +2,11 @@
   "name": "aframe",
   "version": "0.1.1",
   "description": "Building blocks for the VR Web",
-  "main": "index.js",
+  "main": "src/index.js",
   "scripts": {
     "start": "npm run dev",
-    "dev": "npm run build && node ./scripts/budo",
-    "browserify": "browserify ./index.js -s 'AFRAME'",
+    "dev": "node ./scripts/budo",
+    "browserify": "browserify ./src/index.js -s 'AFRAME'",
     "build": "mkdir -p build/ && npm run browserify -- --debug -o build/aframe.js",
     "dist": "mkdir -p dist/ && npm run browserify -s -- --debug | exorcist dist/aframe.js.map > dist/aframe.js && uglifyjs dist/aframe.js -c warnings=false -m -o dist/aframe.min.js",
     "preghpages": "npm run dist && rm -rf gh-pages && mkdir -p gh-pages && cp -r {.nojekyll,dist,lib,examples,index.html,style} gh-pages/. 2>/dev/null || : && git checkout dist/ && replace 'build/aframe.js' 'dist/aframe.min.js' gh-pages/ -r --silent",
@@ -23,7 +23,7 @@
   "devDependencies": {
     "browserify": "^11.0.1",
     "browserify-css": "^0.8.2",
-    "budo": "^7.0.2",
+    "budo": "^7.1.0",
     "exorcist": "^0.4.0",
     "gh-pages": "^0.4.0",
     "html-minifier": "^0.8.0",

scripts/budo.js

@@ -1,7 +1,7 @@
 #!/usr/bin/env node
 
 var exec = require('child_process').exec;
-var path = require('path');
+var urlParse = require('url').parse;
 
 var budo = require('budo');
 
@@ -12,29 +12,38 @@ function execCmd (cmd) {
   return p;
 }
 
-var app = budo('./index.js:build/aframe.js', {
+var consts = {
+  NAME: 'AFRAME',
+  ENTRY: './src/index.js',
+  DIST: 'dist/aframe.js',
+  BUILD: 'build/aframe.js',
+  WATCH: 'examples/**/*',  // Additional files to watch for LiveReload
+  PORT: 9000
+};
+
+var opts = {
   debug: process.env.NODE_ENVIRONMENT !== 'production',
   verbose: true,
-  stream: process.stdout,  // log to stdout
-  port: 9000,
-  browserifyArgs: '-s AFRAME'.split(' ')
-});
-
-app
-.watch('**/*.{css,js,html}')
-.live()
-.on('watch', function (eventType, fn) {
-  if (eventType !== 'change' && eventType !== 'add') { return; }
-
-  if (path.extname(fn) === '.css') {
-    // We want to trigger a reload of the entire document, since
-    // browserify-css injects CSS into the page.
-    app.reload();
-  } else if (path.extname(fn) === '.js') {
-    app.reload(fn);
-  } else if (fn.indexOf('elements/templates') === 0) {
-    app.reload();
+  live: true,
+  stream: process.stdout,
+  host: process.env.HOST,
+  port: process.env.PORT || consts.PORT,
+  watchGlob: consts.WATCH,
+  browserifyArgs: ['-s', consts.NAME],
+  middleware: function (req, res, next) {
+    // Route `dist/aframe.js` to `build/aframe.js` so we can
+    // dev against the examples :)
+    var path = urlParse(req.url).pathname;
+    if (path.indexOf('/' + consts.DIST) !== -1) {
+      req.url = req.url.replace('/dist/', '/build/');
+    }
+    // TODO: Consider adding middleware that targets specific directories
+    // (such that editing `examples/a.html` doesn't reload `examples/b.html`).
+    next();
   }
-}).on('update', function (ev) {
+};
+
+var app = budo(consts.ENTRY + ':' + consts.BUILD, opts);
+app.on('update', function () {
   execCmd('semistandard -v $(git ls-files "*.js") | snazzy');
 });

index.js → src/index.js

@@ -1,7 +1,8 @@
 var aframeCore = require('aframe-core');
-var coreElements = require('./elements/');
-var pkg = require('./package');
-var registerTemplate = require('./elements/lib/register-template');
+
+var coreElements = require('../elements/');
+var pkg = require('../package');
+var registerTemplate = require('../elements/lib/register-template');
 
 module.exports = {
   // Main library.