diff --git a/scripts/start.js b/scripts/start.js index e5768fbbd12..fb53543aa5d 100644 --- a/scripts/start.js +++ b/scripts/start.js @@ -55,22 +55,35 @@ const HOST = process.env.HOST || '0.0.0.0'; function run(port) { const protocol = process.env.HTTPS === 'true' ? 'https' : 'http'; - const formatUrl = hostname => - url.format({ protocol, hostname, port, pathname: '/' }); + const formatUrl = hostname => url.format({ + protocol, + hostname, + port, + pathname: '/', + }); + const prettyPrintUrl = hostname => url.format({ + protocol, + hostname, + port: chalk.bold(port), + pathname: '/', + }); const isUnspecifiedAddress = HOST === '0.0.0.0' || HOST === '::'; - let prettyHost, lanAddress; + let prettyHost, lanAddress, prettyLanUrl; if (isUnspecifiedAddress) { prettyHost = 'localhost'; try { lanAddress = address.ip(); + if (lanAddress) { + prettyLanUrl = prettyPrintUrl(lanAddress); + } } catch (_e) { // ignored } } else { prettyHost = HOST; } - const prettyUrl = formatUrl(prettyHost); + const prettyLocalUrl = prettyPrintUrl(prettyHost); // Create a webpack compiler that is configured with custom messages. const compiler = createWebpackCompiler( @@ -85,15 +98,11 @@ function run(port) { ); console.log(); - if (isUnspecifiedAddress && lanAddress) { - console.log( - ` ${chalk.bold('Local:')} ${chalk.cyan(prettyUrl)}` - ); - console.log( - ` ${chalk.bold('On Your Network:')} ${chalk.cyan(formatUrl(lanAddress))}` - ); + if (prettyLanUrl) { + console.log(` ${chalk.bold('Local:')} ${prettyLocalUrl}`); + console.log(` ${chalk.bold('On Your Network:')} ${prettyLanUrl}`); } else { - console.log(` ${chalk.cyan(prettyUrl)}`); + console.log(` ${prettyLocalUrl}`); } console.log(); diff --git a/scripts/utils/createWebpackCompiler.js b/scripts/utils/createWebpackCompiler.js index 008ee303a92..a3adeee618c 100644 --- a/scripts/utils/createWebpackCompiler.js +++ b/scripts/utils/createWebpackCompiler.js @@ -104,13 +104,13 @@ module.exports = function createWebpackCompiler(config, onReadyCallback) { // Teach some ESLint tricks. console.log( 'Search for the ' + - chalk.underline('rule keywords') + + chalk.underline(chalk.yellow('rule keywords')) + ' to learn more about each warning.' ); console.log( 'To ignore, add ' + - chalk.yellow('// eslint-disable-next-line') + - ' to the previous line.' + chalk.cyan('// eslint-disable-next-line') + + ' to the line before.' ); console.log(); }