refactor(gatsby): gatsby develop: cleanup port detection (#13006)

Author: Moocar

packages/gatsby/src/commands/develop.js

@@ -288,16 +288,9 @@ module.exports = async (program: any) => {
     })
   }
 
-  let compiler
-  await new Promise(resolve => {
-    detectPortInUseAndPrompt(port, rlInterface, newPort => {
-      program.port = newPort
-      startServer(program).then(([c, l]) => {
-        compiler = c
-        resolve()
-      })
-    })
-  })
+  program.port = await detectPortInUseAndPrompt(port, rlInterface)
+
+  const [compiler] = await startServer(program)
 
   function prepareUrls(protocol, host, port) {
     const formatUrl = hostname =>

packages/gatsby/src/commands/serve.js

@@ -111,8 +111,6 @@ module.exports = async program => {
     })
   }
 
-  detectPortInUseAndPrompt(port, rlInterface, newPort => {
-    port = newPort
-    startListening()
-  })
+  port = await detectPortInUseAndPrompt(port, rlInterface)
+  startListening()
 }

packages/gatsby/src/utils/detect-port-in-use-and-prompt.js

@@ -1,30 +1,25 @@
-const detect = require(`detect-port`)
+const { promisify } = require(`util`)
+const detectPort = promisify(require(`detect-port`))
 const report = require(`gatsby-cli/lib/reporter`)
 
-// Checks if a port is in use and prompts the user to enter another one
-// Then calls callback with new port
-const detectPortInUseAndPrompt = (port, rlInterface, callback) => {
-  let newPort = port
-
-  detect(port, (err, _port) => {
-    if (err) {
-      report.panic(err)
-    }
-
-    if (port !== _port) {
-      // eslint-disable-next-line max-len
-      const question = `Something is already running at port ${port} \nWould you like to run the app at another port instead? [Y/n] `
+const readlinePort = (port, rlInterface) => {
+  const question = `Something is already running at port ${port} \nWould you like to run the app at another port instead? [Y/n] `
+  return new Promise(resolve => {
+    rlInterface.question(question, answer => {
+      resolve(answer.length === 0 || answer.match(/^yes|y$/i))
+    })
+  })
+}
 
-      rlInterface.question(question, answer => {
-        if (answer.length === 0 || answer.match(/^yes|y$/i)) {
-          newPort = _port
-        }
-        callback(newPort)
-      })
-    } else {
-      callback(newPort)
+const detectPortInUseAndPrompt = async (port, rlInterface) => {
+  let foundPort = port
+  const detectedPort = await detectPort(port).catch(err => report.panic(err))
+  if (port !== detectedPort) {
+    if (await readlinePort(port, rlInterface)) {
+      foundPort = detectedPort
     }
-  })
+  }
+  return foundPort
 }
 
 module.exports = detectPortInUseAndPrompt