browser-sync : scripts won't load from parent dir

Question

I'm trying to get browser-sync to work in my project instead of using live-server

The app structure looks like this:

personal-app
├── node_modules
└── src
    ├── app
    │   └── app.ts
    └── index.html  

in index.html the scripts are loaded from node_modules dir

<script src="../node_modules/systemjs/dist/system.src.js"></script>
<script src="../node_modules/angular2/bundles/angular2.dev.js"></script>

when I use live-server, it loads the scripts and works fine, but since I moved to browser-sync, the scripts don't load. here is the code in gulpfile.js:

gulp.task('serve', function() {
    browserSync.init({
        server: {
            baseDir: "./src"
        }
    });
    gulp.watch(sassfiles, ['sass']);
    gulp.watch(htmlfiles).on('change', browserSync.reload);
});

when I give the src path as base dir baseDir: "./src" the site works but the scripts don't load

but when I change it to baseDir: "./"

The site gives me Cannot GET /, however when I add "/src" to the url in chrome like so "http://localhost:3000/src", it works.

so the problem here is that browser-sync won't load the scripts from the parent folder of its baseDir.

I need a way to configure browser-sync to launch from its baseDir : "./" but load the main page index.html from sub folder.

is this possible with browser-sync?

Answer 1

From browser-sync documentation

baseDir can take multiple paths. I added the src folder where index.html exists.

gulp.task('serve', function() {
    browserSync.init({
        server: {
            baseDir: ["./", "./src"]   //added multiple directories 
        }
    });
    gulp.watch(sassfiles, ['sass']);
    gulp.watch(htmlfiles).on('change', browserSync.reload);
});