Make it work outside its own directory

Author: gaearon

.babelrc

@@ -121,7 +121,7 @@ function run(root, appName, version, verbose) {
       'init.js'
     );
     var init = require(scriptsPath);
-    init(root, appName);
+    init(root, appName, verbose);
   });
 }
 

global-cli/index.js

@@ -17,7 +17,6 @@
     "babel-loader": "^6.2.4",
     "babel-plugin-transform-object-rest-spread": "^6.8.0",
     "babel-plugin-transform-react-constant-elements": "^6.9.1",
-    "babel-plugin-transform-react-inline-elements": "^6.8.0",
     "babel-preset-es2015": "^6.9.0",
     "babel-preset-es2016": "^6.11.3",
     "babel-preset-react": "^6.11.1",

package.json

@@ -20,8 +20,7 @@ var files = [
   'scripts',
   'webpack.config.dev.js',
   'webpack.config.prod.js',
-  '.babelrc',
-  '.eslintrc',
+  '.eslintrc'
 ];
 
 // Ensure that the host folder is clean and we won't override any files

scripts/graduate.js

@@ -9,8 +9,9 @@
 
 var fs = require('fs');
 var path = require('path');
+var spawn = require('child_process').spawn;
 
-module.exports = function(hostPath, appName) {
+module.exports = function(hostPath, appName, verbose) {
   var selfPath = path.join(hostPath, 'node_modules', 'create-react-app-scripts');
 
   var hostPackage = require(path.join(hostPath, 'package.json'));
@@ -34,21 +35,34 @@ module.exports = function(hostPath, appName) {
     JSON.stringify(hostPackage, null, 2)
   );
 
-  // TODO: run npm install in hostPath, (not needed for npm 3 if we accept some hackery)
-
   // Move the src folder
+  // TODO: copying might be more correct?
   fs.renameSync(path.join(selfPath, 'src'), path.join(hostPath, 'src'));
 
-  console.log('Success! Created ' + appName + ' at ' + hostPath + '.');
-  console.log();
-  console.log('Inside that directory, you can run several commands:');
-  console.log('  * npm start: Starts the development server.');
-  console.log('  * npm run build: Builds the app for production.');
-  console.log('  * npm run graduate: Removes this tool. If you do this, you can’t go back!');
-  console.log();
-  console.log('We suggest that you begin by typing:');
-  console.log('  cd', appName);
-  console.log('  npm start');
-  console.log();
-  console.log('Happy hacking!');
+  // Run another npm install for react and react-dom
+  // TODO: having to do two npm installs is bad, can we avoid it?
+  var args = [
+    'install',
+    verbose && '--verbose'
+  ].filter(function(e) { return e; });
+  var proc = spawn('npm', args, {stdio: 'inherit'});
+  proc.on('close', function (code) {
+    if (code !== 0) {
+      console.error('`npm ' + args.join(' ') + '` failed');
+      return;
+    }
+
+    console.log('Success! Created ' + appName + ' at ' + hostPath + '.');
+    console.log();
+    console.log('Inside that directory, you can run several commands:');
+    console.log('  * npm start: Starts the development server.');
+    console.log('  * npm run build: Builds the app for production.');
+    console.log('  * npm run graduate: Removes this tool. If you do this, you can’t go back!');
+    console.log();
+    console.log('We suggest that you begin by typing:');
+    console.log('  cd', appName);
+    console.log('  npm start');
+    console.log();
+    console.log('Happy hacking!');
+  });
 };

scripts/init.js

@@ -32,15 +32,20 @@ module.exports = {
     preLoaders: [
       {
         test: /\.js$/,
-        loader: 'eslint-loader',
-        include: path.resolve(__dirname, relative, 'src')
+        loader: 'eslint',
+        include: path.resolve(__dirname, relative, 'src'),
       }
     ],
     loaders: [
       {
         test: /\.js$/,
         include: path.resolve(__dirname, relative, 'src'),
-        loader: 'babel'
+        loader: 'babel',
+        query: {
+          cacheDirectory: true,
+          presets: ['es2015', 'es2016', 'react'],
+          plugins: ['transform-object-rest-spread']
+        }
       },
       {
         test: /\.css$/,
@@ -61,8 +66,11 @@ module.exports = {
       }
     ]
   },
-  postcss: function () {
-    return [ autoprefixer ];
+  eslint: {
+    configFile: path.join(__dirname, '.eslintrc')
+  },
+  postcss: function() {
+    return [autoprefixer];
   },
   plugins: [
     // TODO: infer from package.json?

webpack.config.dev.js

@@ -30,15 +30,22 @@ module.exports = {
     preLoaders: [
       {
         test: /\.js$/,
-        loader: 'eslint-loader',
+        loader: 'eslint',
         include: path.resolve(__dirname, relative, 'src')
       }
     ],
     loaders: [
       {
         test: /\.js$/,
         include: path.resolve(__dirname, relative, 'src'),
-        loader: 'babel'
+        loader: 'babel',
+        query: {
+          presets: ['es2015', 'es2016', 'react'],
+          plugins: [
+            'transform-object-rest-spread',
+            'transform-react-constant-elements'
+          ]
+        }
       },
       {
         test: /\.css$/,
@@ -59,8 +66,11 @@ module.exports = {
       }
     ]
   },
-  postcss: function () {
-    return [ autoprefixer ];
+  eslint: {
+    configFile: path.join(__dirname, '.eslintrc')
+  },
+  postcss: function() {
+    return [autoprefixer];
   },
   plugins: [
     // TODO: infer from package.json?