mattdesl / budo

:clapper: a dev server for rapid prototyping
MIT License
2.17k stars 106 forks source link

Use browsersync instead of livereload and pass through options #140

Closed cheapsteak closed 8 years ago

cheapsteak commented 8 years ago

related to issue: https://github.com/Jam3/generator-jam3/issues/180

Sometimes you have to do some crazy stuff like specify routes for a folder that actually points to your main directory, so /middleschool/ is actually the root of your app, not /

It's easy to do with browser sync, but I'm not sure how to do this with budo:

browsersyncSettings = {
    open: false,
    port: 9001,
    notify: false,
    ghostMode: false,
    server: {
      baseDir: paths.destination,
      routes: {
        '/middleschool': "build" // <-- route all `/middleschool/` requests to the `build` directory
      },
      middleware: [
        modRewrite([
          '^[^\\.]*$ /index.html [L]' // <-- rewrite 404s to be handled by index.html (so if you're using pushstate, refreshing doesn't give you a page  not found error
        ])
      ]
    }
  };

Browser sync also has a much higher adoption rate than livereload

http://npmcharts.com/compare/livereload,browser-sync

mattdesl commented 8 years ago

BrowserSync is great, but it's a really monolithic tool that brings in a boatload of opinions – it would replace budo's server, middleware layer, file watching, live reload and logger. After the rewrite you'd end up with different tool and a different set of features.

The --pushstate option should already work in budo, so no need for modRewrite.

You can also set your own middlewares to achieve something like the BrowserSync routes feature. We can provide a module for mounting a path to make this easy without adding more complexity to budo. Alternatively, we could explore a way to add it to budo that works in both CLI and API.

See #11 for some more discussion on browser sync.

cheapsteak commented 8 years ago

:+1:

mattdesl commented 8 years ago

Ok, you can basically replicate the BrowserSync feature now with a couple of modules:

var serveStatic = require('serve-static');
var mount = require('connect-mount');

require('budo')('index.js:bundle.js', {
  dir: 'public/',
  middleware: mount('/bower_components', serveStatic('bower_components')),
  stream: process.stdout
});

This is pretty useful actually when you have a setup like this:

my-project/
  public/
  bower_components/

And you want to include something from bower_components in a script tag or something.

cheapsteak commented 8 years ago

Thanks :)