[added] a port number argument into the DevServer constructor

build/DevServer.js

@@ -44,6 +44,7 @@ var _path = require('path');
  * @param {string}  script  - a full system path to a JavaScript file
  * @param {string}  style   - a full system path to a SASS file
  * @param {string}  devDir  - a full system path to a directory in which to put any compiled development resources
+ * @param {number}  [port]  - a port at which to start the dev server, defaults to 3000
  * @param {boolean} [react] - false to disable the react hot loader plugin, defaults to true
  * @example
  * import {DevServer} from 'webcompiler';
@@ -61,7 +62,8 @@ var DevServer = (function () {
   function DevServer(script, style, devDir) {
     var _this = this;
 
-    var react = arguments.length <= 3 || arguments[3] === undefined ? true : arguments[3];
+    var port = arguments.length <= 3 || arguments[3] === undefined ? 3000 : arguments[3];
+    var react = arguments.length <= 4 || arguments[4] === undefined ? true : arguments[4];
 
     _classCallCheck(this, DevServer);
 
@@ -73,6 +75,16 @@ var DevServer = (function () {
     }
     loaders.push('babel');
 
+    /**
+     * a port at which to start the dev server
+     *
+     * @memberof DevServer
+     * @private
+     * @instance
+     * @type {number}
+     */
+    this.port = port;
+
     /**
      * a LiveReload server
      *
@@ -107,7 +119,7 @@ var DevServer = (function () {
       cache: {},
       debug: true,
       devtool: 'eval-source-map',
-      entry: ['webpack-dev-server/client?http://localhost:3000', 'webpack/hot/only-dev-server', script],
+      entry: ['webpack-dev-server/client?http://localhost:' + this.port, 'webpack/hot/only-dev-server', script],
       output: {
         path: devDir,
         filename: 'script.js',
@@ -170,11 +182,13 @@ var DevServer = (function () {
   }, {
     key: 'watchJS',
     value: function watchJS() {
-      this.server.listen(3000, '0.0.0.0', function (e) {
+      var port = this.port;
+
+      this.server.listen(port, '0.0.0.0', function (e) {
         if (e) {
           return console.error(e);
         }
-        console.log('Started the development server at localhost:3000');
+        console.log('Started the development server at localhost:' + port);
       });
     }
 

docs/DevServer.html

@@ -42,7 +42,7 @@ <h2>
 
 
 
-    <h4 class="name" id="DevServer"><span class="type-signature"></span>new DevServer<span class="signature">(script, style, devDir, react<span class="signature-attributes">opt</span>)</span><span class="type-signature"></span></h4>
+    <h4 class="name" id="DevServer"><span class="type-signature"></span>new DevServer<span class="signature">(script, style, devDir, port<span class="signature-attributes">opt</span>, react<span class="signature-attributes">opt</span>)</span><span class="type-signature"></span></h4>
 
 
 
@@ -182,6 +182,39 @@ <h5>Parameters:</h5>
 
 
 
+        <tr>
+
+                <td class="name"><code>port</code></td>
+
+
+            <td class="type">
+
+
+<span class="param-type">number</span>
+
+
+
+            </td>
+
+
+                <td class="attributes">
+
+                    &lt;optional><br>
+
+
+
+
+
+                </td>
+
+
+
+
+            <td class="description last">a port at which to start the dev server, defaults to 3000</td>
+        </tr>
+
+
+
         <tr>
 
                 <td class="name"><code>react</code></td>

lib/DevServer.js

@@ -19,6 +19,7 @@ import {join} from 'path';
  * @param {string}  script  - a full system path to a JavaScript file
  * @param {string}  style   - a full system path to a SASS file
  * @param {string}  devDir  - a full system path to a directory in which to put any compiled development resources
+ * @param {number}  [port]  - a port at which to start the dev server, defaults to 3000
  * @param {boolean} [react] - false to disable the react hot loader plugin, defaults to true
  * @example
  * import {DevServer} from 'webcompiler';
@@ -33,20 +34,32 @@ import {join} from 'path';
  */
 export default class DevServer {
 
+  port: number;
+
   lr: tinylr.Server;
 
   compileSASS: Function;
 
   server: WebpackDevServer;
 
-  constructor(script: string, style: string, devDir: string, react: boolean = true) {
+  constructor(script: string, style: string, devDir: string, port: number = 3000, react: boolean = true) {
     var sass = new SASS(), loaders = [];
 
     if (react) {
       loaders.push('react-hot');
     }
     loaders.push('babel');
 
+    /**
+     * a port at which to start the dev server
+     *
+     * @memberof DevServer
+     * @private
+     * @instance
+     * @type {number}
+     */
+    this.port = port;
+
     /**
      * a LiveReload server
      *
@@ -83,7 +96,7 @@ export default class DevServer {
       debug: true,
       devtool: 'eval-source-map',
       entry: [
-        'webpack-dev-server/client?http://localhost:3000',
+        `webpack-dev-server/client?http://localhost:${this.port}`,
         'webpack/hot/only-dev-server',
         script
       ],
@@ -155,11 +168,13 @@ export default class DevServer {
    * server.watchJS();
    */
   watchJS() {
-    this.server.listen(3000, '0.0.0.0', function (e) {
+    var port = this.port;
+
+    this.server.listen(port, '0.0.0.0', function (e) {
       if (e) {
         return console.error(e);
       }
-      console.log('Started the development server at localhost:3000');
+      console.log(`Started the development server at localhost:${port}`);
     });
   }
 

spec/DevServerSpec.js

@@ -75,7 +75,11 @@ describe('DevServer', function () {
 
     beforeEach(function () {
       cmp = new DevServer('/path/to/a/script/file.js', '/path/to/a/style/file.scss',
-                          '/path/to/the/development/directory', false);
+                          '/path/to/the/development/directory', 8000, false);
+    });
+
+    it('assigns a port number', function () {
+      expect(cmp.port).toBe(8000);
     });
 
     it('constructs a LiveReload server instance', function () {
@@ -101,7 +105,7 @@ describe('DevServer', function () {
         debug: true,
         devtool: 'eval-source-map',
         entry: [
-          'webpack-dev-server/client?http://localhost:3000',
+          'webpack-dev-server/client?http://localhost:8000',
           'webpack/hot/only-dev-server',
           '/path/to/a/script/file.js'
         ],