Gulp + BrowserSync, serve at path

Question

I'm using Gulp and BrowserSync to serve my webapp at localhost:9000.
How can I serve the webapp at localhost:9000/some/multi/level/path instead?

Answer 1

Browsersync's static server can be configured to serve pages from any arbitrary subpath. When initializing Browsersync's static server, add a route definition where the key is the url fragment to match and the value is the directory to be served (path should be relative to the current working directory).

Try something like this:

var gulp = require('gulp');
var browsersync = require('browser-sync').create();

gulp.task('watch', function() {
  browsersync.init({
    files: './*.html',
    startPath: '/some/multi/level/path',
    server: {
      baseDir: '-',
      routes: {
        '/some/multi/level/path': '.'
      }
    }
  });
});

Running gulp watch will start Browsersync and open a page with the contents of ./ displayed at the url http://localhost:3000/some/multi/level/path.

baseDir must be set to a non-empty string and doesn't need to be a valid path. Falsey values (null, false and empty strings) won't work.

The snippet above is a working gulpfile and was tested against Browsersync v2.18.5 and gulp v3.9.1. Here's the complete gist.

Answer 2

In your browsersync options pass in startPath to have it start on a different URL that '/'.

This doesn't change what your server is serving only the path BrowserSync will start with.

http://www.browsersync.io/docs/options/#option-startPath

Answer 3

Seems the option isn't available. startPath will only change which URL is opened by browsersync.

I finally came up with a simple solution :

Just create a symbolic link from some/multi/level/path directory to your app files. Then going to localhost:9000/some/multi/level/path will provide the same files as going to localhost:9000