separate dev config and prod config, cleanup code on eject, ship prod config only on release and dev-pack

Author: Jiansen

config/index.js

@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ */
+
+module.exports = function(name, stage) {
+  if(stage){
+    return require('./'+name+'.'+stage);
+  }
+
+  var isInCreateReactAppSource = (
+    process.argv.some(arg => arg.indexOf('--debug-template') > -1)
+  );
+  if (isInCreateReactAppSource) {
+    return require('./'+name+'.dev');
+  }else {
+    return require('./'+name+'.prod');
+  }
+}

config/index.prod.js

@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ */
+
+ module.exports = function(name) {
+   return require('./'+name+'.prod');
+ }

config/paths.dev.js

@@ -0,0 +1,25 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ */
+
+var path = require('path');
+
+function resolve(relativePath) {
+  return path.resolve(__dirname, relativePath);
+}
+
+// create-react-app development: we're in ./config/
+module.exports = {
+  appBuild: resolve('../build'),
+  appHtml: resolve('../template/index.html'),
+  appFavicon: resolve('../template/favicon.ico'),
+  appPackageJson: resolve('../package.json'),
+  appSrc: resolve('../template/src'),
+  appNodeModules: resolve('../node_modules'),
+  ownNodeModules: resolve('../node_modules')
+};

config/paths.js

@@ -0,0 +1,38 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ */
+
+var path = require('path');
+
+function resolve(relativePath) {
+  return path.resolve(__dirname, relativePath);
+}
+
+module.exports = {
+  appBuild: resolve('../build'),
+  appHtml: resolve('../index.html'),
+  appFavicon: resolve('../favicon.ico'),
+  appPackageJson: resolve('../package.json'),
+  appSrc: resolve('../src'),
+  appNodeModules: resolve('../node_modules'),
+  ownNodeModules: resolve('../node_modules')
+};
+
+// Dead code on eject: start
+// before eject: we're in ./node_modules/react-scripts/config/
+module.exports = {
+  appBuild: resolve('../../../build'),
+  appHtml: resolve('../../../index.html'),
+  appFavicon: resolve('../../../favicon.ico'),
+  appPackageJson: resolve('../../../package.json'),
+  appSrc: resolve('../../../src'),
+  appNodeModules: resolve('../..'),
+  // this is empty with npm3 but node resolution searches higher anyway:
+  ownNodeModules: resolve('../node_modules')
+};
+// Dead code on eject: end

config/paths.prod.js

@@ -11,7 +11,7 @@ var path = require('path');
 var autoprefixer = require('autoprefixer');
 var webpack = require('webpack');
 var HtmlWebpackPlugin = require('html-webpack-plugin');
-var paths = require('./paths');
+var paths = require('./')('paths');
 
 module.exports = {
   devtool: 'eval',
@@ -48,7 +48,7 @@ module.exports = {
         test: /\.js$/,
         include: paths.appSrc,
         loader: 'babel',
-        query: require('./babel.dev')
+        query: require('./')('babel')
       },
       {
         test: /\.css$/,

config/webpack.config.dev.js

@@ -13,7 +13,7 @@ var webpack = require('webpack');
 var HtmlWebpackPlugin = require('html-webpack-plugin');
 var ExtractTextPlugin = require('extract-text-webpack-plugin');
 var url = require('url');
-var paths = require('./paths');
+var paths = require('./')('paths');
 
 var homepagePath = require(paths.appPackageJson).homepage;
 var publicPath = homepagePath ? url.parse(homepagePath).pathname : '/';
@@ -55,7 +55,7 @@ module.exports = {
         test: /\.js$/,
         include: paths.appSrc,
         loader: 'babel',
-        query: require('./babel.prod')
+        query: require('./')('babel')
       },
       {
         test: /\.css$/,

config/webpack.config.prod.js

@@ -50,7 +50,7 @@ var argv = require('minimist')(process.argv.slice(2));
  *     Example of valid values:
  *     - a specific npm version: "0.22.0-rc1"
  *     - a .tgz archive from any npm repo: "https://registry.npmjs.org/react-scripts/-/react-scripts-0.20.0.tgz"
- *     - a package prepared with `npm pack`: "/Users/home/vjeux/create-react-app/react-scripts-0.22.0.tgz"
+ *     - a package prepared with `tasks/pack.sh`: "/Users/home/vjeux/create-react-app/react-scripts-0.22.0.tgz"
  */
 var commands = argv._;
 if (commands.length === 0) {

global-cli/index.js

@@ -13,14 +13,19 @@
   "scripts": {
     "start": "node scripts/start.js --debug-template",
     "build": "node scripts/build.js --debug-template",
-    "create-react-app": "node global-cli/index.js --scripts-version \"$PWD/`npm pack`\"",
+    "create-react-app": "node global-cli/index.js --scripts-version \"$PWD/`tasks/pack.sh`\"",
     "test": "tasks/e2e.sh"
   },
   "files": [
     "LICENSE",
     "PATENTS",
     "bin",
-    "config",
+    "config/flow",
+    "config/*.prod.js",
+    "!config/index.prod.js",
+    "config/eslint.js",
+    "config/index.js",
+    "config/polyfills.js",
     "scripts",
     "template"
   ],

package.json

@@ -14,8 +14,8 @@ var filesize = require('filesize');
 var gzipSize = require('gzip-size');
 var rimrafSync = require('rimraf').sync;
 var webpack = require('webpack');
-var config = require('../config/webpack.config.prod');
-var paths = require('../config/paths');
+var config = require('../config')('webpack.config', 'prod');
+var paths = require('../config')('paths');
 
 // Remove all content but keep the directory so that
 // if you're in it, you don't end up in Trash

scripts/build.js

@@ -28,14 +28,12 @@ prompt(
   var ownPath = path.join(__dirname, '..');
   var appPath = path.join(ownPath, '..', '..');
   var files = [
-    path.join('config', 'babel.dev.js'),
     path.join('config', 'babel.prod.js'),
     path.join('config', 'flow', 'css.js.flow'),
     path.join('config', 'flow', 'file.js.flow'),
     path.join('config', 'eslint.js'),
     path.join('config', 'paths.js'),
     path.join('config', 'polyfills.js'),
-    path.join('config', 'webpack.config.dev.js'),
     path.join('config', 'webpack.config.prod.js'),
     path.join('scripts', 'build.js'),
     path.join('scripts', 'start.js'),
@@ -70,6 +68,8 @@ prompt(
       .replace(/^\/\*\*(\*(?!\/)|[^*])*\*\//, '')
       // Remove license header from AppleScript
       .replace(/^--.*\n/gm, '')
+      // Remove dead code on eject
+      .replace(/\/\/ Dead code on eject: start([\s\S]*?)\/\/ Dead code on eject: end/g, '')
       .trim() + '\n';
     fs.writeFileSync(path.join(appPath, file), content);
   });

scripts/eject.js

@@ -17,7 +17,7 @@ var execSync = require('child_process').execSync;
 var opn = require('opn');
 var detect = require('detect-port');
 var prompt = require('./utils/prompt');
-var config = require('../config/webpack.config.dev');
+var config = require('../config/')('webpack.config');
 
 // Tools like Cloud9 rely on this
 var DEFAULT_PORT = process.env.PORT || 3000;

scripts/start.js

@@ -0,0 +1,26 @@
+# Copyright (c) 2015-present, Facebook, Inc.
+# All rights reserved.
+#
+# This source code is licensed under the BSD-style license found in the
+# LICENSE file in the root directory of this source tree. An additional grant
+# of patent rights can be found in the PATENTS file in the same directory.
+
+# Start in tests/ even if run from root directory
+cd "$(dirname "$0")"
+
+# Exit the script on any command with non 0 return code
+# We assume that all the commands in the pipeline set their return code
+# properly and that we do not need to validate that the output is correct
+set -e
+
+# Echo every command being executed
+set -x
+
+# Go to root
+cd ..
+
+rm -rf build
+rm -rf global-cli/node_modules
+rm -rf global-cli/create-react-app*.tgz
+rm -rf node_modules
+rm -rf react-scripts*.tgz

tasks/clean.sh

@@ -47,7 +47,7 @@ perl -i -p0e 's/bundledDependencies.*?]/bundledDependencies": []/s' package.json
 
 # Pack react-scripts
 npm install
-scripts_path=$PWD/`npm pack`
+scripts_path=$PWD/`tasks/pack.sh`
 
 # lint
 ./node_modules/.bin/eslint --ignore-path .gitignore ./
@@ -72,31 +72,31 @@ temp_cli_path=`mktemp -d 2>/dev/null || mktemp -d -t 'temp_cli_path'`
 cd $temp_cli_path
 npm install $cli_path
 
-# Install the app in a temporary location
+echo "Install the app in a temporary location"
 temp_app_path=`mktemp -d 2>/dev/null || mktemp -d -t 'temp_app_path'`
 cd $temp_app_path
 node "$temp_cli_path"/node_modules/create-react-app/index.js --scripts-version=$scripts_path test-app
 cd test-app
 
-# Test the build
+echo "Test the build"
 npm run build
 
-# Check for expected output
+echo "Check for expected output"
 test -e build/*.html
 test -e build/*.js
 
-# Test the server
+echo "Test the server"
 npm start -- --smoke-test
 
-# Eject and test the build
+echo "Eject and test the build"
 echo yes | npm run eject
 npm run build
 
-# Check for expected output
+echo "After Eject: Check for expected output"
 test -e build/*.html
 test -e build/*.js
 
-# Test the server
+echo "After Eject: Test the server"
 npm start -- --smoke-test
 
 # Cleanup

tasks/e2e.sh

@@ -0,0 +1,15 @@
+#!/bin/bash
+# Create a local package some as the released one,
+#   which only contains prod-only configurations
+
+# TODO: in the future, we can create stage specific package for e2e test
+#   i.e. prod  dev  test  alpha  etc.
+mv ./config/index.prod.js ./config/index.js
+
+cp $PWD/config/index.prod.js $PWD/config/index.js 2>/dev/null
+packname=`npm pack`
+
+# Discard changes to config
+git checkout -- .
+
+echo $packname

tasks/pack.sh

@@ -41,6 +41,12 @@ rm -rf node_modules/fsevents
 # We will revert package.json back after release to avoid doing it every time
 node ./node_modules/.bin/bundle-deps
 
+# This modifies ./config/index.js to
+# -- hide the --debug-template
+# -- only expose production configuration to users
+# We will revert ./config/index.js in this development repository after release
+cp ./config/index.prod.js ./config/index.js
+
 # Go!
 npm publish "$@"