Using browser-sync with node.js app

Question

I have an existing node app. My Node directory structure is setup like this:

./
  node_modules/
  src/
    views/
      index.html
      ...
    server.js
  test/
  gulpfile.js
  package.json

I can successfully start my app my running node ./src/server.js from the root shown above. Once started, I can visit "http://localhost:3000" in the browser and see the contents of index.html like I am expecting.

I want to speed up my development and I recently learned about browsersync. In an attempt to include it in my gulp process, I have the following:

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

browserSync.init({
  server: {
    baseDir: './src/',
    server: './src/server.js'
  }
});

When I run gulp, I see the following in the command-line:

BS] Access URLs:

 --------------------------------------
       Local: http://localhost:3000
    External: http://[ip address]:3000
 --------------------------------------
          UI: http://localhost:3001
 UI External: http://[ip address]:3001
 --------------------------------------

My browser is then opened and it attempts to load http://localhost:3000. At this point, I see the following error in the browser window:

Cannot GET /

What am I doing wrong? I can successfully visit http://localhost:3000 if I start my app using node ./src/server.js, however, its like its not running with BrowserSync. What am I doing wrong?

Answer 1

You already have a node server so i think what you need is Proxy. And i would also suggest you to use nodemon for going one step ahead in your speed up development thing. It will automatically restart your node development server in case of any changes. So a sample gulpfile in your case(with nodemon) might look like

var gulp = require('gulp');
var browserSync = require('browser-sync');
var reload = browserSync.reload;
var nodemon = require('gulp-nodemon');


gulp.task('browser-sync', ['nodemon'], function() {
    browserSync.init(null, {
        proxy: "http://localhost:3700", // port of node server
    });
});

gulp.task('default', ['browser-sync'], function () {
    gulp.watch(["./src/views/*.html"], reload);
});

gulp.task('nodemon', function (cb) {
    var callbackCalled = false;
    return nodemon({script: './src/server.js'}).on('start', function () {
        if (!callbackCalled) {
            callbackCalled = true;
            cb();
        }
    });
});

~