Add dynamic port allocation (#913)

* Add dynamic port allocation

* Add error handling to port allocation

* Remove forgotten listen statement from dev-server.js

* Set dynamically allocated port to environment variable `PORT`

Author: adi518

template/build/dev-server.js

@@ -70,23 +70,35 @@ app.use(staticPath, express.static('./static'))
 
 const uri = 'http://localhost:' + port
 
-let _resolve
-const readyPromise = new Promise(resolve => {
+var _resolve
+var _reject
+var readyPromise = new Promise((resolve, reject) => {
   _resolve = resolve
+  _reject = reject
 })
 
+var server
+var portfinder = require('portfinder')
+portfinder.basePort = port
+
 console.log('> Starting dev server...')
 devMiddleware.waitUntilValid(() => {
-  console.log('> Listening at ' + uri + '\n')
-  // when env is testing, don't need open it
-  if (autoOpenBrowser && process.env.NODE_ENV !== 'testing') {
-    opn(uri)
-  }
-  _resolve()
+  portfinder.getPort((err, port) => {
+    if (err) {
+      _reject(err)
+    }
+    process.env.PORT = port
+    var uri = 'http://localhost:' + port
+    console.log('> Listening at ' + uri + '\n')
+    // when env is testing, don't need open it
+    if (autoOpenBrowser && process.env.NODE_ENV !== 'testing') {
+      opn(uri)
+    }
+    server = app.listen(port)
+    _resolve()
+  })
 })
 
-const server = app.listen(port)
-
 module.exports = {
   ready: readyPromise,
   close: () => {

template/package.json

@@ -92,6 +92,7 @@
     "vue-loader": "^13.0.4",
     "vue-style-loader": "^3.0.1",
     "vue-template-compiler": "^2.4.2",
+    "portfinder": "^1.0.13"
     "webpack": "^3.5.5",
     "webpack-dev-middleware": "^1.12.0",
     "webpack-hot-middleware": "^2.18.2",