├── config
    ├── flow
    │   ├── css.js.flow
    │   └── file.js.flow
    ├── jest
    │   ├── environment.js
    │   ├── CSSStub.js
    │   ├── FileStub.js
    │   └── transform.js
    ├── polyfills.js
    ├── env.js
    ├── babel.prod.js
    ├── babel.dev.js
    ├── paths.js
    ├── eslint.js
    ├── webpack.config.dev.js
    └── webpack.config.prod.js
├── template
    ├── src
    │   ├── index.css
    │   ├── favicon.ico
    │   ├── index.js
    │   ├── __tests__
    │   │   └── App-test.js
    │   ├── App.css
    │   ├── App.js
    │   └── logo.svg
    ├── gitignore
    ├── index.html
    └── README.md
├── .gitignore
├── .travis.yml
├── .eslintrc.js
├── bin
    └── preact-scripts.js
├── README.md
├── global-cli
    ├── package.json
    └── index.js
├── scripts
    ├── test.js
    ├── utils
    │   ├── createJestConfig.js
    │   ├── WatchMissingNodeModulesPlugin.js
    │   ├── chrome.applescript
    │   └── prompt.js
    ├── init.js
    ├── eject.js
    ├── build.js
    └── start.js
├── LICENSE
├── tasks
    ├── release.sh
    └── e2e.sh
├── PATENTS
├── CONTRIBUTING.md
├── package.json
└── CHANGELOG.md


/config/flow/css.js.flow:
--------------------------------------------------------------------------------
1 | // @flow
2 | 


--------------------------------------------------------------------------------
/config/flow/file.js.flow:
--------------------------------------------------------------------------------
1 | // @flow
2 | declare export default string;
3 | 


--------------------------------------------------------------------------------
/template/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 |   margin: 0;
3 |   padding: 0;
4 |   font-family: sans-serif;
5 | }
6 | 


--------------------------------------------------------------------------------
/template/src/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/alexkuz/create-preact-app/HEAD/template/src/favicon.ico


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | build
3 | .DS_Store
4 | *.tgz
5 | my-app*
6 | template/src/__tests__/__snapshots__/
7 | 


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
 1 | ---
 2 | language: node_js
 3 | node_js:
 4 |   - 4
 5 |   - 6
 6 | cache:
 7 |   directories:
 8 |   - global-cli/node_modules
 9 |   - node_modules
10 | script: tasks/e2e.sh
11 | 


--------------------------------------------------------------------------------
/template/src/index.js:
--------------------------------------------------------------------------------
1 | import { h, render } from 'preact';
2 | import App from './App';
3 | import './index.css';
4 | 
5 | render(
6 |   <App />,
7 |   document.getElementById('root')
8 | );
9 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
1 | const clientESLintConfig = require('./config/eslint');
2 | 
3 | module.exports = Object.assign({}, clientESLintConfig, {
4 |   env: Object.assign({}, clientESLintConfig.env, {
5 |     node: true,
6 |   })
7 | });
8 | 


--------------------------------------------------------------------------------
/template/gitignore:
--------------------------------------------------------------------------------
 1 | # See http://help.github.com/ignore-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | node_modules
 5 | 
 6 | # production
 7 | build
 8 | 
 9 | # misc
10 | .DS_Store
11 | npm-debug.log
12 | 


--------------------------------------------------------------------------------
/config/jest/environment.js:
--------------------------------------------------------------------------------
1 | // Currently, Jest mocks setTimeout() and similar functions by default:
2 | // https://facebook.github.io/jest/docs/timer-mocks.html
3 | // We think this is confusing, so we disable this feature.
4 | // If you see value in it, run `jest.useFakeTimers()` in individual tests.
5 | beforeEach(() => {
6 |   jest.useRealTimers();
7 | });
8 | 


--------------------------------------------------------------------------------
/template/src/__tests__/App-test.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import App from '../App';
 3 | import renderer from 'react-test-renderer';
 4 | 
 5 | describe('App', () => {
 6 |   it('renders a welcome view', () => {
 7 |     const instance = renderer.create(<App />);
 8 |     const tree = instance.toJSON();
 9 |     expect(tree).toMatchSnapshot();
10 |   });
11 | });
12 | 


--------------------------------------------------------------------------------
/config/jest/CSSStub.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Copyright (c) 2014-present, Facebook, Inc. All rights reserved.
 3 |  *
 4 |  * This source code is licensed under the BSD-style license found in the
 5 |  * LICENSE file in the root directory of this source tree. An additional grant
 6 |  * of patent rights can be found in the PATENTS file in the same directory.
 7 |  *
 8 |  * @flow
 9 |  */
10 | 
11 | module.exports = {};
12 | 


--------------------------------------------------------------------------------
/config/jest/FileStub.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Copyright (c) 2014-present, Facebook, Inc. All rights reserved.
 3 |  *
 4 |  * This source code is licensed under the BSD-style license found in the
 5 |  * LICENSE file in the root directory of this source tree. An additional grant
 6 |  * of patent rights can be found in the PATENTS file in the same directory.
 7 |  *
 8 |  * @flow
 9 |  */
10 | 
11 | module.exports = "test-file-stub";
12 | 


--------------------------------------------------------------------------------
/template/src/App.css:
--------------------------------------------------------------------------------
 1 | .App {
 2 |   text-align: center;
 3 | }
 4 | 
 5 | .App-logo {
 6 |   animation: App-logo-spin infinite 20s linear;
 7 |   height: 80px;
 8 | }
 9 | 
10 | .App-header {
11 |   background-color: #222;
12 |   height: 150px;
13 |   padding: 20px;
14 |   color: white;
15 | }
16 | 
17 | .App-intro {
18 |   font-size: large;
19 | }
20 | 
21 | @keyframes App-logo-spin {
22 |   from { transform: rotate(0deg); }
23 |   to { transform: rotate(360deg); }
24 | }
25 | 


--------------------------------------------------------------------------------
/config/jest/transform.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Copyright (c) 2014-present, Facebook, Inc. All rights reserved.
 3 |  *
 4 |  * This source code is licensed under the BSD-style license found in the
 5 |  * LICENSE file in the root directory of this source tree. An additional grant
 6 |  * of patent rights can be found in the PATENTS file in the same directory.
 7 |  */
 8 | 
 9 | const babelDev = require('../babel.dev');
10 | const babelJest = require('babel-jest');
11 | 
12 | module.exports = babelJest.createTransformer(babelDev);
13 | 


--------------------------------------------------------------------------------
/template/src/App.js:
--------------------------------------------------------------------------------
 1 | import { h, Component } from 'preact';
 2 | import logo from './logo.svg';
 3 | import './App.css';
 4 | 
 5 | class App extends Component {
 6 |   render() {
 7 |     return (
 8 |       <div className="App">
 9 |         <div className="App-header">
10 |           <img src={logo} className="App-logo" alt="logo" />
11 |           <h2>Welcome to Preact</h2>
12 |         </div>
13 |         <p className="App-intro">
14 |           To get started, edit <code>src/App.js</code> and save to reload.
15 |         </p>
16 |       </div>
17 |     );
18 |   }
19 | }
20 | 
21 | export default App;
22 | 


--------------------------------------------------------------------------------
/bin/preact-scripts.js:
--------------------------------------------------------------------------------
 1 | #!/usr/bin/env node
 2 | var spawn = require('cross-spawn');
 3 | var script = process.argv[2];
 4 | var args = process.argv.slice(3);
 5 | 
 6 | switch (script) {
 7 | case 'build':
 8 | case 'eject':
 9 | case 'start':
10 | case 'test':
11 |   var result = spawn.sync(
12 |     'node',
13 |     [require.resolve('../scripts/' + script)].concat(args),
14 |     {stdio: 'inherit'}
15 |   );
16 |   process.exit(result.status);
17 |   break;
18 | default:
19 |   console.log('Unknown script "' + script + '".');
20 |   console.log('Perhaps you need to update preact-scripts?');
21 |   break;
22 | }
23 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Create Preact App
 2 | 
 3 | Create Preact apps with no build configuration.
 4 | 
 5 | This is a fork of [create-react-app](https://github.com/facebookincubator/create-react-app).
 6 | 
 7 | ## tl;dr
 8 | 
 9 | ```sh
10 | npm install -g create-preact-app
11 | 
12 | create-preact-app my-app
13 | cd my-app/
14 | npm start
15 | 
16 | ```
17 | 
18 | Then open [http://localhost:3000/](http://localhost:3000/) to see your app.<br>
19 | When you’re ready to deploy to production, create a minified bundle with `npm run build`.
20 | 
21 | The rest of it is quite similar to original tool, you can read its docs [here](https://github.com/facebookincubator/create-react-app#getting-started).
22 | 


--------------------------------------------------------------------------------
/config/polyfills.js:
--------------------------------------------------------------------------------
 1 | if (typeof Promise === 'undefined') {
 2 |   // Rejection tracking prevents a common issue where React gets into an
 3 |   // inconsistent state due to an error, but it gets swallowed by a Promise,
 4 |   // and the user has no idea what causes React's erratic future behavior.
 5 |   require('promise/lib/rejection-tracking').enable();
 6 |   window.Promise = require('promise/lib/es6-extensions.js');
 7 | }
 8 | 
 9 | // fetch() polyfill for making API calls.
10 | require('whatwg-fetch');
11 | 
12 | // Object.assign() is commonly used with React.
13 | // It will use the native implementation if it's present and isn't buggy.
14 | Object.assign = require('object-assign');
15 | 


--------------------------------------------------------------------------------
/global-cli/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "create-preact-app",
 3 |   "version": "0.2.0",
 4 |   "keywords": [
 5 |     "react",
 6 |     "preact"
 7 |   ],
 8 |   "description": "Create Preact apps with no build configuration.",
 9 |   "repository": "alexkuz/create-preact-app",
10 |   "license": "BSD-3-Clause",
11 |   "bugs": {
12 |     "url": "https://github.com/alexkuz/create-preact-app/issues"
13 |   },
14 |   "files": [
15 |     "index.js"
16 |   ],
17 |   "bin": {
18 |     "create-preact-app": "./index.js"
19 |   },
20 |   "dependencies": {
21 |     "chalk": "^1.1.1",
22 |     "cross-spawn": "^4.0.0",
23 |     "minimist": "^1.2.0",
24 |     "path-exists": "^3.0.0",
25 |     "semver": "^5.0.3"
26 |   }
27 | }
28 | 


--------------------------------------------------------------------------------
/template/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 6 |     <link rel="shortcut icon" href="./src/favicon.ico">
 7 |     <title>React App</title>
 8 |   </head>
 9 |   <body>
10 |     <div id="root"></div>
11 |     <!--
12 |       This HTML file is a template.
13 |       If you open it directly in the browser, you will see an empty page.
14 | 
15 |       You can add webfonts, meta tags, or analytics to this file.
16 |       The build step will place the bundled scripts into the <body> tag.
17 | 
18 |       To begin the development, run `npm start` in this folder.
19 |       To create a production bundle, use `npm run build`.
20 |     -->
21 |   </body>
22 | </html>
23 | 


--------------------------------------------------------------------------------
/config/env.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Copyright (c) 2015-present, Facebook, Inc.
 3 |  * All rights reserved.
 4 |  *
 5 |  * This source code is licensed under the BSD-style license found in the
 6 |  * LICENSE file in the root directory of this source tree. An additional grant
 7 |  * of patent rights can be found in the PATENTS file in the same directory.
 8 |  */
 9 | 
10 | // Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be
11 | // injected into the application via DefinePlugin in Webpack configuration.
12 | 
13 | var REACT_APP = /^REACT_APP_/i;
14 | var NODE_ENV = JSON.stringify(process.env.NODE_ENV || 'development');
15 | 
16 | module.exports = Object
17 |   .keys(process.env)
18 |   .filter(key => REACT_APP.test(key))
19 |   .reduce((env, key) => {
20 |     env['process.env.' + key] = JSON.stringify(process.env[key]);
21 |     return env;
22 |   }, {
23 |     'process.env.NODE_ENV': NODE_ENV
24 |   });
25 | 


--------------------------------------------------------------------------------
/scripts/test.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Copyright (c) 2015-present, Facebook, Inc.
 3 |  * All rights reserved.
 4 |  *
 5 |  * This source code is licensed under the BSD-style license found in the
 6 |  * LICENSE file in the root directory of this source tree. An additional grant
 7 |  * of patent rights can be found in the PATENTS file in the same directory.
 8 |  */
 9 | 
10 | process.env.NODE_ENV = 'test';
11 | 
12 | const createJestConfig = require('./utils/createJestConfig');
13 | const jest = require('jest');
14 | const path = require('path');
15 | const paths = require('../config/paths');
16 | 
17 | const argv = process.argv.slice(2);
18 | 
19 | const index = argv.indexOf('--debug-template');
20 | if (index !== -1) {
21 |   argv.splice(index, 1);
22 | }
23 | 
24 | argv.push('--config', JSON.stringify(createJestConfig(
25 |   relativePath => path.resolve(__dirname, '..', relativePath),
26 |   path.resolve(paths.appSrc, '..')
27 | )));
28 | 
29 | jest.run(argv);
30 | 


--------------------------------------------------------------------------------
/scripts/utils/createJestConfig.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Copyright (c) 2015-present, Facebook, Inc.
 3 |  * All rights reserved.
 4 |  *
 5 |  * This source code is licensed under the BSD-style license found in the
 6 |  * LICENSE file in the root directory of this source tree. An additional grant
 7 |  * of patent rights can be found in the PATENTS file in the same directory.
 8 |  */
 9 | 
10 | module.exports = (resolve, rootDir) => {
11 |   const config = {
12 |     automock: false,
13 |     moduleNameMapper: {
14 |       '^[./a-zA-Z0-9$_-]+\\.(jpg|png|gif|eot|svg|ttf|woff|woff2|mp4|webm)$': resolve('config/jest/FileStub.js'),
15 |       '^[./a-zA-Z0-9$_-]+\\.css$': resolve('config/jest/CSSStub.js')
16 |     },
17 |     persistModuleRegistryBetweenSpecs: true,
18 |     scriptPreprocessor: resolve('config/jest/transform.js'),
19 |     setupFiles: [
20 |       resolve('config/polyfills.js')
21 |     ],
22 |     setupTestFrameworkScriptFile: resolve('config/jest/environment.js'),
23 |     testPathIgnorePatterns: ['<rootDir>/node_modules/', '<rootDir>/build/'],
24 |     // Allow three popular conventions:
25 |     // **/__tests__/*.js
26 |     // **/*.test.js
27 |     // **/*.spec.js
28 |     testRegex: '(__tests__/.*|\\.(test|spec))\\.js$',
29 |     testEnvironment: 'node',
30 |     verbose: true
31 |   };
32 |   if (rootDir) {
33 |     config.rootDir = rootDir;
34 |   }
35 |   return config;
36 | };
37 | 


--------------------------------------------------------------------------------
/scripts/utils/WatchMissingNodeModulesPlugin.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Copyright (c) 2015-present, Facebook, Inc.
 3 |  * All rights reserved.
 4 |  *
 5 |  * This source code is licensed under the BSD-style license found in the
 6 |  * LICENSE file in the root directory of this source tree. An additional grant
 7 |  * of patent rights can be found in the PATENTS file in the same directory.
 8 |  */
 9 | 
10 | // This Webpack plugin ensures `npm install <library>` forces a project rebuild.
11 | // We’re not sure why this isn't Webpack's default behavior.
12 | // See https://github.com/facebookincubator/create-react-app/issues/186.
13 | 
14 | function WatchMissingNodeModulesPlugin(nodeModulesPath) {
15 |   this.nodeModulesPath = nodeModulesPath;
16 | }
17 | 
18 | WatchMissingNodeModulesPlugin.prototype.apply = function (compiler) {
19 |   compiler.plugin('emit', (compilation, callback) => {
20 |     var missingDeps = compilation.missingDependencies;
21 |     var nodeModulesPath = this.nodeModulesPath;
22 | 
23 |     // If any missing files are expected to appear in node_modules...
24 |     if (missingDeps.some(file => file.indexOf(nodeModulesPath) !== -1)) {
25 |       // ...tell webpack to watch node_modules recursively until they appear.
26 |       compilation.contextDependencies.push(nodeModulesPath);
27 |     }
28 | 
29 |     callback();
30 |   });
31 | }
32 | 
33 | module.exports = WatchMissingNodeModulesPlugin;
34 | 


--------------------------------------------------------------------------------
/scripts/utils/chrome.applescript:
--------------------------------------------------------------------------------
 1 | -- Copyright (c) 2015-present, Facebook, Inc.
 2 | -- All rights reserved.
 3 | --
 4 | -- This source code is licensed under the BSD-style license found in the
 5 | -- LICENSE file in the root directory of this source tree. An additional grant
 6 | -- of patent rights can be found in the PATENTS file in the same directory.
 7 | on run argv
 8 |   set theURL to item 1 of argv
 9 | 
10 |   tell application "Chrome"
11 | 
12 |     if (count every window) = 0 then
13 |       make new window
14 |     end if
15 | 
16 |     -- Find a tab currently running the debugger
17 |     set found to false
18 |     set theTabIndex to -1
19 |     repeat with theWindow in every window
20 |       set theTabIndex to 0
21 |       repeat with theTab in every tab of theWindow
22 |         set theTabIndex to theTabIndex + 1
23 |         if theTab's URL is theURL then
24 |           set found to true
25 |           exit repeat
26 |         end if
27 |       end repeat
28 | 
29 |       if found then
30 |         exit repeat
31 |       end if
32 |     end repeat
33 | 
34 |     if found then
35 |       tell theTab to reload
36 |       set index of theWindow to 1
37 |       set theWindow's active tab index to theTabIndex
38 |     else
39 |       tell window 1
40 |         activate
41 |         make new tab with properties {URL:theURL}
42 |       end tell
43 |     end if
44 |   end tell
45 | end run
46 | 


--------------------------------------------------------------------------------
/scripts/utils/prompt.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Copyright (c) 2015-present, Facebook, Inc.
 3 |  * All rights reserved.
 4 |  *
 5 |  * This source code is licensed under the BSD-style license found in the
 6 |  * LICENSE file in the root directory of this source tree. An additional grant
 7 |  * of patent rights can be found in the PATENTS file in the same directory.
 8 |  */
 9 | 
10 | var rl = require('readline');
11 | 
12 | // Convention: "no" should be the conservative choice.
13 | // If you mistype the answer, we'll always take it as a "no".
14 | // You can control the behavior on <Enter> with `isYesDefault`.
15 | module.exports = function (question, isYesDefault) {
16 |   if (typeof isYesDefault !== 'boolean') {
17 |     throw new Error('Provide explicit boolean isYesDefault as second argument.');
18 |   }
19 |   return new Promise(resolve => {
20 |     var rlInterface = rl.createInterface({
21 |       input: process.stdin,
22 |       output: process.stdout,
23 |     });
24 | 
25 |     var hint = isYesDefault === true ? '[Y/n]' : '[y/N]';
26 |     var message = question + ' ' + hint + '\n';
27 | 
28 |     rlInterface.question(message, function(answer) {
29 |       rlInterface.close();
30 | 
31 |       var useDefault = answer.trim().length === 0;
32 |       if (useDefault) {
33 |         return resolve(isYesDefault);
34 |       }
35 | 
36 |       var isYes = answer.match(/^(yes|y)$/i);
37 |       return resolve(isYes);
38 |     });
39 |   });
40 | };
41 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | BSD License
 2 | 
 3 | For create-react-app software
 4 | 
 5 | Copyright (c) 2016-present, Facebook, Inc. All rights reserved.
 6 | 
 7 | Redistribution and use in source and binary forms, with or without modification,
 8 | are permitted provided that the following conditions are met:
 9 | 
10 |  * Redistributions of source code must retain the above copyright notice, this
11 |    list of conditions and the following disclaimer.
12 | 
13 |  * Redistributions in binary form must reproduce the above copyright notice,
14 |    this list of conditions and the following disclaimer in the documentation
15 |    and/or other materials provided with the distribution.
16 | 
17 |  * Neither the name Facebook nor the names of its contributors may be used to
18 |    endorse or promote products derived from this software without specific
19 |    prior written permission.
20 | 
21 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
22 | ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
23 | WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
24 | DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR
25 | ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
26 | (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
27 | LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON
28 | ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
29 | (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
30 | SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
31 | 


--------------------------------------------------------------------------------
/tasks/release.sh:
--------------------------------------------------------------------------------
 1 | #!/bin/bash
 2 | # Copyright (c) 2015-present, Facebook, Inc.
 3 | # All rights reserved.
 4 | #
 5 | # This source code is licensed under the BSD-style license found in the
 6 | # LICENSE file in the root directory of this source tree. An additional grant
 7 | # of patent rights can be found in the PATENTS file in the same directory.
 8 | 
 9 | # Start in tests/ even if run from root directory
10 | cd "$(dirname "$0")"
11 | 
12 | # Exit the script on any command with non 0 return code
13 | # We assume that all the commands in the pipeline set their return code
14 | # properly and that we do not need to validate that the output is correct
15 | set -e
16 | 
17 | # Echo every command being executed
18 | set -x
19 | 
20 | # Go to root
21 | cd ..
22 | 
23 | # You can only release with npm >= 3
24 | if [ $(npm -v | head -c 1) -lt 3 ]; then
25 |   echo "Releasing requires npm >= 3. Aborting.";
26 |   exit 1;
27 | fi;
28 | 
29 | if [ -n "$(git status --porcelain)" ]; then
30 |   echo "Your git status is not clean. Aborting.";
31 |   exit 1;
32 | fi
33 | 
34 | # Update deps
35 | rm -rf node_modules
36 | rm -rf ~/.npm
37 | npm cache clear
38 | npm install
39 | 
40 | # Force dedupe
41 | npm dedupe
42 | 
43 | # Don't bundle fsevents because it is optional and OS X-only
44 | # Since it's in optionalDependencies, it will attempt install outside bundle
45 | rm -rf node_modules/fsevents
46 | 
47 | # This modifies package.json to copy all dependencies to bundledDependencies
48 | # We will revert package.json back after release to avoid doing it every time
49 | node ./node_modules/.bin/bundle-deps
50 | 
51 | # Go!
52 | npm publish "$@"
53 | 
54 | # Discard changes to package.json
55 | git checkout -- .
56 | 


--------------------------------------------------------------------------------
/config/babel.prod.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Copyright (c) 2015-present, Facebook, Inc.
 3 |  * All rights reserved.
 4 |  *
 5 |  * This source code is licensed under the BSD-style license found in the
 6 |  * LICENSE file in the root directory of this source tree. An additional grant
 7 |  * of patent rights can be found in the PATENTS file in the same directory.
 8 |  */
 9 | 
10 | module.exports = {
11 |   // Don't try to find .babelrc because we want to force this configuration.
12 |   babelrc: false,
13 |   presets: [
14 |     // let, const, destructuring, classes, modules
15 |     require.resolve('babel-preset-es2015'),
16 |     // exponentiation
17 |     require.resolve('babel-preset-es2016'),
18 |     // JSX, Flow
19 |     require.resolve('babel-preset-react')
20 |   ],
21 |   plugins: [
22 |     // function x(a, b, c,) { }
23 |     require.resolve('babel-plugin-syntax-trailing-function-commas'),
24 |     // await fetch()
25 |     require.resolve('babel-plugin-syntax-async-functions'),
26 |     // class { handleClick = () => { } }
27 |     require.resolve('babel-plugin-transform-class-properties'),
28 |     // { ...todo, completed: true }
29 |     require.resolve('babel-plugin-transform-object-rest-spread'),
30 |     // function* () { yield 42; yield 43; }
31 |     require.resolve('babel-plugin-transform-regenerator'),
32 |     // Polyfills the runtime needed for async/await and generators
33 |     [require.resolve('babel-plugin-transform-runtime'), {
34 |       helpers: false,
35 |       polyfill: false,
36 |       regenerator: true
37 |     }],
38 |     // Optimization: hoist JSX that never changes out of render()
39 |     require.resolve('babel-plugin-transform-react-constant-elements'),
40 |     [require.resolve('babel-plugin-transform-react-jsx'), {
41 |       pragma: 'h'
42 |     }]
43 |   ]
44 | };
45 | 


--------------------------------------------------------------------------------
/config/babel.dev.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Copyright (c) 2015-present, Facebook, Inc.
 3 |  * All rights reserved.
 4 |  *
 5 |  * This source code is licensed under the BSD-style license found in the
 6 |  * LICENSE file in the root directory of this source tree. An additional grant
 7 |  * of patent rights can be found in the PATENTS file in the same directory.
 8 |  */
 9 | 
10 | module.exports = {
11 |   // Don't try to find .babelrc because we want to force this configuration.
12 |   babelrc: false,
13 |   // This is a feature of `babel-loader` for webpack (not Babel itself).
14 |   // It enables caching results in OS temporary directory for faster rebuilds.
15 |   cacheDirectory: true,
16 |   presets: [
17 |     // let, const, destructuring, classes, modules
18 |     require.resolve('babel-preset-es2015'),
19 |     // exponentiation
20 |     require.resolve('babel-preset-es2016'),
21 |     // JSX, Flow
22 |     require.resolve('babel-preset-react')
23 |   ],
24 |   plugins: [
25 |     // function x(a, b, c,) { }
26 |     require.resolve('babel-plugin-syntax-trailing-function-commas'),
27 |     // await fetch()
28 |     require.resolve('babel-plugin-syntax-async-functions'),
29 |     // class { handleClick = () => { } }
30 |     require.resolve('babel-plugin-transform-class-properties'),
31 |     // { ...todo, completed: true }
32 |     require.resolve('babel-plugin-transform-object-rest-spread'),
33 |     // function* () { yield 42; yield 43; }
34 |     require.resolve('babel-plugin-transform-regenerator'),
35 |     // Polyfills the runtime needed for async/await and generators
36 |     [require.resolve('babel-plugin-transform-runtime'), {
37 |       helpers: false,
38 |       polyfill: false,
39 |       regenerator: true
40 |     }],
41 |     [require.resolve('babel-plugin-transform-react-jsx'), {
42 |       pragma: 'h'
43 |     }]
44 |   ]
45 | };
46 | 


--------------------------------------------------------------------------------
/PATENTS:
--------------------------------------------------------------------------------
 1 | Additional Grant of Patent Rights Version 2
 2 | 
 3 | "Software" means the create-react-app software distributed by Facebook, Inc.
 4 | 
 5 | Facebook, Inc. ("Facebook") hereby grants to each recipient of the Software
 6 | ("you") a perpetual, worldwide, royalty-free, non-exclusive, irrevocable
 7 | (subject to the termination provision below) license under any Necessary
 8 | Claims, to make, have made, use, sell, offer to sell, import, and otherwise
 9 | transfer the Software. For avoidance of doubt, no license is granted under
10 | Facebook’s rights in any patent claims that are infringed by (i) modifications
11 | to the Software made by you or any third party or (ii) the Software in
12 | combination with any software or other technology.
13 | 
14 | The license granted hereunder will terminate, automatically and without notice,
15 | if you (or any of your subsidiaries, corporate affiliates or agents) initiate
16 | directly or indirectly, or take a direct financial interest in, any Patent
17 | Assertion: (i) against Facebook or any of its subsidiaries or corporate
18 | affiliates, (ii) against any party if such Patent Assertion arises in whole or
19 | in part from any software, technology, product or service of Facebook or any of
20 | its subsidiaries or corporate affiliates, or (iii) against any party relating
21 | to the Software. Notwithstanding the foregoing, if Facebook or any of its
22 | subsidiaries or corporate affiliates files a lawsuit alleging patent
23 | infringement against you in the first instance, and you respond by filing a
24 | patent infringement counterclaim in that lawsuit against that party that is
25 | unrelated to the Software, the license granted hereunder will not terminate
26 | under section (i) of this paragraph due to such counterclaim.
27 | 
28 | A "Necessary Claim" is a claim of a patent owned by Facebook that is
29 | necessarily infringed by the Software standing alone.
30 | 
31 | A "Patent Assertion" is any lawsuit or other action alleging direct, indirect,
32 | or contributory infringement or inducement to infringe any patent, including a
33 | cross-claim or counterclaim.
34 | 


--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
 1 | # Contributing to `create-react-app`
 2 | 
 3 | ♥ `create-react-app` and want to get involved? Thanks! There are plenty of ways you can help!
 4 | 
 5 | Please take a moment to review this document in order to make the contribution process easy and effective for everyone involved.
 6 | 
 7 | Following these guidelines helps to communicate that you respect the time of the developers managing and developing this open source project. In return, they should reciprocate that respect in addressing your issue or assessing patches and features.
 8 | 
 9 | ## Core ideas
10 | 
11 | We do not want any flags or configuration, that would defeat the purpose of this tool. We want to find good defaults and actively find ways to improve the developer experience.
12 | 
13 | We try not to make any controversial choices. If the community is split between different tools, we won't just pick the least controversial or most popular, the tool itself should be agnostic between them.
14 | 
15 | *These ideas are subject to change at any time*
16 | 
17 | ## Submitting a Pull Request
18 | 
19 | Good pull requests - patches, improvements, new features - are a fantastic help. They should remain focused in scope and avoid containing unrelated commits.
20 | 
21 | Please **ask first** if somebody else is already working on this or the core developers think your feature is in-scope for `create-react-app`. Generally always have a related issue with discussions for whatever you are including.
22 | 
23 | Please also provide a **test plan**, i.e. specify how you verified what you added works.
24 | 
25 | ## Setting up a local copy of the repository
26 | 
27 | 1. Clone the repo with `git clone https://github.com/facebookincubator/create-react-app`
28 | 
29 | 2. Run `npm install` in the root `create-react-app` folder **and** the `create-react-app/global-cli` folder
30 | 
31 | Once it is done, you can modify any file locally and run `npm start` or `npm run build` just like in a generated project.
32 | 
33 | If you want to try out the end-to-end flow with the global CLI, you can do this too:
34 | 
35 | ```
36 | npm run create-react-app my-app
37 | cd my-app
38 | ```
39 | 
40 | and then run `npm start` or `npm run build`.
41 | 
42 | *Many thanks to [h5bp](https://github.com/h5bp/html5-boilerplate/blob/master/CONTRIBUTING.md) for the inspiration with this contributing guide*
43 | 


--------------------------------------------------------------------------------
/config/paths.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Copyright (c) 2015-present, Facebook, Inc.
 3 |  * All rights reserved.
 4 |  *
 5 |  * This source code is licensed under the BSD-style license found in the
 6 |  * LICENSE file in the root directory of this source tree. An additional grant
 7 |  * of patent rights can be found in the PATENTS file in the same directory.
 8 |  */
 9 | 
10 | // TODO: we can split this file into several files (pre-eject, post-eject, test)
11 | // and use those instead. This way we don't need to branch here.
12 | 
13 | var path = require('path');
14 | 
15 | // True after ejecting, false when used as a dependency
16 | var isEjected = (
17 |   path.resolve(path.join(__dirname, '..')) ===
18 |   path.resolve(process.cwd())
19 | );
20 | 
21 | // Are we developing create-react-app locally?
22 | var isInCreateReactAppSource = (
23 |   process.argv.some(arg => arg.indexOf('--debug-template') > -1)
24 | );
25 | 
26 | function resolveOwn(relativePath) {
27 |   return path.resolve(__dirname, relativePath);
28 | }
29 | 
30 | function resolveApp(relativePath) {
31 |   return path.resolve(relativePath);
32 | }
33 | 
34 | if (isInCreateReactAppSource) {
35 |   // create-react-app development: we're in ./config/
36 |   module.exports = {
37 |     appBuild: resolveOwn('../build'),
38 |     appHtml: resolveOwn('../template/index.html'),
39 |     appPackageJson: resolveOwn('../package.json'),
40 |     appSrc: resolveOwn('../template/src'),
41 |     appNodeModules: resolveOwn('../node_modules'),
42 |     ownNodeModules: resolveOwn('../node_modules')
43 |   };
44 | } else if (!isEjected) {
45 |   // before eject: we're in ./node_modules/react-scripts/config/
46 |   module.exports = {
47 |     appBuild: resolveApp('build'),
48 |     appHtml: resolveApp('index.html'),
49 |     appPackageJson: resolveApp('package.json'),
50 |     appSrc: resolveApp('src'),
51 |     appNodeModules: resolveApp('node_modules'),
52 |     // this is empty with npm3 but node resolution searches higher anyway:
53 |     ownNodeModules: resolveOwn('../node_modules')
54 |   };
55 | } else {
56 |   // after eject: we're in ./config/
57 |   module.exports = {
58 |     appBuild: resolveApp('build'),
59 |     appHtml: resolveApp('index.html'),
60 |     appPackageJson: resolveApp('package.json'),
61 |     appSrc: resolveApp('src'),
62 |     appNodeModules: resolveApp('node_modules'),
63 |     ownNodeModules: resolveApp('node_modules')
64 |   };
65 | }
66 | 


--------------------------------------------------------------------------------
/template/src/logo.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3">
2 |     <g fill="#61DAFB">
3 |         <path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/>
4 |         <circle cx="420.9" cy="296.5" r="45.7"/>
5 |         <path d="M520.5 78.1z"/>
6 |     </g>
7 | </svg>
8 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "preact-scripts",
 3 |   "version": "0.3.0-alpha",
 4 |   "description": "Configuration and scripts for Create Preact App.",
 5 |   "repository": "alexkuz/create-preact-app",
 6 |   "license": "BSD-3-Clause",
 7 |   "engines": {
 8 |     "node": ">=4"
 9 |   },
10 |   "bugs": {
11 |     "url": "https://github.com/alexkuz/create-preact-app/issues"
12 |   },
13 |   "scripts": {
14 |     "build": "node scripts/build.js --debug-template",
15 |     "create-preact-app": "node global-cli/index.js --scripts-version \"$PWD/`npm pack`\"",
16 |     "e2e": "tasks/e2e.sh",
17 |     "start": "node scripts/start.js --debug-template",
18 |     "test": "node scripts/test.js --debug-template"
19 |   },
20 |   "files": [
21 |     "PATENTS",
22 |     "bin",
23 |     "config",
24 |     "scripts",
25 |     "template"
26 |   ],
27 |   "bin": {
28 |     "preact-scripts": "./bin/preact-scripts.js"
29 |   },
30 |   "dependencies": {
31 |     "autoprefixer": "6.4.0",
32 |     "babel-core": "6.11.4",
33 |     "babel-eslint": "6.1.2",
34 |     "babel-jest": "14.1.0",
35 |     "babel-loader": "6.2.4",
36 |     "babel-plugin-syntax-async-functions": "6.8.0",
37 |     "babel-plugin-syntax-trailing-function-commas": "6.8.0",
38 |     "babel-plugin-transform-class-properties": "6.11.5",
39 |     "babel-plugin-transform-object-rest-spread": "6.8.0",
40 |     "babel-plugin-transform-react-constant-elements": "6.9.1",
41 |     "babel-plugin-transform-regenerator": "6.11.4",
42 |     "babel-plugin-transform-runtime": "6.12.0",
43 |     "babel-preset-es2015": "6.9.0",
44 |     "babel-preset-es2016": "6.11.3",
45 |     "babel-preset-react": "6.11.1",
46 |     "babel-runtime": "6.11.6",
47 |     "case-sensitive-paths-webpack-plugin": "1.1.3",
48 |     "chalk": "1.1.3",
49 |     "connect-history-api-fallback": "1.3.0",
50 |     "cross-spawn": "4.0.0",
51 |     "css-loader": "0.23.1",
52 |     "detect-port": "1.0.0",
53 |     "eslint": "3.2.2",
54 |     "eslint-loader": "1.4.1",
55 |     "eslint-plugin-flowtype": "2.4.0",
56 |     "eslint-plugin-import": "1.12.0",
57 |     "eslint-plugin-jsx-a11y": "2.0.1",
58 |     "eslint-plugin-react": "5.2.2",
59 |     "extract-text-webpack-plugin": "1.0.1",
60 |     "file-loader": "0.9.0",
61 |     "filesize": "3.3.0",
62 |     "fs-extra": "0.30.0",
63 |     "gzip-size": "3.0.0",
64 |     "html-loader": "0.4.3",
65 |     "html-webpack-plugin": "2.22.0",
66 |     "http-proxy-middleware": "0.17.0",
67 |     "jest": "14.1.0",
68 |     "json-loader": "0.5.4",
69 |     "object-assign": "4.1.0",
70 |     "opn": "4.0.2",
71 |     "path-exists": "3.0.0",
72 |     "postcss-loader": "0.9.1",
73 |     "promise": "7.1.1",
74 |     "recursive-readdir": "2.0.0",
75 |     "rimraf": "2.5.4",
76 |     "strip-ansi": "3.0.1",
77 |     "style-loader": "0.13.1",
78 |     "url-loader": "0.5.7",
79 |     "webpack": "1.13.1",
80 |     "webpack-dev-server": "1.14.1",
81 |     "whatwg-fetch": "1.0.0"
82 |   },
83 |   "devDependencies": {
84 |     "bundle-deps": "1.0.0",
85 |     "preact": "^5.6.0",
86 |     "react-test-renderer": "^15.3.0"
87 |   },
88 |   "optionalDependencies": {
89 |     "fsevents": "1.0.14"
90 |   }
91 | }
92 | 


--------------------------------------------------------------------------------
/tasks/e2e.sh:
--------------------------------------------------------------------------------
  1 | #!/bin/bash
  2 | # Copyright (c) 2015-present, Facebook, Inc.
  3 | # All rights reserved.
  4 | #
  5 | # This source code is licensed under the BSD-style license found in the
  6 | # LICENSE file in the root directory of this source tree. An additional grant
  7 | # of patent rights can be found in the PATENTS file in the same directory.
  8 | 
  9 | # Start in tests/ even if run from root directory
 10 | cd "$(dirname "$0")"
 11 | 
 12 | function cleanup {
 13 |   echo 'Cleaning up.'
 14 |   cd $initial_path
 15 |   rm ../template/src/__tests__/__snapshots__/App-test.js.snap
 16 |   rm -rf $temp_cli_path $temp_app_path
 17 | }
 18 | 
 19 | function handle_error {
 20 |   echo "$(basename $0): \033[31mERROR!\033[m An error was encountered executing \033[36mline $1\033[m."
 21 |   cleanup
 22 |   echo 'Exiting with error.'
 23 |   exit 1
 24 | }
 25 | 
 26 | function handle_exit {
 27 |   cleanup
 28 |   echo 'Exiting without error.'
 29 |   exit
 30 | }
 31 | 
 32 | # Exit the script with a helpful error message when any error is encountered
 33 | trap 'set +x; handle_error $LINENO $BASH_COMMAND' ERR
 34 | 
 35 | # Cleanup before exit on any termination signal
 36 | trap 'set +x; handle_exit' SIGQUIT SIGTERM SIGINT SIGKILL SIGHUP
 37 | 
 38 | # Echo every command being executed
 39 | set -x
 40 | 
 41 | # npm pack the two directories to make sure they are valid npm modules
 42 | initial_path=$PWD
 43 | 
 44 | cd ..
 45 | 
 46 | # A hacky way to avoid bundling dependencies.
 47 | # Packing with them enabled takes too much memory, and Travis crashes.
 48 | # End to end script is meant to run on Travis so it's not a big deal.
 49 | # If you run it locally, you'll need to `git checkout -- package.json`.
 50 | perl -i -p0e 's/bundledDependencies.*?]/bundledDependencies": []/s' package.json
 51 | 
 52 | # Pack react-scripts
 53 | npm install
 54 | scripts_path=$PWD/`npm pack`
 55 | 
 56 | # lint
 57 | ./node_modules/.bin/eslint --ignore-path .gitignore ./
 58 | 
 59 | # Test local start command
 60 | npm start -- --smoke-test
 61 | 
 62 | # Test local build command
 63 | npm run build
 64 | 
 65 | # Check for expected output
 66 | test -e build/*.html
 67 | test -e build/static/js/*.js
 68 | test -e build/static/css/*.css
 69 | test -e build/static/media/*.svg
 70 | test -e build/favicon.ico
 71 | 
 72 | # Run tests
 73 | npm run test
 74 | test -e template/src/__tests__/__snapshots__/App-test.js.snap
 75 | 
 76 | # Pack CLI
 77 | cd global-cli
 78 | npm install
 79 | cli_path=$PWD/`npm pack`
 80 | 
 81 | # Install the cli in a temporary location ( http://unix.stackexchange.com/a/84980 )
 82 | temp_cli_path=`mktemp -d 2>/dev/null || mktemp -d -t 'temp_cli_path'`
 83 | cd $temp_cli_path
 84 | npm install $cli_path
 85 | 
 86 | # Install the app in a temporary location
 87 | temp_app_path=`mktemp -d 2>/dev/null || mktemp -d -t 'temp_app_path'`
 88 | cd $temp_app_path
 89 | node "$temp_cli_path"/node_modules/create-preact-app/index.js --scripts-version=$scripts_path test-app
 90 | cd test-app
 91 | 
 92 | # Test the build
 93 | npm run build
 94 | 
 95 | # Check for expected output
 96 | test -e build/*.html
 97 | test -e build/static/js/*.js
 98 | test -e build/static/css/*.css
 99 | test -e build/static/media/*.svg
100 | test -e build/favicon.ico
101 | 
102 | # Run tests
103 | npm run test
104 | test -e src/__tests__/__snapshots__/App-test.js.snap
105 | 
106 | # Test the server
107 | npm start -- --smoke-test
108 | 
109 | # Eject and test the build
110 | echo yes | npm run eject
111 | npm run build
112 | 
113 | # Check for expected output
114 | test -e build/*.html
115 | test -e build/static/js/*.js
116 | test -e build/static/css/*.css
117 | test -e build/static/media/*.svg
118 | test -e build/favicon.ico
119 | 
120 | # Run tests
121 | npm run test
122 | test -e src/__tests__/__snapshots__/App-test.js.snap
123 | 
124 | # Test the server
125 | npm start -- --smoke-test
126 | 
127 | # Cleanup
128 | cleanup
129 | 


--------------------------------------------------------------------------------
/scripts/init.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * Copyright (c) 2015-present, Facebook, Inc.
  3 |  * All rights reserved.
  4 |  *
  5 |  * This source code is licensed under the BSD-style license found in the
  6 |  * LICENSE file in the root directory of this source tree. An additional grant
  7 |  * of patent rights can be found in the PATENTS file in the same directory.
  8 |  */
  9 | 
 10 | var fs = require('fs-extra');
 11 | var path = require('path');
 12 | var spawn = require('cross-spawn');
 13 | var pathExists = require('path-exists');
 14 | var chalk = require('chalk');
 15 | 
 16 | module.exports = function(appPath, appName, verbose, originalDirectory) {
 17 |   var ownPath = path.join(appPath, 'node_modules', 'preact-scripts');
 18 | 
 19 |   var appPackage = require(path.join(appPath, 'package.json'));
 20 |   var ownPackage = require(path.join(ownPath, 'package.json'));
 21 | 
 22 |   // Copy over some of the devDependencies
 23 |   appPackage.dependencies = appPackage.dependencies || {};
 24 |   appPackage.devDependencies = appPackage.devDependencies || {};
 25 |   ['preact'].forEach(function (key) {
 26 |     appPackage.dependencies[key] = ownPackage.devDependencies[key];
 27 |   });
 28 |   ['react-test-renderer'].forEach(function (key) {
 29 |     appPackage.devDependencies[key] = ownPackage.devDependencies[key];
 30 |   });
 31 | 
 32 |   // Setup the script rules
 33 |   appPackage.scripts = {};
 34 |   ['start', 'build', 'eject', 'test'].forEach(function(command) {
 35 |     appPackage.scripts[command] = 'preact-scripts ' + command;
 36 |   });
 37 | 
 38 |   // explicitly specify ESLint config path for editor plugins
 39 |   appPackage.eslintConfig = {
 40 |     extends: './node_modules/preact-scripts/config/eslint.js',
 41 |   };
 42 | 
 43 |   fs.writeFileSync(
 44 |     path.join(appPath, 'package.json'),
 45 |     JSON.stringify(appPackage, null, 2)
 46 |   );
 47 | 
 48 |   var readmeExists = pathExists.sync(path.join(appPath, 'README.md'));
 49 |   if (readmeExists) {
 50 |     fs.renameSync(path.join(appPath, 'README.md'), path.join(appPath, 'README.old.md'));
 51 |   }
 52 | 
 53 |   // Copy the files for the user
 54 |   fs.copySync(path.join(ownPath, 'template'), appPath);
 55 | 
 56 |   // Rename gitignore after the fact to prevent npm from renaming it to .npmignore
 57 |   // See: https://github.com/npm/npm/issues/1862
 58 |   fs.move(path.join(appPath, 'gitignore'), path.join(appPath, '.gitignore'), [], function (err) {
 59 |     if (err) {
 60 |       // Append if there's already a `.gitignore` file there
 61 |       if (err.code === 'EEXIST') {
 62 |         var data = fs.readFileSync(path.join(appPath, 'gitignore'));
 63 |         fs.appendFileSync(path.join(appPath, '.gitignore'), data);
 64 |         fs.unlinkSync(path.join(appPath, 'gitignore'));
 65 |       } else {
 66 |         throw err;
 67 |       }
 68 |     }
 69 |   });
 70 | 
 71 |   // Run another npm install for preact
 72 |   console.log('Installing preact from npm...');
 73 |   console.log();
 74 |   // TODO: having to do two npm installs is bad, can we avoid it?
 75 |   var args = [
 76 |     'install',
 77 |     verbose && '--verbose'
 78 |   ].filter(function(e) { return e; });
 79 |   var proc = spawn('npm', args, {stdio: 'inherit'});
 80 |   proc.on('close', function (code) {
 81 |     if (code !== 0) {
 82 |       console.error('`npm ' + args.join(' ') + '` failed');
 83 |       return;
 84 |     }
 85 | 
 86 |     // Display the most elegant way to cd.
 87 |     // This needs to handle an undefined originalDirectory for
 88 |     // backward compatibility with old global-cli's.
 89 |     var cdpath;
 90 |     if (originalDirectory &&
 91 |         path.join(originalDirectory, appName) === appPath) {
 92 |       cdpath = appName;
 93 |     } else {
 94 |       cdpath = appPath;
 95 |     }
 96 | 
 97 |     console.log();
 98 |     console.log('Success! Created ' + appName + ' at ' + appPath + '.');
 99 |     console.log('Inside that directory, you can run several commands:');
100 |     console.log();
101 |     console.log('  * npm start: Starts the development server.');
102 |     console.log('  * npm run build: Bundles the app into static files for production.');
103 |     console.log('  * npm run eject: Removes this tool. If you do this, you can’t go back!');
104 |     console.log();
105 |     console.log('We suggest that you begin by typing:');
106 |     console.log();
107 |     console.log('  cd', cdpath);
108 |     console.log('  npm start');
109 |     if (readmeExists) {
110 |       console.log();
111 |       console.log(chalk.yellow('You had a `README.md` file, we renamed it to `README.old.md`'));
112 |     }
113 |     console.log();
114 |     console.log('Happy hacking!');
115 |   });
116 | };
117 | 


--------------------------------------------------------------------------------
/scripts/eject.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * Copyright (c) 2015-present, Facebook, Inc.
  3 |  * All rights reserved.
  4 |  *
  5 |  * This source code is licensed under the BSD-style license found in the
  6 |  * LICENSE file in the root directory of this source tree. An additional grant
  7 |  * of patent rights can be found in the PATENTS file in the same directory.
  8 |  */
  9 | 
 10 | var createJestConfig = require('./utils/createJestConfig');
 11 | var fs = require('fs');
 12 | var path = require('path');
 13 | var prompt = require('./utils/prompt');
 14 | var rimrafSync = require('rimraf').sync;
 15 | var spawnSync = require('cross-spawn').sync;
 16 | 
 17 | prompt(
 18 |   'Are you sure you want to eject? This action is permanent.',
 19 |   false
 20 | ).then(shouldEject => {
 21 |   if (!shouldEject) {
 22 |     console.log('Close one! Eject aborted.');
 23 |     process.exit(1);
 24 |   }
 25 | 
 26 |   console.log('Ejecting...');
 27 |   console.log();
 28 | 
 29 |   var ownPath = path.join(__dirname, '..');
 30 |   var appPath = path.join(ownPath, '..', '..');
 31 |   var files = [
 32 |     path.join('config', 'babel.dev.js'),
 33 |     path.join('config', 'babel.prod.js'),
 34 |     path.join('config', 'flow', 'css.js.flow'),
 35 |     path.join('config', 'flow', 'file.js.flow'),
 36 |     path.join('config', 'eslint.js'),
 37 |     path.join('config', 'paths.js'),
 38 |     path.join('config', 'env.js'),
 39 |     path.join('config', 'polyfills.js'),
 40 |     path.join('config', 'webpack.config.dev.js'),
 41 |     path.join('config', 'webpack.config.prod.js'),
 42 |     path.join('config', 'jest', 'CSSStub.js'),
 43 |     path.join('config', 'jest', 'FileStub.js'),
 44 |     path.join('config', 'jest', 'environment.js'),
 45 |     path.join('config', 'jest', 'transform.js'),
 46 |     path.join('scripts', 'build.js'),
 47 |     path.join('scripts', 'start.js'),
 48 |     path.join('scripts', 'utils', 'chrome.applescript'),
 49 |     path.join('scripts', 'utils', 'prompt.js'),
 50 |     path.join('scripts', 'utils', 'WatchMissingNodeModulesPlugin.js')
 51 |   ];
 52 | 
 53 |   // Ensure that the app folder is clean and we won't override any files
 54 |   files.forEach(function(file) {
 55 |     if (fs.existsSync(path.join(appPath, file))) {
 56 |       console.error(
 57 |         '`' + file + '` already exists in your app folder. We cannot ' +
 58 |         'continue as you would lose all the changes in that file or directory. ' +
 59 |         'Please delete it (maybe make a copy for backup) and run this ' +
 60 |         'command again.'
 61 |       );
 62 |       process.exit(1);
 63 |     }
 64 |   });
 65 | 
 66 |   // Copy the files over
 67 |   fs.mkdirSync(path.join(appPath, 'config'));
 68 |   fs.mkdirSync(path.join(appPath, 'config', 'flow'));
 69 |   fs.mkdirSync(path.join(appPath, 'config', 'jest'));
 70 |   fs.mkdirSync(path.join(appPath, 'scripts'));
 71 |   fs.mkdirSync(path.join(appPath, 'scripts', 'utils'));
 72 | 
 73 |   files.forEach(function(file) {
 74 |     console.log('Copying ' + file + ' to ' + appPath);
 75 |     var content = fs
 76 |       .readFileSync(path.join(ownPath, file), 'utf8')
 77 |       // Remove license header from JS
 78 |       .replace(/^\/\*\*(\*(?!\/)|[^*])*\*\//, '')
 79 |       // Remove license header from AppleScript
 80 |       .replace(/^--.*\n/gm, '')
 81 |       .trim() + '\n';
 82 |     fs.writeFileSync(path.join(appPath, file), content);
 83 |   });
 84 |   console.log();
 85 | 
 86 |   var ownPackage = require(path.join(ownPath, 'package.json'));
 87 |   var appPackage = require(path.join(appPath, 'package.json'));
 88 | 
 89 |   console.log('Removing dependency: preact-scripts');
 90 |   delete appPackage.devDependencies['preact-scripts'];
 91 | 
 92 |   Object.keys(ownPackage.dependencies).forEach(function (key) {
 93 |     // For some reason optionalDependencies end up in dependencies after install
 94 |     if (ownPackage.optionalDependencies[key]) {
 95 |       return;
 96 |     }
 97 |     console.log('Adding dependency: ' + key);
 98 |     appPackage.devDependencies[key] = ownPackage.dependencies[key];
 99 |   });
100 | 
101 |   console.log('Updating scripts');
102 |   Object.keys(appPackage.scripts).forEach(function (key) {
103 |     appPackage.scripts[key] = 'node ./scripts/' + key + '.js'
104 |   });
105 |   delete appPackage.scripts['eject'];
106 | 
107 |   appPackage.scripts.test = 'jest';
108 |   appPackage.jest = createJestConfig(
109 |     filePath => path.join('<rootDir>', filePath)
110 |   );
111 | 
112 |   // explicitly specify ESLint config path for editor plugins
113 |   appPackage.eslintConfig = {
114 |     extends: './config/eslint.js',
115 |   };
116 | 
117 |   console.log('Writing package.json');
118 |   fs.writeFileSync(
119 |     path.join(appPath, 'package.json'),
120 |     JSON.stringify(appPackage, null, 2)
121 |   );
122 |   console.log();
123 | 
124 |   console.log('Running npm install...');
125 |   rimrafSync(ownPath);
126 |   spawnSync('npm', ['install'], {stdio: 'inherit'});
127 |   console.log('Ejected successfully!');
128 |   console.log();
129 | 
130 |   console.log('Please consider sharing why you ejected in this survey:');
131 |   console.log('  http://goo.gl/forms/Bi6CZjk1EqsdelXk1');
132 |   console.log();
133 | });
134 | 


--------------------------------------------------------------------------------
/global-cli/index.js:
--------------------------------------------------------------------------------
  1 | #!/usr/bin/env node
  2 | 
  3 | /**
  4 |  * Copyright (c) 2015-present, Facebook, Inc.
  5 |  * All rights reserved.
  6 |  *
  7 |  * This source code is licensed under the BSD-style license found in the
  8 |  * LICENSE file in the root directory of this source tree. An additional grant
  9 |  * of patent rights can be found in the PATENTS file in the same directory.
 10 |  */
 11 | 
 12 | // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 13 | //   /!\ DO NOT MODIFY THIS FILE /!\
 14 | // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 15 | //
 16 | // create-preact-app is installed globally on people's computers. This means
 17 | // that it is extremely difficult to have them upgrade the version and
 18 | // because there's only one global version installed, it is very prone to
 19 | // breaking changes.
 20 | //
 21 | // The only job of create-preact-app is to init the repository and then
 22 | // forward all the commands to the local version of create-preact-app.
 23 | //
 24 | // If you need to add a new command, please add it to the scripts/ folder.
 25 | //
 26 | // The only reason to modify this file is to add more warnings and
 27 | // troubleshooting information for the `create-preact-app` command.
 28 | //
 29 | // Do not make breaking changes! We absolutely don't want to have to
 30 | // tell people to update their global version of create-preact-app.
 31 | //
 32 | // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 33 | //   /!\ DO NOT MODIFY THIS FILE /!\
 34 | // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 35 | 
 36 | 'use strict';
 37 | 
 38 | var fs = require('fs');
 39 | var path = require('path');
 40 | var spawn = require('cross-spawn');
 41 | var chalk = require('chalk');
 42 | var semver = require('semver');
 43 | var argv = require('minimist')(process.argv.slice(2));
 44 | var pathExists = require('path-exists');
 45 | 
 46 | /**
 47 |  * Arguments:
 48 |  *   --version - to print current version
 49 |  *   --verbose - to print logs while init
 50 |  *   --scripts-version <alternative package>
 51 |  *     Example of valid values:
 52 |  *     - a specific npm version: "0.22.0-rc1"
 53 |  *     - a .tgz archive from any npm repo: "https://registry.npmjs.org/react-scripts/-/react-scripts-0.20.0.tgz"
 54 |  *     - a package prepared with `npm pack`: "/Users/home/vjeux/create-react-app/react-scripts-0.22.0.tgz"
 55 |  */
 56 | var commands = argv._;
 57 | if (commands.length === 0) {
 58 |   if (argv.version) {
 59 |     console.log('create-preact-app version: ' + require('./package.json').version);
 60 |     process.exit();
 61 |   }
 62 |   console.error(
 63 |     'Usage: create-preact-app <project-directory> [--verbose]'
 64 |   );
 65 |   process.exit(1);
 66 | }
 67 | 
 68 | createApp(commands[0], argv.verbose, argv['scripts-version']);
 69 | 
 70 | function createApp(name, verbose, version) {
 71 |   var root = path.resolve(name);
 72 |   if (!pathExists.sync(name)) {
 73 |     fs.mkdirSync(root);
 74 |   } else if (!isGitHubBoilerplate(root)) {
 75 |     console.log('The directory `' + name + '` contains file(s) that could conflict. Aborting.');
 76 |     process.exit(1);
 77 |   }
 78 | 
 79 |   var appName = path.basename(root);
 80 |   console.log(
 81 |     'Creating a new Preact app in ' + root + '.'
 82 |   );
 83 |   console.log();
 84 | 
 85 |   var packageJson = {
 86 |     name: appName,
 87 |     version: '0.0.1',
 88 |     private: true,
 89 |   };
 90 |   fs.writeFileSync(
 91 |     path.join(root, 'package.json'),
 92 |     JSON.stringify(packageJson, null, 2)
 93 |   );
 94 |   var originalDirectory = process.cwd();
 95 |   process.chdir(root);
 96 | 
 97 |   console.log('Installing packages. This might take a couple minutes.');
 98 |   console.log('Installing preact-scripts from npm...');
 99 |   console.log();
100 | 
101 |   run(root, appName, version, verbose, originalDirectory);
102 | }
103 | 
104 | function run(root, appName, version, verbose, originalDirectory) {
105 |   var args = [
106 |     'install',
107 |     verbose && '--verbose',
108 |     '--save-dev',
109 |     '--save-exact',
110 |     getInstallPackage(version),
111 |   ].filter(function(e) { return e; });
112 |   var proc = spawn('npm', args, {stdio: 'inherit'});
113 |   proc.on('close', function (code) {
114 |     if (code !== 0) {
115 |       console.error('`npm ' + args.join(' ') + '` failed');
116 |       return;
117 |     }
118 | 
119 |     checkNodeVersion();
120 | 
121 |     var scriptsPath = path.resolve(
122 |       process.cwd(),
123 |       'node_modules',
124 |       'preact-scripts',
125 |       'scripts',
126 |       'init.js'
127 |     );
128 |     var init = require(scriptsPath);
129 |     init(root, appName, verbose, originalDirectory);
130 |   });
131 | }
132 | 
133 | function getInstallPackage(version) {
134 |   var packageToInstall = 'preact-scripts';
135 |   var validSemver = semver.valid(version);
136 |   if (validSemver) {
137 |     packageToInstall += '@' + validSemver;
138 |   } else if (version) {
139 |     // for tar.gz or alternative paths
140 |     packageToInstall = version;
141 |   }
142 |   return packageToInstall;
143 | }
144 | 
145 | function checkNodeVersion() {
146 |   var packageJsonPath = path.resolve(
147 |     process.cwd(),
148 |     'node_modules',
149 |     'preact-scripts',
150 |     'package.json'
151 |   );
152 |   var packageJson = require(packageJsonPath);
153 |   if (!packageJson.engines || !packageJson.engines.node) {
154 |     return;
155 |   }
156 | 
157 |   if (!semver.satisfies(process.version, packageJson.engines.node)) {
158 |     console.error(
159 |       chalk.red(
160 |         'You are currently running Node %s but create-preact-app requires %s.' +
161 |         ' Please use a supported version of Node.\n'
162 |       ),
163 |       process.version,
164 |       packageJson.engines.node
165 |     );
166 |     process.exit(1);
167 |   }
168 | }
169 | 
170 | // Check if GitHub boilerplate compatible
171 | // https://github.com/facebookincubator/create-react-app/pull/368#issuecomment-237875655
172 | function isGitHubBoilerplate(root) {
173 |   var validFiles = [
174 |     '.DS_Store', 'Thumbs.db', '.git', '.gitignore', 'README.md', 'LICENSE'
175 |   ];
176 |   return fs.readdirSync(root)
177 |     .every(function(file) {
178 |       return validFiles.indexOf(file) >= 0;
179 |     });
180 | }
181 | 


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
 1 | ## 0.2.1 (August 1, 2016)
 2 | 
 3 | ### Build Dependency (`react-scripts`)
 4 | 
 5 | * Fixes an issue with `npm start` taking a very long time on OS X with Firewall enabled ([@gaearon](https://github.com/gaearon) in [#319](https://github.com/facebookincubator/create-react-app/pull/319))
 6 | * Fixes an issue with Webpack eating a lot of CPU in some cases ([@dceddia](https://github.com/dceddia) in [#294](https://github.com/facebookincubator/create-react-app/pull/294))
 7 | * We now warn if you import a file with mismatched casing because this breaks the watcher ([@alexzherdev](https://github.com/alexzherdev) in [#266](https://github.com/facebookincubator/create-react-app/pull/266))
 8 | * CSS files specifying `?v=` after asset filenames, such as Font Awesome, now works correctly ([@alexzherdev](https://github.com/alexzherdev) in [#298](https://github.com/facebookincubator/create-react-app/pull/298))
 9 | * Issues with `npm link`ing `react-scripts` have been fixed ([@dallonf](https://github.com/dallonf) in [#277](https://github.com/facebookincubator/create-react-app/pull/277))
10 | * We now use `/static` prefix for assets both in development and production ([@gaearon](https://github.com/gaearon) in [#278](https://github.com/facebookincubator/create-react-app/pull/278))
11 | 
12 | ### Migrating from 0.2.0 to 0.2.1
13 | 
14 | Update `react-scripts` to point to `0.2.1` in your `package.json` and run `npm install`. You shouldn’t need to do anything else. If you see a warning about wrong file casing next time you `npm start`, fix your imports to use the correct filename casing.
15 | 
16 | Newly created projects will use `0.2.1` automatically. You **don’t** need to update the global `create-react-app` CLI itself. It stays at `0.2.0` for now because it doesn’t have any changes.
17 | 
18 | ## 0.2.0 (July 28, 2016)
19 | 
20 | ### Build Dependency (`react-scripts`)
21 | 
22 | * You can now enable deployment to GitHub Pages by adding `homepage` field to `package.json` ([@dhruska](https://github.com/dhruska) in [#94](https://github.com/facebookincubator/create-react-app/pull/94))
23 | * Development server now runs on `0.0.0.0` and works with VirtualBox ([@JWo1F](https://github.com/JWo1F) in [#128](https://github.com/facebookincubator/create-react-app/pull/128))
24 | * Cloud9 and Nitrous online IDEs are now supported ([@gaearon](http://github.com/gaearon) in [2fe84e](https://github.com/facebookincubator/create-react-app/commit/2fe84ecded55f1d5258d91f9c2c07698ae0d2fb4))
25 | * When `3000` port is taken, we offer to use another port ([@chocnut](https://github.com/chocnut) in [#101](https://github.com/facebookincubator/create-react-app/pull/101), [2edf21](https://github.com/facebookincubator/create-react-app/commit/2edf2180f2aa6bf647807d0b1fcd95f4cfe4a558))
26 | * You can now `import` CSS files from npm modules ([@glennreyes](https://github.com/glennreyes) in [#105](https://github.com/facebookincubator/create-react-app/pull/105), [@breaddevil](https://github.com/breaddevil) in [#178](https://github.com/facebookincubator/create-react-app/pull/178))
27 | * `fetch` and `Promise` polyfills are now always included ([@gaearon](https://github.com/gaearon) in [#235](https://github.com/facebookincubator/create-react-app/pull/235))
28 | * Regenerator runtime is now included if you use ES6 generators ([@gaearon](https://github.com/gaearon) in [#238](https://github.com/facebookincubator/create-react-app/pull/238))
29 | * Generated project now contains `.gitignore` ([@npverni](https://github.com/npverni) in [#79](https://github.com/facebookincubator/create-react-app/pull/79), [@chibicode](https://github.com/chibicode) in [#112](https://github.com/facebookincubator/create-react-app/pull/112))
30 | * ESLint config is now more compatible with Flow ([@gaearon](https://github.com/gaearon) in [#261](https://github.com/facebookincubator/create-react-app/pull/261))
31 | * A stylistic lint rule about method naming has been removed ([@mxstbr](https://github.com/mxstbr) in [#152](https://github.com/facebookincubator/create-react-app/pull/157))
32 | * A few unobtrusive accessibility lint rules have been added ([@evcohen](https://github.com/evcohen) in [#175](https://github.com/facebookincubator/create-react-app/pull/175))
33 | * A `.babelrc` in parent directory no longer causes an error ([@alexzherdev](https://github.com/alexzherdev) in [#236](https://github.com/facebookincubator/create-react-app/pull/236))
34 | * Files with `.json` extension are now discovered ([@gaearon](https://github.com/gaearon) in [a11d6a](https://github.com/facebookincubator/create-react-app/commit/a11d6a398f487f9163880dd34667b1d3e14b147a))
35 | * Bug fixes from transitive dependencies are included ([#126](https://github.com/facebookincubator/create-react-app/issues/126))
36 | * Linting now works with IDEs if you follow [these](https://github.com/facebookincubator/create-react-app/blob/master/template/README.md#display-lint-output-in-the-editor) instructions ([@keyanzhang](https://github.com/keyanzhang) in [#149](https://github.com/facebookincubator/create-react-app/pull/149))
37 | * After building, we now print gzipped bundle size ([@lvwrence](https://github.com/lvwrence) in [#229](https://github.com/facebookincubator/create-react-app/pull/229))
38 | 
39 | ### Global CLI (`create-react-app`)
40 | 
41 | * It enforces that you have Node >= 4 ([@conorhastings](https://github.com/conorhastings) in [#88](https://github.com/facebookincubator/create-react-app/pull/88))
42 | * It handles `--version` flag correctly ([@mxstbr](https://github.com/mxstbr) in [#152](https://github.com/facebookincubator/create-react-app/pull/152))
43 | 
44 | ### Migrating from 0.1.0 to 0.2.0
45 | 
46 | You may optionally update the global command (it’s not required):
47 | 
48 | ```
49 | npm install -g create-react-app@0.2.0
50 | ```
51 | 
52 | Inside any created project that has not been ejected, run:
53 | 
54 | ```
55 | npm install --save-dev --save-exact react-scripts@0.2.0
56 | ```
57 | 
58 | You may need to fix a few lint warnings about missing `<img alt>` tag, but everything else should work out of the box. If you intend to deploy your site to GitHub Pages, you may now [add `homepage` field to `package.json`](https://github.com/facebookincubator/create-react-app/blob/master/template/README.md#deploy-to-github-pages). If you had [issues with integrating editor linter plugins](https://github.com/facebookincubator/create-react-app/issues/124), follow [these new instructions](https://github.com/facebookincubator/create-react-app/blob/master/template/README.md#display-lint-output-in-the-editor).
59 | 
60 | ## 0.1.0 (July 22, 2016)
61 | 
62 | * Initial public release
63 | 


--------------------------------------------------------------------------------
/config/eslint.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * Copyright (c) 2015-present, Facebook, Inc.
  3 |  * All rights reserved.
  4 |  *
  5 |  * This source code is licensed under the BSD-style license found in the
  6 |  * LICENSE file in the root directory of this source tree. An additional grant
  7 |  * of patent rights can be found in the PATENTS file in the same directory.
  8 |  */
  9 | 
 10 | // Inspired by https://github.com/airbnb/javascript but less opinionated.
 11 | 
 12 | // We use eslint-loader so even warnings are very visibile.
 13 | // This is why we only use "WARNING" level for potential errors,
 14 | // and we don't use "ERROR" level at all.
 15 | 
 16 | // In the future, we might create a separate list of rules for production.
 17 | // It would probably be more strict.
 18 | 
 19 | module.exports = {
 20 |   root: true,
 21 | 
 22 |   parser: 'babel-eslint',
 23 | 
 24 |   // import plugin is termporarily disabled, scroll below to see why
 25 |   plugins: [/*'import', */'flowtype', 'jsx-a11y', 'react'],
 26 | 
 27 |   env: {
 28 |     browser: true,
 29 |     commonjs: true,
 30 |     es6: true,
 31 |     jest: true,
 32 |     node: true
 33 |   },
 34 | 
 35 |   parserOptions: {
 36 |     ecmaVersion: 6,
 37 |     sourceType: 'module',
 38 |     ecmaFeatures: {
 39 |       jsx: true,
 40 |       generators: true,
 41 |       experimentalObjectRestSpread: true
 42 |     }
 43 |   },
 44 | 
 45 |   settings: {
 46 |     'import/ignore': [
 47 |       'node_modules',
 48 |       '\\.(json|css|jpg|png|gif|eot|svg|ttf|woff|woff2|mp4|webm)$',
 49 |     ],
 50 |     'import/extensions': ['.js'],
 51 |     'import/resolver': {
 52 |       node: {
 53 |         extensions: ['.js', '.json']
 54 |       }
 55 |     },
 56 |     react: {
 57 |       pragma: 'h'
 58 |     }
 59 |   },
 60 | 
 61 |   rules: {
 62 |     // http://eslint.org/docs/rules/
 63 |     'array-callback-return': 'warn',
 64 |     'default-case': ['warn', { commentPattern: '^no default$' }],
 65 |     'dot-location': ['warn', 'property'],
 66 |     eqeqeq: ['warn', 'allow-null'],
 67 |     'guard-for-in': 'warn',
 68 |     'new-cap': ['warn', { newIsCap: true }],
 69 |     'new-parens': 'warn',
 70 |     'no-array-constructor': 'warn',
 71 |     'no-caller': 'warn',
 72 |     'no-cond-assign': ['warn', 'always'],
 73 |     'no-const-assign': 'warn',
 74 |     'no-control-regex': 'warn',
 75 |     'no-delete-var': 'warn',
 76 |     'no-dupe-args': 'warn',
 77 |     'no-dupe-class-members': 'warn',
 78 |     'no-dupe-keys': 'warn',
 79 |     'no-duplicate-case': 'warn',
 80 |     'no-empty-character-class': 'warn',
 81 |     'no-empty-pattern': 'warn',
 82 |     'no-eval': 'warn',
 83 |     'no-ex-assign': 'warn',
 84 |     'no-extend-native': 'warn',
 85 |     'no-extra-bind': 'warn',
 86 |     'no-extra-label': 'warn',
 87 |     'no-fallthrough': 'warn',
 88 |     'no-func-assign': 'warn',
 89 |     'no-implied-eval': 'warn',
 90 |     'no-invalid-regexp': 'warn',
 91 |     'no-iterator': 'warn',
 92 |     'no-label-var': 'warn',
 93 |     'no-labels': ['warn', { allowLoop: false, allowSwitch: false }],
 94 |     'no-lone-blocks': 'warn',
 95 |     'no-loop-func': 'warn',
 96 |     'no-mixed-operators': ['warn', {
 97 |       groups: [
 98 |         ['&', '|', '^', '~', '<<', '>>', '>>>'],
 99 |         ['==', '!=', '===', '!==', '>', '>=', '<', '<='],
100 |         ['&&', '||'],
101 |         ['in', 'instanceof']
102 |       ],
103 |       allowSamePrecedence: false
104 |     }],
105 |     'no-multi-str': 'warn',
106 |     'no-native-reassign': 'warn',
107 |     'no-negated-in-lhs': 'warn',
108 |     'no-new-func': 'warn',
109 |     'no-new-object': 'warn',
110 |     'no-new-symbol': 'warn',
111 |     'no-new-wrappers': 'warn',
112 |     'no-obj-calls': 'warn',
113 |     'no-octal': 'warn',
114 |     'no-octal-escape': 'warn',
115 |     'no-redeclare': 'warn',
116 |     'no-regex-spaces': 'warn',
117 |     'no-restricted-syntax': [
118 |       'warn',
119 |       'LabeledStatement',
120 |       'WithStatement',
121 |     ],
122 |     'no-return-assign': 'warn',
123 |     'no-script-url': 'warn',
124 |     'no-self-assign': 'warn',
125 |     'no-self-compare': 'warn',
126 |     'no-sequences': 'warn',
127 |     'no-shadow-restricted-names': 'warn',
128 |     'no-sparse-arrays': 'warn',
129 |     'no-this-before-super': 'warn',
130 |     'no-throw-literal': 'warn',
131 |     'no-undef': 'warn',
132 |     'no-unexpected-multiline': 'warn',
133 |     'no-unreachable': 'warn',
134 |     'no-unused-expressions': 'warn',
135 |     'no-unused-labels': 'warn',
136 |     'no-unused-vars': ['warn', { vars: 'local', args: 'none' }],
137 |     'no-use-before-define': ['warn', 'nofunc'],
138 |     'no-useless-computed-key': 'warn',
139 |     'no-useless-concat': 'warn',
140 |     'no-useless-constructor': 'warn',
141 |     'no-useless-escape': 'warn',
142 |     'no-useless-rename': ['warn', {
143 |       ignoreDestructuring: false,
144 |       ignoreImport: false,
145 |       ignoreExport: false,
146 |     }],
147 |     'no-with': 'warn',
148 |     'no-whitespace-before-property': 'warn',
149 |     'operator-assignment': ['warn', 'always'],
150 |     radix: 'warn',
151 |     'require-yield': 'warn',
152 |     'rest-spread-spacing': ['warn', 'never'],
153 |     strict: ['warn', 'never'],
154 |     'unicode-bom': ['warn', 'never'],
155 |     'use-isnan': 'warn',
156 |     'valid-typeof': 'warn',
157 | 
158 |     // https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/
159 | 
160 |     // TODO: import rules are temporarily disabled because they don't play well
161 |     // with how eslint-loader only checks the file you change. So if module A
162 |     // imports module B, and B is missing a default export, the linter will
163 |     // record this as an issue in module A. Now if you fix module B, the linter
164 |     // will not be aware that it needs to re-lint A as well, so the error
165 |     // will stay until the next restart, which is really confusing.
166 | 
167 |     // This is probably fixable with a patch to eslint-loader.
168 |     // When file A is saved, we want to invalidate all files that import it
169 |     // *and* that currently have lint errors. This should fix the problem.
170 | 
171 |     // 'import/default': 'warn',
172 |     // 'import/export': 'warn',
173 |     // 'import/named': 'warn',
174 |     // 'import/namespace': 'warn',
175 |     // 'import/no-amd': 'warn',
176 |     // 'import/no-duplicates': 'warn',
177 |     // 'import/no-extraneous-dependencies': 'warn',
178 |     // 'import/no-named-as-default': 'warn',
179 |     // 'import/no-named-as-default-member': 'warn',
180 |     // 'import/no-unresolved': ['warn', { commonjs: true }],
181 | 
182 |     // https://github.com/yannickcr/eslint-plugin-react/tree/master/docs/rules
183 |     'react/jsx-equals-spacing': ['warn', 'never'],
184 |     'react/jsx-no-duplicate-props': ['warn', { ignoreCase: true }],
185 |     'react/jsx-no-undef': 'warn',
186 |     'react/jsx-pascal-case': ['warn', {
187 |       allowAllCaps: true,
188 |       ignore: [],
189 |     }],
190 |     'react/jsx-uses-react': 'warn',
191 |     'react/jsx-uses-vars': 'warn',
192 |     'react/no-deprecated': 'warn',
193 |     'react/no-direct-mutation-state': 'warn',
194 |     'react/no-is-mounted': 'warn',
195 |     'react/react-in-jsx-scope': 'warn',
196 |     'react/require-render-return': 'warn',
197 | 
198 |     // https://github.com/evcohen/eslint-plugin-jsx-a11y/tree/master/docs/rules
199 |     'jsx-a11y/aria-role': 'warn',
200 |     'jsx-a11y/img-has-alt': 'warn',
201 |     'jsx-a11y/img-redundant-alt': 'warn',
202 |     'jsx-a11y/no-access-key': 'warn',
203 | 
204 |     // https://github.com/gajus/eslint-plugin-flowtype
205 |     'flowtype/define-flow-type': 'warn',
206 |     'flowtype/require-valid-file-annotation': 'warn',
207 |     'flowtype/use-flow-type': 'warn'
208 |   }
209 | };
210 | 


--------------------------------------------------------------------------------
/scripts/build.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * Copyright (c) 2015-present, Facebook, Inc.
  3 |  * All rights reserved.
  4 |  *
  5 |  * This source code is licensed under the BSD-style license found in the
  6 |  * LICENSE file in the root directory of this source tree. An additional grant
  7 |  * of patent rights can be found in the PATENTS file in the same directory.
  8 |  */
  9 | 
 10 | // Do this as the first thing so that any code reading it knows the right env.
 11 | process.env.NODE_ENV = 'production';
 12 | 
 13 | var chalk = require('chalk');
 14 | var fs = require('fs');
 15 | var path = require('path');
 16 | var filesize = require('filesize');
 17 | var gzipSize = require('gzip-size').sync;
 18 | var rimrafSync = require('rimraf').sync;
 19 | var webpack = require('webpack');
 20 | var config = require('../config/webpack.config.prod');
 21 | var paths = require('../config/paths');
 22 | var recursive = require('recursive-readdir');
 23 | var stripAnsi = require('strip-ansi');
 24 | 
 25 | // Input: /User/dan/app/build/static/js/main.82be8.js
 26 | // Output: /static/js/main.js
 27 | function removeFileNameHash(fileName) {
 28 |   return fileName
 29 |     .replace(paths.appBuild, '')
 30 |     .replace(/\/?(.*)(\.\w+)(\.js|\.css)/, (match, p1, p2, p3) => p1 + p3);
 31 | }
 32 | 
 33 | // Input: 1024, 2048
 34 | // Output: "(+1 KB)"
 35 | function getDifferenceLabel(currentSize, previousSize) {
 36 |   var FIFTY_KILOBYTES = 1024 * 50;
 37 |   var difference = currentSize - previousSize;
 38 |   var fileSize = !Number.isNaN(difference) ? filesize(difference) : 0;
 39 |   if (difference >= FIFTY_KILOBYTES) {
 40 |     return chalk.red('+' + fileSize);
 41 |   } else if (difference < FIFTY_KILOBYTES && difference > 0) {
 42 |     return chalk.yellow('+' + fileSize);
 43 |   } else if (difference < 0) {
 44 |     return chalk.green(fileSize);
 45 |   } else {
 46 |     return '';
 47 |   }
 48 | }
 49 | 
 50 | // First, read the current file sizes in build directory.
 51 | // This lets us display how much they changed later.
 52 | recursive(paths.appBuild, (err, fileNames) => {
 53 |   var previousSizeMap = (fileNames || [])
 54 |     .filter(fileName => /\.(js|css)$/.test(fileName))
 55 |     .reduce((memo, fileName) => {
 56 |       var contents = fs.readFileSync(fileName);
 57 |       var key = removeFileNameHash(fileName);
 58 |       memo[key] = gzipSize(contents);
 59 |       return memo;
 60 |     }, {});
 61 | 
 62 |   // Remove all content but keep the directory so that
 63 |   // if you're in it, you don't end up in Trash
 64 |   rimrafSync(paths.appBuild + '/*');
 65 | 
 66 |   // Start the webpack build
 67 |   build(previousSizeMap);
 68 | });
 69 | 
 70 | // Print a detailed summary of build files.
 71 | function printFileSizes(stats, previousSizeMap) {
 72 |   var assets = stats.toJson().assets
 73 |     .filter(asset => /\.(js|css)$/.test(asset.name))
 74 |     .map(asset => {
 75 |       var fileContents = fs.readFileSync(paths.appBuild + '/' + asset.name);
 76 |       var size = gzipSize(fileContents);
 77 |       var previousSize = previousSizeMap[removeFileNameHash(asset.name)];
 78 |       var difference = getDifferenceLabel(size, previousSize);
 79 |       return {
 80 |         folder: path.join('build', path.dirname(asset.name)),
 81 |         name: path.basename(asset.name),
 82 |         size: size,
 83 |         sizeLabel: filesize(size) + (difference ? ' (' + difference + ')' : '')
 84 |       };
 85 |     });
 86 |   assets.sort((a, b) => b.size - a.size);
 87 |   var longestSizeLabelLength = Math.max.apply(null,
 88 |     assets.map(a => stripAnsi(a.sizeLabel).length)
 89 |   );
 90 |   assets.forEach(asset => {
 91 |     var sizeLabel = asset.sizeLabel;
 92 |     var sizeLength = stripAnsi(sizeLabel).length;
 93 |     if (sizeLength < longestSizeLabelLength) {
 94 |       var rightPadding = ' '.repeat(longestSizeLabelLength - sizeLength);
 95 |       sizeLabel += rightPadding;
 96 |     }
 97 |     console.log(
 98 |       '  ' + sizeLabel +
 99 |       '  ' + chalk.dim(asset.folder + path.sep) + chalk.cyan(asset.name)
100 |     );
101 |   });
102 | }
103 | 
104 | // Create the production build and print the deployment instructions.
105 | function build(previousSizeMap) {
106 |   console.log('Creating an optimized production build...');
107 |   webpack(config).run((err, stats) => {
108 |     if (err) {
109 |       console.error('Failed to create a production build. Reason:');
110 |       console.error(err.message || err);
111 |       process.exit(1);
112 |     }
113 | 
114 |     console.log(chalk.green('Compiled successfully.'));
115 |     console.log();
116 | 
117 |     console.log('File sizes after gzip:');
118 |     console.log();
119 |     printFileSizes(stats, previousSizeMap);
120 |     console.log();
121 | 
122 |     var openCommand = process.platform === 'win32' ? 'start' : 'open';
123 |     var homepagePath = require(paths.appPackageJson).homepage;
124 |     var publicPath = config.output.publicPath;
125 |     if (homepagePath && homepagePath.indexOf('.github.io/') !== -1) {
126 |       // "homepage": "http://user.github.io/project"
127 |       console.log('The project was built assuming it is hosted at ' + chalk.green(publicPath) + '.');
128 |       console.log('You can control this with the ' + chalk.green('homepage') + ' field in your '  + chalk.cyan('package.json') + '.');
129 |       console.log();
130 |       console.log('The ' + chalk.cyan('build') + ' folder is ready to be deployed.');
131 |       console.log('To publish it at ' + chalk.green(homepagePath) + ', run:');
132 |       console.log();
133 |       console.log('  ' + chalk.cyan('git') + ' commit -am ' + chalk.yellow('"Save local changes"'));
134 |       console.log('  ' + chalk.cyan('git') + ' checkout -B gh-pages');
135 |       console.log('  ' + chalk.cyan('git') + ' add -f build');
136 |       console.log('  ' + chalk.cyan('git') + ' commit -am ' + chalk.yellow('"Rebuild website"'));
137 |       console.log('  ' + chalk.cyan('git') + ' filter-branch -f --prune-empty --subdirectory-filter build');
138 |       console.log('  ' + chalk.cyan('git') + ' push -f origin gh-pages');
139 |       console.log('  ' + chalk.cyan('git') + ' checkout -');
140 |       console.log();
141 |     } else if (publicPath !== '/') {
142 |       // "homepage": "http://mywebsite.com/project"
143 |       console.log('The project was built assuming it is hosted at ' + chalk.green(publicPath) + '.');
144 |       console.log('You can control this with the ' + chalk.green('homepage') + ' field in your '  + chalk.cyan('package.json') + '.');
145 |       console.log();
146 |       console.log('The ' + chalk.cyan('build') + ' folder is ready to be deployed.');
147 |       console.log();
148 |     } else {
149 |       // no homepage or "homepage": "http://mywebsite.com"
150 |       console.log('The project was built assuming it is hosted at the server root.');
151 |       if (homepagePath) {
152 |         // "homepage": "http://mywebsite.com"
153 |         console.log('You can control this with the ' + chalk.green('homepage') + ' field in your '  + chalk.cyan('package.json') + '.');
154 |         console.log();
155 |       } else {
156 |         // no homepage
157 |         console.log('To override this, specify the ' + chalk.green('homepage') + ' in your '  + chalk.cyan('package.json') + '.');
158 |         console.log('For example, add this to build it for GitHub Pages:')
159 |         console.log();
160 |         console.log('  ' + chalk.green('"homepage"') + chalk.cyan(': ') + chalk.green('"http://myname.github.io/myapp"') + chalk.cyan(','));
161 |         console.log();
162 |       }
163 |       console.log('The ' + chalk.cyan('build') + ' folder is ready to be deployed.');
164 |       console.log('You may also serve it locally with a static server:')
165 |       console.log();
166 |       console.log('  ' + chalk.cyan('npm') +  ' install -g pushstate-server');
167 |       console.log('  ' + chalk.cyan('pushstate-server') + ' build');
168 |       console.log('  ' + chalk.cyan(openCommand) + ' http://localhost:9000');
169 |       console.log();
170 |     }
171 |   });
172 | }
173 | 


--------------------------------------------------------------------------------
/config/webpack.config.dev.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * Copyright (c) 2015-present, Facebook, Inc.
  3 |  * All rights reserved.
  4 |  *
  5 |  * This source code is licensed under the BSD-style license found in the
  6 |  * LICENSE file in the root directory of this source tree. An additional grant
  7 |  * of patent rights can be found in the PATENTS file in the same directory.
  8 |  */
  9 | 
 10 | var path = require('path');
 11 | var autoprefixer = require('autoprefixer');
 12 | var webpack = require('webpack');
 13 | var HtmlWebpackPlugin = require('html-webpack-plugin');
 14 | var CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
 15 | var WatchMissingNodeModulesPlugin = require('../scripts/utils/WatchMissingNodeModulesPlugin');
 16 | var paths = require('./paths');
 17 | var env = require('./env');
 18 | 
 19 | // This is the development configuration.
 20 | // It is focused on developer experience and fast rebuilds.
 21 | // The production configuration is different and lives in a separate file.
 22 | module.exports = {
 23 |   // This makes the bundle appear split into separate modules in the devtools.
 24 |   // We don't use source maps here because they can be confusing:
 25 |   // https://github.com/facebookincubator/create-react-app/issues/343#issuecomment-237241875
 26 |   // You may want 'cheap-module-source-map' instead if you prefer source maps.
 27 |   devtool: 'eval',
 28 |   // These are the "entry points" to our application.
 29 |   // This means they will be the "root" imports that are included in JS bundle.
 30 |   // The first two entry points enable "hot" CSS and auto-refreshes for JS.
 31 |   entry: [
 32 |     // Include WebpackDevServer client. It connects to WebpackDevServer via
 33 |     // sockets and waits for recompile notifications. When WebpackDevServer
 34 |     // recompiles, it sends a message to the client by socket. If only CSS
 35 |     // was changed, the app reload just the CSS. Otherwise, it will refresh.
 36 |     // The "?/" bit at the end tells the client to look for the socket at
 37 |     // the root path, i.e. /sockjs-node/. Otherwise visiting a client-side
 38 |     // route like /todos/42 would make it wrongly request /todos/42/sockjs-node.
 39 |     // The socket server is a part of WebpackDevServer which we are using.
 40 |     // The /sockjs-node/ path I'm referring to is hardcoded in WebpackDevServer.
 41 |     require.resolve('webpack-dev-server/client') + '?/',
 42 |     // Include Webpack hot module replacement runtime. Webpack is pretty
 43 |     // low-level so we need to put all the pieces together. The runtime listens
 44 |     // to the events received by the client above, and applies updates (such as
 45 |     // new CSS) to the running application.
 46 |     require.resolve('webpack/hot/dev-server'),
 47 |     // We ship a few polyfills by default.
 48 |     require.resolve('./polyfills'),
 49 |     // Finally, this is your app's code:
 50 |     path.join(paths.appSrc, 'index')
 51 |     // We include the app code last so that if there is a runtime error during
 52 |     // initialization, it doesn't blow up the WebpackDevServer client, and
 53 |     // changing JS code would still trigger a refresh.
 54 |   ],
 55 |   output: {
 56 |     // Next line is not used in dev but WebpackDevServer crashes without it:
 57 |     path: paths.appBuild,
 58 |     // Add /* filename */ comments to generated require()s in the output.
 59 |     pathinfo: true,
 60 |     // This does not produce a real file. It's just the virtual path that is
 61 |     // served by WebpackDevServer in development. This is the JS bundle
 62 |     // containing code from all our entry points, and the Webpack runtime.
 63 |     filename: 'static/js/bundle.js',
 64 |     // In development, we always serve from the root. This makes config easier.
 65 |     publicPath: '/'
 66 |   },
 67 |   resolve: {
 68 |     // These are the reasonable defaults supported by the Node ecosystem.
 69 |     extensions: ['.js', '.json', ''],
 70 |     alias: {
 71 |       // This `alias` section can be safely removed after ejection.
 72 |       // We do this because `babel-runtime` may be inside `react-scripts`,
 73 |       // so when `babel-plugin-transform-runtime` imports it, it will not be
 74 |       // available to the app directly. This is a temporary solution that lets
 75 |       // us ship support for generators. However it is far from ideal, and
 76 |       // if we don't have a good solution, we should just make `babel-runtime`
 77 |       // a dependency in generated projects.
 78 |       // See https://github.com/facebookincubator/create-react-app/issues/255
 79 |       'babel-runtime/regenerator': require.resolve('babel-runtime/regenerator'),
 80 |       'react-native': 'react-native-web'
 81 |     }
 82 |   },
 83 |   // Resolve loaders (webpack plugins for CSS, images, transpilation) from the
 84 |   // directory of `react-scripts` itself rather than the project directory.
 85 |   // You can remove this after ejecting.
 86 |   resolveLoader: {
 87 |     root: paths.ownNodeModules,
 88 |     moduleTemplates: ['*-loader']
 89 |   },
 90 |   module: {
 91 |     // First, run the linter.
 92 |     // It's important to do this before Babel processes the JS.
 93 |     preLoaders: [
 94 |       {
 95 |         test: /\.js$/,
 96 |         loader: 'eslint',
 97 |         include: paths.appSrc,
 98 |       }
 99 |     ],
100 |     loaders: [
101 |       // Process JS with Babel.
102 |       {
103 |         test: /\.js$/,
104 |         include: paths.appSrc,
105 |         loader: 'babel',
106 |         query: require('./babel.dev')
107 |       },
108 |       // "postcss" loader applies autoprefixer to our CSS.
109 |       // "css" loader resolves paths in CSS and adds assets as dependencies.
110 |       // "style" loader turns CSS into JS modules that inject <style> tags.
111 |       // In production, we use a plugin to extract that CSS to a file, but
112 |       // in development "style" loader enables hot editing of CSS.
113 |       {
114 |         test: /\.css$/,
115 |         include: [paths.appSrc, paths.appNodeModules],
116 |         loader: 'style!css!postcss'
117 |       },
118 |       // JSON is not enabled by default in Webpack but both Node and Browserify
119 |       // allow it implicitly so we also enable it.
120 |       {
121 |         test: /\.json$/,
122 |         include: [paths.appSrc, paths.appNodeModules],
123 |         loader: 'json'
124 |       },
125 |       // "file" loader makes sure those assets get served by WebpackDevServer.
126 |       // When you `import` an asset, you get its (virtual) filename.
127 |       // In production, they would get copied to the `build` folder.
128 |       {
129 |         test: /\.(ico|jpg|png|gif|eot|svg|ttf|woff|woff2)(\?.*)?$/,
130 |         include: [paths.appSrc, paths.appNodeModules],
131 |         exclude: /\/favicon.ico$/,
132 |         loader: 'file',
133 |         query: {
134 |           name: 'static/media/[name].[ext]'
135 |         }
136 |       },
137 |       // A special case for favicon.ico to place it into build root directory.
138 |       {
139 |         test: /\/favicon.ico$/,
140 |         include: [paths.appSrc],
141 |         loader: 'file',
142 |         query: {
143 |           name: 'favicon.ico?[hash:8]'
144 |         }
145 |       },
146 |       // "url" loader works just like "file" loader but it also embeds
147 |       // assets smaller than specified size as data URLs to avoid requests.
148 |       {
149 |         test: /\.(mp4|webm)(\?.*)?$/,
150 |         include: [paths.appSrc, paths.appNodeModules],
151 |         loader: 'url',
152 |         query: {
153 |           limit: 10000,
154 |           name: 'static/media/[name].[ext]'
155 |         }
156 |       },
157 |       // "html" loader is used to process template page (index.html) to resolve
158 |       // resources linked with <link href="./relative/path"> HTML tags.
159 |       {
160 |         test: /\.html$/,
161 |         loader: 'html',
162 |         query: {
163 |           attrs: ['link:href'],
164 |         }
165 |       }
166 |     ]
167 |   },
168 |   // Point ESLint to our predefined config.
169 |   eslint: {
170 |     configFile: path.join(__dirname, 'eslint.js'),
171 |     useEslintrc: false
172 |   },
173 |   // We use PostCSS for autoprefixing only.
174 |   postcss: function() {
175 |     return [
176 |       autoprefixer({
177 |         browsers: [
178 |           '>1%',
179 |           'last 4 versions',
180 |           'Firefox ESR',
181 |           'not ie < 9', // React doesn't support IE8 anyway
182 |         ]
183 |       }),
184 |     ];
185 |   },
186 |   plugins: [
187 |     // Generates an `index.html` file with the <script> injected.
188 |     new HtmlWebpackPlugin({
189 |       inject: true,
190 |       template: paths.appHtml,
191 |     }),
192 |     // Makes some environment variables available to the JS code, for example:
193 |     // if (process.env.NODE_ENV === 'development') { ... }. See `env.js`.
194 |     new webpack.DefinePlugin(env),
195 |     // This is necessary to emit hot updates (currently CSS only):
196 |     new webpack.HotModuleReplacementPlugin(),
197 |     // Watcher doesn't work well if you mistype casing in a path so we use
198 |     // a plugin that prints an error when you attempt to do this.
199 |     // See https://github.com/facebookincubator/create-react-app/issues/240
200 |     new CaseSensitivePathsPlugin(),
201 |     // If you require a missing module and then `npm install` it, you still have
202 |     // to restart the development server for Webpack to discover it. This plugin
203 |     // makes the discovery automatic so you don't have to restart.
204 |     // See https://github.com/facebookincubator/create-react-app/issues/186
205 |     new WatchMissingNodeModulesPlugin(paths.appNodeModules)
206 |   ]
207 | };
208 | 


--------------------------------------------------------------------------------
/config/webpack.config.prod.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * Copyright (c) 2015-present, Facebook, Inc.
  3 |  * All rights reserved.
  4 |  *
  5 |  * This source code is licensed under the BSD-style license found in the
  6 |  * LICENSE file in the root directory of this source tree. An additional grant
  7 |  * of patent rights can be found in the PATENTS file in the same directory.
  8 |  */
  9 | 
 10 | var path = require('path');
 11 | var autoprefixer = require('autoprefixer');
 12 | var webpack = require('webpack');
 13 | var HtmlWebpackPlugin = require('html-webpack-plugin');
 14 | var ExtractTextPlugin = require('extract-text-webpack-plugin');
 15 | var url = require('url');
 16 | var paths = require('./paths');
 17 | var env = require('./env');
 18 | 
 19 | // Assert this just to be safe.
 20 | // Development builds of React are slow and not intended for production.
 21 | if (env['process.env.NODE_ENV'] !== '"production"') {
 22 |   throw new Error('Production builds must have NODE_ENV=production.');
 23 | }
 24 | 
 25 | // We use "homepage" field to infer "public path" at which the app is served.
 26 | // Webpack needs to know it to put the right <script> hrefs into HTML even in
 27 | // single-page apps that may serve index.html for nested URLs like /todos/42.
 28 | // We can't use a relative path in HTML because we don't want to load something
 29 | // like /todos/42/static/js/bundle.7289d.js. We have to know the root.
 30 | var homepagePath = require(paths.appPackageJson).homepage;
 31 | var publicPath = homepagePath ? url.parse(homepagePath).pathname : '/';
 32 | if (!publicPath.endsWith('/')) {
 33 |   // If we don't do this, file assets will get incorrect paths.
 34 |   publicPath += '/';
 35 | }
 36 | 
 37 | // This is the production configuration.
 38 | // It compiles slowly and is focused on producing a fast and minimal bundle.
 39 | // The development configuration is different and lives in a separate file.
 40 | module.exports = {
 41 |   // Don't attempt to continue if there are any errors.
 42 |   bail: true,
 43 |   // We generate sourcemaps in production. This is slow but gives good results.
 44 |   // You can exclude the *.map files from the build during deployment.
 45 |   devtool: 'source-map',
 46 |   // In production, we only want to load the polyfills and the app code.
 47 |   entry: [
 48 |     require.resolve('./polyfills'),
 49 |     path.join(paths.appSrc, 'index')
 50 |   ],
 51 |   output: {
 52 |     // The build folder.
 53 |     path: paths.appBuild,
 54 |     // Generated JS file names (with nested folders).
 55 |     // There will be one main bundle, and one file per asynchronous chunk.
 56 |     // We don't currently advertise code splitting but Webpack supports it.
 57 |     filename: 'static/js/[name].[chunkhash:8].js',
 58 |     chunkFilename: 'static/js/[name].[chunkhash:8].chunk.js',
 59 |     // We inferred the "public path" (such as / or /my-project) from homepage.
 60 |     publicPath: publicPath
 61 |   },
 62 |   resolve: {
 63 |     // These are the reasonable defaults supported by the Node ecosystem.
 64 |     extensions: ['.js', '.json', ''],
 65 |     alias: {
 66 |       // This `alias` section can be safely removed after ejection.
 67 |       // We do this because `babel-runtime` may be inside `react-scripts`,
 68 |       // so when `babel-plugin-transform-runtime` imports it, it will not be
 69 |       // available to the app directly. This is a temporary solution that lets
 70 |       // us ship support for generators. However it is far from ideal, and
 71 |       // if we don't have a good solution, we should just make `babel-runtime`
 72 |       // a dependency in generated projects.
 73 |       // See https://github.com/facebookincubator/create-react-app/issues/255
 74 |       'babel-runtime/regenerator': require.resolve('babel-runtime/regenerator'),
 75 |       'react-native': 'react-native-web'
 76 |     }
 77 |   },
 78 |   // Resolve loaders (webpack plugins for CSS, images, transpilation) from the
 79 |   // directory of `react-scripts` itself rather than the project directory.
 80 |   // You can remove this after ejecting.
 81 |   resolveLoader: {
 82 |     root: paths.ownNodeModules,
 83 |     moduleTemplates: ['*-loader']
 84 |   },
 85 |   module: {
 86 |     // First, run the linter.
 87 |     // It's important to do this before Babel processes the JS.
 88 |     preLoaders: [
 89 |       {
 90 |         test: /\.js$/,
 91 |         loader: 'eslint',
 92 |         include: paths.appSrc
 93 |       }
 94 |     ],
 95 |     loaders: [
 96 |       // Process JS with Babel.
 97 |       {
 98 |         test: /\.js$/,
 99 |         include: paths.appSrc,
100 |         loader: 'babel',
101 |         query: require('./babel.prod')
102 |       },
103 |       // The notation here is somewhat confusing.
104 |       // "postcss" loader applies autoprefixer to our CSS.
105 |       // "css" loader resolves paths in CSS and adds assets as dependencies.
106 |       // "style" loader normally turns CSS into JS modules injecting <style>,
107 |       // but unlike in development configuration, we do something different.
108 |       // `ExtractTextPlugin` first applies the "postcss" and "css" loaders
109 |       // (second argument), then grabs the result CSS and puts it into a
110 |       // separate file in our build process. This way we actually ship
111 |       // a single CSS file in production instead of JS code injecting <style>
112 |       // tags. If you use code splitting, however, any async bundles will still
113 |       // use the "style" loader inside the async code so CSS from them won't be
114 |       // in the main CSS file.
115 |       {
116 |         test: /\.css$/,
117 |         include: [paths.appSrc, paths.appNodeModules],
118 |         // "?-autoprefixer" disables autoprefixer in css-loader itself:
119 |         // https://github.com/webpack/css-loader/issues/281
120 |         // We already have it thanks to postcss. We only pass this flag in
121 |         // production because "css" loader only enables autoprefixer-powered
122 |         // removal of unnecessary prefixes when Uglify plugin is enabled.
123 |         // Webpack 1.x uses Uglify plugin as a signal to minify *all* the assets
124 |         // including CSS. This is confusing and will be removed in Webpack 2:
125 |         // https://github.com/webpack/webpack/issues/283
126 |         loader: ExtractTextPlugin.extract('style', 'css?-autoprefixer!postcss')
127 |         // Note: this won't work without `new ExtractTextPlugin()` in `plugins`.
128 |       },
129 |       // JSON is not enabled by default in Webpack but both Node and Browserify
130 |       // allow it implicitly so we also enable it.
131 |       {
132 |         test: /\.json$/,
133 |         include: [paths.appSrc, paths.appNodeModules],
134 |         loader: 'json'
135 |       },
136 |       // "file" loader makes sure those assets end up in the `build` folder.
137 |       // When you `import` an asset, you get its filename.
138 |       {
139 |         test: /\.(ico|jpg|png|gif|eot|svg|ttf|woff|woff2)(\?.*)?$/,
140 |         exclude: /\/favicon.ico$/,
141 |         include: [paths.appSrc, paths.appNodeModules],
142 |         loader: 'file',
143 |         query: {
144 |           name: 'static/media/[name].[hash:8].[ext]'
145 |         }
146 |       },
147 |       // A special case for favicon.ico to place it into build root directory.
148 |       {
149 |         test: /\/favicon.ico$/,
150 |         include: [paths.appSrc],
151 |         loader: 'file',
152 |         query: {
153 |           name: 'favicon.ico?[hash:8]'
154 |         }
155 |       },
156 |       // "url" loader works just like "file" loader but it also embeds
157 |       // assets smaller than specified size as data URLs to avoid requests.
158 |       {
159 |         test: /\.(mp4|webm)(\?.*)?$/,
160 |         include: [paths.appSrc, paths.appNodeModules],
161 |         loader: 'url',
162 |         query: {
163 |           limit: 10000,
164 |           name: 'static/media/[name].[hash:8].[ext]'
165 |         }
166 |       },
167 |       // "html" loader is used to process template page (index.html) to resolve
168 |       // resources linked with <link href="./relative/path"> HTML tags.
169 |       {
170 |         test: /\.html$/,
171 |         loader: 'html',
172 |         query: {
173 |           attrs: ['link:href'],
174 |         }
175 |       }
176 |     ]
177 |   },
178 |   // Point ESLint to our predefined config.
179 |   eslint: {
180 |     // TODO: consider separate config for production,
181 |     // e.g. to enable no-console and no-debugger only in production.
182 |     configFile: path.join(__dirname, 'eslint.js'),
183 |     useEslintrc: false
184 |   },
185 |   // We use PostCSS for autoprefixing only.
186 |   postcss: function() {
187 |     return [
188 |       autoprefixer({
189 |         browsers: [
190 |           '>1%',
191 |           'last 4 versions',
192 |           'Firefox ESR',
193 |           'not ie < 9', // React doesn't support IE8 anyway
194 |         ]
195 |       }),
196 |     ];
197 |   },
198 |   plugins: [
199 |     // Generates an `index.html` file with the <script> injected.
200 |     new HtmlWebpackPlugin({
201 |       inject: true,
202 |       template: paths.appHtml,
203 |       minify: {
204 |         removeComments: true,
205 |         collapseWhitespace: true,
206 |         removeRedundantAttributes: true,
207 |         useShortDoctype: true,
208 |         removeEmptyAttributes: true,
209 |         removeStyleLinkTypeAttributes: true,
210 |         keepClosingSlash: true,
211 |         minifyJS: true,
212 |         minifyCSS: true,
213 |         minifyURLs: true
214 |       }
215 |     }),
216 |     // Makes some environment variables available to the JS code, for example:
217 |     // if (process.env.NODE_ENV === 'production') { ... }. See `env.js`.
218 |     // It is absolutely essential that NODE_ENV was set to production here.
219 |     // Otherwise React will be compiled in the very slow development mode.
220 |     new webpack.DefinePlugin(env),
221 |     // This helps ensure the builds are consistent if source hasn't changed:
222 |     new webpack.optimize.OccurrenceOrderPlugin(),
223 |     // Try to dedupe duplicated modules, if any:
224 |     new webpack.optimize.DedupePlugin(),
225 |     // Minify the code.
226 |     new webpack.optimize.UglifyJsPlugin({
227 |       compress: {
228 |         screw_ie8: true, // React doesn't support IE8
229 |         warnings: false
230 |       },
231 |       mangle: {
232 |         screw_ie8: true
233 |       },
234 |       output: {
235 |         comments: false,
236 |         screw_ie8: true
237 |       }
238 |     }),
239 |     // Note: this won't work without ExtractTextPlugin.extract(..) in `loaders`.
240 |     new ExtractTextPlugin('static/css/[name].[contenthash:8].css')
241 |   ]
242 | };
243 | 


--------------------------------------------------------------------------------
/scripts/start.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * Copyright (c) 2015-present, Facebook, Inc.
  3 |  * All rights reserved.
  4 |  *
  5 |  * This source code is licensed under the BSD-style license found in the
  6 |  * LICENSE file in the root directory of this source tree. An additional grant
  7 |  * of patent rights can be found in the PATENTS file in the same directory.
  8 |  */
  9 | 
 10 | process.env.NODE_ENV = 'development';
 11 | 
 12 | var path = require('path');
 13 | var chalk = require('chalk');
 14 | var webpack = require('webpack');
 15 | var WebpackDevServer = require('webpack-dev-server');
 16 | var historyApiFallback = require('connect-history-api-fallback');
 17 | var httpProxyMiddleware = require('http-proxy-middleware');
 18 | var execSync = require('child_process').execSync;
 19 | var opn = require('opn');
 20 | var detect = require('detect-port');
 21 | var prompt = require('./utils/prompt');
 22 | var config = require('../config/webpack.config.dev');
 23 | var paths = require('../config/paths');
 24 | 
 25 | // Tools like Cloud9 rely on this.
 26 | var DEFAULT_PORT = process.env.PORT || 3000;
 27 | var compiler;
 28 | 
 29 | // TODO: hide this behind a flag and eliminate dead code on eject.
 30 | // This shouldn't be exposed to the user.
 31 | var handleCompile;
 32 | var isSmokeTest = process.argv.some(arg => arg.indexOf('--smoke-test') > -1);
 33 | if (isSmokeTest) {
 34 |   handleCompile = function (err, stats) {
 35 |     if (err || stats.hasErrors() || stats.hasWarnings()) {
 36 |       process.exit(1);
 37 |     } else {
 38 |       process.exit(0);
 39 |     }
 40 |   };
 41 | }
 42 | 
 43 | // Some custom utilities to prettify Webpack output.
 44 | // This is a little hacky.
 45 | // It would be easier if webpack provided a rich error object.
 46 | var friendlySyntaxErrorLabel = 'Syntax error:';
 47 | function isLikelyASyntaxError(message) {
 48 |   return message.indexOf(friendlySyntaxErrorLabel) !== -1;
 49 | }
 50 | function formatMessage(message) {
 51 |   return message
 52 |     // Make some common errors shorter:
 53 |     .replace(
 54 |       // Babel syntax error
 55 |       'Module build failed: SyntaxError:',
 56 |       friendlySyntaxErrorLabel
 57 |     )
 58 |     .replace(
 59 |       // Webpack file not found error
 60 |       /Module not found: Error: Cannot resolve 'file' or 'directory'/,
 61 |       'Module not found:'
 62 |     )
 63 |     // Internal stacks are generally useless so we strip them
 64 |     .replace(/^\s*at\s.*:\d+:\d+[\s\)]*\n/gm, '') // at ... ...:x:y
 65 |     // Webpack loader names obscure CSS filenames
 66 |     .replace('./~/css-loader!./~/postcss-loader!', '');
 67 | }
 68 | 
 69 | function clearConsole() {
 70 |   // This seems to work best on Windows and other systems.
 71 |   // The intention is to clear the output so you can focus on most recent build.
 72 |   process.stdout.write('\x1bc');
 73 | }
 74 | 
 75 | function setupCompiler(port) {
 76 |   // "Compiler" is a low-level interface to Webpack.
 77 |   // It lets us listen to some events and provide our own custom messages.
 78 |   compiler = webpack(config, handleCompile);
 79 | 
 80 |   // "invalid" event fires when you have changed a file, and Webpack is
 81 |   // recompiling a bundle. WebpackDevServer takes care to pause serving the
 82 |   // bundle, so if you refresh, it'll wait instead of serving the old one.
 83 |   // "invalid" is short for "bundle invalidated", it doesn't imply any errors.
 84 |   compiler.plugin('invalid', function() {
 85 |     clearConsole();
 86 |     console.log('Compiling...');
 87 |   });
 88 | 
 89 |   // "done" event fires when Webpack has finished recompiling the bundle.
 90 |   // Whether or not you have warnings or errors, you will get this event.
 91 |   compiler.plugin('done', function(stats) {
 92 |     clearConsole();
 93 |     var hasErrors = stats.hasErrors();
 94 |     var hasWarnings = stats.hasWarnings();
 95 |     if (!hasErrors && !hasWarnings) {
 96 |       console.log(chalk.green('Compiled successfully!'));
 97 |       console.log();
 98 |       console.log('The app is running at:');
 99 |       console.log();
100 |       console.log('  ' + chalk.cyan('http://localhost:' + port + '/'));
101 |       console.log();
102 |       console.log('Note that the development build is not optimized.');
103 |       console.log('To create a production build, use ' + chalk.cyan('npm run build') + '.');
104 |       console.log();
105 |       return;
106 |     }
107 | 
108 |     // We have switched off the default Webpack output in WebpackDevServer
109 |     // options so we are going to "massage" the warnings and errors and present
110 |     // them in a readable focused way.
111 |     // We use stats.toJson({}, true) to make output more compact and readable:
112 |     // https://github.com/facebookincubator/create-react-app/issues/401#issuecomment-238291901
113 |     var json = stats.toJson({}, true);
114 |     var formattedErrors = json.errors.map(message =>
115 |       'Error in ' + formatMessage(message)
116 |     );
117 |     var formattedWarnings = json.warnings.map(message =>
118 |       'Warning in ' + formatMessage(message)
119 |     );
120 |     if (hasErrors) {
121 |       console.log(chalk.red('Failed to compile.'));
122 |       console.log();
123 |       if (formattedErrors.some(isLikelyASyntaxError)) {
124 |         // If there are any syntax errors, show just them.
125 |         // This prevents a confusing ESLint parsing error
126 |         // preceding a much more useful Babel syntax error.
127 |         formattedErrors = formattedErrors.filter(isLikelyASyntaxError);
128 |       }
129 |       formattedErrors.forEach(message => {
130 |         console.log(message);
131 |         console.log();
132 |       });
133 |       // If errors exist, ignore warnings.
134 |       return;
135 |     }
136 |     if (hasWarnings) {
137 |       console.log(chalk.yellow('Compiled with warnings.'));
138 |       console.log();
139 |       formattedWarnings.forEach(message => {
140 |         console.log(message);
141 |         console.log();
142 |       });
143 |       // Teach some ESLint tricks.
144 |       console.log('You may use special comments to disable some warnings.');
145 |       console.log('Use ' + chalk.yellow('// eslint-disable-next-line') + ' to ignore the next line.');
146 |       console.log('Use ' + chalk.yellow('/* eslint-disable */') + ' to ignore all warnings in a file.');
147 |     }
148 |   });
149 | }
150 | 
151 | function openBrowser(port) {
152 |   if (process.platform === 'darwin') {
153 |     try {
154 |       // Try our best to reuse existing tab
155 |       // on OS X Google Chrome with AppleScript
156 |       execSync('ps cax | grep "Google Chrome"');
157 |       execSync(
158 |         'osascript chrome.applescript http://localhost:' + port + '/',
159 |         {cwd: path.join(__dirname, 'utils'), stdio: 'ignore'}
160 |       );
161 |       return;
162 |     } catch (err) {
163 |       // Ignore errors.
164 |     }
165 |   }
166 |   // Fallback to opn
167 |   // (It will always open new tab)
168 |   opn('http://localhost:' + port + '/');
169 | }
170 | 
171 | function addMiddleware(devServer) {
172 |   // `proxy` lets you to specify a fallback server during development.
173 |   // Every unrecognized request will be forwarded to it.
174 |   var proxy = require(paths.appPackageJson).proxy;
175 |   devServer.use(historyApiFallback({
176 |     // Allow paths with dots in them to be loaded, reference issue #387
177 |     disableDotRule: true,
178 |     // For single page apps, we generally want to fallback to /index.html.
179 |     // However we also want to respect `proxy` for API calls.
180 |     // So if `proxy` is specified, we need to decide which fallback to use.
181 |     // We use a heuristic: if request `accept`s text/html, we pick /index.html.
182 |     // Modern browsers include text/html into `accept` header when navigating.
183 |     // However API calls like `fetch()` won’t generally won’t accept text/html.
184 |     // If this heuristic doesn’t work well for you, don’t use `proxy`.
185 |     htmlAcceptHeaders: proxy ?
186 |       ['text/html'] :
187 |       ['text/html', '*/*']
188 |   }));
189 |   if (proxy) {
190 |     if (typeof proxy !== 'string') {
191 |       console.log(chalk.red('When specified, "proxy" in package.json must be a string.'));
192 |       console.log(chalk.red('Instead, the type of "proxy" was "' + typeof proxy + '".'));
193 |       console.log(chalk.red('Either remove "proxy" from package.json, or make it a string.'));
194 |       process.exit(1);
195 |     }
196 | 
197 |     // Otherwise, if proxy is specified, we will let it handle any request.
198 |     // There are a few exceptions which we won't send to the proxy:
199 |     // - /index.html (served as HTML5 history API fallback)
200 |     // - /*.hot-update.json (WebpackDevServer uses this too for hot reloading)
201 |     // - /sockjs-node/* (WebpackDevServer uses this for hot reloading)
202 |     // Tip: use https://www.debuggex.com/ to visualize the regex
203 |     var mayProxy = /^(?!\/(index\.html$|.*\.hot-update\.json$|sockjs-node\/)).*$/;
204 |     devServer.use(mayProxy,
205 |       // Pass the scope regex both to Express and to the middleware for proxying
206 |       // of both HTTP and WebSockets to work without false positives.
207 |       httpProxyMiddleware(pathname => mayProxy.test(pathname), {
208 |         target: proxy,
209 |         logLevel: 'silent',
210 |         secure: false,
211 |         changeOrigin: true
212 |       })
213 |     );
214 |   }
215 |   // Finally, by now we have certainly resolved the URL.
216 |   // It may be /index.html, so let the dev server try serving it again.
217 |   devServer.use(devServer.middleware);
218 | }
219 | 
220 | function runDevServer(port) {
221 |   var devServer = new WebpackDevServer(compiler, {
222 |     // Enable hot reloading server. It will provide /sockjs-node/ endpoint
223 |     // for the WebpackDevServer client so it can learn when the files were
224 |     // updated. The WebpackDevServer client is included as an entry point
225 |     // in the Webpack development configuration. Note that only changes
226 |     // to CSS are currently hot reloaded. JS changes will refresh the browser.
227 |     hot: true,
228 |     // It is important to tell WebpackDevServer to use the same "root" path
229 |     // as we specified in the config. In development, we always serve from /.
230 |     publicPath: config.output.publicPath,
231 |     // WebpackDevServer is noisy by default so we emit custom message instead
232 |     // by listening to the compiler events with `compiler.plugin` calls above.
233 |     quiet: true,
234 |     // Reportedly, this avoids CPU overload on some systems.
235 |     // https://github.com/facebookincubator/create-react-app/issues/293
236 |     watchOptions: {
237 |       ignored: /node_modules/
238 |     }
239 |   });
240 | 
241 |   // Our custom middleware proxies requests to /index.html or a remote API.
242 |   addMiddleware(devServer);
243 | 
244 |   // Launch WebpackDevServer.
245 |   devServer.listen(port, (err, result) => {
246 |     if (err) {
247 |       return console.log(err);
248 |     }
249 | 
250 |     clearConsole();
251 |     console.log(chalk.cyan('Starting the development server...'));
252 |     console.log();
253 |     openBrowser(port);
254 |   });
255 | }
256 | 
257 | function run(port) {
258 |   setupCompiler(port);
259 |   runDevServer(port);
260 | }
261 | 
262 | // We attempt to use the default port but if it is busy, we offer the user to
263 | // run on a different port. `detect()` Promise resolves to the next free port.
264 | detect(DEFAULT_PORT).then(port => {
265 |   if (port === DEFAULT_PORT) {
266 |     run(port);
267 |     return;
268 |   }
269 | 
270 |   clearConsole();
271 |   var question =
272 |     chalk.yellow('Something is already running on port ' + DEFAULT_PORT + '.') +
273 |     '\n\nWould you like to run the app on another port instead?';
274 | 
275 |   prompt(question, true).then(shouldChangePort => {
276 |     if (shouldChangePort) {
277 |       run(port);
278 |     }
279 |   });
280 | });
281 | 


--------------------------------------------------------------------------------
/template/README.md:
--------------------------------------------------------------------------------
  1 | Below you will find some information on how to perform common tasks.  
  2 | You can find the most recent version of this guide [here](https://github.com/facebookincubator/create-react-app/blob/master/template/README.md).
  3 | 
  4 | ## Table of Contents
  5 | 
  6 | - [Updating to New Releases](#updating-to-new-releases)
  7 | - [Sending Feedback](#sending-feedback)
  8 | - [Folder Structure](#folder-structure)
  9 | - [Available Scripts](#available-scripts)
 10 |   - [npm start](#npm-start)
 11 |   - [npm run build](#npm-run-build)
 12 |   - [npm run eject](#npm-run-eject)
 13 | - [Displaying Lint Output in the Editor](#displaying-lint-output-in-the-editor)
 14 | - [Installing a Dependency](#installing-a-dependency)
 15 | - [Importing a Component](#importing-a-component)
 16 | - [Adding a Stylesheet](#adding-a-stylesheet)
 17 | - [Post-Processing CSS](#post-processing-css)
 18 | - [Adding Images and Fonts](#adding-images-and-fonts)
 19 | - [Adding Bootstrap](#adding-bootstrap)
 20 | - [Adding Flow](#adding-flow)
 21 | - [Adding Custom Environment Variables](#adding-custom-environment-variables)
 22 | - [Integrating with a Node Backend](#integrating-with-a-node-backend)
 23 | - [Proxying API Requests in Development](#proxying-api-requests-in-development)
 24 | - [Deployment](#deployment)
 25 |   - [Now](#now)
 26 |   - [Heroku](#heroku)
 27 |   - [Surge](#surge)
 28 |   - [GitHub Pages](#github-pages)
 29 | - [Something Missing?](#something-missing)
 30 | 
 31 | ## Updating to New Releases
 32 | 
 33 | Create React App is divided into two packages:
 34 | 
 35 | * `create-react-app` is a global command-line utility that you use to create new projects.
 36 | * `react-scripts` is a development dependency in the generated projects (including this one).
 37 | 
 38 | You almost never need to update `create-react-app` itself: it’s delegates all the setup to `react-scripts`.
 39 | 
 40 | When you run `create-react-app`, it always creates the project with the latest version of `react-scripts` so you’ll get all the new features and improvements in newly created apps automatically.
 41 | 
 42 | To update an existing project to a new version of `react-scripts`, [open the changelog](https://github.com/facebookincubator/create-react-app/blob/master/CHANGELOG.md), find the version you’re currently on (check `package.json` in this folder if you’re not sure), and apply the migration instructions for the newer versions.
 43 | 
 44 | In most cases bumping the `react-scripts` version in `package.json` and running `npm install` in this folder should be enough, but it’s good to consult the [changelog](https://github.com/facebookincubator/create-react-app/blob/master/CHANGELOG.md) for potential breaking changes.
 45 | 
 46 | We commit to keeping the breaking changes minimal so you can upgrade `react-scripts` painlessly.
 47 | 
 48 | ## Sending Feedback
 49 | 
 50 | We are always open to [your feedback](https://github.com/facebookincubator/create-react-app/issues).
 51 | 
 52 | ## Folder Structure
 53 | 
 54 | After creation, your project should look like this:
 55 | 
 56 | ```
 57 | my-app/
 58 |   README.md
 59 |   index.html
 60 |   favicon.ico
 61 |   node_modules/
 62 |   package.json
 63 |   src/
 64 |     App.css
 65 |     App.js
 66 |     index.css
 67 |     index.js
 68 |     logo.svg
 69 | ```
 70 | 
 71 | For the project to build, **these files must exist with exact filenames**:
 72 | 
 73 | * `index.html` is the page template;
 74 | * `favicon.ico` is the icon you see in the browser tab;
 75 | * `src/index.js` is the JavaScript entry point.
 76 | 
 77 | You can delete or rename the other files.
 78 | 
 79 | You may create subdirectories inside `src`. For faster rebuilds, only files inside `src` are processed by Webpack.  
 80 | You need to **put any JS and CSS files inside `src`**, or Webpack won’t see them.
 81 | 
 82 | You can, however, create more top-level directories.  
 83 | They will not be included in the production build so you can use them for things like documentation.
 84 | 
 85 | ## Available Scripts
 86 | 
 87 | In the project directory, you can run:
 88 | 
 89 | ### `npm start`
 90 | 
 91 | Runs the app in the development mode.<br>
 92 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
 93 | 
 94 | The page will reload if you make edits.<br>
 95 | You will also see any lint errors in the console.
 96 | 
 97 | ### `npm run build`
 98 | 
 99 | Builds the app for production to the `build` folder.<br>
100 | It correctly bundles React in production mode and optimizes the build for the best performance.
101 | 
102 | The build is minified and the filenames include the hashes.<br>
103 | Your app is ready to be deployed!
104 | 
105 | ### `npm run eject`
106 | 
107 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!**
108 | 
109 | If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
110 | 
111 | Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
112 | 
113 | You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
114 | 
115 | ## Displaying Lint Output in the Editor
116 | 
117 | >Note: this feature is available with `react-scripts@0.2.0` and higher.
118 | 
119 | Some editors, including Sublime Text, Atom, and Visual Studio Code, provide plugins for ESLint.
120 | 
121 | They are not required for linting. You should see the linter output right in your terminal as well as the browser console. However, if you prefer the lint results to appear right in your editor, there are some extra steps you can do.
122 | 
123 | You would need to install an ESLint plugin for your editor first.
124 | 
125 | >**A note for Atom `linter-eslint` users**
126 | 
127 | >If you are using the Atom `linter-eslint` plugin, make sure that **Use global ESLint installation** option is checked:
128 | 
129 | ><img src="http://i.imgur.com/yVNNHJM.png" width="300">
130 | 
131 | Then make sure `package.json` of your project ends with this block:
132 | 
133 | ```js
134 | {
135 |   // ...
136 |   "eslintConfig": {
137 |     "extends": "./node_modules/react-scripts/config/eslint.js"
138 |   }
139 | }
140 | ```
141 | 
142 | Projects generated with `react-scripts@0.2.0` and higher should already have it.  
143 | If you don’t need ESLint integration with your editor, you can safely delete those three lines from your `package.json`.
144 | 
145 | Finally, you will need to install some packages *globally*:
146 | 
147 | ```sh
148 | npm install -g eslint babel-eslint eslint-plugin-react eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-flowtype
149 | ```
150 | 
151 | We recognize that this is suboptimal, but it is currently required due to the way we hide the ESLint dependency. The ESLint team is already [working on a solution to this](https://github.com/eslint/eslint/issues/3458) so this may become unnecessary in a couple of months.
152 | 
153 | ## Installing a Dependency
154 | 
155 | The generated project includes React and ReactDOM as dependencies. It also includes a set of scripts used by Create React App as a development dependency. You may install other dependencies (for example, React Router) with `npm`:
156 | 
157 | ```
158 | npm install --save <library-name>
159 | ```
160 | 
161 | ## Importing a Component
162 | 
163 | This project setup supports ES6 modules thanks to Babel.  
164 | While you can still use `require()` and `module.exports`, we encourage you to use [`import` and `export`](http://exploringjs.com/es6/ch_modules.html) instead.
165 | 
166 | For example:
167 | 
168 | ### `Button.js`
169 | 
170 | ```js
171 | import React, { Component } from 'react';
172 | 
173 | class Button extends Component {
174 |   render() {
175 |     // ...
176 |   }
177 | }
178 | 
179 | export default Button; // Don’t forget to use export default!
180 | ```
181 | 
182 | ### `DangerButton.js`
183 | 
184 | 
185 | ```js
186 | import React, { Component } from 'react';
187 | import Button from './Button'; // Import a component from another file
188 | 
189 | class DangerButton extends Component {
190 |   render() {
191 |     return <Button color="red" />;
192 |   }
193 | }
194 | 
195 | export default DangerButton;
196 | ```
197 | 
198 | Be aware of the [difference between default and named exports](http://stackoverflow.com/questions/36795819/react-native-es-6-when-should-i-use-curly-braces-for-import/36796281#36796281). It is a common source of mistakes.
199 | 
200 | We suggest that you stick to using default imports and exports when a module only exports a single thing (for example, a component). That’s what you get when you use `export default Button` and `import Button from './Button'`.
201 | 
202 | Named exports are useful for utility modules that export several functions. A module may have at most one default export and as many named exports as you like.
203 | 
204 | Learn more about ES6 modules:
205 | 
206 | * [When to use the curly braces?](http://stackoverflow.com/questions/36795819/react-native-es-6-when-should-i-use-curly-braces-for-import/36796281#36796281)
207 | * [Exploring ES6: Modules](http://exploringjs.com/es6/ch_modules.html)
208 | * [Understanding ES6: Modules](https://leanpub.com/understandinges6/read#leanpub-auto-encapsulating-code-with-modules)
209 | 
210 | ## Adding a Stylesheet
211 | 
212 | This project setup uses [Webpack](https://webpack.github.io/) for handling all assets. Webpack offers a custom way of “extending” the concept of `import` beyond JavaScript. To express that a JavaScript file depends on a CSS file, you need to **import the CSS from the JavaScript file**:
213 | 
214 | ### `Button.css`
215 | 
216 | ```css
217 | .Button {
218 |   padding: 20px;
219 | }
220 | ```
221 | 
222 | ### `Button.js`
223 | 
224 | ```js
225 | import React, { Component } from 'react';
226 | import './Button.css'; // Tell Webpack that Button.js uses these styles
227 | 
228 | class Button extends Component {
229 |   render() {
230 |     // You can use them as regular CSS styles
231 |     return <div className="Button" />;
232 |   }
233 | }
234 | ```
235 | 
236 | **This is not required for React** but many people find this feature convenient. You can read about the benefits of this approach [here](https://medium.com/seek-ui-engineering/block-element-modifying-your-javascript-components-d7f99fcab52b). However you should be aware that this makes your code less portable to other build tools and environments than Webpack.
237 | 
238 | In development, expressing dependencies this way allows your styles to be reloaded on the fly as you edit them. In production, all CSS files will be concatenated into a single minified `.css` file in the build output.
239 | 
240 | If you are concerned about using Webpack-specific semantics, you can put all your CSS right into `src/index.css`. It would still be imported from `src/index.js`, but you could always remove that import if you later migrate to a different build tool.
241 | 
242 | ## Post-Processing CSS
243 | 
244 | This project setup minifies your CSS and adds vendor prefixes to it automatically through [Autoprefixer](https://github.com/postcss/autoprefixer) so you don’t need to worry about it.
245 | 
246 | For example, this:
247 | 
248 | ```css
249 | .App {
250 |   display: flex;
251 |   flex-direction: row;
252 |   align-items: center;
253 | }
254 | ```
255 | 
256 | becomes this:
257 | 
258 | ```css
259 | .App {
260 |   display: -webkit-box;
261 |   display: -ms-flexbox;
262 |   display: flex;
263 |   -webkit-box-orient: horizontal;
264 |   -webkit-box-direction: normal;
265 |       -ms-flex-direction: row;
266 |           flex-direction: row;
267 |   -webkit-box-align: center;
268 |       -ms-flex-align: center;
269 |           align-items: center;
270 | }
271 | ```
272 | 
273 | There is currently no support for preprocessors such as Less, or for sharing variables across CSS files.
274 | 
275 | ## Adding Images and Fonts
276 | 
277 | With Webpack, using static assets like images and fonts works similarly to CSS.
278 | 
279 | You can **`import` an image right in a JavaScript module**. This tells Webpack to include that image in the bundle. Unlike CSS imports, importing an image or a font gives you a string value. This value is the final image path you can reference in your code.
280 | 
281 | Here is an example:
282 | 
283 | ```js
284 | import React from 'react';
285 | import logo from './logo.png'; // Tell Webpack this JS file uses this image
286 | 
287 | console.log(logo); // /logo.84287d09.png
288 | 
289 | function Header() {
290 |   // Import result is the URL of your image
291 |   return <img src={logo} alt="Logo" />;
292 | }
293 | 
294 | export default function Header;
295 | ```
296 | 
297 | This works in CSS too:
298 | 
299 | ```css
300 | .Logo {
301 |   background-image: url(./logo.png);
302 | }
303 | ```
304 | 
305 | Webpack finds all relative module references in CSS (they start with `./`) and replaces them with the final paths from the compiled bundle. If you make a typo or accidentally delete an important file, you will see a compilation error, just like when you import a non-existent JavaScript module. The final filenames in the compiled bundle are generated by Webpack from content hashes. If the file content changes in the future, Webpack will give it a different name in production so you don’t need to worry about long-term caching of assets.
306 | 
307 | Please be advised that this is also a custom feature of Webpack.
308 | 
309 | **It is not required for React** but many people enjoy it (and React Native uses a similar mechanism for images). However it may not be portable to some other environments, such as Node.js and Browserify. If you prefer to reference static assets in a more traditional way outside the module system, please let us know [in this issue](https://github.com/facebookincubator/create-react-app/issues/28), and we will consider support for this.
310 | 
311 | ## Adding Bootstrap
312 | 
313 | You don’t have to use [React Bootstrap](https://react-bootstrap.github.io) together with React but it is a popular library for integrating Bootstrap with React apps. If you need it, you can integrate it with Create React App by following these steps:
314 | 
315 | Install React Bootstrap and Bootstrap from NPM. React Bootstrap does not include Bootstrap CSS so this needs to be installed as well:
316 | 
317 | ```
318 | npm install react-bootstrap --save
319 | npm install bootstrap@3 --save
320 | ```
321 | 
322 | Import Bootstrap CSS and optionally Bootstrap theme CSS in the ```src/index.js``` file:
323 | 
324 | ```js
325 | import 'bootstrap/dist/css/bootstrap.css';
326 | import 'bootstrap/dist/css/bootstrap-theme.css';
327 | ```
328 | 
329 | Import required React Bootstrap components within ```src/App.js``` file or your custom component files:
330 | 
331 | ```js
332 | import { Navbar, Jumbotron, Button } from 'react-bootstrap';
333 | ```
334 | 
335 | Now you are ready to use the imported React Bootstrap components within your component hierarchy defined in the render method. Here is an example [`App.js`](https://gist.githubusercontent.com/gaearon/85d8c067f6af1e56277c82d19fd4da7b/raw/6158dd991b67284e9fc8d70b9d973efe87659d72/App.js) redone using React Bootstrap.
336 | 
337 | ## Adding Flow
338 | 
339 | Flow typing is currently [not supported out of the box](https://github.com/facebookincubator/create-react-app/issues/72) with the default `.flowconfig` generated by Flow. If you run it, you might get errors like this:
340 | 
341 | ```js
342 | node_modules/fbjs/lib/Deferred.js.flow:60
343 |  60:     Promise.prototype.done.apply(this._promise, arguments);
344 |                            ^^^^ property `done`. Property not found in
345 | 495: declare class Promise<+R> {
346 |      ^ Promise. See lib: /private/tmp/flow/flowlib_34952d31/core.js:495
347 | 
348 | node_modules/fbjs/lib/shallowEqual.js.flow:29
349 |  29:     return x !== 0 || 1 / (x: $FlowIssue) === 1 / (y: $FlowIssue);
350 |                                    ^^^^^^^^^^ identifier `$FlowIssue`. Could not resolve name
351 | 
352 | src/App.js:3
353 |   3: import logo from './logo.svg';
354 |                       ^^^^^^^^^^^^ ./logo.svg. Required module not found
355 | 
356 | src/App.js:4
357 |   4: import './App.css';
358 |             ^^^^^^^^^^^ ./App.css. Required module not found
359 | 
360 | src/index.js:5
361 |   5: import './index.css';
362 |             ^^^^^^^^^^^^^ ./index.css. Required module not found
363 | ```
364 | 
365 | To fix this, change your `.flowconfig` to look like this:
366 | 
367 | ```ini
368 | [libs]
369 | ./node_modules/fbjs/flow/lib
370 | 
371 | [options]
372 | esproposal.class_static_fields=enable
373 | esproposal.class_instance_fields=enable
374 | 
375 | module.name_mapper='^\(.*\)\.css$' -> 'react-scripts/config/flow/css'
376 | module.name_mapper='^\(.*\)\.\(jpg\|png\|gif\|eot\|svg\|ttf\|woff\|woff2\|mp4\|webm\)$' -> 'react-scripts/config/flow/file'
377 | 
378 | suppress_type=$FlowIssue
379 | suppress_type=$FlowFixMe
380 | ```
381 | 
382 | Re-run flow, and you shouldn’t get any extra issues.
383 | 
384 | If you later `eject`, you’ll need to replace `react-scripts` references with the `<PROJECT_ROOT>` placeholder, for example:
385 | 
386 | ```ini
387 | module.name_mapper='^\(.*\)\.css$' -> '<PROJECT_ROOT>/config/flow/css'
388 | module.name_mapper='^\(.*\)\.\(jpg\|png\|gif\|eot\|svg\|ttf\|woff\|woff2\|mp4\|webm\)$' -> '<PROJECT_ROOT>/config/flow/file'
389 | ```
390 | 
391 | We will consider integrating more tightly with Flow in the future so that you don’t have to do this.
392 | 
393 | ## Adding Custom Environment Variables
394 | 
395 | > Note: this feature is available with `react-scripts@0.3.0` and higher.
396 | 
397 | Your project can consume variables declared in your environment as if they were declared locally in your JS files. By
398 | default you will have `NODE_ENV` defined for you, and any other environment variables starting with
399 | `REACT_APP_`. These environment variables will be defined for you on `process.env`. For example, having an environment
400 | variable named `REACT_APP_SECRET_CODE` will be exposed in your JS as `process.env.REACT_APP_SECRET_CODE`, in addition
401 | to `process.env.NODE_ENV`.
402 | 
403 | These environment variables can be useful for displaying information conditionally based on where the project is
404 | deployed or consuming sensitive data that lives outside of version control.
405 | 
406 | First, you need to have environment variables defined, which can vary between OSes. For example, let's say you wanted to
407 | consume a secret defined in the environment inside a `<form>`:
408 | 
409 | ```jsx
410 | render() {
411 |   return (
412 |     <div>
413 |       <small>You are running this application in <b>{process.env.NODE_ENV}</b> mode.</small>
414 |       <form>
415 |         <input type="hidden" defaultValue={process.env.REACT_APP_SECRET_CODE} />
416 |       </form>
417 |     </div>
418 |   );
419 | }
420 | ```
421 | 
422 | The above form is looking for a variable called `REACT_APP_SECRET_CODE` from the environment. In order to consume this
423 | value, we need to have it defined in the environment:
424 | 
425 | ### Windows (cmd.exe)
426 | 
427 | ```cmd
428 | set REACT_APP_SECRET_CODE=abcdef&&npm start
429 | ```
430 | 
431 | (Note: the lack of whitespace is intentional.)
432 | 
433 | ### Linux, OS X (Bash)
434 | 
435 | ```bash
436 | REACT_APP_SECRET_CODE=abcdef npm start
437 | ```
438 | 
439 | > Note: Defining environment variables in this manner is temporary for the life of the shell session. Setting
440 | permanent environment variables is outside the scope of these docs.
441 | 
442 | With our environment variable defined, we start the app and consume the values. Remember that the `NODE_ENV`
443 | variable will be set for you automatically. When you load the app in the browser and inspect the `<input>`, you will see
444 | its value set to `abcdef`, and the bold text will show the environment provided when using `npm start`:
445 | 
446 | ```html
447 | <div>
448 |   <small>You are running this application in <b>development</b> mode.</small>
449 |   <form>
450 |     <input type="hidden" value="abcdef" />
451 |   </form>
452 | </div>
453 | ```
454 | 
455 | Having access to the `NODE_ENV` is also useful for performing actions conditionally:
456 | 
457 | ```js
458 | if (process.env.NODE_ENV !== 'production') {
459 |   analytics.disable();
460 | }
461 | ```
462 | 
463 | ## Integrating with a Node Backend
464 | 
465 | Check out [this tutorial](https://www.fullstackreact.com/articles/using-create-react-app-with-a-server/) for instructions on integrating an app with a Node backend running on another port, and using `fetch()` to access it. You can find the companion GitHub repository [here](https://github.com/fullstackreact/food-lookup-demo).
466 | 
467 | ## Proxying API Requests in Development
468 | 
469 | >Note: this feature is available with `react-scripts@0.3.0` and higher.
470 | 
471 | People often serve the front-end React app from the same host and port as their backend implementation.  
472 | For example, a production setup might look like this after the app is deployed:
473 | 
474 | ```
475 | /             - static server returns index.html with React app
476 | /todos        - static server returns index.html with React app
477 | /api/todos    - server handles any /api/* requests using the backend implementation
478 | ```
479 | 
480 | Such setup is **not** required. However, if you **do** have a setup like this, it is convenient to write requests like `fetch('/api/todos')` without worrying about redirecting them to another host or port during development.
481 | 
482 | To tell the development server to proxy any unknown requests to your API server in development, add a `proxy` field to your `package.json`, for example:
483 | 
484 | ```js
485 |   "proxy": "http://localhost:4000",
486 | ```
487 | 
488 | This way, when you `fetch('/api/todos')` in development, the development server will recognize that it’s not a static asset, and will proxy your request to `http://localhost:4000/api/todos` as a fallback.
489 | 
490 | Conveniently, this avoids [CORS issues](http://stackoverflow.com/questions/21854516/understanding-ajax-cors-and-security-considerations) and error messages like this in development:
491 | 
492 | ```
493 | Fetch API cannot load http://localhost:4000/api/todos. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
494 | ```
495 | 
496 | Keep in mind that `proxy` only has effect in development (with `npm start`), and it is up to you to ensure that URLs like `/api/todos` point to the right thing in production. You don’t have to use the `/api` prefix. Any unrecognized request will be redirected to the specified `proxy`.
497 | 
498 | Currently the `proxy` option only handles HTTP requests, and it won’t proxy WebSocket connections.  
499 | If the `proxy` option is **not** flexible enough for you, alternatively you can:
500 | 
501 | * Enable CORS on your server ([here’s how to do it for Express](http://enable-cors.org/server_expressjs.html)).
502 | * Use [environment variables](#adding-custom-environment-variables) to inject the right server host and port into your app.
503 | 
504 | ## Deployment
505 | 
506 | By default, Create React App produces a build assuming your app is hosted at the server root.  
507 | To override this, specify the `homepage` in your `package.json`, for example:
508 | 
509 | ```js
510 |   "homepage": "http://mywebsite.com/relativepath",
511 | ```
512 | 
513 | This will let Create React App correctly infer the root path to use in the generated HTML file.
514 | 
515 | ### Now
516 | 
517 | See [this example](https://github.com/xkawi/create-react-app-now) for a zero-configuration single-command deployment with [now](https://zeit.co/now).
518 | 
519 | ### Heroku
520 | 
521 | Use the [Heroku Buildpack for create-react-app](https://github.com/mars/create-react-app-buildpack).
522 | 
523 | ### Surge
524 | 
525 | Install the Surge CLI if you haven't already by running `npm install -g surge`. Run the `surge` command and log in you or create a new account. You just need to specify the *build* folder and your custom domain, and you are done.
526 | 
527 | ```sh
528 |               email: email@domain.com
529 |            password: ********
530 |        project path: /path/to/project/build
531 |                size: 7 files, 1.8 MB
532 |              domain: create-react-app.surge.sh
533 |              upload: [====================] 100%, eta: 0.0s
534 |    propagate on CDN: [====================] 100%
535 |                plan: Free
536 |               users: email@domain.com
537 |          IP Address: X.X.X.X
538 | 
539 |     Success! Project is published and running at create-react-app.surge.sh
540 | ```
541 | 
542 | Note that in order to support routers that use html5 `pushState` API, you may want to rename the `index.html` in your build folder to `200.html` before deploying to Surge. This [ensures that every URL falls back to that file](https://surge.sh/help/adding-a-200-page-for-client-side-routing).
543 | 
544 | ### GitHub Pages
545 | 
546 | >Note: this feature is available with `react-scripts@0.2.0` and higher.
547 | 
548 | Open your `package.json` and add a `homepage` field:
549 | 
550 | ```js
551 |   "homepage": "http://myusername.github.io/my-app",
552 | ```
553 | 
554 | Now, whenever you run `npm run build`, you will see a cheat sheet with a sequence of commands to deploy to GitHub pages:
555 | 
556 | ```sh
557 | git commit -am "Save local changes"
558 | git checkout -B gh-pages
559 | git add -f build
560 | git commit -am "Rebuild website"
561 | git filter-branch -f --prune-empty --subdirectory-filter build
562 | git push -f origin gh-pages
563 | git checkout -
564 | ```
565 | 
566 | You may copy and paste them, or put them into a custom shell script. You may also customize them for another hosting provider.
567 | 
568 | Note that GitHub Pages doesn't support routers that use the HTML5 `pushState` history API under the hood (for example, React Router using `browserHistory`). This is becasue when there is a fresh page load for a url like `http://user.github.io/todomvc/todos/42`, where `/todos/42` is a frontend route, the GitHub Pages server returns 404 because it knows nothing of `/todos/42`. If you want to add a router to a project hosted on GitHub Pages, here are a couple of solutions:
569 | * You could switch from using HTML5 history API to routing with hashes. If you use React Router, you can switch to `hashHistory` for this effect, but the URL will be longer and more verbose (for example, `http://user.github.io/todomvc/#/todos/42?_k=yknaj`). [Read more](https://github.com/reactjs/react-router/blob/master/docs/guides/Histories.md#histories) about different history implementations in React Router.
570 | * Alternatively, you can use a trick to teach GitHub Pages to handle 404 by redirecting to your `index.html` page with a special redirect parameter. You would need to add a `404.html` file with the redirection code to the `build` folder before deploying your project, and you’ll need to add code handling the redirect parameter to `index.html`. You can find a detailed explanation of this technique [in this guide](https://github.com/rafrex/spa-github-pages).
571 | 
572 | ## Something Missing?
573 | 
574 | If you have ideas for more “How To” recipes that should be on this page, [let us know](https://github.com/facebookincubator/create-react-app/issues) or [contribute some!](https://github.com/facebookincubator/create-react-app/edit/master/template/README.md)
575 | 


--------------------------------------------------------------------------------