Closes #569 Add port process conflict resolution and Chalk (#579)

* add some chalk to gatsby

* #569 add port process conflict resolution

* fix lint for chalk

* use a dependency that includes getProcessForPort

* remove other react-dev-utils

* bring getProcessForPort into source, fix formatting

Author: vinnymac

lib/utils/develop.js

@@ -15,6 +15,8 @@ import opn from 'opn'
 import fs from 'fs'
 import glob from 'glob'
 import rl from 'readline'
+import chalk from 'chalk'
+import getProcessForPort from './getProcessForPort'
 
 const rlInterface = rl.createInterface({
   input: process.stdin,
@@ -181,17 +183,21 @@ function startServer (program) {
           if (e) {
             if (e.code === 'EADDRINUSE') {
               // eslint-disable-next-line max-len
-              console.log(`Unable to start Gatsby on port ${program.port} as there's already a process listing on that port.`)
+              console.log(chalk.red(`Unable to start Gatsby on port ${program.port} as there's already a process listing on that port.`))
             } else {
-              console.log(e)
+              console.log(chalk.red(e))
             }
 
             process.exit()
           } else {
             if (program.open) {
               opn(server.info.uri)
             }
-            console.log('Listening at:', server.info.uri)
+            console.log(chalk.green('Server started successfully!'))
+            console.log()
+            console.log('Listening at:')
+            console.log()
+            console.log('  ', chalk.cyan(server.info.uri))
           }
         })
       })
@@ -204,6 +210,8 @@ module.exports = (program) => {
     ? parseInt(program.port, 10)
     : program.port
 
+  const existingProcess = getProcessForPort(port)
+
   detect(port, (err, _port) => {
     if (err) {
       console.error(err)
@@ -212,7 +220,7 @@ module.exports = (program) => {
 
     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 question = chalk.yellow(`Something is already running on port ${port}.\n${(existingProcess) ? ` Probably:\n  ${existingProcess}\n` : ''}\nWould you like to run the app at another port instead? [Y/n]`)
 
       return rlInterface.question(question, (answer) => {
         if (answer.length === 0 || answer.match(/^yes|y$/i)) {

lib/utils/getProcessForPort.js

@@ -0,0 +1,58 @@
+import chalk from 'chalk'
+import { execSync } from 'child_process'
+import path from 'path'
+
+const execOptions = {
+  encoding: 'utf8',
+  stdio: [
+    'pipe', // stdin (default)
+    'pipe', // stdout (default)
+    'ignore', // stderr
+  ],
+}
+
+function isProcessAReactApp (processCommand) {
+  return /^node .*react-scripts\/scripts\/start\.js\s?$/.test(processCommand)
+}
+
+function getProcessIdOnPort (port) {
+  return execSync(`lsof -i:${port} -P -t -sTCP:LISTEN`, execOptions).trim()
+}
+
+function getPackageNameInDirectory (directory) {
+  const packagePath = path.join(directory.trim(), 'package.json')
+
+  try {
+    return require(packagePath).name
+  } catch (e) {
+    return null
+  }
+}
+
+function getProcessCommand (processId, processDirectory) {
+  const command = execSync(`ps -o command -p ${processId} | sed -n 2p`, execOptions)
+
+  if (isProcessAReactApp(command)) {
+    const packageName = getPackageNameInDirectory(processDirectory)
+    return (packageName) ? '${packageName}\n' : command
+  } else {
+    return command
+  }
+}
+
+function getDirectoryOfProcessById (processId) {
+  return execSync(`lsof -p ${processId} | grep cwd | awk \'{print $9}\'`, execOptions).trim()
+}
+
+function getProcessForPort (port) {
+  try {
+    const processId = getProcessIdOnPort(port)
+    const directory = getDirectoryOfProcessById(processId)
+    const command = getProcessCommand(processId, directory)
+    return chalk.cyan(command) + chalk.blue('  in ') + chalk.cyan(directory)
+  } catch (e) {
+    return null
+  }
+}
+
+module.exports = getProcessForPort

lib/utils/serve-build.js

@@ -3,6 +3,8 @@ import detect from 'detect-port'
 import Hapi from 'hapi'
 import opn from 'opn'
 import rl from 'readline'
+import chalk from 'chalk'
+import getProcessForPort from './getProcessForPort'
 
 const rlInterface = rl.createInterface({
   input: process.stdin,
@@ -40,22 +42,28 @@ function startServer (program, launchPort) {
     if (e) {
       if (e.code === 'EADDRINUSE') {
         // eslint-disable-next-line max-len
-        console.log(`Unable to start Gatsby on port ${serverPort} as there's already a process listing on that port.`)
+        console.log(chalk.red(`Unable to start Gatsby on port ${serverPort} as there's already a process listing on that port.`))
       } else {
-        console.log(e)
+        console.log(chalk.red(e))
       }
 
       process.exit()
     } else {
       if (program.open) {
         opn(server.info.uri)
       }
-      console.log('Listening at:', server.info.uri)
+      console.log(chalk.green('Server started successfully!'))
+      console.log()
+      console.log('Listening at:')
+      console.log()
+      console.log('  ', chalk.cyan(server.info.uri))
     }
   })
 }
 
 module.exports = (program) => {
+  const existingProcess = getProcessForPort(program.port)
+
   detect(program.port, (err, _port) => {
     if (err) {
       console.error(err)
@@ -64,7 +72,7 @@ module.exports = (program) => {
 
     if (program.port !== _port) {
       // eslint-disable-next-line max-len
-      const question = `Something is already running at port ${program.port} \nWould you like to run the app at another port instead? [Y/n] `
+      const question = chalk.yellow(`Something is already running on port ${program.port}.\n${(existingProcess) ? ` Probably:\n  ${existingProcess}\n` : ''}\nWould you like to run the app at another port instead? [Y/n]`)
 
       return rlInterface.question(question, (answer) => {
         let launchPort = program.port

package.json

@@ -96,6 +96,7 @@
     "babel-plugin-transform-flow-strip-types": "^6.8.0",
     "babel-register": "^6.11.6",
     "bluebird": "^3.4.1",
+    "chalk": "^1.1.3",
     "cheerio": "^0.20.0",
     "eslint": "^2.11.1",
     "eslint-config-airbnb": "^9.0.1",