From 1d863b0f1b6c6c509589573f08a393cb166cf8bb Mon Sep 17 00:00:00 2001 From: Jirat K Date: Mon, 12 Dec 2016 17:13:18 +0700 Subject: [PATCH 1/8] Install react and react-dom along with react-scripts - Install react, react-dom and react-script in a same time - Move react-scripts to devDependencies. --- packages/create-react-app/index.js | 40 ++++++++++++++++++++++++++---- 1 file changed, 35 insertions(+), 5 deletions(-) diff --git a/packages/create-react-app/index.js b/packages/create-react-app/index.js index 4dbb37f4969..c6444c4e0cd 100644 --- a/packages/create-react-app/index.js +++ b/packages/create-react-app/index.js @@ -134,7 +134,7 @@ function createApp(name, verbose, version, template) { process.chdir(root); console.log('Installing packages. This might take a couple minutes.'); - console.log('Installing ' + chalk.cyan('react-scripts') + '...'); + console.log('Installing ' + chalk.cyan('react, react-dom, react-scripts') + '...'); console.log(); run(root, appName, version, verbose, originalDirectory, template); @@ -149,15 +149,15 @@ function shouldUseYarn() { } } -function install(packageToInstall, verbose, callback) { +function install(dependencies, verbose, callback) { var command; var args; if (shouldUseYarn()) { command = 'yarnpkg'; - args = [ 'add', '--dev', '--exact', packageToInstall]; + args = [ 'add', '--exact'].concat(dependencies); } else { command = 'npm'; - args = ['install', '--save-dev', '--save-exact', packageToInstall]; + args = ['install', '--save', '--save-exact'].concat(dependencies); } if (verbose) { @@ -174,7 +174,9 @@ function run(root, appName, version, verbose, originalDirectory, template) { var packageToInstall = getInstallPackage(version); var packageName = getPackageName(packageToInstall); - install(packageToInstall, verbose, function(code, command, args) { + var allDependencies = ['react', 'react-dom', packageToInstall]; + + install(allDependencies, verbose, function(code, command, args) { if (code !== 0) { console.error(chalk.cyan(command + ' ' + args.join(' ')) + ' failed'); process.exit(1); @@ -182,6 +184,10 @@ function run(root, appName, version, verbose, originalDirectory, template) { checkNodeVersion(packageName); + // Since react-scripts has been installed with --save + // We need to move it into devDependencies and rewrite package.json + moveReactScriptsToDev(); + var scriptsPath = path.resolve( process.cwd(), 'node_modules', @@ -268,6 +274,30 @@ function checkAppName(appName) { } } +function moveReactScriptsToDev() { + var packagePath = path.join(process.cwd(), 'package.json'); + if (!fs.existsSync(packagePath)) { + return; + } + + var packageJson = require(packagePath); + if (typeof packageJson.dependencies === 'undefined') { + return; + } + + var packageVersion = packageJson.dependencies['react-scripts'] + + if (typeof packageVersion !== 'undefined') { + packageJson.devDependencies = { + 'react-scripts': packageVersion + }; + delete packageJson.dependencies['react-scripts']; + + fs.unlinkSync(packagePath); + fs.writeFileSync(packagePath, JSON.stringify(packageJson, null, 2)) + } +} + // If project only contains files generated by GH, it’s safe. // We also special case IJ-based products .idea because it integrates with CRA: // https://github.com/facebookincubator/create-react-app/pull/368#issuecomment-243446094 From 545b0abcad3a71fde424273c5548c3af939d10fd Mon Sep 17 00:00:00 2001 From: Jirat K Date: Mon, 12 Dec 2016 17:14:23 +0700 Subject: [PATCH 2/8] Check if react, react-dom has been already installed MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - To backward compatibility with old CRA’s cli - In case old CRA doesn’t install react, react-don along with react-scripts --- packages/react-scripts/scripts/init.js | 98 ++++++++++++++------------ 1 file changed, 54 insertions(+), 44 deletions(-) diff --git a/packages/react-scripts/scripts/init.js b/packages/react-scripts/scripts/init.js index 864005ecac2..a4d67dbf8bb 100644 --- a/packages/react-scripts/scripts/init.js +++ b/packages/react-scripts/scripts/init.js @@ -64,8 +64,6 @@ module.exports = function(appPath, appName, verbose, originalDirectory, template } }); - // Run yarn or npm for react and react-dom - // TODO: having to do two npm/yarn installs is bad, can we avoid it? var command; var args; @@ -92,53 +90,65 @@ module.exports = function(appPath, appName, verbose, originalDirectory, template fs.unlinkSync(templateDependenciesPath); } - console.log('Installing react and react-dom using ' + command + '...'); - console.log(); + // Install react and react-dom for backward compatibility with old CRA cli + // which doesn't install react and react-dom along with react-scripts + if (!isReactInstalled(appPath)) { + console.log('Installing react and react-dom using ' + command + '...'); + console.log(); - var proc = spawn(command, args, {stdio: 'inherit'}); - proc.on('close', function (code) { - if (code !== 0) { + var proc = spawn.sync(command, args, {stdio: 'inherit'}); + if (proc.status !== 0) { console.error('`' + command + ' ' + args.join(' ') + '` failed'); return; } + } - // Display the most elegant way to cd. - // This needs to handle an undefined originalDirectory for - // backward compatibility with old global-cli's. - var cdpath; - if (originalDirectory && - path.join(originalDirectory, appName) === appPath) { - cdpath = appName; - } else { - cdpath = appPath; - } + // Display the most elegant way to cd. + // This needs to handle an undefined originalDirectory for + // backward compatibility with old global-cli's. + var cdpath; + if (originalDirectory && + path.join(originalDirectory, appName) === appPath) { + cdpath = appName; + } else { + cdpath = appPath; + } + console.log(); + console.log('Success! Created ' + appName + ' at ' + appPath); + console.log('Inside that directory, you can run several commands:'); + console.log(); + console.log(chalk.cyan(' ' + command + ' start')); + console.log(' Starts the development server.'); + console.log(); + console.log(chalk.cyan(' ' + command + ' run build')); + console.log(' Bundles the app into static files for production.'); + console.log(); + console.log(chalk.cyan(' ' + command + ' test')); + console.log(' Starts the test runner.'); + console.log(); + console.log(chalk.cyan(' ' + command + ' run eject')); + console.log(' Removes this tool and copies build dependencies, configuration files'); + console.log(' and scripts into the app directory. If you do this, you can’t go back!'); + console.log(); + console.log('We suggest that you begin by typing:'); + console.log(); + console.log(chalk.cyan(' cd'), cdpath); + console.log(' ' + chalk.cyan(command + ' start')); + if (readmeExists) { console.log(); - console.log('Success! Created ' + appName + ' at ' + appPath); - console.log('Inside that directory, you can run several commands:'); - console.log(); - console.log(chalk.cyan(' ' + command + ' start')); - console.log(' Starts the development server.'); - console.log(); - console.log(chalk.cyan(' ' + command + ' run build')); - console.log(' Bundles the app into static files for production.'); - console.log(); - console.log(chalk.cyan(' ' + command + ' test')); - console.log(' Starts the test runner.'); - console.log(); - console.log(chalk.cyan(' ' + command + ' run eject')); - console.log(' Removes this tool and copies build dependencies, configuration files'); - console.log(' and scripts into the app directory. If you do this, you can’t go back!'); - console.log(); - console.log('We suggest that you begin by typing:'); - console.log(); - console.log(chalk.cyan(' cd'), cdpath); - console.log(' ' + chalk.cyan(command + ' start')); - if (readmeExists) { - console.log(); - console.log(chalk.yellow('You had a `README.md` file, we renamed it to `README.old.md`')); - } - console.log(); - console.log('Happy hacking!'); - }); + console.log(chalk.yellow('You had a `README.md` file, we renamed it to `README.old.md`')); + } + console.log(); + console.log('Happy hacking!'); }; + +function isReactInstalled(appPath) { + var reactPath = path.join( + appPath, 'node_modules', 'react', 'package.json' + ); + var reactDomPath = path.join( + appPath, 'node_modules', 'react-dom', 'package.json' + ); + return ( fs.existsSync(reactPath) && fs.existsSync(reactDomPath) ) +} From b84eab67cb799e5695961db54c8eaafbe3a040f3 Mon Sep 17 00:00:00 2001 From: Jirat K Date: Tue, 13 Dec 2016 10:06:52 +0700 Subject: [PATCH 3/8] Use packageName to find script dependency - use packageName to find dependency - fix pathExists.sync --- packages/create-react-app/index.js | 16 +++++++--------- 1 file changed, 7 insertions(+), 9 deletions(-) diff --git a/packages/create-react-app/index.js b/packages/create-react-app/index.js index c6444c4e0cd..92280862dd6 100644 --- a/packages/create-react-app/index.js +++ b/packages/create-react-app/index.js @@ -186,7 +186,7 @@ function run(root, appName, version, verbose, originalDirectory, template) { // Since react-scripts has been installed with --save // We need to move it into devDependencies and rewrite package.json - moveReactScriptsToDev(); + moveReactScriptsToDev(packageName); var scriptsPath = path.resolve( process.cwd(), @@ -274,7 +274,7 @@ function checkAppName(appName) { } } -function moveReactScriptsToDev() { +function moveReactScriptsToDev(packageName) { var packagePath = path.join(process.cwd(), 'package.json'); if (!fs.existsSync(packagePath)) { return; @@ -285,16 +285,14 @@ function moveReactScriptsToDev() { return; } - var packageVersion = packageJson.dependencies['react-scripts'] + var packageVersion = packageJson.dependencies[packageName] if (typeof packageVersion !== 'undefined') { - packageJson.devDependencies = { - 'react-scripts': packageVersion - }; - delete packageJson.dependencies['react-scripts']; + packageJson.devDependencies = packageJson.devDependencies || {}; + packageJson.devDependencies[packageName] = packageVersion; + delete packageJson.dependencies[packageName]; - fs.unlinkSync(packagePath); - fs.writeFileSync(packagePath, JSON.stringify(packageJson, null, 2)) + fs.writeFileSync(packagePath, JSON.stringify(packageJson, null, 2)); } } From 80e173847be111fafa941ab9b19b872a908864bb Mon Sep 17 00:00:00 2001 From: Jirat K Date: Tue, 13 Dec 2016 10:06:59 +0700 Subject: [PATCH 4/8] Check dependencies.react in package.json instead of actual files --- packages/react-scripts/scripts/init.js | 17 ++++++++--------- 1 file changed, 8 insertions(+), 9 deletions(-) diff --git a/packages/react-scripts/scripts/init.js b/packages/react-scripts/scripts/init.js index a4d67dbf8bb..68768778a67 100644 --- a/packages/react-scripts/scripts/init.js +++ b/packages/react-scripts/scripts/init.js @@ -92,7 +92,7 @@ module.exports = function(appPath, appName, verbose, originalDirectory, template // Install react and react-dom for backward compatibility with old CRA cli // which doesn't install react and react-dom along with react-scripts - if (!isReactInstalled(appPath)) { + if (!isReactInstalled(appPackage)) { console.log('Installing react and react-dom using ' + command + '...'); console.log(); @@ -143,12 +143,11 @@ module.exports = function(appPath, appName, verbose, originalDirectory, template console.log('Happy hacking!'); }; -function isReactInstalled(appPath) { - var reactPath = path.join( - appPath, 'node_modules', 'react', 'package.json' - ); - var reactDomPath = path.join( - appPath, 'node_modules', 'react-dom', 'package.json' - ); - return ( fs.existsSync(reactPath) && fs.existsSync(reactDomPath) ) +function isReactInstalled(appPackage) { + var dependencies = appPackage.dependencies || {}; + + return ( + typeof dependencies.react !== 'undefined' && + typeof dependencies['react-dom'] !== 'undefined' + ) } From ed11c7a4d98be7781b1452a2dada3646c2ed5718 Mon Sep 17 00:00:00 2001 From: Jirat K Date: Tue, 13 Dec 2016 21:17:35 +0700 Subject: [PATCH 5/8] Process exit when dependencies not found - Show error and exit when dependencies not found. - Log install show custom package name --- packages/create-react-app/index.js | 37 +++++++++++++++++------------- 1 file changed, 21 insertions(+), 16 deletions(-) diff --git a/packages/create-react-app/index.js b/packages/create-react-app/index.js index 92280862dd6..c91ad7b2343 100644 --- a/packages/create-react-app/index.js +++ b/packages/create-react-app/index.js @@ -133,10 +133,6 @@ function createApp(name, verbose, version, template) { var originalDirectory = process.cwd(); process.chdir(root); - console.log('Installing packages. This might take a couple minutes.'); - console.log('Installing ' + chalk.cyan('react, react-dom, react-scripts') + '...'); - console.log(); - run(root, appName, version, verbose, originalDirectory, template); } @@ -176,6 +172,10 @@ function run(root, appName, version, verbose, originalDirectory, template) { var allDependencies = ['react', 'react-dom', packageToInstall]; + console.log('Installing packages. This might take a couple minutes.'); + console.log('Installing ' + chalk.cyan(`react, react-dom, ${packageName}`) + '...'); + console.log(); + install(allDependencies, verbose, function(code, command, args) { if (code !== 0) { console.error(chalk.cyan(command + ' ' + args.join(' ')) + ' failed'); @@ -276,24 +276,29 @@ function checkAppName(appName) { function moveReactScriptsToDev(packageName) { var packagePath = path.join(process.cwd(), 'package.json'); - if (!fs.existsSync(packagePath)) { - return; - } - var packageJson = require(packagePath); + if (typeof packageJson.dependencies === 'undefined') { - return; + console.error( + chalk.red('Missing dependencies in package.json') + ); + process.exit(1); } - var packageVersion = packageJson.dependencies[packageName] - - if (typeof packageVersion !== 'undefined') { - packageJson.devDependencies = packageJson.devDependencies || {}; - packageJson.devDependencies[packageName] = packageVersion; - delete packageJson.dependencies[packageName]; + var packageVersion = packageJson.dependencies[packageName]; - fs.writeFileSync(packagePath, JSON.stringify(packageJson, null, 2)); + if (typeof packageVersion === 'undefined') { + console.error( + chalk.red('Unable to find ' + packageName + ' in package.json') + ); + process.exit(1); } + + packageJson.devDependencies = packageJson.devDependencies || {}; + packageJson.devDependencies[packageName] = packageVersion; + delete packageJson.dependencies[packageName]; + + fs.writeFileSync(packagePath, JSON.stringify(packageJson, null, 2)); } // If project only contains files generated by GH, it’s safe. From 423dd1ab93ee05f384eb0d6c399e758cd6bb74ee Mon Sep 17 00:00:00 2001 From: Jirat K Date: Wed, 14 Dec 2016 01:23:43 +0700 Subject: [PATCH 6/8] Remove template string --- packages/create-react-app/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/create-react-app/index.js b/packages/create-react-app/index.js index c91ad7b2343..5a3d17236cc 100644 --- a/packages/create-react-app/index.js +++ b/packages/create-react-app/index.js @@ -173,7 +173,7 @@ function run(root, appName, version, verbose, originalDirectory, template) { var allDependencies = ['react', 'react-dom', packageToInstall]; console.log('Installing packages. This might take a couple minutes.'); - console.log('Installing ' + chalk.cyan(`react, react-dom, ${packageName}`) + '...'); + console.log('Installing ' + chalk.cyan('react, react-dom, ' + packageName) + '...'); console.log(); install(allDependencies, verbose, function(code, command, args) { From 9a7f0595e46ec79ee8f22eebab4793a9d09f8bd4 Mon Sep 17 00:00:00 2001 From: Jirat K Date: Tue, 14 Feb 2017 09:42:07 +0700 Subject: [PATCH 7/8] Install dependencies if template is preseted --- packages/react-scripts/scripts/init.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/react-scripts/scripts/init.js b/packages/react-scripts/scripts/init.js index 68768778a67..aa62265ccc5 100644 --- a/packages/react-scripts/scripts/init.js +++ b/packages/react-scripts/scripts/init.js @@ -92,7 +92,8 @@ module.exports = function(appPath, appName, verbose, originalDirectory, template // Install react and react-dom for backward compatibility with old CRA cli // which doesn't install react and react-dom along with react-scripts - if (!isReactInstalled(appPackage)) { + // or template is presetend (via --internal-testing-template) + if (!isReactInstalled(appPackage) || template) { console.log('Installing react and react-dom using ' + command + '...'); console.log(); From c59a3184001d0d52a650c3da2cfd2902c739e19c Mon Sep 17 00:00:00 2001 From: Joe Haddad Date: Wed, 22 Feb 2017 22:37:51 -0500 Subject: [PATCH 8/8] Remove dangling comma --- packages/create-react-app/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/create-react-app/index.js b/packages/create-react-app/index.js index 5a3d17236cc..b3bca2bb25f 100644 --- a/packages/create-react-app/index.js +++ b/packages/create-react-app/index.js @@ -40,7 +40,7 @@ var chalk = require('chalk'); -var currentNodeVersion = process.versions.node +var currentNodeVersion = process.versions.node; if (currentNodeVersion.split('.')[0] < 4) { console.error( chalk.red( @@ -124,7 +124,7 @@ function createApp(name, verbose, version, template) { var packageJson = { name: appName, version: '0.1.0', - private: true, + private: true }; fs.writeFileSync( path.join(root, 'package.json'),