Enabling start script

config/webpack.config.dev.js

@@ -6,6 +6,8 @@ const HtmlWebPackPlugin = require("html-webpack-plugin");
 const paths = require('./paths');
 const getClientEnvironment = require('./env');
 
+const publicPath = '/';
+
 // `publicUrl` we will provide it to our app
 // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
 // Omit trailing slash as %PUBLIC_PATH%/xyz looks better than %PUBLIC_PATH%xyz.
@@ -36,6 +38,18 @@ module.exports = {
   devtool: 'cheap-module-source-map',
   resolve: { 
     extensions: ['.js', '.json', '.jsx'],
+  },
+  output: {
+    // Next line is not used in dev but WebpackDevServer crashes without it:
+    path: paths.appBuild,
+    // Add /* filename */ comments to generated require()s in the output.
+    pathinfo: true,
+    // This does not produce a real file. It's just the virtual path that is
+    // served by WebpackDevServer in development. This is the JS bundle
+    // containing code from all our entry points, and the Webpack runtime.
+    filename: 'static/js/bundle.js',
+    // This is the URL that app is served from. We use "/" in development.
+    publicPath: publicPath
   },  
   module: {
     rules: [

package-lock.json

@@ -4919,10 +4919,10 @@
       "integrity": "sha1-ogM8CcyOFY03dI+951B4Mr1s4Sc=",
       "dev": true
     },
-    "detect-port-alt": {
-      "version": "1.1.5",
-      "resolved": "https://registry.npmjs.org/detect-port-alt/-/detect-port-alt-1.1.5.tgz",
-      "integrity": "sha512-PlE9BuBz44BSDV8sJvfUxkGquPcDW4oHSYa5wY4yKj943C2I4xNU5Gd/EFroqdWNur7W6yU2zOLqvmKJCB//aA==",
+    "detect-port": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/detect-port/-/detect-port-1.2.2.tgz",
+      "integrity": "sha512-06H99JMCwgbYbA+codm97aBhFLAjABftetp+v+Z88Pvvlkawp2N+1bP/9J24+mihrvk9yBvUYTyIj3NixG1CsA==",
       "dev": true,
       "requires": {
         "address": "1.0.3",
@@ -5056,6 +5056,12 @@
         "domelementtype": "1.3.0"
       }
     },
+    "dotenv": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-5.0.1.tgz",
+      "integrity": "sha512-4As8uPrjfwb7VXC+WnLCbXK7y+Ueb2B3zgNCePYfhxS1PYeaO1YTeplffTEcbfLhvFNGLAz90VvJs9yomG7bow==",
+      "dev": true
+    },
     "drbg.js": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/drbg.js/-/drbg.js-1.0.1.tgz",
@@ -12977,6 +12983,16 @@
             "which": "1.3.0"
           }
         },
+        "detect-port-alt": {
+          "version": "1.1.5",
+          "resolved": "https://registry.npmjs.org/detect-port-alt/-/detect-port-alt-1.1.5.tgz",
+          "integrity": "sha512-PlE9BuBz44BSDV8sJvfUxkGquPcDW4oHSYa5wY4yKj943C2I4xNU5Gd/EFroqdWNur7W6yU2zOLqvmKJCB//aA==",
+          "dev": true,
+          "requires": {
+            "address": "1.0.3",
+            "debug": "2.6.9"
+          }
+        },
         "inquirer": {
           "version": "3.3.0",
           "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-3.3.0.tgz",

package.json

@@ -32,6 +32,8 @@
     "babel-plugin-transform-es3-member-expression-literals": "^6.22.0",
     "babel-plugin-transform-es3-property-literals": "^6.22.0",
     "css-loader": "^0.28.10",
+    "detect-port": "^1.2.2",
+    "dotenv": "^5.0.1",
     "html-loader": "^0.5.5",
     "html-webpack-plugin": "^3.0.4",
     "postcss-loader": "^2.1.1",

scripts/build.js

@@ -56,7 +56,7 @@ function getDifferenceLabel(currentSize, previousSize) {
 // This lets us display how much they changed later.
 recursive(paths.appBuild, (err, fileNames) => {
   var previousSizeMap = (fileNames || [])
-    .filter(fileName => /\.(js|css)$/.test(fileName))
+    .filter(fileName => /\.(js|jsx|css|scss)$/.test(fileName))
     .reduce((memo, fileName) => {
       var contents = fs.readFileSync(fileName);
       var key = removeFileNameHash(fileName);
@@ -78,7 +78,7 @@ recursive(paths.appBuild, (err, fileNames) => {
 // Print a detailed summary of build files.
 function printFileSizes(stats, previousSizeMap) {
   var assets = stats.toJson().assets
-    .filter(asset => /\.(js|css)$/.test(asset.name))
+    .filter(asset => /\.(js|jsx|css|scss)$/.test(asset.name))
     .map(asset => {
       var fileContents = fs.readFileSync(paths.appBuild + '/' + asset.name);
       var size = gzipSize(fileContents);

scripts/start.js

@@ -17,7 +17,6 @@ var checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
 var formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');
 var getProcessForPort = require('react-dev-utils/getProcessForPort');
 var openBrowser = require('react-dev-utils/openBrowser');
-var prompt = require('react-dev-utils/prompt');
 var pathExists = require('path-exists');
 var config = require('../config/webpack.config.dev');
 var paths = require('../config/paths');
@@ -299,16 +298,7 @@ detect(DEFAULT_PORT).then(port => {
   if (isInteractive) {
     clearConsole();
     var existingProcess = getProcessForPort(DEFAULT_PORT);
-    var question =
-      chalk.yellow('Something is already running on port ' + DEFAULT_PORT + '.' +
-        ((existingProcess) ? ' Probably:\n  ' + existingProcess : '')) +
-        '\n\nWould you like to run the app on another port instead?';
-
-    prompt(question, true).then(shouldChangePort => {
-      if (shouldChangePort) {
-        run(port);
-      }
-    });
+    run(port);
   } else {
     console.log(chalk.red('Something is already running on port ' + DEFAULT_PORT + '.'));
   }