Browser-sync: How do you add a route?

[silvenon]

Excuse my connect newbieshness, but how do you add a route to the BrowserSync server, like you would in connect?

var connect = require('connect'),
    app = connect()
      .use('/bower_components', connect.static('bower_components'));

[shakyShane]

Currently, you cannot!

This is because I was unaware that you can add routes even after a server has started listening.

I need to put a patch out, that will allow you to do

browserSync(options, function (err, bs) {
    bs.app.use("/bower_components", connect.static("bower_components"));
});

or

var bs = browserSync(options);
bs.app.use("/bower_components", connect.static("bower_components"));

[shakyShane]

probably later this evening...

[silvenon]

The second syntax looks sexier.

[shakyShane]

yeah, I'm also thinking it would be better to expose the connect module too, so that users don't have to 'require' that separately

var bs = browserSync(options);
bs.app.use("/bower_components", bs.connect.static("bower_components"));

[shakyShane]

    server: {
        baseDir: "./",
        routes: {
            "/bower_components": "/app/bower_components"
        }
    },

[silvenon]

Great. Will it be limiting for people who want e.g. bs.connect.directory()?

[shakyShane]

I'll still expose the connect module and the app for doing that.

[shakyShane]

But I think routes is a popular enough requirement to have it as an option.

[silvenon]

Oh, awesome then :)

[shakyShane]

Can you do npm install [email protected]

You should now be able to specify routes as seen here https://github.com/shakyShane/browser-sync/blob/master/test/specs/e2e/e2e.server.routes.js#L15-L22

[silvenon]

My initial idea was to connect Mincer with BrowserSync in a Jekyll site, but because Mincer was too complicated for me I went with jekyll-assets, so I don't have that setup anymore. I will comment here the next time I try it, if that's ok :smiley:

Thanks so much for the feature.

[awendland]

I am still having difficulty getting routes to work.

browserSync.init(files, {
    startPath: '/index.html',
    server: {
      baseDir: baseDir,
      routes: {
        "/app": "/"
      }
    },
    browser: browser
  });

This should redirect all requests to files within /app to /, right? In my setup /app is one of the baseDir paths as well. I need to reroute /app to / to handle certain relative urls.

[shakyShane]

The routes functionality will not re-write requests if the file exist in a baseDir location....

[MillerRen]

@shakyShane Thanks so much for the feature.

[drKnoxy]

This took me a little while to figure out, so if anyone else is googling around for where to add the "extensions" parameter like you would for express' static-serve module, which sets the default extensions to try.

ie. You are trying to have your urls written like site.com/features and the server will try files site.com/features.html

server: {
    baseDir: './dist',
    serveStaticOptions: {
        extensions: ['html']
    },
},