diff --git a/README.md b/README.md index bdb82784401..4fb82cd7cb5 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` 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. @@ -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!'); 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/'); });