feat(start): Resolve next available port (#207)

lib/start.js

@@ -2,6 +2,7 @@ const webpack = require('webpack');
 const WebpackDevServer = require('webpack-dev-server');
 const open = require('open');
 const makeWebpackConfig = require('./makeWebpackConfig');
+const portfinder = require('portfinder');
 
 module.exports = async (config, callback) => {
   const webpackConfig = await makeWebpackConfig(
@@ -26,15 +27,21 @@ module.exports = async (config, callback) => {
   const devServer = new WebpackDevServer(compiler, webpackDevServerConfig);
   const { port, openBrowser } = config;
 
-  devServer.listen(port, '0.0.0.0', (...args) => {
-    const [err] = args;
-
-    if (!err && openBrowser) {
-      open(`http://localhost:${port}`);
+  portfinder.getPort({ port }, function (portErr, availablePort) {
+    if (portErr) {
+      console.error('portErr: ', portErr);
+      return;
     }
+    devServer.listen(availablePort, '0.0.0.0', (...args) => {
+      const [err] = args;
 
-    if (typeof callback === 'function') {
-      callback(...args);
-    }
+      if (!err && openBrowser) {
+        open(`http://localhost:${availablePort}`);
+      }
+
+      if (typeof callback === 'function') {
+        callback(...args);
+      }
+    });
   });
 };

package.json

@@ -108,6 +108,7 @@
     "mini-css-extract-plugin": "^0.9.0",
     "open": "^7.0.0",
     "parse-prop-types": "^0.3.0",
+    "portfinder": "^1.0.26",
     "postcss-loader": "^3.0.0",
     "prettier": "^2.0.5",
     "prop-types": "^15.7.2",