Node.js - Auto Refresh In Dev
<p>I am trying to improve the DEV experience in my Node. To do that, I want to: <br><br>
a) restart my server when server-side code is changed <br>
b) refresh the browser when client-side code is changes.<br><br> In an effort to accomplish this, I began integrating <a href="http://nodemon.io/">nodemon</a> and <a href="https://www.browsersync.io/">browserSync</a> into my gulp script.</p>

<p>In my gulp script, I have the following task:</p>

<pre><code>gulp.task('startDevEnv', function(done) {
    // Begin watching for server-side file changes
    nodemon(
        { script: input.server, ignore:[input.views] })
        .on('start', function () {
            browserSync.init({
                proxy: "http://localhost:3002"
            });
        })
    ;    

    // Begin watching client-side file changes
    gulp.watch([ input.css, input.js, input.html ], function() { browserSync.reload(); });
    done();
});
</code></pre>

<p>When the above task runs, my browser opens to <a href="http://localhost:3000/">http://localhost:3000/</a>. My app is visible as expected. However, in the console window, I notice:</p>

<pre><code>Error: listen EADDRINUSE :::3002
</code></pre>

<p>I understand to some extend. I have <code>app.set('port', process.env.PORT || 3002);</code> in my server.js file. Yet, I thought that was purpose of setting the proxy value. Still, whenever I make a code change, I see the following related error in my console window:</p>

<pre><code>[07:08:19] [nodemon] restarting due to changes...
[07:08:19] [nodemon] starting `node ./dist/server.js`
events.js:142
      throw er; // Unhandled 'error' event
      ^

TypeError: args.cb is not a function
    at Object.init (/Users/me/Website/Develop/node_modules/browser-sync/lib/public/init.js:25:25)
    at null.&lt;anonymous&gt; (/Users/me/Website/Develop/gulpfile.js:142:25)
    at emitNone (events.js:73:20)
    at emit (events.js:167:7)
    at Object.run (/Users/me/Website/Develop/node_modules/nodemon/lib/monitor/run.js:97:7)
    at Function.run.kill (/Users/me/Website/Develop/node_modules/nodemon/lib/monitor/run.js:221:7)
    at null.&lt;anonymous&gt; (/Users/me/Website/Develop/node_modules/nodemon/lib/monitor/run.js:333:7)
    at emitOne (events.js:83:20)
    at emit (events.js:170:7)
    at restartBus (/Users/me/Website/Develop/node_modules/nodemon/lib/monitor/watch.js:162:7)
Me-MBP:Develop me$ events.js:142
      throw er; // Unhandled 'error' event
      ^

Error: listen EADDRINUSE :::3002
    at Object.exports._errnoException (util.js:856:11)
    at exports._exceptionWithHostPort (util.js:879:20)
    at Server._listen2 (net.js:1238:14)
    at listen (net.js:1274:10)
    at Server.listen (net.js:1370:5)
    at Object.&lt;anonymous&gt; (/Users/me/Website/Develop/dist/server.js:70:8)
    at Module._compile (module.js:399:26)
    at Object.Module._extensions..js (module.js:406:10)
    at Module.load (module.js:345:32)
    at Function.Module._load (module.js:302:12)
</code></pre>

<p>At this point, my code changes do not appear in my browser. I do not understand what I'm doing wrong. I suspect I have my ports misconfigured. But, I'm not really sure how they should be setup.</p>

<p>By default BrowserSync uses port 3000. BrowserSync also uses port 3001 for the BrowserSync UI. For these two reasons, I thought I would set the port to 3002 in my server.js file and create the proxy shown above. What am I doing wrong?</p>