From 43bc64fac215384a600c25d2e84c2d13b361639a Mon Sep 17 00:00:00 2001 From: Kevin Lacker Date: Tue, 19 Jul 2016 14:08:41 -0700 Subject: [PATCH 1/3] update misc docs + copy --- README.md | 13 ++++++++++--- global-cli/index.js | 9 ++++----- scripts/init.js | 13 +++++++++++-- 3 files changed, 25 insertions(+), 10 deletions(-) diff --git a/README.md b/README.md index bdb82784401..7d0502852da 100644 --- a/README.md +++ b/README.md @@ -19,11 +19,18 @@ npm install -g create-react-app **You’ll need to have Node >= 4 on your machine**. We recommend to use Node >= 6 and npm >= 3 for faster installation speed and better disk usage. You can use [n](https://github.com/creationix/nvm#usage) to easily switch the Node versions between different projects. -**This tool doesn’t assume a Node backend**. The Node installation is only required for the build tools that rely on it locally, such as Webpack and Babel. The output folder includes an `index.html` and a minified `.js` bundle so you can host them anywhere you like. +**This tool doesn’t assume a Node backend**. The Node installation is only required for the build tools that rely on it locally, such as Webpack and Babel. The output folder includes an `index.html`, a minified `.js` bundle, and bundled images and css, so you can host them anywhere you like. ## Why Use This? -**If you’re getting started** with React, use this tool to automate the build of your app. You can get an app running with React, JSX, and ES6 in minutes. You don’t have to learn the configuration format of Babel, Webpack, and ESLint, or manage their versions. There is no configuration file, and this tool is the only build dependency in your `package.json`. +**If you’re getting started** with React, use `create-react-app` to automate the build of your app. There is no configuration file, and `react-scripts` is the only extra build dependency in your `package.json`. Your environment will have everything you need to build a modern React app: + +* React, JSX, and ES6 support +* Language extras beyond ES6 like the object spread operator +* A dev server that lints for common errors +* Import css and image files directly from JavaScript +* Autoprefixed CSS, so you don't need `-webkit` prefixes +* A `build` script to bundle js, css, and images for production, with sourcemaps **The feature set is intentionally limited**. It doesn’t support advanced features such as server rendering or CSS modules. Currently, it doesn’t support testing either. The tool is also **non-configurable** because it is hard to provide a cohesive experience and easy updates across a set of tools when the user can tweak anything. @@ -84,7 +91,7 @@ Currently it is a thin layer on top of many amazing community projects, such as: All of them are transient dependencies of the provided npm package. -## Contibuting +## Contributing Clone the repo and run `npm install` in the root and the `global-cli` folder. diff --git a/global-cli/index.js b/global-cli/index.js index 0edd3268cb2..551a21fd11f 100644 --- a/global-cli/index.js +++ b/global-cli/index.js @@ -55,7 +55,7 @@ var argv = require('minimist')(process.argv.slice(2)); var commands = argv._; if (commands.length === 0) { console.error( - 'Usage: create-react-app [--verbose]' + 'Usage: create-react-app [--verbose]' ); process.exit(1); } @@ -69,7 +69,7 @@ createApp(commands[0], argv.verbose, argv['scripts-version']); function createApp(name, verbose, version) { if (fs.existsSync(name)) { - console.log('Directory `' + name + '` already exists. Aborting.'); + console.log('The directory `' + name + '` already exists. Aborting.'); process.exit(1); } @@ -91,9 +91,8 @@ function createApp(name, verbose, version) { fs.writeFileSync(path.join(root, 'package.json'), JSON.stringify(packageJson)); process.chdir(root); - console.log('Installing react-scripts package from npm...'); - console.log('This might take a while! ⌛'); - console.log(); + console.log('Installing packages. This might take a couple minutes. ⌛'); + console.log('Installing react-scripts from npm...'); run(root, appName, version, verbose); } diff --git a/scripts/init.js b/scripts/init.js index dfa0f332998..aa7e8577279 100644 --- a/scripts/init.js +++ b/scripts/init.js @@ -49,6 +49,7 @@ module.exports = function(hostPath, appName, verbose) { copySync(path.join(selfPath, 'index.html'), path.join(hostPath, 'index.html')); // Run another npm install for react and react-dom + console.log('Installing react and react-dom from npm...'); // TODO: having to do two npm installs is bad, can we avoid it? var args = [ 'install', @@ -61,15 +62,23 @@ module.exports = function(hostPath, appName, verbose) { return; } + // Make sure to display the right way to cd + var cdpath; + if (path.join(process.cwd(), appName) == hostPath) { + cdpath = appName; + } else { + cdpath = hostPath; + } + 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 build: Bundles the app into static files for production.'); console.log(' * npm run eject: 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(' cd', cdpath); console.log(' npm start'); console.log(); console.log('Happy hacking!'); From 6e0607ea0eab84b7c89f76fcddb82399228cde25 Mon Sep 17 00:00:00 2001 From: Kevin Lacker Date: Tue, 19 Jul 2016 14:27:04 -0700 Subject: [PATCH 2/3] I think the word listening is less clear --- scripts/start.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scripts/start.js b/scripts/start.js index ec89a2488aa..a09b822dc52 100644 --- a/scripts/start.js +++ b/scripts/start.js @@ -38,7 +38,7 @@ new WebpackDevServer(webpack(config), { if (err) { return console.log(err); } - console.log('Listening at http://localhost:3000/'); + console.log('Running development server at http://localhost:3000/'); opn('http://localhost:3000/'); }); From c760693563a36bb95a8b536bfe40be5369d10994 Mon Sep 17 00:00:00 2001 From: Kevin Lacker Date: Tue, 19 Jul 2016 14:47:01 -0700 Subject: [PATCH 3/3] or other --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 7d0502852da..4fb82cd7cb5 100644 --- a/README.md +++ b/README.md @@ -29,7 +29,7 @@ npm install -g create-react-app * Language extras beyond ES6 like the object spread operator * A dev server that lints for common errors * Import css and image files directly from JavaScript -* Autoprefixed CSS, so you don't need `-webkit` prefixes +* Autoprefixed CSS, so you don't need `-webkit` or other prefixes * A `build` script to bundle js, css, and images for production, with sourcemaps **The feature set is intentionally limited**. It doesn’t support advanced features such as server rendering or CSS modules. Currently, it doesn’t support testing either. The tool is also **non-configurable** because it is hard to provide a cohesive experience and easy updates across a set of tools when the user can tweak anything.