diff --git a/package.json b/package.json index 5359fd609..bbc6e15d5 100644 --- a/package.json +++ b/package.json @@ -106,7 +106,6 @@ "@webpack-blocks/webpack2": "^0.4.0", "autoprefixer": "^7.1.0", "babel-loader": "^7.0.0", - "babel-preset-stage-1": "^6.24.1", "babel-plugin-jsx-pragmatic": "^1.0.2", "babel-plugin-transform-decorators-legacy": "^1.3.4", "babel-plugin-transform-object-assign": "^6.22.0", @@ -114,6 +113,7 @@ "babel-plugin-transform-react-jsx": "^6.24.1", "babel-plugin-transform-react-remove-prop-types": "^0.4.5", "babel-preset-env": "^1.3.3", + "babel-preset-stage-1": "^6.24.1", "babel-register": "^6.24.1", "copy-webpack-plugin": "^4.0.1", "cross-spawn-promise": "^0.10.1", @@ -123,6 +123,7 @@ "es6-promisify": "^5.0.0", "file-loader": "^0.11.1", "fs.promised": "^3.0.0", + "get-port": "^3.1.0", "html-webpack-exclude-assets-plugin": "0.0.5", "html-webpack-plugin": "^2.28.0", "ip": "^1.1.5", diff --git a/src/lib/webpack/run-webpack.js b/src/lib/webpack/run-webpack.js index d6894b7d3..15e8576a4 100644 --- a/src/lib/webpack/run-webpack.js +++ b/src/lib/webpack/run-webpack.js @@ -4,6 +4,7 @@ import ip from 'ip'; import webpack from 'webpack'; import WebpackDevServer from 'webpack-dev-server'; import chalk from 'chalk'; +import getPort from 'get-port'; import clientConfig from './webpack-client-config'; import serverConfig from './webpack-server-config'; import transformConfig from './transform-config'; @@ -20,6 +21,9 @@ const devBuild = async (env, onprogress) => { let config = clientConfig(env); await transformConfig(env, config); + let userPort = parseInt(process.env.PORT || config.devServer.port, 10) || 8080; + let port = await getPort(userPort); + let compiler = webpack(config); return await new Promise((resolve, reject) => { let first = true; @@ -30,13 +34,15 @@ const devBuild = async (env, onprogress) => { let protocol = devServer.https ? 'https' : 'http'; let host = process.env.HOST || devServer.host || 'localhost'; - let port = process.env.PORT || devServer.port || 8080; - let serverAddr = `${protocol}://${host}:${port}`; - let localIpAddr = `${protocol}://${ip.address()}:${port}`; + let serverAddr = `${protocol}://${host}:${chalk.bold(port)}`; + let localIpAddr = `${protocol}://${ip.address()}:${chalk.bold(port)}`; - process.stdout.write(chalk.green('Compiled successfully!!\n\n')); - process.stdout.write('You can view the application in the browser.\n\n'); + process.stdout.write(chalk.green('\nCompiled successfully!!\n\n')); + if (userPort !== port) { + process.stdout.write(`Port ${chalk.bold(userPort)} is in use, using ${chalk.bold(port)} instead\n\n`); + } + process.stdout.write('You can view the application in browser.\n\n'); process.stdout.write(`${chalk.bold('Local:')} ${serverAddr}\n`); process.stdout.write(`${chalk.bold('On Your Network:')} ${localIpAddr}\n`); } @@ -45,7 +51,7 @@ const devBuild = async (env, onprogress) => { compiler.plugin('failed', reject); let server = new WebpackDevServer(compiler, config.devServer); - server.listen(config.devServer.port); + server.listen(port); }); };