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
           


        

Answer 1

Why do you want to use the built-in server if you have your own in ./src/server.js ?

Check this, What server in browsersync does is create a static server for basic HTML/JS/CSS websites, so you might need to use the proxy feature as shown here. This means that you need to run your server as normally and wrap it up in the proxy.

Answer 2

Using the express generator default folder structure with the start script in bin\www, and using the ejs template, this is how i modified my gulpfile.js :

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:8000", // port of node server
    });
});

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

gulp.task('nodemon', function (cb) {
    var callbackCalled = false;
    return nodemon({
        script: './bin/www', 
        env: {
        PORT: 8000
    }}).on('start', function () {
        if (!callbackCalled) {
            callbackCalled = true;
            cb();
        }
    });
});

Notice that am watching for any files that end in .ejs. I also got a problem when using nodemon with the port in use, so i added an env to pass the port as 8000, env: { PORT: 8000 }

Answer 3

Since the tag grunt is missing from the question, here's a solution that works using only NPM (package.json):

"scripts": {
    "start": "browser-sync start --serveStatic 'src' --serveStatic 'node_modules' --files 'src'"
 }

Now all the <script> src attributes can be relative:

<script src="/stats-js/build/stats.min.js"></script>

Answer 4

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();
        }
    });
});

~