title: Node.js - Auto Refresh In Dev
body: <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>