From 10dc2599e9d8f8fedba5156784e94add322536f7 Mon Sep 17 00:00:00 2001
From: Joe Haddad <timer150@gmail.com>
Date: Sun, 14 May 2017 23:09:32 -0400
Subject: [PATCH 1/2] Show network address on start
---
.../config/webpackDevServer.config.js | 3 +-
packages/react-scripts/package.json | 3 +-
packages/react-scripts/scripts/start.js | 40 +++++++++++--------
3 files changed, 27 insertions(+), 19 deletions(-)
diff --git a/packages/react-scripts/config/webpackDevServer.config.js b/packages/react-scripts/config/webpackDevServer.config.js
index d8c1b885c25..a7a0f7b3284 100644
--- a/packages/react-scripts/config/webpackDevServer.config.js
+++ b/packages/react-scripts/config/webpackDevServer.config.js
@@ -17,7 +17,7 @@ const paths = require('./paths');
const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
const host = process.env.HOST || '0.0.0.0';
-module.exports = function(proxy) {
+module.exports = function(proxy, allowedHost) {
return {
// Enable gzip compression of generated files.
compress: true,
@@ -67,6 +67,7 @@ module.exports = function(proxy) {
// See https://github.com/facebookincubator/create-react-app/issues/387.
disableDotRule: true,
},
+ public: allowedHost,
proxy,
setup(app) {
// This lets us open files from the crash overlay.
diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json
index 9208b713878..eed8e4bc2ea 100644
--- a/packages/react-scripts/package.json
+++ b/packages/react-scripts/package.json
@@ -21,6 +21,8 @@
"react-scripts": "./bin/react-scripts.js"
},
"dependencies": {
+ "@timer/detect-port": "1.1.2",
+ "address": "1.0.1",
"autoprefixer": "6.7.7",
"babel-core": "6.23.1",
"babel-eslint": "7.1.1",
@@ -33,7 +35,6 @@
"connect-history-api-fallback": "1.3.0",
"cross-spawn": "4.0.2",
"css-loader": "0.28.0",
- "@timer/detect-port": "1.1.2",
"dotenv": "2.0.0",
"eslint": "3.16.1",
"eslint-config-react-app": "^0.6.1",
diff --git a/packages/react-scripts/scripts/start.js b/packages/react-scripts/scripts/start.js
index 0ea18e727cc..12278bdecb1 100644
--- a/packages/react-scripts/scripts/start.js
+++ b/packages/react-scripts/scripts/start.js
@@ -22,6 +22,7 @@ process.env.NODE_ENV = 'development';
// Ensure environment variables are read.
require('../config/env');
+const address = require('address');
const fs = require('fs');
const chalk = require('chalk');
const detect = require('@timer/detect-port');
@@ -53,25 +54,23 @@ const HOST = process.env.HOST || '0.0.0.0';
function run(port) {
const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
- const formattedUrl = url.format({
- protocol,
- hostname: HOST,
- port,
- pathname: '/',
- });
- let prettyHost;
- if (HOST === '0.0.0.0' || HOST === '::') {
+ const formatUrl = hostname =>
+ url.format({ protocol, hostname, port, pathname: '/' });
+ const formattedUrl = formatUrl(HOST);
+
+ const isUnspecifiedAddress = HOST === '0.0.0.0' || HOST === '::';
+ let prettyHost, lanAddress;
+ if (isUnspecifiedAddress) {
prettyHost = 'localhost';
+ try {
+ lanAddress = address.ip();
+ } catch (_e) {
+ // ignored
+ }
} else {
prettyHost = HOST;
}
- const prettyUrl = url.format({
- protocol,
- hostname: prettyHost,
- port,
- pathname: '/',
- });
// Create a webpack compiler that is configured with custom messages.
const compiler = createWebpackCompiler(
@@ -83,7 +82,14 @@ function run(port) {
console.log();
console.log('The app is running at:');
console.log();
- console.log(` ${chalk.cyan(formattedUrl)}`);
+
+ if (isUnspecifiedAddress && lanAddress) {
+ console.log(` Local: ${chalk.cyan(formattedUrl)}`);
+ console.log(` Network: ${chalk.cyan(formatUrl(lanAddress))}`);
+ } else {
+ console.log(` ${chalk.cyan(formattedUrl)}`);
+ }
+
console.log();
console.log('Note that the development build is not optimized.');
console.log(
@@ -98,7 +104,7 @@ function run(port) {
// Serve webpack assets generated by the compiler over a web sever.
const devServer = new WebpackDevServer(
compiler,
- devServerConfig(prepareProxy(proxy))
+ devServerConfig(prepareProxy(proxy), lanAddress)
);
// Launch WebpackDevServer.
@@ -113,7 +119,7 @@ function run(port) {
console.log(chalk.cyan('Starting the development server...'));
console.log();
- openBrowser(prettyUrl);
+ openBrowser(formatUrl(prettyHost));
});
}
From 2748d768b75ba422bdb35c2953a3e2e2b9a9ce4e Mon Sep 17 00:00:00 2001
From: Dan Abramov <gaearon@fb.com>
Date: Mon, 15 May 2017 14:15:54 +0100
Subject: [PATCH 2/2] Tweak visual representation
---
packages/react-scripts/scripts/start.js | 16 +++++++++++-----
1 file changed, 11 insertions(+), 5 deletions(-)
diff --git a/packages/react-scripts/scripts/start.js b/packages/react-scripts/scripts/start.js
index 12278bdecb1..e5768fbbd12 100644
--- a/packages/react-scripts/scripts/start.js
+++ b/packages/react-scripts/scripts/start.js
@@ -57,7 +57,6 @@ function run(port) {
const formatUrl = hostname =>
url.format({ protocol, hostname, port, pathname: '/' });
- const formattedUrl = formatUrl(HOST);
const isUnspecifiedAddress = HOST === '0.0.0.0' || HOST === '::';
let prettyHost, lanAddress;
@@ -71,6 +70,7 @@ function run(port) {
} else {
prettyHost = HOST;
}
+ const prettyUrl = formatUrl(prettyHost);
// Create a webpack compiler that is configured with custom messages.
const compiler = createWebpackCompiler(
@@ -80,14 +80,20 @@ function run(port) {
return;
}
console.log();
- console.log('The app is running at:');
+ console.log(
+ `You can now view ${chalk.bold(require(paths.appPackageJson).name)} in the browser.`
+ );
console.log();
if (isUnspecifiedAddress && lanAddress) {
- console.log(` Local: ${chalk.cyan(formattedUrl)}`);
- console.log(` Network: ${chalk.cyan(formatUrl(lanAddress))}`);
+ console.log(
+ ` ${chalk.bold('Local:')} ${chalk.cyan(prettyUrl)}`
+ );
+ console.log(
+ ` ${chalk.bold('On Your Network:')} ${chalk.cyan(formatUrl(lanAddress))}`
+ );
} else {
- console.log(` ${chalk.cyan(formattedUrl)}`);
+ console.log(` ${chalk.cyan(prettyUrl)}`);
}
console.log();