From 36cd35d684f6f0eda971b30c789010758fc61ceb Mon Sep 17 00:00:00 2001 From: Joe Lim Date: Fri, 3 Nov 2017 19:23:31 -0700 Subject: [PATCH 001/122] Refactor extra watch options regex to react-dev-utils (#3362) * extra watch options regex to react-dev-utils * fix regex * add test * fix eslint error * include react-dev-utils test in CI script * attempt to fix import error * attempt to fix error on CI * Update .eslintrc --- packages/react-dev-utils/__tests__/.eslintrc | 5 ++ .../__tests__/ignoredFiles.test.js | 55 +++++++++++++++++++ packages/react-dev-utils/ignoredFiles.js | 19 +++++++ packages/react-dev-utils/package.json | 7 +++ .../config/webpack.config.prod.js | 2 +- .../config/webpackDevServer.config.js | 9 +-- tasks/e2e-simple.sh | 3 + 7 files changed, 92 insertions(+), 8 deletions(-) create mode 100644 packages/react-dev-utils/__tests__/.eslintrc create mode 100644 packages/react-dev-utils/__tests__/ignoredFiles.test.js create mode 100644 packages/react-dev-utils/ignoredFiles.js diff --git a/packages/react-dev-utils/__tests__/.eslintrc b/packages/react-dev-utils/__tests__/.eslintrc new file mode 100644 index 000000000..55f121d15 --- /dev/null +++ b/packages/react-dev-utils/__tests__/.eslintrc @@ -0,0 +1,5 @@ +{ + "env": { + "jest": true + } +} diff --git a/packages/react-dev-utils/__tests__/ignoredFiles.test.js b/packages/react-dev-utils/__tests__/ignoredFiles.test.js new file mode 100644 index 000000000..6feed9797 --- /dev/null +++ b/packages/react-dev-utils/__tests__/ignoredFiles.test.js @@ -0,0 +1,55 @@ +/** + * Copyright (c) 2015-present, Facebook, Inc. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +'use strict'; + +const ignoredFiles = require('../ignoredFiles'); + +describe('ignore watch files regex', () => { + it('normal file', () => { + const appSrc = '/root/src/'; + const isIgnored = ignoredFiles(appSrc).test('/foo'); + const isIgnoredInSrc = ignoredFiles(appSrc).test('/root/src/foo'); + + expect(isIgnored).toBe(false); + expect(isIgnoredInSrc).toBe(false); + }); + + it('node modules', () => { + const appSrc = '/root/src/'; + const isIgnored = ignoredFiles(appSrc).test('/root/node_modules/foo'); + + expect(isIgnored).toBe(true); + }); + + it('node modules inside source directory', () => { + const appSrc = '/root/src/'; + const isIgnored = ignoredFiles(appSrc).test('/root/src/node_modules/foo'); + const isIgnoredMoreThanOneLevel = ignoredFiles(appSrc).test( + '/root/src/bar/node_modules/foo' + ); + + expect(isIgnored).toBe(false); + expect(isIgnoredMoreThanOneLevel).toBe(false); + }); + + it('path contains source directory', () => { + const appSrc = '/root/src/'; + const isIgnored = ignoredFiles(appSrc).test( + '/bar/root/src/node_modules/foo' + ); + + expect(isIgnored).toBe(true); + }); + + it('path starts with source directory', () => { + const appSrc = '/root/src/'; + const isIgnored = ignoredFiles(appSrc).test('/root/src2/node_modules/foo'); + + expect(isIgnored).toBe(true); + }); +}); diff --git a/packages/react-dev-utils/ignoredFiles.js b/packages/react-dev-utils/ignoredFiles.js new file mode 100644 index 000000000..50348ea6b --- /dev/null +++ b/packages/react-dev-utils/ignoredFiles.js @@ -0,0 +1,19 @@ +/** + * Copyright (c) 2015-present, Facebook, Inc. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +'use strict'; + +const path = require('path'); + +module.exports = function ignoredFiles(appSrc) { + return new RegExp( + `^(?!${path + .normalize(appSrc + '/') + .replace(/[\\]+/g, '/')}).+/node_modules/`, + 'g' + ); +}; diff --git a/packages/react-dev-utils/package.json b/packages/react-dev-utils/package.json index db7114a26..54606f33f 100644 --- a/packages/react-dev-utils/package.json +++ b/packages/react-dev-utils/package.json @@ -21,6 +21,7 @@ "printBuildError.js", "formatWebpackMessages.js", "getProcessForPort.js", + "ignoredFiles.js", "inquirer.js", "InterpolateHtmlPlugin.js", "launchEditor.js", @@ -53,5 +54,11 @@ "sockjs-client": "1.1.4", "strip-ansi": "3.0.1", "text-table": "0.2.0" + }, + "devDependencies": { + "jest": "20.0.4" + }, + "scripts": { + "test": "jest" } } diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js index c32eb0f08..457a96728 100644 --- a/packages/react-scripts/config/webpack.config.prod.js +++ b/packages/react-scripts/config/webpack.config.prod.js @@ -301,7 +301,7 @@ module.exports = { }, mangle: { safari10: true, - }, + }, output: { comments: false, // Turned on because emoji and regex is not minified properly using default diff --git a/packages/react-scripts/config/webpackDevServer.config.js b/packages/react-scripts/config/webpackDevServer.config.js index 5ff5d0abb..3c9c6cf0c 100644 --- a/packages/react-scripts/config/webpackDevServer.config.js +++ b/packages/react-scripts/config/webpackDevServer.config.js @@ -10,7 +10,7 @@ const errorOverlayMiddleware = require('react-dev-utils/errorOverlayMiddleware'); const noopServiceWorkerMiddleware = require('react-dev-utils/noopServiceWorkerMiddleware'); -const path = require('path'); +const ignoredFiles = require('react-dev-utils/ignoredFiles'); const config = require('./webpack.config.dev'); const paths = require('./paths'); @@ -76,12 +76,7 @@ module.exports = function(proxy, allowedHost) { // src/node_modules is not ignored to support absolute imports // https://github.com/facebookincubator/create-react-app/issues/1065 watchOptions: { - ignored: new RegExp( - `^(?!${path - .normalize(paths.appSrc + '/') - .replace(/[\\]+/g, '\\\\')}).+[\\\\/]node_modules[\\\\/]`, - 'g' - ), + ignored: ignoredFiles(paths.appSrc), }, // Enable HTTPS if the HTTPS environment variable is set to 'true' https: protocol === 'https', diff --git a/tasks/e2e-simple.sh b/tasks/e2e-simple.sh index 867b6dc95..9e51b0080 100755 --- a/tasks/e2e-simple.sh +++ b/tasks/e2e-simple.sh @@ -159,6 +159,9 @@ cd packages/react-error-overlay/ npm test npm run build:prod cd ../.. +cd packages/react-dev-utils/ +npm test +cd ../.. # ****************************************************************************** # First, test the create-react-app development environment. From 231873e948fe5362bef40a0d4da5858ff8f077ba Mon Sep 17 00:00:00 2001 From: Joe Lim Date: Sun, 5 Nov 2017 04:12:50 -0800 Subject: [PATCH 002/122] one-line waiting for app start (#3411) * one-line waiting for app start * remove fixed todo --- appveyor.yml | 4 +--- tasks/e2e-kitchensink.sh | 18 ++---------------- 2 files changed, 3 insertions(+), 19 deletions(-) diff --git a/appveyor.yml b/appveyor.yml index ffe48fc85..5d957aa7e 100644 --- a/appveyor.yml +++ b/appveyor.yml @@ -28,8 +28,6 @@ platform: - x64 install: - # TODO: Remove after https://github.com/appveyor/ci/issues/1426 is fixed - - set PATH=C:\Program Files\Git\mingw64\bin;%PATH% - ps: Install-Product node $env:nodejs_version $env:platform build: off @@ -41,4 +39,4 @@ skip_commits: test_script: - node --version - npm --version - - sh tasks/e2e-%test_suite%.sh + - bash tasks/e2e-%test_suite%.sh diff --git a/tasks/e2e-kitchensink.sh b/tasks/e2e-kitchensink.sh index c1167c1de..547821b65 100755 --- a/tasks/e2e-kitchensink.sh +++ b/tasks/e2e-kitchensink.sh @@ -218,14 +218,7 @@ PORT=3001 \ REACT_APP_SHELL_ENV_MESSAGE=fromtheshell \ NODE_PATH=src \ nohup npm start &>$tmp_server_log & -while true -do - if grep -q 'You can now view' $tmp_server_log; then - break - else - sleep 1 - fi -done +grep -q 'You can now view' <(tail -f $tmp_server_log) E2E_URL="http://localhost:3001" \ REACT_APP_SHELL_ENV_MESSAGE=fromtheshell \ CI=true NODE_PATH=src \ @@ -287,14 +280,7 @@ PORT=3002 \ REACT_APP_SHELL_ENV_MESSAGE=fromtheshell \ NODE_PATH=src \ nohup npm start &>$tmp_server_log & -while true -do - if grep -q 'You can now view' $tmp_server_log; then - break - else - sleep 1 - fi -done +grep -q 'You can now view' <(tail -f $tmp_server_log) E2E_URL="http://localhost:3002" \ REACT_APP_SHELL_ENV_MESSAGE=fromtheshell \ CI=true NODE_PATH=src \ From 5b4ff563eb09a261b7c5f9cf52165e96e52c4626 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ovidiu=20Chereche=C8=99?= Date: Sun, 5 Nov 2017 19:41:56 +0100 Subject: [PATCH 003/122] Export dismissRuntimeErrors function (#3414) --- packages/react-error-overlay/src/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-error-overlay/src/index.js b/packages/react-error-overlay/src/index.js index 8bc61ca25..b09af07ee 100644 --- a/packages/react-error-overlay/src/index.js +++ b/packages/react-error-overlay/src/index.js @@ -87,7 +87,7 @@ function handleRuntimeError(errorRecord) { update(); } -function dismissRuntimeErrors() { +export function dismissRuntimeErrors() { currentRuntimeErrorRecords = []; update(); } From 4bec877178ff918dbf1d255182c241a0cf93670e Mon Sep 17 00:00:00 2001 From: Joe Lim Date: Tue, 7 Nov 2017 10:37:40 -0800 Subject: [PATCH 004/122] Improve eject message (#3416) * improve eject message * cross os implementation --- packages/react-scripts/scripts/eject.js | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/packages/react-scripts/scripts/eject.js b/packages/react-scripts/scripts/eject.js index 2b859694f..c8438f5d1 100644 --- a/packages/react-scripts/scripts/eject.js +++ b/packages/react-scripts/scripts/eject.js @@ -54,11 +54,17 @@ inquirer if (gitStatus) { console.error( chalk.red( - `This git repository has untracked files or uncommitted changes:\n\n` + - gitStatus.split('\n').map(line => ' ' + line) + - '\n\n' + + 'This git repository has untracked files or uncommitted changes:' + ) + + '\n\n' + + gitStatus + .split('\n') + .map(line => line.match(/ .*/g)[0].trim()) + .join('\n') + + '\n\n' + + chalk.red( 'Remove untracked files, stash or commit any changes, and try again.' - ) + ) ); process.exit(1); } From 756a9a0fa89b669021857a7ba560718ce84ebb0b Mon Sep 17 00:00:00 2001 From: Trevor Brindle Date: Thu, 9 Nov 2017 14:03:40 -0500 Subject: [PATCH 005/122] =?UTF-8?q?add=20=E2=80=94use-npm=20flag=20to=20by?= =?UTF-8?q?pass=20yarn=20(#3409)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * add —use-npm flag to bypass yarn * add e2e test for —use-npm flag --- packages/create-react-app/createReactApp.js | 6 ++++-- tasks/e2e-installs.sh | 14 ++++++++++++++ 2 files changed, 18 insertions(+), 2 deletions(-) diff --git a/packages/create-react-app/createReactApp.js b/packages/create-react-app/createReactApp.js index 9ff7c08cf..e7dbbb358 100755 --- a/packages/create-react-app/createReactApp.js +++ b/packages/create-react-app/createReactApp.js @@ -64,6 +64,7 @@ const program = new commander.Command(packageJson.name) '--scripts-version ', 'use a non-standard version of react-scripts' ) + .option('--use-npm') .allowUnknownOption() .on('--help', () => { console.log(` Only ${chalk.green('')} is required.`); @@ -133,10 +134,11 @@ createApp( projectName, program.verbose, program.scriptsVersion, + program.useNpm, hiddenProgram.internalTestingTemplate ); -function createApp(name, verbose, version, template) { +function createApp(name, verbose, version, useNpm, template) { const root = path.resolve(name); const appName = path.basename(root); @@ -159,7 +161,7 @@ function createApp(name, verbose, version, template) { JSON.stringify(packageJson, null, 2) ); - const useYarn = shouldUseYarn(); + const useYarn = useNpm ? false : shouldUseYarn(); const originalDirectory = process.cwd(); process.chdir(root); if (!useYarn && !checkThatNpmCanReadCwd()) { diff --git a/tasks/e2e-installs.sh b/tasks/e2e-installs.sh index f352a5448..489cadb37 100755 --- a/tasks/e2e-installs.sh +++ b/tasks/e2e-installs.sh @@ -145,6 +145,20 @@ exists node_modules/react-scripts grep '"version": "0.4.0"' node_modules/react-scripts/package.json checkDependencies +# ****************************************************************************** +# Test --use-npm flag +# ****************************************************************************** + +cd "$temp_app_path" +create_react_app --use-npm --scripts-version=0.4.0 test-use-npm-flag +cd test-use-npm-flag + +# Check corresponding scripts version is installed. +exists node_modules/react-scripts +[ ! -e "yarn.lock" ] && echo "yarn.lock correctly does not exist" +grep '"version": "0.4.0"' node_modules/react-scripts/package.json +checkDependencies + # ****************************************************************************** # Test --scripts-version with a tarball url # ****************************************************************************** From b555192b43876c423a81f0cd699f3f4a94aa7441 Mon Sep 17 00:00:00 2001 From: Matt Morgis Date: Tue, 14 Nov 2017 08:05:34 -0500 Subject: [PATCH 006/122] Explain how to debug tests (#2992) * docs: adding section about debugging tests * docs: removing node-inspector references * docs: replacing terminal command with npm script * Update README.md --- packages/react-scripts/template/README.md | 63 +++++++++++++++++++++++ 1 file changed, 63 insertions(+) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index b8c0b74df..2aa664883 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -64,6 +64,7 @@ You can find the most recent version of this guide [here](https://github.com/fac - [Disabling jsdom](#disabling-jsdom) - [Snapshot Testing](#snapshot-testing) - [Editor Integration](#editor-integration) +- [Debugging Tests](#debugging-tests) - [Developing Components in Isolation](#developing-components-in-isolation) - [Getting Started with Storybook](#getting-started-with-storybook) - [Getting Started with Styleguidist](#getting-started-with-styleguidist) @@ -1528,6 +1529,68 @@ If you use [Visual Studio Code](https://code.visualstudio.com), there is a [Jest ![VS Code Jest Preview](https://cloud.githubusercontent.com/assets/49038/20795349/a032308a-b7c8-11e6-9b34-7eeac781003f.png) +## Debugging Tests + +There are various ways to setup a debugger for your Jest tests. We cover debugging in Chrome and [Visual Studio Code](https://code.visualstudio.com/). + +>Note: debugging tests requires Node 8 or higher. + +### Debugging Tests in Chrome + +Add the following to the `scripts` section in your project's `package.json` +```json +"scripts": { + "test:debug": "react-scripts --inspect-brk test --runInBand --env=jsdom" + } +``` +Place `debugger;` statements in any test and run: +```bash +$ npm run test:debug +``` + +This will start running your Jest tests, but pause before executing to allow a debugger to attach to the process. + +Open the following in Chrome +``` +about:inspect +``` + +After opening that link, the Chrome Developer Tools will be displayed. Select `inspect` on your process and a breakpoint will be set at the first line of the react script (this is done simply to give you time to open the developer tools and to prevent Jest from executing before you have time to do so). Click the button that looks like a "play" button in the upper right hand side of the screen to continue execution. When Jest executes the test that contains the debugger statement, execution will pause and you can examine the current scope and call stack. + +>Note: the --runInBand cli option makes sure Jest runs test in the same process rather than spawning processes for individual tests. Normally Jest parallelizes test runs across processes but it is hard to debug many processes at the same time. + +### Debugging Tests in Visual Studio Code + +Debugging Jest tests is supported out of the box for [Visual Studio Code](https://code.visualstudio.com). + +Use the following [`launch.json`](https://code.visualstudio.com/docs/editor/debugging#_launch-configurations) configuration file: +``` +{ + "version": "0.2.0", + "configurations": [ + { + "name": "Debug CRA Tests", + "type": "node", + "request": "launch", + "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/react-scripts", + "runtimeArgs": [ + "--inspect-brk", + "test" + ], + "args": [ + "--runInBand", + "--no-cache", + "--env=jsdom" + ], + "cwd": "${workspaceRoot}", + "protocol": "inspector", + "console": "integratedTerminal", + "internalConsoleOptions": "neverOpen" + } + ] +} +``` + ## Developing Components in Isolation Usually, in an app, you have a lot of UI components, and each of them has many different states. From 801fec286e77e32f451316775d66ed34025c4825 Mon Sep 17 00:00:00 2001 From: vannio Date: Wed, 15 Nov 2017 11:41:07 +0000 Subject: [PATCH 007/122] Fix dead link (#3453) Fix another dead link --- packages/react-scripts/config/jest/cssTransform.js | 2 +- packages/react-scripts/config/jest/fileTransform.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react-scripts/config/jest/cssTransform.js b/packages/react-scripts/config/jest/cssTransform.js index 99a8cb269..59053068f 100644 --- a/packages/react-scripts/config/jest/cssTransform.js +++ b/packages/react-scripts/config/jest/cssTransform.js @@ -9,7 +9,7 @@ 'use strict'; // This is a custom Jest transformer turning style imports into empty objects. -// http://facebook.github.io/jest/docs/tutorial-webpack.html +// http://facebook.github.io/jest/docs/en/webpack.html module.exports = { process() { diff --git a/packages/react-scripts/config/jest/fileTransform.js b/packages/react-scripts/config/jest/fileTransform.js index 8f9b843ab..38910e18b 100644 --- a/packages/react-scripts/config/jest/fileTransform.js +++ b/packages/react-scripts/config/jest/fileTransform.js @@ -11,7 +11,7 @@ const path = require('path'); // This is a custom Jest transformer turning file imports into filenames. -// http://facebook.github.io/jest/docs/tutorial-webpack.html +// http://facebook.github.io/jest/docs/en/webpack.html module.exports = { process(src, filename) { From daf8df1ab3106ed0023dbfc1aba6fad830dfe4a8 Mon Sep 17 00:00:00 2001 From: Jeffrey Posnick Date: Wed, 15 Nov 2017 13:51:35 -0500 Subject: [PATCH 008/122] Add a localhost-only log message pointing folks to the PWA docs. (#3455) --- .../react-scripts/template/src/registerServiceWorker.js | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/packages/react-scripts/template/src/registerServiceWorker.js b/packages/react-scripts/template/src/registerServiceWorker.js index 12542ba22..a3e6c0cfc 100644 --- a/packages/react-scripts/template/src/registerServiceWorker.js +++ b/packages/react-scripts/template/src/registerServiceWorker.js @@ -35,6 +35,15 @@ export default function register() { if (isLocalhost) { // This is running on localhost. Lets check if a service worker still exists or not. checkValidServiceWorker(swUrl); + + // Add some additional logging to localhost, pointing developers to the + // service worker/PWA documentation. + navigator.serviceWorker.ready.then(() => { + console.log( + 'This web app is being served cache-first by a service ' + + 'worker. To learn more, visit https://goo.gl/SC7cgQ' + ); + }); } else { // Is not local host. Just register service worker registerValidSW(swUrl); From 47af4b42cd9d9c77c8bc7b4edd7c5d6fa48f88c3 Mon Sep 17 00:00:00 2001 From: Misha Khokhlov Date: Fri, 17 Nov 2017 16:17:25 +0300 Subject: [PATCH 009/122] Fix broken link to href-no-hash eslint rule (#3460) This fixes the broken link to removed `href-no-hash.md` file, that is no longer available in the [eslint-plugin-jsx-a11y](https://github.com/evcohen/eslint-plugin-jsx-a11y) plugin (since [6.0.0](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/a14617528cda23c6c88902ace1d083e4e13ac271/CHANGELOG.md)) --- packages/eslint-config-react-app/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/eslint-config-react-app/README.md b/packages/eslint-config-react-app/README.md index 6918cda52..777b8f46e 100644 --- a/packages/eslint-config-react-app/README.md +++ b/packages/eslint-config-react-app/README.md @@ -45,7 +45,7 @@ The following rules from the [eslint-plugin-jsx-a11y](https://github.com/evcohen - [aria-role](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/aria-role.md) - [aria-unsupported-elements](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/aria-unsupported-elements.md) - [heading-has-content](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/heading-has-content.md) -- [href-no-hash](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/href-no-hash.md) +- [href-no-hash](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/v5.1.1/docs/rules/href-no-hash.md) - [iframe-has-title](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/iframe-has-title.md) - [img-redundant-alt](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/img-redundant-alt.md) - [no-access-key](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-access-key.md) From 657d145f34f18dfe53afa19aca1854592d99cc3f Mon Sep 17 00:00:00 2001 From: JANG SUN HYUK Date: Mon, 20 Nov 2017 01:16:41 +0900 Subject: [PATCH 010/122] Fix misspelling (#3468) --- packages/react-scripts/template/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index 2aa664883..d8ee5fb5c 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -1816,7 +1816,7 @@ npm run analyze ## Deployment -`npm run build` creates a `build` directory with a production build of your app. Set up your favourite HTTP server so that a visitor to your site is served `index.html`, and requests to static paths like `/static/js/main..js` are served with the contents of the `/static/js/main..js` file. +`npm run build` creates a `build` directory with a production build of your app. Set up your favorite HTTP server so that a visitor to your site is served `index.html`, and requests to static paths like `/static/js/main..js` are served with the contents of the `/static/js/main..js` file. ### Static Server From c789794c36c61c04733de219cbe9c9fd3b322e95 Mon Sep 17 00:00:00 2001 From: Joe Haddad Date: Mon, 20 Nov 2017 23:23:00 -0500 Subject: [PATCH 011/122] Fix run-time error unregistering (#3474) --- packages/react-error-overlay/src/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-error-overlay/src/index.js b/packages/react-error-overlay/src/index.js index b09af07ee..6f4450810 100644 --- a/packages/react-error-overlay/src/index.js +++ b/packages/react-error-overlay/src/index.js @@ -64,7 +64,7 @@ export function startReportingRuntimeErrors(options: RuntimeReportingOptions) { ); } currentRuntimeErrorOptions = options; - listenToRuntimeErrors(errorRecord => { + stopListeningToRuntimeErrors = listenToRuntimeErrors(errorRecord => { try { if (typeof options.onError === 'function') { options.onError.call(null); From 032e62196e3c4c3c9864da8815aba0304153486c Mon Sep 17 00:00:00 2001 From: Gavin Gilmour Date: Sat, 25 Nov 2017 14:52:32 +0100 Subject: [PATCH 012/122] Update Prettier editor integration link (#3503) --- packages/react-scripts/template/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index d8ee5fb5c..c4ee34dcc 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -335,7 +335,7 @@ Next we add a 'lint-staged' field to the `package.json`, for example: Now, whenever you make a commit, Prettier will format the changed files automatically. You can also run `./node_modules/.bin/prettier --single-quote --write "src/**/*.{js,jsx}"` to format your entire project for the first time. -Next you might want to integrate Prettier in your favorite editor. Read the section on [Editor Integration](https://github.com/prettier/prettier#editor-integration) on the Prettier GitHub page. +Next you might want to integrate Prettier in your favorite editor. Read the section on [Editor Integration](https://prettier.io/docs/en/editors.html) on the Prettier GitHub page. ## Changing the Page `` From 733ba3ab41603a7e4a083fb50db9e4cbd6c3b602 Mon Sep 17 00:00:00 2001 From: David Gilbertson <gilbertson.david@gmail.com> Date: Tue, 28 Nov 2017 00:07:07 +1100 Subject: [PATCH 013/122] Add link to nvm-windows (#3489) --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 6009e8a6d..67b55d0e5 100644 --- a/README.md +++ b/README.md @@ -40,7 +40,7 @@ Install it once globally: npm install -g create-react-app ``` -**You’ll need to have Node >= 6 on your machine**. You can use [nvm](https://github.com/creationix/nvm#installation) to easily switch Node versions between different projects. +**You’ll need to have Node >= 6 on your machine**. You can use [nvm](https://github.com/creationix/nvm#installation) (macOS/Linux) or [nvm-windows](https://github.com/coreybutler/nvm-windows#node-version-manager-nvm-for-windows) to easily switch Node versions between different projects. **This tool doesn’t assume a Node backend**. The Node installation is only required for Create React App itself. From 770fdf4ba169f0892281fce3ebc1b5fe53c48753 Mon Sep 17 00:00:00 2001 From: Aaron Lamb <aaronlamb93@gmail.com> Date: Mon, 27 Nov 2017 13:28:42 -0800 Subject: [PATCH 014/122] Update User Guide with deploying to GitHub User pages (#3510) --- packages/react-scripts/template/README.md | 22 ++++++++++++++++++++-- 1 file changed, 20 insertions(+), 2 deletions(-) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index c4ee34dcc..c8bd3911f 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -2012,12 +2012,18 @@ For more information see [Add Firebase to your JavaScript Project](https://fireb **The step below is important!**<br> **If you skip it, your app will not deploy correctly.** -Open your `package.json` and add a `homepage` field: +Open your `package.json` and add a `homepage` field for your project: -```js +```json "homepage": "https://myusername.github.io/my-app", ``` +or for a GitHub user page: + +```json + "homepage": "https://myusername.github.io", +``` + Create React App uses the `homepage` field to determine the root URL in the built HTML file. #### Step 2: Install `gh-pages` and add `deploy` to `scripts` in `package.json` @@ -2048,6 +2054,18 @@ Add the following scripts in your `package.json`: The `predeploy` script will run automatically before `deploy` is run. +If you are deploying to a GitHub user page instead of a project page you'll need to make two +additional modifications: + +1. First, change your repository's source branch to be any branch other than **master**. +1. Additionally, tweak your `package.json` scripts to push deployments to **master**: +```diff + "scripts": { + "predeploy": "npm run build", +- "deploy": "gh-pages -d build", ++ "deploy": "gh-pages -b master -d build", +``` + #### Step 3: Deploy the site by running `npm run deploy` Then run: From 9af042263f7c6e66b4c1402d2f6fc81250c6ce97 Mon Sep 17 00:00:00 2001 From: Dan Abramov <dan.abramov@gmail.com> Date: Mon, 27 Nov 2017 22:32:57 +0000 Subject: [PATCH 015/122] Unmount the App in the default test (#3511) --- packages/react-scripts/template/src/App.test.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/react-scripts/template/src/App.test.js b/packages/react-scripts/template/src/App.test.js index b84af98d7..a754b201b 100644 --- a/packages/react-scripts/template/src/App.test.js +++ b/packages/react-scripts/template/src/App.test.js @@ -5,4 +5,5 @@ import App from './App'; it('renders without crashing', () => { const div = document.createElement('div'); ReactDOM.render(<App />, div); + ReactDOM.unmountComponentAtNode(div); }); From af291f3cb64ce472002ff98688bccc2d22d2efb7 Mon Sep 17 00:00:00 2001 From: Ian Sutherland <ian@iansutherland.ca> Date: Thu, 7 Dec 2017 10:20:45 -0800 Subject: [PATCH 016/122] Add mjs and jsx filename extensions to file-loader exclude pattern (#3537) --- packages/react-scripts/config/webpack.config.dev.js | 2 +- packages/react-scripts/config/webpack.config.prod.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js index a6be022ba..c9d5ae0b2 100644 --- a/packages/react-scripts/config/webpack.config.dev.js +++ b/packages/react-scripts/config/webpack.config.dev.js @@ -223,7 +223,7 @@ module.exports = { // it's runtime that would otherwise processed through "file" loader. // Also exclude `html` and `json` extensions so they get processed // by webpacks internal loaders. - exclude: [/\.js$/, /\.html$/, /\.json$/], + exclude: [/\.(js|jsx|mjs)$/, /\.html$/, /\.json$/], loader: require.resolve('file-loader'), options: { name: 'static/media/[name].[hash:8].[ext]', diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js index 457a96728..3b2a2068d 100644 --- a/packages/react-scripts/config/webpack.config.prod.js +++ b/packages/react-scripts/config/webpack.config.prod.js @@ -249,7 +249,7 @@ module.exports = { // it's runtime that would otherwise processed through "file" loader. // Also exclude `html` and `json` extensions so they get processed // by webpacks internal loaders. - exclude: [/\.js$/, /\.html$/, /\.json$/], + exclude: [/\.(js|jsx|mjs)$/, /\.html$/, /\.json$/], options: { name: 'static/media/[name].[hash:8].[ext]', }, From a1c5b8f7054ac0ac708a498c2a6308f3ed1cb8f0 Mon Sep 17 00:00:00 2001 From: Rahul Chanila <rahulcssjce@gmail.com> Date: Mon, 11 Dec 2017 13:10:19 +1100 Subject: [PATCH 017/122] Updates comment to reflect codebase (#3576) the code got updated from `detect()` to `choosePort` while the comment did not. --- packages/react-scripts/scripts/start.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-scripts/scripts/start.js b/packages/react-scripts/scripts/start.js index 8df052d3b..7eb7ad464 100644 --- a/packages/react-scripts/scripts/start.js +++ b/packages/react-scripts/scripts/start.js @@ -52,7 +52,7 @@ const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000; const HOST = process.env.HOST || '0.0.0.0'; // We attempt to use the default port but if it is busy, we offer the user to -// run on a different port. `detect()` Promise resolves to the next free port. +// run on a different port. `choosePort()` Promise resolves to the next free port. choosePort(HOST, DEFAULT_PORT) .then(port => { if (port == null) { From bd682de1f6b71ea4192b14f66c3bc22e658b5b87 Mon Sep 17 00:00:00 2001 From: Nils Magnus Englund <nme@stepone.no> Date: Fri, 15 Dec 2017 19:17:33 +0100 Subject: [PATCH 018/122] Fixed typo in webpack.config.dev.js (#3601) Replaced `it's` with `its` --- packages/react-scripts/config/webpack.config.dev.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js index c9d5ae0b2..9f3131b06 100644 --- a/packages/react-scripts/config/webpack.config.dev.js +++ b/packages/react-scripts/config/webpack.config.dev.js @@ -220,7 +220,7 @@ module.exports = { // that fall through the other loaders. { // Exclude `js` files to keep "css" loader working as it injects - // it's runtime that would otherwise processed through "file" loader. + // its runtime that would otherwise processed through "file" loader. // Also exclude `html` and `json` extensions so they get processed // by webpacks internal loaders. exclude: [/\.(js|jsx|mjs)$/, /\.html$/, /\.json$/], From ed5c48c81b2139b4414810e1efe917e04c96ee8d Mon Sep 17 00:00:00 2001 From: Amadeo Gallardo <amadeogallardo@gmail.com> Date: Mon, 18 Dec 2017 17:36:32 -0300 Subject: [PATCH 019/122] Updated Debugging Tests for VSCode (#3605) The launch configuration code provided is not compatible with VSCode since version 1.19. The proposed documentation change is based on the response by a VSCode team member. References: https://github.com/facebookincubator/create-react-app/issues/3602#issuecomment-352075571 https://github.com/Microsoft/vscode/issues/40293#issuecomment-352017028 --- packages/react-scripts/template/README.md | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index c8bd3911f..cbb57d8cd 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -1572,12 +1572,9 @@ Use the following [`launch.json`](https://code.visualstudio.com/docs/editor/debu "name": "Debug CRA Tests", "type": "node", "request": "launch", - "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/react-scripts", - "runtimeArgs": [ - "--inspect-brk", - "test" - ], + "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/react-scripts", "args": [ + "test", "--runInBand", "--no-cache", "--env=jsdom" From 76e316541275040ecaa74ffb4523191becba7c3c Mon Sep 17 00:00:00 2001 From: Christian Danielsen <ckdanielsen@gmail.com> Date: Tue, 2 Jan 2018 08:01:42 -0800 Subject: [PATCH 020/122] Use friendlier syntax for setting env var on Windows (#3533) * use safer/more aesthetic syntax * fix typo --- packages/react-scripts/template/README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index cbb57d8cd..827638468 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -890,10 +890,10 @@ life of the shell session. #### Windows (cmd.exe) ```cmd -set REACT_APP_SECRET_CODE=abcdef&&npm start +set "REACT_APP_SECRET_CODE=abcdef" && npm start ``` -(Note: the lack of whitespace is intentional.) +(Note: Quotes around the variable assignment are required to avoid a trailing whitespace.) #### Linux, macOS (Bash) From 5d7845a73396e7b3a6d481b55b47c13aae95c887 Mon Sep 17 00:00:00 2001 From: Elie <eliesteinbock@gmail.com> Date: Tue, 2 Jan 2018 18:15:32 +0200 Subject: [PATCH 021/122] Update README.md (#3645) --- packages/react-scripts/template/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index 827638468..f15d324fe 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -2131,7 +2131,7 @@ In this case, ensure that the file is there with the proper lettercase and that **To do a manual deploy to Netlify’s CDN:** ```sh -npm install netlify-cli +npm install netlify-cli -g netlify deploy ``` From 12120f6f55b51f533f603acbaa46d6fb56ca840f Mon Sep 17 00:00:00 2001 From: Quentin Bahers <quentin.bahers@gmail.com> Date: Tue, 2 Jan 2018 17:53:45 +0100 Subject: [PATCH 022/122] Fix typo in the User Guide (#3670) Replace `provide a lot value` with `provide a lot of value`. --- packages/react-scripts/template/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index f15d324fe..95cf966a6 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -1258,7 +1258,7 @@ it('renders without crashing', () => { }); ``` -This test mounts a component and makes sure that it didn’t throw during rendering. Tests like this provide a lot value with very little effort so they are great as a starting point, and this is the test you will find in `src/App.test.js`. +This test mounts a component and makes sure that it didn’t throw during rendering. Tests like this provide a lot of value with very little effort so they are great as a starting point, and this is the test you will find in `src/App.test.js`. When you encounter bugs caused by changing components, you will gain a deeper insight into which parts of them are worth testing in your application. This might be a good time to introduce more specific tests asserting specific expected output or behavior. From 8cae659ec5a066eff8ea270346dc8c1ef064f9aa Mon Sep 17 00:00:00 2001 From: Norris Oduro <norrisjibril@gmail.com> Date: Thu, 4 Jan 2018 18:15:50 +0000 Subject: [PATCH 023/122] Fix path regex match bug (#3686) * Fix path regex match bug * Use the escape-string-regexp package to escape regex characters * Remove redundant character escape from path * Add removed escape of backslashes --- packages/react-dev-utils/ignoredFiles.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/react-dev-utils/ignoredFiles.js b/packages/react-dev-utils/ignoredFiles.js index 50348ea6b..73a6e8bc5 100644 --- a/packages/react-dev-utils/ignoredFiles.js +++ b/packages/react-dev-utils/ignoredFiles.js @@ -8,12 +8,13 @@ 'use strict'; const path = require('path'); +const escape = require('escape-string-regexp'); module.exports = function ignoredFiles(appSrc) { return new RegExp( - `^(?!${path - .normalize(appSrc + '/') - .replace(/[\\]+/g, '/')}).+/node_modules/`, + `^(?!${escape( + path.normalize(appSrc + '/').replace(/[\\]+/g, '/') + )}).+/node_modules/`, 'g' ); }; From bb718307bae6b94e291850a09bef5ccc051a26c7 Mon Sep 17 00:00:00 2001 From: Dan Abramov <dan.abramov@gmail.com> Date: Mon, 8 Jan 2018 14:02:26 +0000 Subject: [PATCH 024/122] Document adding a router (#3709) --- packages/react-scripts/template/README.md | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index 95cf966a6..2e75de70d 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -34,6 +34,7 @@ You can find the most recent version of this guide [here](https://github.com/fac - [Adding Bootstrap](#adding-bootstrap) - [Using a Custom Theme](#using-a-custom-theme) - [Adding Flow](#adding-flow) +- [Adding a Router](#adding-a-router) - [Adding Custom Environment Variables](#adding-custom-environment-variables) - [Referencing Environment Variables in the HTML](#referencing-environment-variables-in-the-html) - [Adding Temporary Environment Variables In Your Shell](#adding-temporary-environment-variables-in-your-shell) @@ -804,6 +805,26 @@ In the future we plan to integrate it into Create React App even more closely. To learn more about Flow, check out [its documentation](https://flowtype.org/). +## Adding a Router + +Create React App doesn't prescribe a specific routing solution, but [React Router](https://reacttraining.com/react-router/) is the most popular one. + +To add it, run: + +```sh +npm install --save react-router react-router-dom +``` + +Alternatively you may use `yarn`: + +```sh +yarn add react-router react-router-dom +``` + +To try it, delete all the code in `src/App.js` and replace it with any of the examples on its website. The [Basic Example](https://reacttraining.com/react-router/web/example/basic) is a good place to get started. + +Note that [you may need to configure your production server to support client-side routing](#serving-apps-with-client-side-routing) before deploying your app. + ## Adding Custom Environment Variables >Note: this feature is available with `react-scripts@0.2.3` and higher. From ece95230566055bfedb46c99506d0491c1fa1084 Mon Sep 17 00:00:00 2001 From: Dan Abramov <dan.abramov@gmail.com> Date: Mon, 8 Jan 2018 14:16:45 +0000 Subject: [PATCH 025/122] Link to an explanation for forking react-scripts (#3710) --- packages/react-scripts/template/README.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index 2e75de70d..974462ef8 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -95,6 +95,7 @@ You can find the most recent version of this guide [here](https://github.com/fac - [`npm run build` fails on Heroku](#npm-run-build-fails-on-heroku) - [`npm run build` fails to minify](#npm-run-build-fails-to-minify) - [Moment.js locales are missing](#momentjs-locales-are-missing) +- [Alternatives to Ejecting](#alternatives-to-ejecting) - [Something Missing?](#something-missing) ## Updating to New Releases @@ -2323,6 +2324,10 @@ To resolve this: In the future, we might start automatically compiling incompatible third-party modules, but it is not currently supported. This approach would also slow down the production builds. +## Alternatives to Ejecting + +[Ejecting](#npm-run-eject) lets you customize anything, but from that point on you have to maintain the configuration and scripts yourself. This can be daunting if you have many similar projects. In such cases instead of ejecting we recommend to *fork* `react-scripts` and any other packages you need. [This article](https://auth0.com/blog/how-to-configure-create-react-app/) dives into how to do it in depth. You can find more discussion in [this issue](https://github.com/facebookincubator/create-react-app/issues/682). + ## Something Missing? 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/packages/react-scripts/template/README.md) From 1c9301ad2fc7ddf8e0502559ef3bf057ad53dba7 Mon Sep 17 00:00:00 2001 From: Dan Abramov <dan.abramov@gmail.com> Date: Mon, 8 Jan 2018 14:29:14 +0000 Subject: [PATCH 026/122] Add a section on supported browsers --- packages/react-scripts/template/README.md | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index 974462ef8..59b77b250 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -13,6 +13,7 @@ You can find the most recent version of this guide [here](https://github.com/fac - [npm test](#npm-test) - [npm run build](#npm-run-build) - [npm run eject](#npm-run-eject) +- [Supported Browsers](#supported-browsers) - [Supported Language Features and Polyfills](#supported-language-features-and-polyfills) - [Syntax Highlighting in the Editor](#syntax-highlighting-in-the-editor) - [Displaying Lint Output in the Editor](#displaying-lint-output-in-the-editor) @@ -193,6 +194,12 @@ Instead, it will copy all the configuration files and the transitive dependencie 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. +## Supported Browsers + +By default, the generated project uses the latest version of React. + +You can refer [to the React documentation](https://reactjs.org/docs/react-dom.html#browser-support) for more information about supported browsers. + ## Supported Language Features and Polyfills This project supports a superset of the latest JavaScript standard.<br> From 1908dd11fb80f63d6941bfb91eeeea7b86294b2f Mon Sep 17 00:00:00 2001 From: Dan Abramov <dan.abramov@gmail.com> Date: Mon, 8 Jan 2018 14:29:46 +0000 Subject: [PATCH 027/122] Link to a new user guide section --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 67b55d0e5..974627996 100644 --- a/README.md +++ b/README.md @@ -113,6 +113,7 @@ The [User Guide](https://github.com/facebookincubator/create-react-app/blob/mast - [Updating to New Releases](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#updating-to-new-releases) - [Folder Structure](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#folder-structure) - [Available Scripts](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#available-scripts) +- [Supported Browsers](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#supported-browsers) - [Supported Language Features and Polyfills](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#supported-language-features-and-polyfills) - [Syntax Highlighting in the Editor](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#syntax-highlighting-in-the-editor) - [Displaying Lint Output in the Editor](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#displaying-lint-output-in-the-editor) From f175c90753b6a07317c9f4930934f6a98924a4c2 Mon Sep 17 00:00:00 2001 From: Dan Abramov <dan.abramov@gmail.com> Date: Mon, 8 Jan 2018 14:31:09 +0000 Subject: [PATCH 028/122] Link to section about routing --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 974627996..bbdd95683 100644 --- a/README.md +++ b/README.md @@ -131,6 +131,7 @@ The [User Guide](https://github.com/facebookincubator/create-react-app/blob/mast - [Using Global Variables](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#using-global-variables) - [Adding Bootstrap](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-bootstrap) - [Adding Flow](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-flow) +- [Adding a Router](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-a-router) - [Adding Custom Environment Variables](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-custom-environment-variables) - [Can I Use Decorators?](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#can-i-use-decorators) - [Integrating with an API Backend](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#integrating-with-an-api-backend) From 553712636d36167fe27530991809195f03eedc39 Mon Sep 17 00:00:00 2001 From: Dan Abramov <dan.abramov@gmail.com> Date: Mon, 8 Jan 2018 14:33:03 +0000 Subject: [PATCH 029/122] Link to React docs --- packages/react-scripts/template/README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index 59b77b250..0000867aa 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -472,6 +472,8 @@ You can also use it with `async` / `await` syntax if you prefer it. If you are using React Router check out [this tutorial](http://serverless-stack.com/chapters/code-splitting-in-create-react-app.html) on how to use code splitting with it. You can find the companion GitHub repository [here](https://github.com/AnomalyInnovations/serverless-stack-demo-client/tree/code-splitting-in-create-react-app). +Also check out the [Code Splitting](https://reactjs.org/docs/code-splitting.html) section in React documentation. + ## Adding a Stylesheet This project setup uses [Webpack](https://webpack.js.org/) 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**: From 4f0cdcffa94353fd0dba8489ef8d366a72d24e64 Mon Sep 17 00:00:00 2001 From: Dan Abramov <dan.abramov@gmail.com> Date: Mon, 8 Jan 2018 14:36:28 +0000 Subject: [PATCH 030/122] Fix the router doc --- packages/react-scripts/template/README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index 0000867aa..d6b74456c 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -822,13 +822,13 @@ Create React App doesn't prescribe a specific routing solution, but [React Route To add it, run: ```sh -npm install --save react-router react-router-dom +npm install --save react-router-dom ``` Alternatively you may use `yarn`: ```sh -yarn add react-router react-router-dom +yarn add react-router-dom ``` To try it, delete all the code in `src/App.js` and replace it with any of the examples on its website. The [Basic Example](https://reacttraining.com/react-router/web/example/basic) is a good place to get started. From 16934fad47d3d358522a0100d4317e62c51feb22 Mon Sep 17 00:00:00 2001 From: Dan Abramov <dan.abramov@gmail.com> Date: Mon, 8 Jan 2018 14:40:24 +0000 Subject: [PATCH 031/122] Add a section on publishing components to npm --- packages/react-scripts/template/README.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index d6b74456c..32b414db7 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -70,6 +70,7 @@ You can find the most recent version of this guide [here](https://github.com/fac - [Developing Components in Isolation](#developing-components-in-isolation) - [Getting Started with Storybook](#getting-started-with-storybook) - [Getting Started with Styleguidist](#getting-started-with-styleguidist) +- [Publishing Components on npm](#publishing-components-on-npm) - [Making a Progressive Web App](#making-a-progressive-web-app) - [Opting Out of Caching](#opting-out-of-caching) - [Offline-First Considerations](#offline-first-considerations) @@ -1699,6 +1700,10 @@ Learn more about React Styleguidist: * [GitHub Repo](https://github.com/styleguidist/react-styleguidist) * [Documentation](https://react-styleguidist.js.org/docs/getting-started.html) +## Publishing Components on npm + +Create React App doesn't provide any built-in functionality to publish a component on npm. If you're ready to extract a component from your project so other people can use it, we recommend moving it to a separate directory outside of your project and then using a tool like [nwb](https://github.com/insin/nwb#react-components-and-libraries) to prepare it for publishing. + ## Making a Progressive Web App By default, the production build is a fully functional, offline-first From 8bb72919cc77eb74835e2a77b387c95d0b5a941d Mon Sep 17 00:00:00 2001 From: Dan Abramov <dan.abramov@gmail.com> Date: Mon, 8 Jan 2018 14:42:40 +0000 Subject: [PATCH 032/122] on -> to --- packages/react-scripts/template/README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index 32b414db7..6a7c9be27 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -70,7 +70,7 @@ You can find the most recent version of this guide [here](https://github.com/fac - [Developing Components in Isolation](#developing-components-in-isolation) - [Getting Started with Storybook](#getting-started-with-storybook) - [Getting Started with Styleguidist](#getting-started-with-styleguidist) -- [Publishing Components on npm](#publishing-components-on-npm) +- [Publishing Components to npm](#publishing-components-to-npm) - [Making a Progressive Web App](#making-a-progressive-web-app) - [Opting Out of Caching](#opting-out-of-caching) - [Offline-First Considerations](#offline-first-considerations) @@ -1700,9 +1700,9 @@ Learn more about React Styleguidist: * [GitHub Repo](https://github.com/styleguidist/react-styleguidist) * [Documentation](https://react-styleguidist.js.org/docs/getting-started.html) -## Publishing Components on npm +## Publishing Components to npm -Create React App doesn't provide any built-in functionality to publish a component on npm. If you're ready to extract a component from your project so other people can use it, we recommend moving it to a separate directory outside of your project and then using a tool like [nwb](https://github.com/insin/nwb#react-components-and-libraries) to prepare it for publishing. +Create React App doesn't provide any built-in functionality to publish a component to npm. If you're ready to extract a component from your project so other people can use it, we recommend moving it to a separate directory outside of your project and then using a tool like [nwb](https://github.com/insin/nwb#react-components-and-libraries) to prepare it for publishing. ## Making a Progressive Web App From 6c594ada57bb969eb290d690532c2952a1b41b43 Mon Sep 17 00:00:00 2001 From: Dan Abramov <dan.abramov@gmail.com> Date: Mon, 8 Jan 2018 14:42:49 +0000 Subject: [PATCH 033/122] Link to a new help section --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index bbdd95683..6aa6195f0 100644 --- a/README.md +++ b/README.md @@ -141,6 +141,7 @@ The [User Guide](https://github.com/facebookincubator/create-react-app/blob/mast - [Pre-Rendering into Static HTML Files](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#pre-rendering-into-static-html-files) - [Running Tests](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#running-tests) - [Developing Components in Isolation](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#developing-components-in-isolation) +- [Publishing Components to npm](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#publishing-components-to-npm) - [Making a Progressive Web App](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#making-a-progressive-web-app) - [Analyzing the Bundle Size](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#analyzing-the-bundle-size) - [Deployment](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#deployment) From 0ce81854c8b5e36e4dff706f15e83ad63ca4f0a6 Mon Sep 17 00:00:00 2001 From: Dan Abramov <dan.abramov@gmail.com> Date: Mon, 8 Jan 2018 17:03:44 +0000 Subject: [PATCH 034/122] Use npx in README --- README.md | 29 ++++++++++++++--------------- 1 file changed, 14 insertions(+), 15 deletions(-) diff --git a/README.md b/README.md index 6aa6195f0..68fd8036a 100644 --- a/README.md +++ b/README.md @@ -11,10 +11,8 @@ If something doesn’t work, please [file an issue](https://github.com/facebooki ## Quick Overview ```sh -npm install -g create-react-app - -create-react-app my-app -cd my-app/ +npx create-react-app my-app +cd my-app npm start ``` @@ -32,13 +30,7 @@ Just create a project, and you’re good to go. ## Getting Started -### Installation - -Install it once globally: - -```sh -npm install -g create-react-app -``` +### Prerequisites **You’ll need to have Node >= 6 on your machine**. You can use [nvm](https://github.com/creationix/nvm#installation) (macOS/Linux) or [nvm-windows](https://github.com/coreybutler/nvm-windows#node-version-manager-nvm-for-windows) to easily switch Node versions between different projects. @@ -46,13 +38,14 @@ npm install -g create-react-app ### Creating an App -To create a new app, run: +To create a new app, run a single command: ```sh -create-react-app my-app -cd my-app +npx create-react-app my-app ``` +([npx](https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b) comes with npm 5.2+ and higher, see [instructions for older npm versions](https://gist.github.com/gaearon/4064d3c23a77c74a3614c498a8bb1c5f)) + It will create a directory called `my-app` inside the current folder.<br> Inside that directory, it will generate the initial project structure and install the transitive dependencies: @@ -77,7 +70,13 @@ my-app ``` No configuration or complicated folder structures, just the files you need to build your app.<br> -Once the installation is done, you can run some commands inside the project folder: +Once the installation is done, you can open your project folder: + +```sh +cd my-app +``` + +Inside the newly created project, you can run some built-in commands: ### `npm start` or `yarn start` From 43e794ddbbd43bb5a966d1621e8203282f76a127 Mon Sep 17 00:00:00 2001 From: Dan Abramov <dan.abramov@gmail.com> Date: Mon, 8 Jan 2018 17:07:08 +0000 Subject: [PATCH 035/122] Add a link to an overview --- README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README.md b/README.md index 68fd8036a..353119a80 100644 --- a/README.md +++ b/README.md @@ -213,6 +213,8 @@ Currently it is a thin layer on top of many amazing community projects, such as: All of them are transitive dependencies of the provided npm package. +Check out [this guide](https://github.com/nitishdayal/cra_closer_look) for an overview of how these tools fit together. + ## Contributing We'd love to have your helping hand on `create-react-app`! See [CONTRIBUTING.md](CONTRIBUTING.md) for more information on what we're looking for and how to get started. From 7f081adc46282bafa127dfafb702d04b273be165 Mon Sep 17 00:00:00 2001 From: Dan Abramov <dan.abramov@gmail.com> Date: Mon, 8 Jan 2018 17:50:50 +0000 Subject: [PATCH 036/122] Rewrite README --- README.md | 98 +++++++++++++++---------------------------------------- 1 file changed, 26 insertions(+), 72 deletions(-) diff --git a/README.md b/README.md index 353119a80..9eed9a66a 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,7 @@ Create React apps with no build configuration. -* [Getting Started](#getting-started) – How to create a new app. +* [Creating an App](#creating-an-app) – How to create a new app. * [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md) – How to develop apps bootstrapped with Create React App. Create React App works on macOS, Windows, and Linux.<br> @@ -28,15 +28,9 @@ They are preconfigured and hidden so that you can focus on the code. Just create a project, and you’re good to go. -## Getting Started +## Creating an App -### Prerequisites - -**You’ll need to have Node >= 6 on your machine**. You can use [nvm](https://github.com/creationix/nvm#installation) (macOS/Linux) or [nvm-windows](https://github.com/coreybutler/nvm-windows#node-version-manager-nvm-for-windows) to easily switch Node versions between different projects. - -**This tool doesn’t assume a Node backend**. The Node installation is only required for Create React App itself. - -### Creating an App +**For the build tools, you’ll need to have Node >= 6 on your machine**. You can use [nvm](https://github.com/creationix/nvm#installation) (macOS/Linux) or [nvm-windows](https://github.com/coreybutler/nvm-windows#node-version-manager-nvm-for-windows) to easily switch Node versions between different projects. Note that Create React App **works with any backend** because it produces static HTML/JS/CSS bundles. To create a new app, run a single command: @@ -44,7 +38,7 @@ To create a new app, run a single command: npx create-react-app my-app ``` -([npx](https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b) comes with npm 5.2+ and higher, see [instructions for older npm versions](https://gist.github.com/gaearon/4064d3c23a77c74a3614c498a8bb1c5f)) +*([npx](https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b) comes with npm 5.2+ and higher, see [instructions for older npm versions](https://gist.github.com/gaearon/4064d3c23a77c74a3614c498a8bb1c5f))* It will create a directory called `my-app` inside the current folder.<br> Inside that directory, it will generate the initial project structure and install the transitive dependencies: @@ -161,59 +155,48 @@ Please refer to the [User Guide](https://github.com/facebookincubator/create-rea * **No Lock-In:** You can “eject” to a custom setup at any time. Run a single command, and all the configuration and build dependencies will be moved directly into your project, so you can pick up right where you left off. -## Why Use This? +## What’s Included? -**If you’re getting started** with React, use `create-react-app` to automate the build of your app. There is no configuration file, and `react-scripts` is the only extra build dependency in your `package.json`. Your environment will have everything you need to build a modern React app: +Your environment will have everything you need to build a modern single-page React app: * React, JSX, ES6, and Flow syntax support. * Language extras beyond ES6 like the object spread operator. -* A dev server that lints for common errors. -* Import CSS and image files directly from JavaScript. * Autoprefixed CSS, so you don’t need `-webkit` or other prefixes. -* A `build` script to bundle JS, CSS, and images for production, with sourcemaps. +* A fast interactive unit test runner with built-in support for coverage reporting. +* A live development server that warns about common mistakes. +* A build script to bundle JS, CSS, and images for production, with hashes and sourcemaps. * An offline-first [service worker](https://developers.google.com/web/fundamentals/getting-started/primers/service-workers) and a [web app manifest](https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/), meeting all the [Progressive Web App](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#making-a-progressive-web-app) criteria. +* Hassle-free updates for the above tools with a single dependency. -**The feature set is intentionally limited**. It doesn’t support advanced features such as server rendering or CSS modules. The tool is also **non-configurable** because it is hard to provide a cohesive experience and easy updates across a set of tools when the user can tweak anything. - -**You don’t have to use this.** Historically it has been easy to [gradually adopt](https://www.youtube.com/watch?v=BF58ZJ1ZQxY) React. However many people create new single-page React apps from scratch every day. We’ve heard [loud](https://medium.com/@ericclemmons/javascript-fatigue-48d4011b6fc4) and [clear](https://twitter.com/thomasfuchs/status/708675139253174273) that this process can be error-prone and tedious, especially if this is your first JavaScript build stack. This project is an attempt to figure out a good way to start developing React apps. - -### Converting to a Custom Setup +Check out [this guide](https://github.com/nitishdayal/cra_closer_look) for an overview of how these tools fit together. -**If you’re a power user** and you aren’t happy with the default configuration, you can “eject” from the tool and use it as a boilerplate generator. +The tradeoff is that **these tools are preconfigured to work in a specific way**. If your project needs more customization, you can ["eject"](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#npm-run-eject) and customize it, but then you will need to maintain this configuration. -Running `npm run eject` copies all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. Commands like `npm start` and `npm run build` will still work, but they will point to the copied scripts so you can tweak them. At this point, you’re on your own. +## Popular Alternatives -**Note: this is a one-way operation. Once you `eject`, you can’t go back!** +This project is a great fit for: -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. +* Learning React in a comfortable and feature-rich development environment. +* Starting new single-page React applications. +* Creating examples with React for your library. -## Limitations +Here’s a few common cases where you might want to try something else: -Some features are currently **not supported**: +* If you want to **try React** without installing hundreds of `node_modules`, consider [using a single HTML file or an online sandbox instead](https://reactjs.org/docs/try-react.html). -* Server rendering. -* Some experimental syntax extensions (e.g. decorators). -* CSS Modules (see [#2285](https://github.com/facebookincubator/create-react-app/pull/2285)). -* Importing LESS or Sass directly ([but you still can use them](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-a-css-preprocessor-sass-less-etc)). -* Hot reloading of components. +* Maybe you are **not building a single-page application** and need to integrate your React code with an existing template-based server framework such as Rails or Django. In this case, consider using projects like [nwb](https://github.com/insin/nwb) or [Neutrino](https://neutrino.js.org/) which are more flexible. -Some of them might get added in the future if they are stable, are useful to majority of React apps, don’t conflict with existing tools, and don’t introduce additional configuration. +* If you need to **publish a React component**, [nwb](https://github.com/insin/nwb) can [also do this](https://github.com/insin/nwb#react-components-and-libraries). -## What’s Inside? +* If you want to do **server rendering** with React, check out [Next.js](https://github.com/zeit/next.js/) or [Razzle](https://github.com/jaredpalmer/razzle). Create React App is agnostic of the backend, and just produces static HTML/JS/CSS bundles. -The tools used by Create React App are subject to change. -Currently it is a thin layer on top of many amazing community projects, such as: +* If your website is **mostly static** (for example, a portfolio or a blog), consider using [Gatsby](https://www.gatsbyjs.org/) instead. Unlike Create React App, it pre-renders the website into HTML at the build time. -* [webpack](https://webpack.js.org/) with [webpack-dev-server](https://github.com/webpack/webpack-dev-server), [html-webpack-plugin](https://github.com/ampedandwired/html-webpack-plugin) and [style-loader](https://github.com/webpack/style-loader) -* [Babel](http://babeljs.io/) with ES6 and extensions used by Facebook (JSX, [object spread](https://github.com/sebmarkbage/ecmascript-rest-spread/commits/master), [class properties](https://github.com/jeffmo/es-class-public-fields)) -* [Autoprefixer](https://github.com/postcss/autoprefixer) -* [ESLint](http://eslint.org/) -* [Jest](http://facebook.github.io/jest) -* and others. +* Finally, if you need **more customization**, check out [Neutrino](https://neutrino.js.org/) and its [React preset](https://neutrino.js.org/packages/react/). -All of them are transitive dependencies of the provided npm package. +All of the above tools can work with little to no configuration. -Check out [this guide](https://github.com/nitishdayal/cra_closer_look) for an overview of how these tools fit together. +If you prefer configuring the build yourself, [follow this guide](https://reactjs.org/docs/add-react-to-an-existing-app.html). ## Contributing @@ -231,32 +214,3 @@ We are grateful to the authors of existing related projects for their ideas and * [@eanplatter](https://github.com/eanplatter) * [@insin](https://github.com/insin) * [@mxstbr](https://github.com/mxstbr) - -## Alternatives - -If you don’t agree with the choices made in this project, you might want to explore alternatives with different tradeoffs.<br> -Some of the more popular and actively maintained ones are: - -* [insin/nwb](https://github.com/insin/nwb) -* [mozilla-neutrino/neutrino-dev](https://github.com/mozilla-neutrino/neutrino-dev) -* [jaredpalmer/razzle](https://github.com/jaredpalmer/razzle) -* [NYTimes/kyt](https://github.com/NYTimes/kyt) -* [zeit/next.js](https://github.com/zeit/next.js) -* [gatsbyjs/gatsby](https://github.com/gatsbyjs/gatsby) -* [electrode-io/electrode](https://github.com/electrode-io/electrode) - -Notable alternatives also include: - -* [enclave](https://github.com/eanplatter/enclave) -* [motion](https://github.com/steelbrain/pundle/tree/master/packages/motion) -* [quik](https://github.com/satya164/quik) -* [sagui](https://github.com/saguijs/sagui) -* [roc](https://github.com/rocjs/roc) -* [aik](https://github.com/d4rkr00t/aik) -* [react-app](https://github.com/kriasoft/react-app) -* [dev-toolkit](https://github.com/stoikerty/dev-toolkit) -* [sku](https://github.com/seek-oss/sku) -* [gluestick](https://github.com/TrueCar/gluestick) - -You can also use module bundlers like [webpack](http://webpack.js.org) and [Browserify](http://browserify.org/) directly.<br> -React documentation includes [a walkthrough](https://reactjs.org/docs/installation.html#development-and-production-versions) on this topic. From 965eddc5ffe5ecc35e4371e09a4d0ffef117ca60 Mon Sep 17 00:00:00 2001 From: Dan Abramov <dan.abramov@gmail.com> Date: Mon, 8 Jan 2018 17:55:58 +0000 Subject: [PATCH 037/122] Update README.md --- README.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 9eed9a66a..ebea335c9 100644 --- a/README.md +++ b/README.md @@ -174,11 +174,11 @@ The tradeoff is that **these tools are preconfigured to work in a specific way** ## Popular Alternatives -This project is a great fit for: +Create React App is a great fit for: -* Learning React in a comfortable and feature-rich development environment. -* Starting new single-page React applications. -* Creating examples with React for your library. +* **Learning React** in a comfortable and feature-rich development environment. +* **Starting new single-page React applications.** +* **Creating examples** with React for your libraries and components. Here’s a few common cases where you might want to try something else: From 5e2290b2b9c05451a8a0bafb832b16a4430e93da Mon Sep 17 00:00:00 2001 From: Dan Abramov <dan.abramov@gmail.com> Date: Mon, 8 Jan 2018 17:57:55 +0000 Subject: [PATCH 038/122] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index ebea335c9..4b8e3a428 100644 --- a/README.md +++ b/README.md @@ -30,7 +30,7 @@ Just create a project, and you’re good to go. ## Creating an App -**For the build tools, you’ll need to have Node >= 6 on your machine**. You can use [nvm](https://github.com/creationix/nvm#installation) (macOS/Linux) or [nvm-windows](https://github.com/coreybutler/nvm-windows#node-version-manager-nvm-for-windows) to easily switch Node versions between different projects. Note that Create React App **works with any backend** because it produces static HTML/JS/CSS bundles. +**You’ll need to have Node >= 6 on your local development machine** (but it’s not required on the server). You can use [nvm](https://github.com/creationix/nvm#installation) (macOS/Linux) or [nvm-windows](https://github.com/coreybutler/nvm-windows#node-version-manager-nvm-for-windows) to easily switch Node versions between different projects. To create a new app, run a single command: From 4bbff3b96b7f6fc5b5a084a98c19548c6ca60ed1 Mon Sep 17 00:00:00 2001 From: Dan Abramov <dan.abramov@gmail.com> Date: Mon, 8 Jan 2018 18:00:47 +0000 Subject: [PATCH 039/122] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 4b8e3a428..ad55b212b 100644 --- a/README.md +++ b/README.md @@ -184,7 +184,7 @@ Here’s a few common cases where you might want to try something else: * If you want to **try React** without installing hundreds of `node_modules`, consider [using a single HTML file or an online sandbox instead](https://reactjs.org/docs/try-react.html). -* Maybe you are **not building a single-page application** and need to integrate your React code with an existing template-based server framework such as Rails or Django. In this case, consider using projects like [nwb](https://github.com/insin/nwb) or [Neutrino](https://neutrino.js.org/) which are more flexible. +* If you need to **integrate your React code with a template-based server framework** like Rails or Django or **aren’t building a single-page app**, consider using [nwb](https://github.com/insin/nwb) or [Neutrino](https://neutrino.js.org/) which are more flexible. * If you need to **publish a React component**, [nwb](https://github.com/insin/nwb) can [also do this](https://github.com/insin/nwb#react-components-and-libraries). From b2f48ceae3b747317b4fdde94253e0aab9b3f457 Mon Sep 17 00:00:00 2001 From: Dan Abramov <dan.abramov@gmail.com> Date: Mon, 8 Jan 2018 18:42:45 +0000 Subject: [PATCH 040/122] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index ad55b212b..dbb9f7d3c 100644 --- a/README.md +++ b/README.md @@ -184,7 +184,7 @@ Here’s a few common cases where you might want to try something else: * If you want to **try React** without installing hundreds of `node_modules`, consider [using a single HTML file or an online sandbox instead](https://reactjs.org/docs/try-react.html). -* If you need to **integrate your React code with a template-based server framework** like Rails or Django or **aren’t building a single-page app**, consider using [nwb](https://github.com/insin/nwb) or [Neutrino](https://neutrino.js.org/) which are more flexible. +* If you need to **integrate React code with a server-side template framework** like Rails or Django, or if you’re **not building a single-page app**, consider using [nwb](https://github.com/insin/nwb) or [Neutrino](https://neutrino.js.org/) which are more flexible. * If you need to **publish a React component**, [nwb](https://github.com/insin/nwb) can [also do this](https://github.com/insin/nwb#react-components-and-libraries). From 7ecbc029c7b3139d6d7713add616ead3bd7b9ba7 Mon Sep 17 00:00:00 2001 From: Dan Abramov <dan.abramov@gmail.com> Date: Mon, 8 Jan 2018 18:51:09 +0000 Subject: [PATCH 041/122] Update README.md --- packages/react-scripts/template/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index 6a7c9be27..55f5ae187 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -2254,7 +2254,7 @@ If this doesn’t happen, try one of the following workarounds: * If the watcher doesn’t see a file called `index.js` and you’re referencing it by the folder name, you [need to restart the watcher](https://github.com/facebookincubator/create-react-app/issues/1164) due to a Webpack bug. * Some editors like Vim and IntelliJ have a “safe write” feature that currently breaks the watcher. You will need to disable it. Follow the instructions in [“Adjusting Your Text Editor”](https://webpack.js.org/guides/development/#adjusting-your-text-editor). * If your project path contains parentheses, try moving the project to a path without them. This is caused by a [Webpack watcher bug](https://github.com/webpack/watchpack/issues/42). -* On Linux and macOS, you might need to [tweak system settings](https://webpack.github.io/docs/troubleshooting.html#not-enough-watchers) to allow more watchers. +* On Linux and macOS, you might need to [tweak system settings](https://github.com/webpack/docs/wiki/troubleshooting#not-enough-watchers) to allow more watchers. * If the project runs inside a virtual machine such as (a Vagrant provisioned) VirtualBox, create an `.env` file in your project directory if it doesn’t exist, and add `CHOKIDAR_USEPOLLING=true` to it. This ensures that the next time you run `npm start`, the watcher uses the polling mode, as necessary inside a VM. If none of these solutions help please leave a comment [in this thread](https://github.com/facebookincubator/create-react-app/issues/659). From 58e31f9b97d7bd98064cc86c37f08d67373490e8 Mon Sep 17 00:00:00 2001 From: Clayton Ray <iamclaytonray@gmail.com> Date: Mon, 8 Jan 2018 14:53:56 -0500 Subject: [PATCH 042/122] Update readme.md (#3712) Add TypeScript to **Popular Alternatives** --- README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README.md b/README.md index dbb9f7d3c..31313ec93 100644 --- a/README.md +++ b/README.md @@ -192,6 +192,8 @@ Here’s a few common cases where you might want to try something else: * If your website is **mostly static** (for example, a portfolio or a blog), consider using [Gatsby](https://www.gatsbyjs.org/) instead. Unlike Create React App, it pre-renders the website into HTML at the build time. +* If you want to use **TypeScript**, consider using [create-react-app-typescript](https://github.com/wmonk/create-react-app-typescript). + * Finally, if you need **more customization**, check out [Neutrino](https://neutrino.js.org/) and its [React preset](https://neutrino.js.org/packages/react/). All of the above tools can work with little to no configuration. From 077dc228eef38c043c65c19142e84f967e21a1e9 Mon Sep 17 00:00:00 2001 From: Dan Abramov <dan.abramov@gmail.com> Date: Mon, 8 Jan 2018 20:59:38 +0000 Subject: [PATCH 043/122] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 31313ec93..959b17f01 100644 --- a/README.md +++ b/README.md @@ -188,7 +188,7 @@ Here’s a few common cases where you might want to try something else: * If you need to **publish a React component**, [nwb](https://github.com/insin/nwb) can [also do this](https://github.com/insin/nwb#react-components-and-libraries). -* If you want to do **server rendering** with React, check out [Next.js](https://github.com/zeit/next.js/) or [Razzle](https://github.com/jaredpalmer/razzle). Create React App is agnostic of the backend, and just produces static HTML/JS/CSS bundles. +* If you want to do **server rendering** with React and Node.js, check out [Next.js](https://github.com/zeit/next.js/) or [Razzle](https://github.com/jaredpalmer/razzle). Create React App is agnostic of the backend, and just produces static HTML/JS/CSS bundles. * If your website is **mostly static** (for example, a portfolio or a blog), consider using [Gatsby](https://www.gatsbyjs.org/) instead. Unlike Create React App, it pre-renders the website into HTML at the build time. From 1b067c5659abc7ef478f074761570758bd091f4d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ernesto=20Garc=C3=ADa?= <gnapse@gmail.com> Date: Mon, 8 Jan 2018 18:08:29 -0300 Subject: [PATCH 044/122] Autodetect MacVim editor (#3545) Adds support for the error overlay to detect and open the file with the error in MacVim. Relates to #2636. --- packages/react-dev-utils/launchEditor.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/react-dev-utils/launchEditor.js b/packages/react-dev-utils/launchEditor.js index ba16827e6..d2a7ea559 100644 --- a/packages/react-dev-utils/launchEditor.js +++ b/packages/react-dev-utils/launchEditor.js @@ -52,6 +52,8 @@ const COMMON_EDITORS_OSX = { '/Applications/RubyMine.app/Contents/MacOS/rubymine', '/Applications/WebStorm.app/Contents/MacOS/webstorm': '/Applications/WebStorm.app/Contents/MacOS/webstorm', + '/Applications/MacVim.app/Contents/MacOS/MacVim': + 'mvim', }; const COMMON_EDITORS_LINUX = { From 419e4d8f57611443103516b9c5e23487c5f33a80 Mon Sep 17 00:00:00 2001 From: Dan Abramov <dan.abramov@gmail.com> Date: Mon, 8 Jan 2018 21:32:01 +0000 Subject: [PATCH 045/122] Add a note about Babel --- packages/react-scripts/template/README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index 55f5ae187..157073b74 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -225,6 +225,8 @@ Note that **the project only includes a few ES6 [polyfills](https://en.wikipedia If you use any other ES6+ features that need **runtime support** (such as `Array.from()` or `Symbol`), make sure you are including the appropriate polyfills manually, or that the browsers you are targeting already support them. +Also note that using some newer syntax features like `for...of` or `[...nonArrayValue]` causes Babel to emit code that depends on ES6 runtime features and might not work without a polyfill. When in doubt, use [Babel REPL](https://babeljs.io/repl/) to see what any specific syntax compiles down to. + ## Syntax Highlighting in the Editor To configure the syntax highlighting in your favorite text editor, head to the [relevant Babel documentation page](https://babeljs.io/docs/editors) and follow the instructions. Some of the most popular editors are covered. From ce07e98bbd665524570f7b0f49317c4fc1b50500 Mon Sep 17 00:00:00 2001 From: Dan Abramov <dan.abramov@gmail.com> Date: Mon, 8 Jan 2018 21:34:01 +0000 Subject: [PATCH 046/122] Relax no-cond-assign rule (#3716) Fixes #2793 --- packages/eslint-config-react-app/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/eslint-config-react-app/index.js b/packages/eslint-config-react-app/index.js index adcdb86bc..c7a619abd 100644 --- a/packages/eslint-config-react-app/index.js +++ b/packages/eslint-config-react-app/index.js @@ -116,7 +116,7 @@ module.exports = { 'new-parens': 'warn', 'no-array-constructor': 'warn', 'no-caller': 'warn', - 'no-cond-assign': ['warn', 'always'], + 'no-cond-assign': ['warn', 'except-parens'], 'no-const-assign': 'warn', 'no-control-regex': 'warn', 'no-delete-var': 'warn', From 5e2c05151cf457c4b6bb9d684e429afb0f877f49 Mon Sep 17 00:00:00 2001 From: Mae Capozzi <maecapozzi@gmail.com> Date: Mon, 8 Jan 2018 17:31:43 -0500 Subject: [PATCH 047/122] Update README.md (#3717) * Update README.md with a note that reminds users to prepend REACT_APP_ to their environment variables. * Based on #865, where Dan Abramov suggests the person who filed the issue create a PR with these changes. * Took the language from [Adding Custom Environment Variables](https://github.com/facebookincubator/create-react-app/tree/master/packages/react-scripts/template#adding-custom-environment-variables) --- packages/react-scripts/template/README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index 157073b74..287a0134e 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -944,6 +944,7 @@ To define permanent environment variables, create a file called `.env` in the ro ``` REACT_APP_SECRET_CODE=abcdef ``` +>Note: You must create custom environment variables beginning with `REACT_APP_`. Any other variables except `NODE_ENV` will be ignored to avoid [accidentally exposing a private key on the machine that could have the same name](https://github.com/facebookincubator/create-react-app/issues/865#issuecomment-252199527). Changing any environment variables will require you to restart the development server if it is running. `.env` files **should be** checked into source control (with the exclusion of `.env*.local`). From 3a009b3403ca3edf207449fbe37d94e5a5ebb5d7 Mon Sep 17 00:00:00 2001 From: Dan Abramov <dan.abramov@gmail.com> Date: Mon, 8 Jan 2018 23:18:17 +0000 Subject: [PATCH 048/122] Document NODE_PATH --- packages/react-scripts/template/README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index 287a0134e..dd41472b2 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -2245,6 +2245,7 @@ CI | :large_orange_diamond: | :white_check_mark: | When set to `true`, Create Re REACT_EDITOR | :white_check_mark: | :x: | When an app crashes in development, you will see an error overlay with clickable stack trace. When you click on it, Create React App will try to determine the editor you are using based on currently running processes, and open the relevant source file. You can [send a pull request to detect your editor of choice](https://github.com/facebookincubator/create-react-app/issues/2636). Setting this environment variable overrides the automatic detection. If you do it, make sure your systems [PATH](https://en.wikipedia.org/wiki/PATH_(variable)) environment variable points to your editor’s bin folder. CHOKIDAR_USEPOLLING | :white_check_mark: | :x: | When set to `true`, the watcher runs in polling mode, as necessary inside a VM. Use this option if `npm start` isn't detecting changes. GENERATE_SOURCEMAP | :x: | :white_check_mark: | When set to `false`, source maps are not generated for a production build. This solves OOM issues on some smaller machines. +NODE_PATH | :white_check_mark: | :white_check_mark: | Same as [`NODE_PATH` in Node.js](https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders), but only relative folders are allowed. Can be handy for emulating a monorepo setup by setting `NODE_PATH=src`. ## Troubleshooting From 8234e4658d751b6ea639deeb109e9cbaff485bfd Mon Sep 17 00:00:00 2001 From: Dan Abramov <dan.abramov@gmail.com> Date: Mon, 8 Jan 2018 23:30:36 +0000 Subject: [PATCH 049/122] Add missing TOC entries --- packages/react-scripts/template/README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index dd41472b2..4e4623ab5 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -67,6 +67,8 @@ You can find the most recent version of this guide [here](https://github.com/fac - [Snapshot Testing](#snapshot-testing) - [Editor Integration](#editor-integration) - [Debugging Tests](#debugging-tests) + - [Debugging Tests in Chrome](#debugging-tests-in-chrome) + - [Debugging Tests in Visual Studio Code](#debugging-tests-in-visual-studio-code) - [Developing Components in Isolation](#developing-components-in-isolation) - [Getting Started with Storybook](#getting-started-with-storybook) - [Getting Started with Styleguidist](#getting-started-with-styleguidist) From 9d13edc1ee297e3d421c501174898e1ebbf1cd16 Mon Sep 17 00:00:00 2001 From: Dan Abramov <dan.abramov@gmail.com> Date: Mon, 8 Jan 2018 23:31:47 +0000 Subject: [PATCH 050/122] Add missing TOC entry --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 959b17f01..bfa09f9d5 100644 --- a/README.md +++ b/README.md @@ -133,6 +133,7 @@ The [User Guide](https://github.com/facebookincubator/create-react-app/blob/mast - [Generating Dynamic `<meta>` Tags on the Server](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#generating-dynamic-meta-tags-on-the-server) - [Pre-Rendering into Static HTML Files](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#pre-rendering-into-static-html-files) - [Running Tests](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#running-tests) +- [Debugging Tests](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#debugging-tests) - [Developing Components in Isolation](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#developing-components-in-isolation) - [Publishing Components to npm](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#publishing-components-to-npm) - [Making a Progressive Web App](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#making-a-progressive-web-app) From 21d0723d3c4e82bd895b56e7f61e7f38df8c1199 Mon Sep 17 00:00:00 2001 From: Dan Abramov <dan.abramov@gmail.com> Date: Mon, 8 Jan 2018 23:42:09 +0000 Subject: [PATCH 051/122] Be clearer --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index bfa09f9d5..72c448c6c 100644 --- a/README.md +++ b/README.md @@ -183,7 +183,7 @@ Create React App is a great fit for: Here’s a few common cases where you might want to try something else: -* If you want to **try React** without installing hundreds of `node_modules`, consider [using a single HTML file or an online sandbox instead](https://reactjs.org/docs/try-react.html). +* If you want to **try React** without hundreds of transitive build tool dependencies, consider [using a single HTML file or an online sandbox instead](https://reactjs.org/docs/try-react.html). * If you need to **integrate React code with a server-side template framework** like Rails or Django, or if you’re **not building a single-page app**, consider using [nwb](https://github.com/insin/nwb) or [Neutrino](https://neutrino.js.org/) which are more flexible. From 1c8a7f3fecc60cd1516ed3a28f274945de90b3db Mon Sep 17 00:00:00 2001 From: Dan Abramov <dan.abramov@gmail.com> Date: Mon, 8 Jan 2018 23:48:06 +0000 Subject: [PATCH 052/122] Document that src/setupTests.js doesn't work if created after ejecting --- packages/react-scripts/template/README.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index 4e4623ab5..989e3e388 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -1323,6 +1323,8 @@ import Adapter from 'enzyme-adapter-react-16'; configure({ adapter: new Adapter() }); ``` +(Note that **if you already ejected** before creating `src/setupTests.js`, this won’t work unless you set [this Jest option](https://facebook.github.io/jest/docs/en/configuration.html#setuptestframeworkscriptfile-string) to point to `src/setupTests.js`.) + Now you can write a smoke test with it: ```js @@ -1412,6 +1414,8 @@ const localStorageMock = { global.localStorage = localStorageMock ``` +Note that **if you already ejected** before creating `src/setupTests.js`, this won’t work unless you set [this Jest option](https://facebook.github.io/jest/docs/en/configuration.html#setuptestframeworkscriptfile-string) to point to `src/setupTests.js`. + ### Focusing and Excluding Tests You can replace `it()` with `xit()` to temporarily exclude a test from being executed.<br> From e3e8cdd6996d51ea4a87678441f0264ee1d3d2e3 Mon Sep 17 00:00:00 2001 From: "Rafael E. Poveda" <raerpo@gmail.com> Date: Tue, 9 Jan 2018 09:35:43 -0300 Subject: [PATCH 053/122] Support setting none in REACT_EDITOR env variable (#3721) * add support to set REACT_EDITOR to none * change README message * change condition to avoid problems with editor being null * move condition to avoid extra code --- packages/react-dev-utils/launchEditor.js | 5 +++++ packages/react-scripts/template/README.md | 2 +- 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/react-dev-utils/launchEditor.js b/packages/react-dev-utils/launchEditor.js index d2a7ea559..c63262964 100644 --- a/packages/react-dev-utils/launchEditor.js +++ b/packages/react-dev-utils/launchEditor.js @@ -259,11 +259,16 @@ function launchEditor(fileName, lineNumber) { } let [editor, ...args] = guessEditor(); + if (!editor) { printInstructions(fileName, null); return; } + if (editor.toLowerCase() === 'none') { + return; + } + if ( process.platform === 'linux' && fileName.startsWith('/mnt/') && diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index 989e3e388..c4234f273 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -2248,7 +2248,7 @@ PORT | :white_check_mark: | :x: | By default, the development web server will at HTTPS | :white_check_mark: | :x: | When set to `true`, Create React App will run the development server in `https` mode. PUBLIC_URL | :x: | :white_check_mark: | Create React App assumes your application is hosted at the serving web server's root or a subpath as specified in [`package.json` (`homepage`)](#building-for-relative-paths). Normally, Create React App ignores the hostname. You may use this variable to force assets to be referenced verbatim to the url you provide (hostname included). This may be particularly useful when using a CDN to host your application. CI | :large_orange_diamond: | :white_check_mark: | When set to `true`, Create React App treats warnings as failures in the build. It also makes the test runner non-watching. Most CIs set this flag by default. -REACT_EDITOR | :white_check_mark: | :x: | When an app crashes in development, you will see an error overlay with clickable stack trace. When you click on it, Create React App will try to determine the editor you are using based on currently running processes, and open the relevant source file. You can [send a pull request to detect your editor of choice](https://github.com/facebookincubator/create-react-app/issues/2636). Setting this environment variable overrides the automatic detection. If you do it, make sure your systems [PATH](https://en.wikipedia.org/wiki/PATH_(variable)) environment variable points to your editor’s bin folder. +REACT_EDITOR | :white_check_mark: | :x: | When an app crashes in development, you will see an error overlay with clickable stack trace. When you click on it, Create React App will try to determine the editor you are using based on currently running processes, and open the relevant source file. You can [send a pull request to detect your editor of choice](https://github.com/facebookincubator/create-react-app/issues/2636). Setting this environment variable overrides the automatic detection. If you do it, make sure your systems [PATH](https://en.wikipedia.org/wiki/PATH_(variable)) environment variable points to your editor’s bin folder. You can also set it to `none` to disable it completely. CHOKIDAR_USEPOLLING | :white_check_mark: | :x: | When set to `true`, the watcher runs in polling mode, as necessary inside a VM. Use this option if `npm start` isn't detecting changes. GENERATE_SOURCEMAP | :x: | :white_check_mark: | When set to `false`, source maps are not generated for a production build. This solves OOM issues on some smaller machines. NODE_PATH | :white_check_mark: | :white_check_mark: | Same as [`NODE_PATH` in Node.js](https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders), but only relative folders are allowed. Can be handy for emulating a monorepo setup by setting `NODE_PATH=src`. From d3a1765470782f9628b90f900db96c66ad3b3019 Mon Sep 17 00:00:00 2001 From: Daniel Verejan <danielverejan@users.noreply.github.com> Date: Tue, 9 Jan 2018 15:46:29 +0200 Subject: [PATCH 054/122] Update the string that clears the console. (#2071) * Update the string that clears the console. #1914 I've tested it with Windows 10 and 7, node versions from ~5.0.0 up to 7.7.0. Didn't managed to test it on 8 but it should be fine. * Update windows string Add windows specific string for clearing the console. --- packages/react-dev-utils/clearConsole.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/react-dev-utils/clearConsole.js b/packages/react-dev-utils/clearConsole.js index 6e3b3c9ce..cb02af892 100644 --- a/packages/react-dev-utils/clearConsole.js +++ b/packages/react-dev-utils/clearConsole.js @@ -8,9 +8,7 @@ 'use strict'; function clearConsole() { - process.stdout.write( - process.platform === 'win32' ? '\x1Bc' : '\x1B[2J\x1B[3J\x1B[H' - ); + process.stdout.write(process.platform === 'win32' ? '\x1B[2J\x1B[0f' : '\x1B[2J\x1B[3J\x1B[H'); } module.exports = clearConsole; From d1adff07ff599a2d4ac508a40d0a037dfb7f463b Mon Sep 17 00:00:00 2001 From: Dan Abramov <dan.abramov@gmail.com> Date: Tue, 9 Jan 2018 14:21:50 +0000 Subject: [PATCH 055/122] Document AJAX requests --- packages/react-scripts/template/README.md | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index c4234f273..bbbb7ea26 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -41,6 +41,7 @@ You can find the most recent version of this guide [here](https://github.com/fac - [Adding Temporary Environment Variables In Your Shell](#adding-temporary-environment-variables-in-your-shell) - [Adding Development Environment Variables In `.env`](#adding-development-environment-variables-in-env) - [Can I Use Decorators?](#can-i-use-decorators) +- [Fetching Data with AJAX Requests](#fetching-data-with-ajax-requests) - [Integrating with an API Backend](#integrating-with-an-api-backend) - [Node](#node) - [Ruby on Rails](#ruby-on-rails) @@ -988,6 +989,16 @@ Please refer to these two threads for reference: Create React App will add decorator support when the specification advances to a stable stage. +## Fetching Data with AJAX Requests + +React doesn't prescribe a specific approach to data fetching, but people commonly use either a library like [axios](https://github.com/axios/axios) or the [`fetch()` API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) provided by the browser. Conveniently, Create React App includes a polyfill for `fetch()` so you can use it without worrying about the browser support. + +The global `fetch` function allows to easily makes AJAX requests. It takes in a URL as an input and returns a `Promise` that resolves to a `Response` object. You can find more information about `fetch` [here](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch). + +This project also includes a [Promise polyfill](https://github.com/then/promise) which provides a full implementation of Promises/A+. A Promise represents the eventual result of an asynchronous operation, you can find more information about Promises [here](https://www.promisejs.org/) and [here](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise). Both axios and `fetch()` use Promises under the hood. You can also use the [`async / await`](https://davidwalsh.name/async-await) syntax to reduce the callback nesting. + +You can learn more about making AJAX requests from React components in [the FAQ entry on the React website](https://reactjs.org/docs/faq-ajax.html). + ## Integrating with an API Backend These tutorials will help you to integrate your app with an API backend running on another port, From ea1b81b835633e01a530d2b4f4e810d5ece4602c Mon Sep 17 00:00:00 2001 From: Dan Abramov <dan.abramov@gmail.com> Date: Tue, 9 Jan 2018 14:22:35 +0000 Subject: [PATCH 056/122] Add data fetching doc to TOC --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 72c448c6c..a17a00f39 100644 --- a/README.md +++ b/README.md @@ -127,6 +127,7 @@ The [User Guide](https://github.com/facebookincubator/create-react-app/blob/mast - [Adding a Router](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-a-router) - [Adding Custom Environment Variables](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-custom-environment-variables) - [Can I Use Decorators?](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#can-i-use-decorators) +- [Fetching Data with AJAX Requests](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#fetching-data-with-ajax-requests) - [Integrating with an API Backend](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#integrating-with-an-api-backend) - [Proxying API Requests in Development](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#proxying-api-requests-in-development) - [Using HTTPS in Development](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#using-https-in-development) From c6034703fcff45ce0aaefa72e303075e496c3642 Mon Sep 17 00:00:00 2001 From: Ulrik Strid <ulrik.strid@outlook.com> Date: Tue, 9 Jan 2018 15:45:51 +0100 Subject: [PATCH 057/122] Add link for automatic deployment to azure (#1791) --- packages/react-scripts/template/README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index bbbb7ea26..6b8aa2136 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -1995,6 +1995,8 @@ This will make sure that all the asset paths are relative to `index.html`. You w See [this](https://medium.com/@to_pe/deploying-create-react-app-on-microsoft-azure-c0f6686a4321) blog post on how to deploy your React app to Microsoft Azure. +See [this](https://medium.com/@strid/host-create-react-app-on-azure-986bc40d5bf2#.pycfnafbg) blog post or [this](https://github.com/ulrikaugustsson/azure-appservice-static) repo for a way to use automatic deployment to Azure App Service. + ### [Firebase](https://firebase.google.com/) Install the Firebase CLI if you haven’t already by running `npm install -g firebase-tools`. Sign up for a [Firebase account](https://console.firebase.google.com/) and create a new project. Run `firebase login` and login with your previous created Firebase account. From bef40eeb84299dd0da6c348f3d5180ef497f5e4a Mon Sep 17 00:00:00 2001 From: Evan You <yyx990803@gmail.com> Date: Tue, 9 Jan 2018 10:10:31 -0500 Subject: [PATCH 058/122] Add editor support for Sublime Dev & VSCode Insiders (#3700) --- packages/react-dev-utils/launchEditor.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/react-dev-utils/launchEditor.js b/packages/react-dev-utils/launchEditor.js index c63262964..aee22b248 100644 --- a/packages/react-dev-utils/launchEditor.js +++ b/packages/react-dev-utils/launchEditor.js @@ -33,9 +33,13 @@ const COMMON_EDITORS_OSX = { '/Applications/Brackets.app/Contents/MacOS/Brackets': 'brackets', '/Applications/Sublime Text.app/Contents/MacOS/Sublime Text': '/Applications/Sublime Text.app/Contents/SharedSupport/bin/subl', + '/Applications/Sublime Text Dev.app/Contents/MacOS/Sublime Text': + '/Applications/Sublime Text Dev.app/Contents/SharedSupport/bin/subl', '/Applications/Sublime Text 2.app/Contents/MacOS/Sublime Text 2': '/Applications/Sublime Text 2.app/Contents/SharedSupport/bin/subl', '/Applications/Visual Studio Code.app/Contents/MacOS/Electron': 'code', + '/Applications/Visual Studio Code - Insiders.app/Contents/MacOS/Electron': + 'code-insiders', '/Applications/AppCode.app/Contents/MacOS/appcode': '/Applications/AppCode.app/Contents/MacOS/appcode', '/Applications/CLion.app/Contents/MacOS/clion': From d61a3313f6eeb10cafee9574dddba1971a84cba5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Juhamatti=20Niemel=C3=A4?= <iiska@iki.fi> Date: Tue, 9 Jan 2018 17:13:59 +0200 Subject: [PATCH 059/122] Fix asset size comparison for multi build stats (#3514) If create-react-app project is ejected and webpack configuration is modified to multi build setup FileSizeReporter would fail. In those situations `webpackStats` parameter would contain stats array for each build. This fix will try to access stats and then falls back to using plaing webpackStats object. --- packages/react-dev-utils/FileSizeReporter.js | 38 ++++++++++++-------- 1 file changed, 23 insertions(+), 15 deletions(-) diff --git a/packages/react-dev-utils/FileSizeReporter.js b/packages/react-dev-utils/FileSizeReporter.js index 01ce52c6b..68aae411f 100644 --- a/packages/react-dev-utils/FileSizeReporter.js +++ b/packages/react-dev-utils/FileSizeReporter.js @@ -25,21 +25,29 @@ function printFileSizesAfterBuild( ) { var root = previousSizeMap.root; var sizes = previousSizeMap.sizes; - var assets = webpackStats - .toJson() - .assets.filter(asset => /\.(js|css)$/.test(asset.name)) - .map(asset => { - var fileContents = fs.readFileSync(path.join(root, asset.name)); - var size = gzipSize(fileContents); - var previousSize = sizes[removeFileNameHash(root, asset.name)]; - var difference = getDifferenceLabel(size, previousSize); - return { - folder: path.join(path.basename(buildFolder), path.dirname(asset.name)), - name: path.basename(asset.name), - size: size, - sizeLabel: filesize(size) + (difference ? ' (' + difference + ')' : ''), - }; - }); + var assets = (webpackStats.stats || [webpackStats]) + .map(stats => + stats + .toJson() + .assets.filter(asset => /\.(js|css)$/.test(asset.name)) + .map(asset => { + var fileContents = fs.readFileSync(path.join(root, asset.name)); + var size = gzipSize(fileContents); + var previousSize = sizes[removeFileNameHash(root, asset.name)]; + var difference = getDifferenceLabel(size, previousSize); + return { + folder: path.join( + path.basename(buildFolder), + path.dirname(asset.name) + ), + name: path.basename(asset.name), + size: size, + sizeLabel: + filesize(size) + (difference ? ' (' + difference + ')' : '') + }; + }) + ) + .reduce((single, all) => all.concat(single), []); assets.sort((a, b) => b.size - a.size); var longestSizeLabelLength = Math.max.apply( null, From fd1a2441b738f31b5493b2aa0f89162fbdae2f9f Mon Sep 17 00:00:00 2001 From: David Gilbertson <gilbertson.david@gmail.com> Date: Wed, 10 Jan 2018 02:17:19 +1100 Subject: [PATCH 060/122] Fix typo (#3478) 'more' and 'simpler' together is incorrect. --- packages/react-scripts/template/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index 6b8aa2136..377b2fbe0 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -1370,7 +1370,7 @@ it('renders welcome message', () => { All Jest matchers are [extensively documented here](http://facebook.github.io/jest/docs/en/expect.html).<br> Nevertheless you can use a third-party assertion library like [Chai](http://chaijs.com/) if you want to, as described below. -Additionally, you might find [jest-enzyme](https://github.com/blainekasten/enzyme-matchers) helpful to simplify your tests with readable matchers. The above `contains` code can be written simpler with jest-enzyme. +Additionally, you might find [jest-enzyme](https://github.com/blainekasten/enzyme-matchers) helpful to simplify your tests with readable matchers. The above `contains` code can be written more simply with jest-enzyme. ```js expect(wrapper).toContainReact(welcome) From 344ddfa30e717f70b2921067f72040d0cd9e8798 Mon Sep 17 00:00:00 2001 From: Mario Nebl <marionebl@users.noreply.github.com> Date: Tue, 9 Jan 2018 16:21:52 +0100 Subject: [PATCH 061/122] Add SVG asciicast (#3677) * Add svg screencast * Use svg screencast --- README.md | 4 +++- package.json | 4 +++- screencast.svg | 1 + 3 files changed, 7 insertions(+), 2 deletions(-) create mode 100644 screencast.svg diff --git a/README.md b/README.md index a17a00f39..a09383382 100644 --- a/README.md +++ b/README.md @@ -19,7 +19,9 @@ npm start Then open [http://localhost:3000/](http://localhost:3000/) to see your app.<br> When you’re ready to deploy to production, create a minified bundle with `npm run build`. -<img src='https://camo.githubusercontent.com/506a5a0a33aebed2bf0d24d3999af7f582b31808/687474703a2f2f692e696d6775722e636f6d2f616d794e66434e2e706e67' width='600' alt='npm start'> +<p align='center'> +<img src='https://cdn.rawgit.com/facebookincubator/create-react-app/6ab67e6b96457720d843aa3c557ff951a41bafc2/screencast.svg' width='600' alt=''> +</p> ### Get Started Immediately diff --git a/package.json b/package.json index 5758c6263..e912ba893 100644 --- a/package.json +++ b/package.json @@ -9,6 +9,7 @@ "postinstall": "node bootstrap.js && cd packages/react-error-overlay/ && npm run build:prod", "publish": "tasks/release.sh", "start": "node packages/react-scripts/scripts/start.js", + "screencast": "svg-term --cast hItN7sl5yfCPTHxvFg5glhhfp --out screencast.svg --window", "test": "node packages/react-scripts/scripts/test.js --env=jsdom", "format": "prettier --trailing-comma es5 --single-quote --write 'packages/*/*.js' 'packages/*/!(node_modules)/**/*.js'", "precommit": "lint-staged" @@ -19,7 +20,8 @@ "lerna": "^2.0.0", "lerna-changelog": "^0.6.0", "lint-staged": "^3.3.1", - "prettier": "1.6.1" + "prettier": "1.6.1", + "svg-term-cli": "^2.0.3" }, "lint-staged": { "*.js": [ diff --git a/screencast.svg b/screencast.svg new file mode 100644 index 000000000..d92ef4c61 --- /dev/null +++ b/screencast.svg @@ -0,0 +1 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="825" height="595.25"><rect width="825" height="595.25" rx="5" ry="5" class="a"/><circle cx="20" cy="20" r="8.5" fill="#ff5f58"/><circle cx="47" cy="20" r="8.5" fill="#ffbd2e"/><circle cx="74" cy="20" r="8.5" fill="#18c132"/><svg height="542.75" viewBox="0 0 80 54.275" width="800" x="12.5" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" y="40"><style>@keyframes q{0%{transform:translateX(0)}.09%{transform:translateX(-80px)}.12%{transform:translateX(-160px)}.21%{transform:translateX(-240px)}.22%{transform:translateX(-400px)}2.94%{transform:translateX(-560px)}3.53%{transform:translateX(-640px)}3.54%{transform:translateX(-720px)}3.8%{transform:translateX(-800px)}3.98%{transform:translateX(-880px)}4.24%{transform:translateX(-960px)}4.43%{transform:translateX(-1040px)}5.96%{transform:translateX(-1120px)}5.97%{transform:translateX(-1200px)}12.09%{transform:translateX(-1360px)}12.1%{transform:translateX(-1440px)}12.59%{transform:translateX(-1680px)}13.43%{transform:translateX(-1840px)}14.24%{transform:translateX(-2080px)}14.31%{transform:translateX(-2240px)}14.44%{transform:translateX(-2320px)}19.76%{transform:translateX(-2400px)}26.1%{transform:translateX(-2480px)}31.42%{transform:translateX(-2560px)}31.48%{transform:translateX(-2720px)}39.46%{transform:translateX(-2800px)}39.76%{transform:translateX(-2960px)}39.77%{transform:translateX(-4160px)}39.83%{transform:translateX(-4400px)}43.72%{transform:translateX(-4640px)}44.05%{transform:translateX(-4880px)}44.61%{transform:translateX(-5040px)}45.18%{transform:translateX(-5200px)}45.41%{transform:translateX(-5280px)}46.2%{transform:translateX(-5360px)}46.96%{transform:translateX(-5600px)}46.98%{transform:translateX(-5680px)}47.07%{transform:translateX(-5760px)}47.17%{transform:translateX(-6000px)}48.3%{transform:translateX(-6240px)}48.68%{transform:translateX(-6320px)}48.99%{transform:translateX(-6400px)}49.24%{transform:translateX(-6480px)}49.78%{transform:translateX(-6640px)}51.31%{transform:translateX(-6800px)}51.72%{transform:translateX(-6960px)}51.96%{transform:translateX(-7040px)}52.22%{transform:translateX(-7120px)}52.65%{transform:translateX(-7200px)}53.51%{transform:translateX(-7360px)}53.53%{transform:translateX(-7440px)}54.64%{transform:translateX(-7680px)}54.91%{transform:translateX(-7840px)}60.62%{transform:translateX(-8000px)}72.03%{transform:translateX(-8160px)}72.24%{transform:translateX(-8240px)}73.4%{transform:translateX(-8320px)}73.41%{transform:translateX(-8960px)}to{transform:translateX(-9040px)}}.a{fill:#282d35}.f{fill:#71bef2}.g{fill:#a8cc8c}.h{fill:#b9c0cb}.i{fill:#e88388}.j{fill:#b9c0cb;font-weight:700}.k{fill:#66c2cd}.m{fill:#555}.n{fill:#66c2cd;text-decoration:underline}</style><g font-size="1.67" font-family="Monaco,Consolas,Menlo,'Bitstream Vera Sans Mono','Powerline Symbols',monospace"><defs><symbol id="1"><text y="1.67" class="f">~</text></symbol><symbol id="2"><text y="1.67" class="g">λ</text></symbol><symbol id="3"><text y="1.67" class="g">λ</text><text x="2.004" y="1.67" class="h">c</text></symbol><symbol id="4"><text y="1.67" class="g">λ</text><text x="2.004" y="1.67" class="i">c</text></symbol><symbol id="5"><text y="1.67" class="g">λ</text><text x="2.004" y="1.67" class="j">create-react-app</text><text x="19.038" y="1.67" class="k">my-app</text></symbol><symbol id="6"><text y="1.67" class="h">Creating</text><text x="9.018" y="1.67" class="h">a</text><text x="11.022" y="1.67" class="h">new</text><text x="15.03" y="1.67" class="h">React</text><text x="21.042" y="1.67" class="h">app</text><text x="25.05" y="1.67" class="h">in</text><text x="28.056" y="1.67" class="g">~/my-app</text><text x="36.072" y="1.67" class="h">.</text></symbol><symbol id="7"><text y="1.67" class="h">Installing</text><text x="11.022" y="1.67" class="h">packages.</text><text x="21.042" y="1.67" class="h">This</text><text x="26.052" y="1.67" class="h">might</text><text x="32.064" y="1.67" class="h">take</text><text x="37.074" y="1.67" class="h">a</text><text x="39.078" y="1.67" class="h">couple</text><text x="46.092" y="1.67" class="h">of</text><text x="49.098" y="1.67" class="h">minutes.</text></symbol><symbol id="8"><text y="1.67" class="h">Installing</text><text x="11.022" y="1.67" class="k">react</text><text x="16.032" y="1.67" class="h">,</text><text x="18.036" y="1.67" class="k">react-dom</text><text x="27.054" y="1.67" class="h">,</text><text x="29.058" y="1.67" class="h">and</text><text x="33.066" y="1.67" class="k">react-scripts</text><text x="46.092" y="1.67" class="h">...</text></symbol><symbol id="9"><text y="1.67" class="j">yarn</text><text x="5.01" y="1.67" class="j">add</text><text x="9.018" y="1.67" class="j">v1.2.1</text></symbol><symbol id="10"><text y="1.67" class="f">info</text><text x="5.01" y="1.67" class="h">No</text><text x="8.016" y="1.67" class="h">lockfile</text><text x="17.034" y="1.67" class="h">found.</text></symbol><symbol id="11"><text y="1.67" class="h">[1/4]</text><text x="6.012" y="1.67" class="h">🔍</text><text x="10.02" y="1.67" class="h">Resolving</text><text x="20.04" y="1.67" class="h">packages...</text></symbol><symbol id="12"><text y="1.67" class="h">[2/4]</text><text x="6.012" y="1.67" class="h">🚚</text><text x="10.02" y="1.67" class="h">Fetching</text><text x="19.038" y="1.67" class="h">packages...</text></symbol><symbol id="13"><text y="1.67" class="h">[3/4]</text><text x="6.012" y="1.67" class="h">🔗</text><text x="10.02" y="1.67" class="h">Linking</text><text x="18.036" y="1.67" class="h">dependencies...</text></symbol><symbol id="14"><text y="1.67" class="h">[4/4]</text><text x="6.012" y="1.67" class="h">📃</text><text x="10.02" y="1.67" class="h">Building</text><text x="19.038" y="1.67" class="h">fresh</text><text x="25.05" y="1.67" class="h">packages...</text></symbol><symbol id="15"><text y="1.67" class="h">✨</text><text x="3.006" y="1.67" class="h">Done</text><text x="8.016" y="1.67" class="h">in</text><text x="11.022" y="1.67" class="h">13.46s.</text></symbol><symbol id="16"><text y="1.67" class="h">Success!</text><text x="9.018" y="1.67" class="h">Created</text><text x="17.034" y="1.67" class="h">my-app</text><text x="24.048" y="1.67" class="h">at</text><text x="27.054" y="1.67" class="h">~/my-app</text></symbol><symbol id="17"><text y="1.67" class="h">Inside</text><text x="7.014" y="1.67" class="h">that</text><text x="12.024" y="1.67" class="h">directory,</text><text x="23.046" y="1.67" class="h">you</text><text x="27.054" y="1.67" class="h">can</text><text x="31.062" y="1.67" class="h">run</text><text x="35.07" y="1.67" class="h">several</text><text x="43.086" y="1.67" class="h">commands:</text></symbol><symbol id="18"><text x="2.004" y="1.67" class="k">yarn</text><text x="7.014" y="1.67" class="k">start</text></symbol><symbol id="19"><text x="4.008" y="1.67" class="h">Starts</text><text x="11.022" y="1.67" class="h">the</text><text x="15.03" y="1.67" class="h">development</text><text x="27.054" y="1.67" class="h">server.</text></symbol><symbol id="20"><text x="2.004" y="1.67" class="k">yarn</text><text x="7.014" y="1.67" class="k">build</text></symbol><symbol id="21"><text x="4.008" y="1.67" class="h">Bundles</text><text x="12.024" y="1.67" class="h">the</text><text x="16.032" y="1.67" class="h">app</text><text x="20.04" y="1.67" class="h">into</text><text x="25.05" y="1.67" class="h">static</text><text x="32.064" y="1.67" class="h">files</text><text x="38.076" y="1.67" class="h">for</text><text x="42.084" y="1.67" class="h">production.</text></symbol><symbol id="22"><text x="2.004" y="1.67" class="k">yarn</text><text x="7.014" y="1.67" class="k">test</text></symbol><symbol id="23"><text x="4.008" y="1.67" class="h">Starts</text><text x="11.022" y="1.67" class="h">the</text><text x="15.03" y="1.67" class="h">test</text><text x="20.04" y="1.67" class="h">runner.</text></symbol><symbol id="24"><text x="2.004" y="1.67" class="k">yarn</text><text x="7.014" y="1.67" class="k">eject</text></symbol><symbol id="25"><text x="4.008" y="1.67" class="h">Removes</text><text x="12.024" y="1.67" class="h">this</text><text x="17.034" y="1.67" class="h">tool</text><text x="22.044" y="1.67" class="h">and</text><text x="26.052" y="1.67" class="h">copies</text><text x="33.066" y="1.67" class="h">build</text><text x="39.078" y="1.67" class="h">dependencies,</text><text x="53.106" y="1.67" class="h">configuration</text><text x="67.134" y="1.67" class="h">files</text></symbol><symbol id="26"><text x="4.008" y="1.67" class="h">and</text><text x="8.016" y="1.67" class="h">scripts</text><text x="16.032" y="1.67" class="h">into</text><text x="21.042" y="1.67" class="h">the</text><text x="25.05" y="1.67" class="h">app</text><text x="29.058" y="1.67" class="h">directory.</text><text x="40.08" y="1.67" class="h">If</text><text x="43.086" y="1.67" class="h">you</text><text x="47.094" y="1.67" class="h">do</text><text x="50.1" y="1.67" class="h">this,</text><text x="56.112" y="1.67" class="h">you</text><text x="60.12" y="1.67" class="h">can’t</text><text x="66.132" y="1.67" class="h">go</text><text x="69.138" y="1.67" class="h">back!</text></symbol><symbol id="27"><text y="1.67" class="h">We</text><text x="3.006" y="1.67" class="h">suggest</text><text x="11.022" y="1.67" class="h">that</text><text x="16.032" y="1.67" class="h">you</text><text x="20.04" y="1.67" class="h">begin</text><text x="26.052" y="1.67" class="h">by</text><text x="29.058" y="1.67" class="h">typing:</text></symbol><symbol id="28"><text x="2.004" y="1.67" class="k">cd</text><text x="5.01" y="1.67" class="h">my-app</text></symbol><symbol id="29"><text y="1.67" class="h">Happy</text><text x="6.012" y="1.67" class="h">hacking!</text></symbol><symbol id="30"><text y="1.67" class="f">~</text><text x="2.004" y="1.67" fill="#dbab79">14s</text></symbol><symbol id="31"><text y="1.67" class="g">λ</text><text x="2.004" y="1.67" class="j">cd</text><text x="5.01" y="1.67" class="m">my-app/</text></symbol><symbol id="32"><text y="1.67" class="g">λ</text><text x="2.004" y="1.67" class="j">cd</text><text x="5.01" y="1.67" class="n">my-app/</text></symbol><symbol id="33"><text y="1.67" class="f">~/my-app</text></symbol><symbol id="34"><text y="1.67" class="g">λ</text><text x="2.004" y="1.67" class="j">yarn</text><text x="7.014" y="1.67" class="m">start</text></symbol><symbol id="35"><text y="1.67" class="g">λ</text><text x="2.004" y="1.67" class="j">yarn</text><text x="7.014" y="1.67" class="k">start</text></symbol><symbol id="36"><text y="1.67" class="j">yarn</text><text x="5.01" y="1.67" class="j">run</text><text x="9.018" y="1.67" class="j">v1.2.1</text></symbol><symbol id="37"><text y="1.67" class="g">Compiled</text><text x="9.018" y="1.67" class="g">successfully!</text></symbol><symbol id="38"><text y="1.67" class="h">You</text><text x="4.008" y="1.67" class="h">can</text><text x="8.016" y="1.67" class="h">now</text><text x="12.024" y="1.67" class="h">view</text><text x="17.034" y="1.67" class="j">my-app</text><text x="24.048" y="1.67" class="h">in</text><text x="27.054" y="1.67" class="h">the</text><text x="31.062" y="1.67" class="h">browser.</text></symbol><symbol id="39"><text x="2.004" y="1.67" class="j">Local:</text><text x="20.04" y="1.67" class="h">http://localhost:</text><text x="37.074" y="1.67" class="j">3000</text><text x="41.082" y="1.67" class="h">/</text></symbol><symbol id="40"><text x="2.004" y="1.67" class="j">On</text><text x="5.01" y="1.67" class="j">Your</text><text x="10.02" y="1.67" class="j">Network:</text><text x="20.04" y="1.67" class="h">http://192.168.178.58:</text><text x="42.084" y="1.67" class="j">3000</text><text x="46.092" y="1.67" class="h">/</text></symbol><symbol id="41"><text y="1.67" class="h">Note</text><text x="5.01" y="1.67" class="h">that</text><text x="10.02" y="1.67" class="h">the</text><text x="14.028" y="1.67" class="h">development</text><text x="26.052" y="1.67" class="h">build</text><text x="32.064" y="1.67" class="h">is</text><text x="35.07" y="1.67" class="h">not</text><text x="39.078" y="1.67" class="h">optimized.</text></symbol><symbol id="42"><text y="1.67" class="h">To</text><text x="3.006" y="1.67" class="h">create</text><text x="10.02" y="1.67" class="h">a</text><text x="12.024" y="1.67" class="h">production</text><text x="23.046" y="1.67" class="h">build,</text><text x="30.06" y="1.67" class="h">use</text><text x="34.068" y="1.67" class="k">yarn</text><text x="39.078" y="1.67" class="k">build</text><text x="44.088" y="1.67" class="h">.</text></symbol><symbol id="a"><path fill="transparent" d="M0 0h80v25H0z"/></symbol><symbol id="b"><path fill="#6f7683" d="M0 0h1.102v2.171H0z"/></symbol></defs><path class="a" d="M0 0h80v54.275H0z"/><g style="animation-duration:37.602405000000005s;animation-iteration-count:infinite;animation-name:q;animation-timing-function:steps(1,end)"><svg width="9120"><svg><use xlink:href="#a"/><use xlink:href="#b" x="-.004"/></svg><svg x="80"><use xlink:href="#a"/><use xlink:href="#b" x="-.004"/></svg><svg x="160"><use xlink:href="#a"/><use xlink:href="#b" x="-.004"/></svg><svg x="240"><use xlink:href="#a"/><use xlink:href="#b" x="-.004"/></svg><svg x="320"><use xlink:href="#a"/><use xlink:href="#b" x="-.004"/></svg><svg x="400"><use xlink:href="#a"/><use xlink:href="#b" x="1.996" y="2.146"/><use xlink:href="#1"/><use xlink:href="#2" y="2.171"/></svg><svg x="480"><use xlink:href="#a"/><use xlink:href="#b" x="2.996" y="2.146"/><use xlink:href="#1"/><use xlink:href="#3" y="2.171"/></svg><svg x="560"><use xlink:href="#a"/><use xlink:href="#b" x="2.996" y="2.146"/><use xlink:href="#1"/><use xlink:href="#4" y="2.171"/></svg><svg x="640"><use xlink:href="#a"/><use xlink:href="#b" x="3.996" y="2.146"/><use xlink:href="#1"/><text y="3.841" class="g">λ</text><text x="2.004" y="3.841" class="i">cr</text></svg><svg x="720"><use xlink:href="#a"/><use xlink:href="#b" x="3.996" y="2.146"/><use xlink:href="#1"/><text y="3.841" class="g">λ</text><text x="2.004" y="3.841" class="i">cr</text><text x="4.008" y="3.841" class="m">eate-react-app</text><text x="19.038" y="3.841" class="m">my-app</text></svg><svg x="800"><use xlink:href="#a"/><use xlink:href="#b" x="4.996" y="2.146"/><use xlink:href="#1"/><text y="3.841" class="g">λ</text><text x="2.004" y="3.841" class="i">cre</text><text x="5.01" y="3.841" class="m">ate-react-app</text><text x="19.038" y="3.841" class="m">my-app</text></svg><svg x="880"><use xlink:href="#a"/><use xlink:href="#b" x="5.996" y="2.146"/><use xlink:href="#1"/><text y="3.841" class="g">λ</text><text x="2.004" y="3.841" class="i">crea</text><text x="6.012" y="3.841" class="m">te-react-app</text><text x="19.038" y="3.841" class="m">my-app</text></svg><svg x="960"><use xlink:href="#a"/><use xlink:href="#b" x="6.996" y="2.146"/><use xlink:href="#1"/><text y="3.841" class="g">λ</text><text x="2.004" y="3.841" class="i">creat</text><text x="7.014" y="3.841" class="m">e-react-app</text><text x="19.038" y="3.841" class="m">my-app</text></svg><svg x="1040"><use xlink:href="#a"/><use xlink:href="#b" x="7.996" y="2.146"/><use xlink:href="#1"/><text y="3.841" class="g">λ</text><text x="2.004" y="3.841" class="i">create</text><text x="8.016" y="3.841" class="m">-react-app</text><text x="19.038" y="3.841" class="m">my-app</text></svg><svg x="1120"><use xlink:href="#a"/><use xlink:href="#b" x="24.996" y="2.146"/><use xlink:href="#1"/><text y="3.841" class="g">λ</text><text x="2.004" y="3.841" class="i">create-react-app</text><text x="19.038" y="3.841" class="i">my-app</text></svg><svg x="1200"><use xlink:href="#a"/><use xlink:href="#b" x="24.996" y="2.146"/><use xlink:href="#1"/><use xlink:href="#5" y="2.171"/></svg><svg x="1280"><use xlink:href="#a"/><use xlink:href="#b" x="-.004" y="4.317"/><use xlink:href="#1"/><use xlink:href="#5" y="2.171"/></svg><svg x="1360"><use xlink:href="#a"/><use xlink:href="#b" x="-.004" y="4.317"/><use xlink:href="#1"/><use xlink:href="#5" y="2.171"/></svg><svg x="1440"><use xlink:href="#a"/><use xlink:href="#b" x="-.004" y="4.317"/><use xlink:href="#1"/><use xlink:href="#5" y="2.171"/></svg><svg x="1520"><use xlink:href="#a"/><use xlink:href="#b" x="-.004" y="6.488"/><use xlink:href="#1"/><use xlink:href="#5" y="2.171"/></svg><svg x="1600"><use xlink:href="#a"/><use xlink:href="#b" x="-.004" y="8.659"/><use xlink:href="#1"/><use xlink:href="#5" y="2.171"/><use xlink:href="#6" y="6.513"/></svg><svg x="1680"><use xlink:href="#a"/><use xlink:href="#b" x="-.004" y="10.83"/><use xlink:href="#1"/><use xlink:href="#5" y="2.171"/><use xlink:href="#6" y="6.513"/></svg><svg x="1760"><use xlink:href="#a"/><use xlink:href="#b" x="-.004" y="13.001"/><use xlink:href="#1"/><use xlink:href="#5" y="2.171"/><use xlink:href="#6" y="6.513"/><use xlink:href="#7" y="10.855"/></svg><svg x="1840"><use xlink:href="#a"/><use xlink:href="#b" x="-.004" y="17.343"/><use xlink:href="#1"/><use xlink:href="#5" y="2.171"/><use xlink:href="#6" y="6.513"/><use xlink:href="#7" y="10.855"/><use xlink:href="#8" y="13.026"/></svg><svg x="1920"><use xlink:href="#a"/><use xlink:href="#b" x="-.004" y="17.343"/><use xlink:href="#1"/><use xlink:href="#5" y="2.171"/><use xlink:href="#6" y="6.513"/><use xlink:href="#7" y="10.855"/><use xlink:href="#8" y="13.026"/></svg><svg x="2000"><use xlink:href="#a"/><use xlink:href="#b" x="-.004" y="17.343"/><use xlink:href="#1"/><use xlink:href="#5" y="2.171"/><use xlink:href="#6" y="6.513"/><use xlink:href="#7" y="10.855"/><use xlink:href="#8" y="13.026"/></svg><svg x="2080"><use xlink:href="#a"/><use xlink:href="#b" x="-.004" y="19.514"/><use xlink:href="#1"/><use xlink:href="#5" y="2.171"/><use xlink:href="#6" y="6.513"/><use xlink:href="#7" y="10.855"/><use xlink:href="#8" y="13.026"/><use xlink:href="#9" y="17.368"/></svg><svg x="2160"><use xlink:href="#a"/><use xlink:href="#b" x="-.004" y="19.514"/><use xlink:href="#1"/><use xlink:href="#5" y="2.171"/><use xlink:href="#6" y="6.513"/><use xlink:href="#7" y="10.855"/><use xlink:href="#8" y="13.026"/><use xlink:href="#9" y="17.368"/></svg><svg x="2240"><use xlink:href="#a"/><use xlink:href="#b" x="-.004" y="21.685"/><use xlink:href="#1"/><use xlink:href="#5" y="2.171"/><use xlink:href="#6" y="6.513"/><use xlink:href="#7" y="10.855"/><use xlink:href="#8" y="13.026"/><use xlink:href="#9" y="17.368"/><use xlink:href="#10" y="19.539"/></svg><svg x="2320"><use xlink:href="#a"/><use xlink:href="#b" x="-.004" y="23.856"/><use xlink:href="#1"/><use xlink:href="#5" y="2.171"/><use xlink:href="#6" y="6.513"/><use xlink:href="#7" y="10.855"/><use xlink:href="#8" y="13.026"/><use xlink:href="#9" y="17.368"/><use xlink:href="#10" y="19.539"/><use xlink:href="#11" y="21.71"/></svg><svg x="2400"><use xlink:href="#a"/><use xlink:href="#b" x="-.004" y="26.027"/><use xlink:href="#1"/><use xlink:href="#5" y="2.171"/><use xlink:href="#6" y="6.513"/><use xlink:href="#7" y="10.855"/><use xlink:href="#8" y="13.026"/><use xlink:href="#9" y="17.368"/><use xlink:href="#10" y="19.539"/><use xlink:href="#11" y="21.71"/><use xlink:href="#12" y="23.881"/></svg><svg x="2480"><use xlink:href="#a"/><use xlink:href="#b" x="-.004" y="28.198"/><use xlink:href="#1"/><use xlink:href="#5" y="2.171"/><use xlink:href="#6" y="6.513"/><use xlink:href="#7" y="10.855"/><use xlink:href="#8" y="13.026"/><use xlink:href="#9" y="17.368"/><use xlink:href="#10" y="19.539"/><use xlink:href="#11" y="21.71"/><use xlink:href="#12" y="23.881"/><use xlink:href="#13" y="26.052"/></svg><svg x="2560"><use xlink:href="#a"/><use xlink:href="#b" x="-.004" y="30.369"/><use xlink:href="#1"/><use xlink:href="#5" y="2.171"/><use xlink:href="#6" y="6.513"/><use xlink:href="#7" y="10.855"/><use xlink:href="#8" y="13.026"/><use xlink:href="#9" y="17.368"/><use xlink:href="#10" y="19.539"/><use xlink:href="#11" y="21.71"/><use xlink:href="#12" y="23.881"/><use xlink:href="#13" y="26.052"/><use xlink:href="#14" y="28.223"/></svg><svg x="2640"><use xlink:href="#a"/><use xlink:href="#b" x="-.004" y="30.369"/><use xlink:href="#1"/><use xlink:href="#5" y="2.171"/><use xlink:href="#6" y="6.513"/><use xlink:href="#7" y="10.855"/><use xlink:href="#8" y="13.026"/><use xlink:href="#9" y="17.368"/><use xlink:href="#10" y="19.539"/><use xlink:href="#11" y="21.71"/><use xlink:href="#12" y="23.881"/><use xlink:href="#13" y="26.052"/><use xlink:href="#14" y="28.223"/></svg><svg x="2720"><use xlink:href="#a"/><use xlink:href="#b" x="-.004" y="32.54"/><use xlink:href="#1"/><use xlink:href="#5" y="2.171"/><use xlink:href="#6" y="6.513"/><use xlink:href="#7" y="10.855"/><use xlink:href="#8" y="13.026"/><use xlink:href="#9" y="17.368"/><use xlink:href="#10" y="19.539"/><use xlink:href="#11" y="21.71"/><use xlink:href="#12" y="23.881"/><use xlink:href="#13" y="26.052"/><use xlink:href="#14" y="28.223"/></svg><svg x="2800"><use xlink:href="#a"/><use xlink:href="#b" x="-.004" y="34.711"/><use xlink:href="#1"/><use xlink:href="#5" y="2.171"/><use xlink:href="#6" y="6.513"/><use xlink:href="#7" y="10.855"/><use xlink:href="#8" y="13.026"/><use xlink:href="#9" y="17.368"/><use xlink:href="#10" y="19.539"/><use xlink:href="#11" y="21.71"/><use xlink:href="#12" y="23.881"/><use xlink:href="#13" y="26.052"/><use xlink:href="#14" y="28.223"/><use xlink:href="#15" y="32.565"/></svg><svg x="2880"><use xlink:href="#a"/><use xlink:href="#b" x="-.004" y="36.882"/><use xlink:href="#1"/><use xlink:href="#5" y="2.171"/><use xlink:href="#6" y="6.513"/><use xlink:href="#7" y="10.855"/><use xlink:href="#8" y="13.026"/><use xlink:href="#9" y="17.368"/><use xlink:href="#10" y="19.539"/><use xlink:href="#11" y="21.71"/><use xlink:href="#12" y="23.881"/><use xlink:href="#13" y="26.052"/><use xlink:href="#14" y="28.223"/><use xlink:href="#15" y="32.565"/></svg><svg x="2960"><use xlink:href="#a"/><use xlink:href="#b" x="-.004" y="43.395"/><use xlink:href="#1"/><use xlink:href="#5" y="2.171"/><use xlink:href="#6" y="6.513"/><use xlink:href="#7" y="10.855"/><use xlink:href="#8" y="13.026"/><use xlink:href="#9" y="17.368"/><use xlink:href="#10" y="19.539"/><use xlink:href="#11" y="21.71"/><use xlink:href="#12" y="23.881"/><use xlink:href="#13" y="26.052"/><use xlink:href="#14" y="28.223"/><use xlink:href="#15" y="32.565"/><use xlink:href="#16" y="36.907"/><use xlink:href="#17" y="39.078"/></svg><svg x="3040"><use xlink:href="#a"/><use xlink:href="#b" x="-.004" y="45.566"/><use xlink:href="#1"/><use xlink:href="#5" y="2.171"/><use xlink:href="#6" y="6.513"/><use xlink:href="#7" y="10.855"/><use xlink:href="#8" y="13.026"/><use xlink:href="#9" y="17.368"/><use xlink:href="#10" y="19.539"/><use xlink:href="#11" y="21.71"/><use xlink:href="#12" y="23.881"/><use xlink:href="#13" y="26.052"/><use xlink:href="#14" y="28.223"/><use xlink:href="#15" y="32.565"/><use xlink:href="#16" y="36.907"/><use xlink:href="#17" y="39.078"/><use xlink:href="#18" y="43.42"/></svg><svg x="3120"><use xlink:href="#a"/><use xlink:href="#b" x="-.004" y="49.908"/><use xlink:href="#1"/><use xlink:href="#5" y="2.171"/><use xlink:href="#6" y="6.513"/><use xlink:href="#7" y="10.855"/><use xlink:href="#8" y="13.026"/><use xlink:href="#9" y="17.368"/><use xlink:href="#10" y="19.539"/><use xlink:href="#11" y="21.71"/><use xlink:href="#12" y="23.881"/><use xlink:href="#13" y="26.052"/><use xlink:href="#14" y="28.223"/><use xlink:href="#15" y="32.565"/><use xlink:href="#16" y="36.907"/><use xlink:href="#17" y="39.078"/><use xlink:href="#18" y="43.42"/><use xlink:href="#19" y="45.591"/></svg><svg x="3200"><use xlink:href="#a"/><use xlink:href="#b" x="-.004" y="52.079"/><use xlink:href="#5"/><use xlink:href="#6" y="4.342"/><use xlink:href="#7" y="8.684"/><use xlink:href="#8" y="10.855"/><use xlink:href="#9" y="15.197"/><use xlink:href="#10" y="17.368"/><use xlink:href="#11" y="19.539"/><use xlink:href="#12" y="21.71"/><use xlink:href="#13" y="23.881"/><use xlink:href="#14" y="26.052"/><use xlink:href="#15" y="30.394"/><use xlink:href="#16" y="34.736"/><use xlink:href="#17" y="36.907"/><use xlink:href="#18" y="41.249"/><use xlink:href="#19" y="43.42"/><use xlink:href="#20" y="47.762"/><use xlink:href="#21" y="49.933"/></svg><svg x="3280"><use xlink:href="#a"/><use xlink:href="#b" x="-.004" y="52.079"/><use xlink:href="#6" y="2.171"/><use xlink:href="#7" y="6.513"/><use xlink:href="#8" y="8.684"/><use xlink:href="#9" y="13.026"/><use xlink:href="#10" y="15.197"/><use xlink:href="#11" y="17.368"/><use xlink:href="#12" y="19.539"/><use xlink:href="#13" y="21.71"/><use xlink:href="#14" y="23.881"/><use xlink:href="#15" y="28.223"/><use xlink:href="#16" y="32.565"/><use xlink:href="#17" y="34.736"/><use xlink:href="#18" y="39.078"/><use xlink:href="#19" y="41.249"/><use xlink:href="#20" y="45.591"/><use xlink:href="#21" y="47.762"/></svg><svg x="3360"><use xlink:href="#a"/><use xlink:href="#b" x="-.004" y="52.079"/><use xlink:href="#6"/><use xlink:href="#7" y="4.342"/><use xlink:href="#8" y="6.513"/><use xlink:href="#9" y="10.855"/><use xlink:href="#10" y="13.026"/><use xlink:href="#11" y="15.197"/><use xlink:href="#12" y="17.368"/><use xlink:href="#13" y="19.539"/><use xlink:href="#14" y="21.71"/><use xlink:href="#15" y="26.052"/><use xlink:href="#16" y="30.394"/><use xlink:href="#17" y="32.565"/><use xlink:href="#18" y="36.907"/><use xlink:href="#19" y="39.078"/><use xlink:href="#20" y="43.42"/><use xlink:href="#21" y="45.591"/><use xlink:href="#22" y="49.933"/></svg><svg x="3440"><use xlink:href="#a"/><use xlink:href="#b" x="-.004" y="52.079"/><use xlink:href="#7" y="2.171"/><use xlink:href="#8" y="4.342"/><use xlink:href="#9" y="8.684"/><use xlink:href="#10" y="10.855"/><use xlink:href="#11" y="13.026"/><use xlink:href="#12" y="15.197"/><use xlink:href="#13" y="17.368"/><use xlink:href="#14" y="19.539"/><use xlink:href="#15" y="23.881"/><use xlink:href="#16" y="28.223"/><use xlink:href="#17" y="30.394"/><use xlink:href="#18" y="34.736"/><use xlink:href="#19" y="36.907"/><use xlink:href="#20" y="41.249"/><use xlink:href="#21" y="43.42"/><use xlink:href="#22" y="47.762"/><use xlink:href="#23" y="49.933"/></svg><svg x="3520"><use xlink:href="#a"/><use xlink:href="#b" x="-.004" y="52.079"/><use xlink:href="#7"/><use xlink:href="#8" y="2.171"/><use xlink:href="#9" y="6.513"/><use xlink:href="#10" y="8.684"/><use xlink:href="#11" y="10.855"/><use xlink:href="#12" y="13.026"/><use xlink:href="#13" y="15.197"/><use xlink:href="#14" y="17.368"/><use xlink:href="#15" y="21.71"/><use xlink:href="#16" y="26.052"/><use xlink:href="#17" y="28.223"/><use xlink:href="#18" y="32.565"/><use xlink:href="#19" y="34.736"/><use xlink:href="#20" y="39.078"/><use xlink:href="#21" y="41.249"/><use xlink:href="#22" y="45.591"/><use xlink:href="#23" y="47.762"/></svg><svg x="3600"><use xlink:href="#a"/><use xlink:href="#b" x="-.004" y="52.079"/><use xlink:href="#9" y="2.171"/><use xlink:href="#10" y="4.342"/><use xlink:href="#11" y="6.513"/><use xlink:href="#12" y="8.684"/><use xlink:href="#13" y="10.855"/><use xlink:href="#14" y="13.026"/><use xlink:href="#15" y="17.368"/><use xlink:href="#16" y="21.71"/><use xlink:href="#17" y="23.881"/><use xlink:href="#18" y="28.223"/><use xlink:href="#19" y="30.394"/><use xlink:href="#20" y="34.736"/><use xlink:href="#21" y="36.907"/><use xlink:href="#22" y="41.249"/><use xlink:href="#23" y="43.42"/><use xlink:href="#24" y="47.762"/><use xlink:href="#25" y="49.933"/></svg><svg x="3680"><use xlink:href="#a"/><use xlink:href="#b" x="-.004" y="52.079"/><use xlink:href="#10"/><use xlink:href="#11" y="2.171"/><use xlink:href="#12" y="4.342"/><use xlink:href="#13" y="6.513"/><use xlink:href="#14" y="8.684"/><use xlink:href="#15" y="13.026"/><use xlink:href="#16" y="17.368"/><use xlink:href="#17" y="19.539"/><use xlink:href="#18" y="23.881"/><use xlink:href="#19" y="26.052"/><use xlink:href="#20" y="30.394"/><use xlink:href="#21" y="32.565"/><use xlink:href="#22" y="36.907"/><use xlink:href="#23" y="39.078"/><use xlink:href="#24" y="43.42"/><use xlink:href="#25" y="45.591"/><use xlink:href="#26" y="47.762"/></svg><svg x="3760"><use xlink:href="#a"/><use xlink:href="#b" x="-.004" y="52.079"/><use xlink:href="#11"/><use xlink:href="#12" y="2.171"/><use xlink:href="#13" y="4.342"/><use xlink:href="#14" y="6.513"/><use xlink:href="#15" y="10.855"/><use xlink:href="#16" y="15.197"/><use xlink:href="#17" y="17.368"/><use xlink:href="#18" y="21.71"/><use xlink:href="#19" y="23.881"/><use xlink:href="#20" y="28.223"/><use xlink:href="#21" y="30.394"/><use xlink:href="#22" y="34.736"/><use xlink:href="#23" y="36.907"/><use xlink:href="#24" y="41.249"/><use xlink:href="#25" y="43.42"/><use xlink:href="#26" y="45.591"/><use xlink:href="#27" y="49.933"/></svg><svg x="3840"><use xlink:href="#a"/><use xlink:href="#b" x="-.004" y="52.079"/><use xlink:href="#12"/><use xlink:href="#13" y="2.171"/><use xlink:href="#14" y="4.342"/><use xlink:href="#15" y="8.684"/><use xlink:href="#16" y="13.026"/><use xlink:href="#17" y="15.197"/><use xlink:href="#18" y="19.539"/><use xlink:href="#19" y="21.71"/><use xlink:href="#20" y="26.052"/><use xlink:href="#21" y="28.223"/><use xlink:href="#22" y="32.565"/><use xlink:href="#23" y="34.736"/><use xlink:href="#24" y="39.078"/><use xlink:href="#25" y="41.249"/><use xlink:href="#26" y="43.42"/><use xlink:href="#27" y="47.762"/></svg><svg x="3920"><use xlink:href="#a"/><use xlink:href="#b" x="-.004" y="52.079"/><use xlink:href="#13"/><use xlink:href="#14" y="2.171"/><use xlink:href="#15" y="6.513"/><use xlink:href="#16" y="10.855"/><use xlink:href="#17" y="13.026"/><use xlink:href="#18" y="17.368"/><use xlink:href="#19" y="19.539"/><use xlink:href="#20" y="23.881"/><use xlink:href="#21" y="26.052"/><use xlink:href="#22" y="30.394"/><use xlink:href="#23" y="32.565"/><use xlink:href="#24" y="36.907"/><use xlink:href="#25" y="39.078"/><use xlink:href="#26" y="41.249"/><use xlink:href="#27" y="45.591"/><use xlink:href="#28" y="49.933"/></svg><svg x="4000"><use xlink:href="#a"/><use xlink:href="#b" x="-.004" y="52.079"/><use xlink:href="#14"/><use xlink:href="#15" y="4.342"/><use xlink:href="#16" y="8.684"/><use xlink:href="#17" y="10.855"/><use xlink:href="#18" y="15.197"/><use xlink:href="#19" y="17.368"/><use xlink:href="#20" y="21.71"/><use xlink:href="#21" y="23.881"/><use xlink:href="#22" y="28.223"/><use xlink:href="#23" y="30.394"/><use xlink:href="#24" y="34.736"/><use xlink:href="#25" y="36.907"/><use xlink:href="#26" y="39.078"/><use xlink:href="#27" y="43.42"/><use xlink:href="#28" y="47.762"/><use xlink:href="#18" y="49.933"/></svg><svg x="4080"><use xlink:href="#a"/><use xlink:href="#b" x="-.004" y="52.079"/><use xlink:href="#15" y="2.171"/><use xlink:href="#16" y="6.513"/><use xlink:href="#17" y="8.684"/><use xlink:href="#18" y="13.026"/><use xlink:href="#19" y="15.197"/><use xlink:href="#20" y="19.539"/><use xlink:href="#21" y="21.71"/><use xlink:href="#22" y="26.052"/><use xlink:href="#23" y="28.223"/><use xlink:href="#24" y="32.565"/><use xlink:href="#25" y="34.736"/><use xlink:href="#26" y="36.907"/><use xlink:href="#27" y="41.249"/><use xlink:href="#28" y="45.591"/><use xlink:href="#18" y="47.762"/></svg><svg x="4160"><use xlink:href="#a"/><use xlink:href="#b" x="-.004" y="52.079"/><use xlink:href="#15"/><use xlink:href="#16" y="4.342"/><use xlink:href="#17" y="6.513"/><use xlink:href="#18" y="10.855"/><use xlink:href="#19" y="13.026"/><use xlink:href="#20" y="17.368"/><use xlink:href="#21" y="19.539"/><use xlink:href="#22" y="23.881"/><use xlink:href="#23" y="26.052"/><use xlink:href="#24" y="30.394"/><use xlink:href="#25" y="32.565"/><use xlink:href="#26" y="34.736"/><use xlink:href="#27" y="39.078"/><use xlink:href="#28" y="43.42"/><use xlink:href="#18" y="45.591"/><use xlink:href="#29" y="49.933"/></svg><svg x="4240"><use xlink:href="#a"/><use xlink:href="#b" x="-.004" y="52.079"/><use xlink:href="#15"/><use xlink:href="#16" y="4.342"/><use xlink:href="#17" y="6.513"/><use xlink:href="#18" y="10.855"/><use xlink:href="#19" y="13.026"/><use xlink:href="#20" y="17.368"/><use xlink:href="#21" y="19.539"/><use xlink:href="#22" y="23.881"/><use xlink:href="#23" y="26.052"/><use xlink:href="#24" y="30.394"/><use xlink:href="#25" y="32.565"/><use xlink:href="#26" y="34.736"/><use xlink:href="#27" y="39.078"/><use xlink:href="#28" y="43.42"/><use xlink:href="#18" y="45.591"/><use xlink:href="#29" y="49.933"/></svg><svg x="4320"><use xlink:href="#a"/><use xlink:href="#b" x="-.004" y="52.079"/><use xlink:href="#15"/><use xlink:href="#16" y="4.342"/><use xlink:href="#17" y="6.513"/><use xlink:href="#18" y="10.855"/><use xlink:href="#19" y="13.026"/><use xlink:href="#20" y="17.368"/><use xlink:href="#21" y="19.539"/><use xlink:href="#22" y="23.881"/><use xlink:href="#23" y="26.052"/><use xlink:href="#24" y="30.394"/><use xlink:href="#25" y="32.565"/><use xlink:href="#26" y="34.736"/><use xlink:href="#27" y="39.078"/><use xlink:href="#28" y="43.42"/><use xlink:href="#18" y="45.591"/><use xlink:href="#29" y="49.933"/></svg><svg x="4400"><use xlink:href="#a"/><use xlink:href="#b" x="1.996" y="52.079"/><use xlink:href="#16"/><use xlink:href="#17" y="2.171"/><use xlink:href="#18" y="6.513"/><use xlink:href="#19" y="8.684"/><use xlink:href="#20" y="13.026"/><use xlink:href="#21" y="15.197"/><use xlink:href="#22" y="19.539"/><use xlink:href="#23" y="21.71"/><use xlink:href="#24" y="26.052"/><use xlink:href="#25" y="28.223"/><use xlink:href="#26" y="30.394"/><use xlink:href="#27" y="34.736"/><use xlink:href="#28" y="39.078"/><use xlink:href="#18" y="41.249"/><use xlink:href="#29" y="45.591"/><use xlink:href="#30" y="49.933"/><use xlink:href="#2" y="52.104"/></svg><svg x="4480"><use xlink:href="#a"/><use xlink:href="#b" x="2.996" y="52.079"/><use xlink:href="#16"/><use xlink:href="#17" y="2.171"/><use xlink:href="#18" y="6.513"/><use xlink:href="#19" y="8.684"/><use xlink:href="#20" y="13.026"/><use xlink:href="#21" y="15.197"/><use xlink:href="#22" y="19.539"/><use xlink:href="#23" y="21.71"/><use xlink:href="#24" y="26.052"/><use xlink:href="#25" y="28.223"/><use xlink:href="#26" y="30.394"/><use xlink:href="#27" y="34.736"/><use xlink:href="#28" y="39.078"/><use xlink:href="#18" y="41.249"/><use xlink:href="#29" y="45.591"/><use xlink:href="#30" y="49.933"/><use xlink:href="#3" y="52.104"/></svg><svg x="4560"><use xlink:href="#a"/><use xlink:href="#b" x="2.996" y="52.079"/><use xlink:href="#16"/><use xlink:href="#17" y="2.171"/><use xlink:href="#18" y="6.513"/><use xlink:href="#19" y="8.684"/><use xlink:href="#20" y="13.026"/><use xlink:href="#21" y="15.197"/><use xlink:href="#22" y="19.539"/><use xlink:href="#23" y="21.71"/><use xlink:href="#24" y="26.052"/><use xlink:href="#25" y="28.223"/><use xlink:href="#26" y="30.394"/><use xlink:href="#27" y="34.736"/><use xlink:href="#28" y="39.078"/><use xlink:href="#18" y="41.249"/><use xlink:href="#29" y="45.591"/><use xlink:href="#30" y="49.933"/><use xlink:href="#4" y="52.104"/></svg><svg x="4640"><use xlink:href="#a"/><use xlink:href="#b" x="2.996" y="52.079"/><use xlink:href="#16"/><use xlink:href="#17" y="2.171"/><use xlink:href="#18" y="6.513"/><use xlink:href="#19" y="8.684"/><use xlink:href="#20" y="13.026"/><use xlink:href="#21" y="15.197"/><use xlink:href="#22" y="19.539"/><use xlink:href="#23" y="21.71"/><use xlink:href="#24" y="26.052"/><use xlink:href="#25" y="28.223"/><use xlink:href="#26" y="30.394"/><use xlink:href="#27" y="34.736"/><use xlink:href="#28" y="39.078"/><use xlink:href="#18" y="41.249"/><use xlink:href="#29" y="45.591"/><use xlink:href="#30" y="49.933"/><text y="53.774" class="g">λ</text><text x="2.004" y="53.774" class="i">c</text><text x="3.006" y="53.774" class="m">reate-react-app</text><text x="19.038" y="53.774" class="m">my-app</text></svg><svg x="4720"><use xlink:href="#a"/><use xlink:href="#b" x="3.996" y="52.079"/><use xlink:href="#16"/><use xlink:href="#17" y="2.171"/><use xlink:href="#18" y="6.513"/><use xlink:href="#19" y="8.684"/><use xlink:href="#20" y="13.026"/><use xlink:href="#21" y="15.197"/><use xlink:href="#22" y="19.539"/><use xlink:href="#23" y="21.71"/><use xlink:href="#24" y="26.052"/><use xlink:href="#25" y="28.223"/><use xlink:href="#26" y="30.394"/><use xlink:href="#27" y="34.736"/><use xlink:href="#28" y="39.078"/><use xlink:href="#18" y="41.249"/><use xlink:href="#29" y="45.591"/><use xlink:href="#30" y="49.933"/><text y="53.774" class="g">λ</text><text x="2.004" y="53.774" class="i">cd</text></svg><svg x="4800"><use xlink:href="#a"/><use xlink:href="#b" x="3.996" y="52.079"/><use xlink:href="#16"/><use xlink:href="#17" y="2.171"/><use xlink:href="#18" y="6.513"/><use xlink:href="#19" y="8.684"/><use xlink:href="#20" y="13.026"/><use xlink:href="#21" y="15.197"/><use xlink:href="#22" y="19.539"/><use xlink:href="#23" y="21.71"/><use xlink:href="#24" y="26.052"/><use xlink:href="#25" y="28.223"/><use xlink:href="#26" y="30.394"/><use xlink:href="#27" y="34.736"/><use xlink:href="#28" y="39.078"/><use xlink:href="#18" y="41.249"/><use xlink:href="#29" y="45.591"/><use xlink:href="#30" y="49.933"/><text y="53.774" class="g">λ</text><text x="2.004" y="53.774" class="j">cd</text></svg><svg x="4880"><use xlink:href="#a"/><use xlink:href="#b" x="3.996" y="52.079"/><use xlink:href="#16"/><use xlink:href="#17" y="2.171"/><use xlink:href="#18" y="6.513"/><use xlink:href="#19" y="8.684"/><use xlink:href="#20" y="13.026"/><use xlink:href="#21" y="15.197"/><use xlink:href="#22" y="19.539"/><use xlink:href="#23" y="21.71"/><use xlink:href="#24" y="26.052"/><use xlink:href="#25" y="28.223"/><use xlink:href="#26" y="30.394"/><use xlink:href="#27" y="34.736"/><use xlink:href="#28" y="39.078"/><use xlink:href="#18" y="41.249"/><use xlink:href="#29" y="45.591"/><use xlink:href="#30" y="49.933"/><use xlink:href="#31" y="52.104"/></svg><svg x="4960"><use xlink:href="#a"/><use xlink:href="#b" x="4.996" y="52.079"/><use xlink:href="#16"/><use xlink:href="#17" y="2.171"/><use xlink:href="#18" y="6.513"/><use xlink:href="#19" y="8.684"/><use xlink:href="#20" y="13.026"/><use xlink:href="#21" y="15.197"/><use xlink:href="#22" y="19.539"/><use xlink:href="#23" y="21.71"/><use xlink:href="#24" y="26.052"/><use xlink:href="#25" y="28.223"/><use xlink:href="#26" y="30.394"/><use xlink:href="#27" y="34.736"/><use xlink:href="#28" y="39.078"/><use xlink:href="#18" y="41.249"/><use xlink:href="#29" y="45.591"/><use xlink:href="#30" y="49.933"/><use xlink:href="#31" y="52.104"/></svg><svg x="5040"><use xlink:href="#a"/><use xlink:href="#b" x="4.996" y="52.079"/><use xlink:href="#16"/><use xlink:href="#17" y="2.171"/><use xlink:href="#18" y="6.513"/><use xlink:href="#19" y="8.684"/><use xlink:href="#20" y="13.026"/><use xlink:href="#21" y="15.197"/><use xlink:href="#22" y="19.539"/><use xlink:href="#23" y="21.71"/><use xlink:href="#24" y="26.052"/><use xlink:href="#25" y="28.223"/><use xlink:href="#26" y="30.394"/><use xlink:href="#27" y="34.736"/><use xlink:href="#28" y="39.078"/><use xlink:href="#18" y="41.249"/><use xlink:href="#29" y="45.591"/><use xlink:href="#30" y="49.933"/><use xlink:href="#31" y="52.104"/></svg><svg x="5120"><use xlink:href="#a"/><use xlink:href="#b" x="5.996" y="52.079"/><use xlink:href="#16"/><use xlink:href="#17" y="2.171"/><use xlink:href="#18" y="6.513"/><use xlink:href="#19" y="8.684"/><use xlink:href="#20" y="13.026"/><use xlink:href="#21" y="15.197"/><use xlink:href="#22" y="19.539"/><use xlink:href="#23" y="21.71"/><use xlink:href="#24" y="26.052"/><use xlink:href="#25" y="28.223"/><use xlink:href="#26" y="30.394"/><use xlink:href="#27" y="34.736"/><use xlink:href="#28" y="39.078"/><use xlink:href="#18" y="41.249"/><use xlink:href="#29" y="45.591"/><use xlink:href="#30" y="49.933"/><text y="53.774" class="g">λ</text><text x="2.004" y="53.774" class="j">cd</text><text x="5.01" y="53.774" class="h">m</text><text x="6.012" y="53.774" class="m">y-app/</text></svg><svg x="5200"><use xlink:href="#a"/><use xlink:href="#b" x="5.996" y="52.079"/><use xlink:href="#16"/><use xlink:href="#17" y="2.171"/><use xlink:href="#18" y="6.513"/><use xlink:href="#19" y="8.684"/><use xlink:href="#20" y="13.026"/><use xlink:href="#21" y="15.197"/><use xlink:href="#22" y="19.539"/><use xlink:href="#23" y="21.71"/><use xlink:href="#24" y="26.052"/><use xlink:href="#25" y="28.223"/><use xlink:href="#26" y="30.394"/><use xlink:href="#27" y="34.736"/><use xlink:href="#28" y="39.078"/><use xlink:href="#18" y="41.249"/><use xlink:href="#29" y="45.591"/><use xlink:href="#30" y="49.933"/><text y="53.774" class="g">λ</text><text x="2.004" y="53.774" class="j">cd</text><text x="5.01" y="53.774" class="n">m</text><text x="6.012" y="53.774" class="m">y-app/</text></svg><svg x="5280"><use xlink:href="#a"/><use xlink:href="#b" x="6.996" y="52.079"/><use xlink:href="#16"/><use xlink:href="#17" y="2.171"/><use xlink:href="#18" y="6.513"/><use xlink:href="#19" y="8.684"/><use xlink:href="#20" y="13.026"/><use xlink:href="#21" y="15.197"/><use xlink:href="#22" y="19.539"/><use xlink:href="#23" y="21.71"/><use xlink:href="#24" y="26.052"/><use xlink:href="#25" y="28.223"/><use xlink:href="#26" y="30.394"/><use xlink:href="#27" y="34.736"/><use xlink:href="#28" y="39.078"/><use xlink:href="#18" y="41.249"/><use xlink:href="#29" y="45.591"/><use xlink:href="#30" y="49.933"/><text y="53.774" class="g">λ</text><text x="2.004" y="53.774" class="j">cd</text><text x="5.01" y="53.774" class="n">my</text><text x="7.014" y="53.774" class="m">-app/</text></svg><svg x="5360"><use xlink:href="#a"/><use xlink:href="#b" x="11.996" y="52.079"/><use xlink:href="#16"/><use xlink:href="#17" y="2.171"/><use xlink:href="#18" y="6.513"/><use xlink:href="#19" y="8.684"/><use xlink:href="#20" y="13.026"/><use xlink:href="#21" y="15.197"/><use xlink:href="#22" y="19.539"/><use xlink:href="#23" y="21.71"/><use xlink:href="#24" y="26.052"/><use xlink:href="#25" y="28.223"/><use xlink:href="#26" y="30.394"/><use xlink:href="#27" y="34.736"/><use xlink:href="#28" y="39.078"/><use xlink:href="#18" y="41.249"/><use xlink:href="#29" y="45.591"/><use xlink:href="#30" y="49.933"/><use xlink:href="#32" y="52.104"/></svg><svg x="5440"><use xlink:href="#a"/><use xlink:href="#b" x="-.004" y="52.079"/><use xlink:href="#17"/><use xlink:href="#18" y="4.342"/><use xlink:href="#19" y="6.513"/><use xlink:href="#20" y="10.855"/><use xlink:href="#21" y="13.026"/><use xlink:href="#22" y="17.368"/><use xlink:href="#23" y="19.539"/><use xlink:href="#24" y="23.881"/><use xlink:href="#25" y="26.052"/><use xlink:href="#26" y="28.223"/><use xlink:href="#27" y="32.565"/><use xlink:href="#28" y="36.907"/><use xlink:href="#18" y="39.078"/><use xlink:href="#29" y="43.42"/><use xlink:href="#30" y="47.762"/><use xlink:href="#32" y="49.933"/></svg><svg x="5520"><use xlink:href="#a"/><use xlink:href="#b" x="-.004" y="52.079"/><use xlink:href="#17"/><use xlink:href="#18" y="4.342"/><use xlink:href="#19" y="6.513"/><use xlink:href="#20" y="10.855"/><use xlink:href="#21" y="13.026"/><use xlink:href="#22" y="17.368"/><use xlink:href="#23" y="19.539"/><use xlink:href="#24" y="23.881"/><use xlink:href="#25" y="26.052"/><use xlink:href="#26" y="28.223"/><use xlink:href="#27" y="32.565"/><use xlink:href="#28" y="36.907"/><use xlink:href="#18" y="39.078"/><use xlink:href="#29" y="43.42"/><use xlink:href="#30" y="47.762"/><use xlink:href="#32" y="49.933"/></svg><svg x="5600"><use xlink:href="#a"/><use xlink:href="#b" x="-.004" y="52.079"/><use xlink:href="#17"/><use xlink:href="#18" y="4.342"/><use xlink:href="#19" y="6.513"/><use xlink:href="#20" y="10.855"/><use xlink:href="#21" y="13.026"/><use xlink:href="#22" y="17.368"/><use xlink:href="#23" y="19.539"/><use xlink:href="#24" y="23.881"/><use xlink:href="#25" y="26.052"/><use xlink:href="#26" y="28.223"/><use xlink:href="#27" y="32.565"/><use xlink:href="#28" y="36.907"/><use xlink:href="#18" y="39.078"/><use xlink:href="#29" y="43.42"/><use xlink:href="#30" y="47.762"/><use xlink:href="#32" y="49.933"/></svg><svg x="5680"><use xlink:href="#a"/><use xlink:href="#b" x="-.004" y="52.079"/><use xlink:href="#17"/><use xlink:href="#18" y="4.342"/><use xlink:href="#19" y="6.513"/><use xlink:href="#20" y="10.855"/><use xlink:href="#21" y="13.026"/><use xlink:href="#22" y="17.368"/><use xlink:href="#23" y="19.539"/><use xlink:href="#24" y="23.881"/><use xlink:href="#25" y="26.052"/><use xlink:href="#26" y="28.223"/><use xlink:href="#27" y="32.565"/><use xlink:href="#28" y="36.907"/><use xlink:href="#18" y="39.078"/><use xlink:href="#29" y="43.42"/><use xlink:href="#30" y="47.762"/><use xlink:href="#32" y="49.933"/></svg><svg x="5760"><use xlink:href="#a"/><use xlink:href="#b" x="-.004" y="52.079"/><use xlink:href="#17"/><use xlink:href="#18" y="4.342"/><use xlink:href="#19" y="6.513"/><use xlink:href="#20" y="10.855"/><use xlink:href="#21" y="13.026"/><use xlink:href="#22" y="17.368"/><use xlink:href="#23" y="19.539"/><use xlink:href="#24" y="23.881"/><use xlink:href="#25" y="26.052"/><use xlink:href="#26" y="28.223"/><use xlink:href="#27" y="32.565"/><use xlink:href="#28" y="36.907"/><use xlink:href="#18" y="39.078"/><use xlink:href="#29" y="43.42"/><use xlink:href="#30" y="47.762"/><use xlink:href="#32" y="49.933"/></svg><svg x="5840"><use xlink:href="#a"/><use xlink:href="#b" x="-.004" y="52.079"/><use xlink:href="#17"/><use xlink:href="#18" y="4.342"/><use xlink:href="#19" y="6.513"/><use xlink:href="#20" y="10.855"/><use xlink:href="#21" y="13.026"/><use xlink:href="#22" y="17.368"/><use xlink:href="#23" y="19.539"/><use xlink:href="#24" y="23.881"/><use xlink:href="#25" y="26.052"/><use xlink:href="#26" y="28.223"/><use xlink:href="#27" y="32.565"/><use xlink:href="#28" y="36.907"/><use xlink:href="#18" y="39.078"/><use xlink:href="#29" y="43.42"/><use xlink:href="#30" y="47.762"/><use xlink:href="#32" y="49.933"/></svg><svg x="5920"><use xlink:href="#a"/><use xlink:href="#b" x="-.004" y="52.079"/><use xlink:href="#17"/><use xlink:href="#18" y="4.342"/><use xlink:href="#19" y="6.513"/><use xlink:href="#20" y="10.855"/><use xlink:href="#21" y="13.026"/><use xlink:href="#22" y="17.368"/><use xlink:href="#23" y="19.539"/><use xlink:href="#24" y="23.881"/><use xlink:href="#25" y="26.052"/><use xlink:href="#26" y="28.223"/><use xlink:href="#27" y="32.565"/><use xlink:href="#28" y="36.907"/><use xlink:href="#18" y="39.078"/><use xlink:href="#29" y="43.42"/><use xlink:href="#30" y="47.762"/><use xlink:href="#32" y="49.933"/></svg><svg x="6000"><use xlink:href="#a"/><use xlink:href="#b" x="1.996" y="52.079"/><use xlink:href="#18"/><use xlink:href="#19" y="2.171"/><use xlink:href="#20" y="6.513"/><use xlink:href="#21" y="8.684"/><use xlink:href="#22" y="13.026"/><use xlink:href="#23" y="15.197"/><use xlink:href="#24" y="19.539"/><use xlink:href="#25" y="21.71"/><use xlink:href="#26" y="23.881"/><use xlink:href="#27" y="28.223"/><use xlink:href="#28" y="32.565"/><use xlink:href="#18" y="34.736"/><use xlink:href="#29" y="39.078"/><use xlink:href="#30" y="43.42"/><use xlink:href="#32" y="45.591"/><use xlink:href="#33" y="49.933"/><use xlink:href="#2" y="52.104"/></svg><svg x="6080"><use xlink:href="#a"/><use xlink:href="#b" x="2.996" y="52.079"/><use xlink:href="#18"/><use xlink:href="#19" y="2.171"/><use xlink:href="#20" y="6.513"/><use xlink:href="#21" y="8.684"/><use xlink:href="#22" y="13.026"/><use xlink:href="#23" y="15.197"/><use xlink:href="#24" y="19.539"/><use xlink:href="#25" y="21.71"/><use xlink:href="#26" y="23.881"/><use xlink:href="#27" y="28.223"/><use xlink:href="#28" y="32.565"/><use xlink:href="#18" y="34.736"/><use xlink:href="#29" y="39.078"/><use xlink:href="#30" y="43.42"/><use xlink:href="#32" y="45.591"/><use xlink:href="#33" y="49.933"/><text y="53.774" class="g">λ</text><text x="2.004" y="53.774" class="h">y</text></svg><svg x="6160"><use xlink:href="#a"/><use xlink:href="#b" x="2.996" y="52.079"/><use xlink:href="#18"/><use xlink:href="#19" y="2.171"/><use xlink:href="#20" y="6.513"/><use xlink:href="#21" y="8.684"/><use xlink:href="#22" y="13.026"/><use xlink:href="#23" y="15.197"/><use xlink:href="#24" y="19.539"/><use xlink:href="#25" y="21.71"/><use xlink:href="#26" y="23.881"/><use xlink:href="#27" y="28.223"/><use xlink:href="#28" y="32.565"/><use xlink:href="#18" y="34.736"/><use xlink:href="#29" y="39.078"/><use xlink:href="#30" y="43.42"/><use xlink:href="#32" y="45.591"/><use xlink:href="#33" y="49.933"/><text y="53.774" class="g">λ</text><text x="2.004" y="53.774" class="i">y</text></svg><svg x="6240"><use xlink:href="#a"/><use xlink:href="#b" x="2.996" y="52.079"/><use xlink:href="#18"/><use xlink:href="#19" y="2.171"/><use xlink:href="#20" y="6.513"/><use xlink:href="#21" y="8.684"/><use xlink:href="#22" y="13.026"/><use xlink:href="#23" y="15.197"/><use xlink:href="#24" y="19.539"/><use xlink:href="#25" y="21.71"/><use xlink:href="#26" y="23.881"/><use xlink:href="#27" y="28.223"/><use xlink:href="#28" y="32.565"/><use xlink:href="#18" y="34.736"/><use xlink:href="#29" y="39.078"/><use xlink:href="#30" y="43.42"/><use xlink:href="#32" y="45.591"/><use xlink:href="#33" y="49.933"/><text y="53.774" class="g">λ</text><text x="2.004" y="53.774" class="i">y</text><text x="3.006" y="53.774" class="m">arn</text><text x="7.014" y="53.774" class="m">start</text></svg><svg x="6320"><use xlink:href="#a"/><use xlink:href="#b" x="3.996" y="52.079"/><use xlink:href="#18"/><use xlink:href="#19" y="2.171"/><use xlink:href="#20" y="6.513"/><use xlink:href="#21" y="8.684"/><use xlink:href="#22" y="13.026"/><use xlink:href="#23" y="15.197"/><use xlink:href="#24" y="19.539"/><use xlink:href="#25" y="21.71"/><use xlink:href="#26" y="23.881"/><use xlink:href="#27" y="28.223"/><use xlink:href="#28" y="32.565"/><use xlink:href="#18" y="34.736"/><use xlink:href="#29" y="39.078"/><use xlink:href="#30" y="43.42"/><use xlink:href="#32" y="45.591"/><use xlink:href="#33" y="49.933"/><text y="53.774" class="g">λ</text><text x="2.004" y="53.774" class="i">ya</text><text x="4.008" y="53.774" class="m">rn</text><text x="7.014" y="53.774" class="m">start</text></svg><svg x="6400"><use xlink:href="#a"/><use xlink:href="#b" x="4.996" y="52.079"/><use xlink:href="#18"/><use xlink:href="#19" y="2.171"/><use xlink:href="#20" y="6.513"/><use xlink:href="#21" y="8.684"/><use xlink:href="#22" y="13.026"/><use xlink:href="#23" y="15.197"/><use xlink:href="#24" y="19.539"/><use xlink:href="#25" y="21.71"/><use xlink:href="#26" y="23.881"/><use xlink:href="#27" y="28.223"/><use xlink:href="#28" y="32.565"/><use xlink:href="#18" y="34.736"/><use xlink:href="#29" y="39.078"/><use xlink:href="#30" y="43.42"/><use xlink:href="#32" y="45.591"/><use xlink:href="#33" y="49.933"/><text y="53.774" class="g">λ</text><text x="2.004" y="53.774" class="i">yar</text><text x="5.01" y="53.774" class="m">n</text><text x="7.014" y="53.774" class="m">start</text></svg><svg x="6480"><use xlink:href="#a"/><use xlink:href="#b" x="5.996" y="52.079"/><use xlink:href="#18"/><use xlink:href="#19" y="2.171"/><use xlink:href="#20" y="6.513"/><use xlink:href="#21" y="8.684"/><use xlink:href="#22" y="13.026"/><use xlink:href="#23" y="15.197"/><use xlink:href="#24" y="19.539"/><use xlink:href="#25" y="21.71"/><use xlink:href="#26" y="23.881"/><use xlink:href="#27" y="28.223"/><use xlink:href="#28" y="32.565"/><use xlink:href="#18" y="34.736"/><use xlink:href="#29" y="39.078"/><use xlink:href="#30" y="43.42"/><use xlink:href="#32" y="45.591"/><use xlink:href="#33" y="49.933"/><use xlink:href="#34" y="52.104"/></svg><svg x="6560"><use xlink:href="#a"/><use xlink:href="#b" x="6.996" y="52.079"/><use xlink:href="#18"/><use xlink:href="#19" y="2.171"/><use xlink:href="#20" y="6.513"/><use xlink:href="#21" y="8.684"/><use xlink:href="#22" y="13.026"/><use xlink:href="#23" y="15.197"/><use xlink:href="#24" y="19.539"/><use xlink:href="#25" y="21.71"/><use xlink:href="#26" y="23.881"/><use xlink:href="#27" y="28.223"/><use xlink:href="#28" y="32.565"/><use xlink:href="#18" y="34.736"/><use xlink:href="#29" y="39.078"/><use xlink:href="#30" y="43.42"/><use xlink:href="#32" y="45.591"/><use xlink:href="#33" y="49.933"/><use xlink:href="#34" y="52.104"/></svg><svg x="6640"><use xlink:href="#a"/><use xlink:href="#b" x="6.996" y="52.079"/><use xlink:href="#18"/><use xlink:href="#19" y="2.171"/><use xlink:href="#20" y="6.513"/><use xlink:href="#21" y="8.684"/><use xlink:href="#22" y="13.026"/><use xlink:href="#23" y="15.197"/><use xlink:href="#24" y="19.539"/><use xlink:href="#25" y="21.71"/><use xlink:href="#26" y="23.881"/><use xlink:href="#27" y="28.223"/><use xlink:href="#28" y="32.565"/><use xlink:href="#18" y="34.736"/><use xlink:href="#29" y="39.078"/><use xlink:href="#30" y="43.42"/><use xlink:href="#32" y="45.591"/><use xlink:href="#33" y="49.933"/><use xlink:href="#34" y="52.104"/></svg><svg x="6720"><use xlink:href="#a"/><use xlink:href="#b" x="7.996" y="52.079"/><use xlink:href="#18"/><use xlink:href="#19" y="2.171"/><use xlink:href="#20" y="6.513"/><use xlink:href="#21" y="8.684"/><use xlink:href="#22" y="13.026"/><use xlink:href="#23" y="15.197"/><use xlink:href="#24" y="19.539"/><use xlink:href="#25" y="21.71"/><use xlink:href="#26" y="23.881"/><use xlink:href="#27" y="28.223"/><use xlink:href="#28" y="32.565"/><use xlink:href="#18" y="34.736"/><use xlink:href="#29" y="39.078"/><use xlink:href="#30" y="43.42"/><use xlink:href="#32" y="45.591"/><use xlink:href="#33" y="49.933"/><text y="53.774" class="g">λ</text><text x="2.004" y="53.774" class="j">yarn</text><text x="7.014" y="53.774" class="h">s</text><text x="8.016" y="53.774" class="m">tart</text></svg><svg x="6800"><use xlink:href="#a"/><use xlink:href="#b" x="7.996" y="52.079"/><use xlink:href="#18"/><use xlink:href="#19" y="2.171"/><use xlink:href="#20" y="6.513"/><use xlink:href="#21" y="8.684"/><use xlink:href="#22" y="13.026"/><use xlink:href="#23" y="15.197"/><use xlink:href="#24" y="19.539"/><use xlink:href="#25" y="21.71"/><use xlink:href="#26" y="23.881"/><use xlink:href="#27" y="28.223"/><use xlink:href="#28" y="32.565"/><use xlink:href="#18" y="34.736"/><use xlink:href="#29" y="39.078"/><use xlink:href="#30" y="43.42"/><use xlink:href="#32" y="45.591"/><use xlink:href="#33" y="49.933"/><text y="53.774" class="g">λ</text><text x="2.004" y="53.774" class="j">yarn</text><text x="7.014" y="53.774" class="n">s</text><text x="8.016" y="53.774" class="m">tart</text></svg><svg x="6880"><use xlink:href="#a"/><use xlink:href="#b" x="8.996" y="52.079"/><use xlink:href="#18"/><use xlink:href="#19" y="2.171"/><use xlink:href="#20" y="6.513"/><use xlink:href="#21" y="8.684"/><use xlink:href="#22" y="13.026"/><use xlink:href="#23" y="15.197"/><use xlink:href="#24" y="19.539"/><use xlink:href="#25" y="21.71"/><use xlink:href="#26" y="23.881"/><use xlink:href="#27" y="28.223"/><use xlink:href="#28" y="32.565"/><use xlink:href="#18" y="34.736"/><use xlink:href="#29" y="39.078"/><use xlink:href="#30" y="43.42"/><use xlink:href="#32" y="45.591"/><use xlink:href="#33" y="49.933"/><text y="53.774" class="g">λ</text><text x="2.004" y="53.774" class="j">yarn</text><text x="7.014" y="53.774" class="n">st</text><text x="9.018" y="53.774" class="m">art</text></svg><svg x="6960"><use xlink:href="#a"/><use xlink:href="#b" x="8.996" y="52.079"/><use xlink:href="#18"/><use xlink:href="#19" y="2.171"/><use xlink:href="#20" y="6.513"/><use xlink:href="#21" y="8.684"/><use xlink:href="#22" y="13.026"/><use xlink:href="#23" y="15.197"/><use xlink:href="#24" y="19.539"/><use xlink:href="#25" y="21.71"/><use xlink:href="#26" y="23.881"/><use xlink:href="#27" y="28.223"/><use xlink:href="#28" y="32.565"/><use xlink:href="#18" y="34.736"/><use xlink:href="#29" y="39.078"/><use xlink:href="#30" y="43.42"/><use xlink:href="#32" y="45.591"/><use xlink:href="#33" y="49.933"/><text y="53.774" class="g">λ</text><text x="2.004" y="53.774" class="j">yarn</text><text x="7.014" y="53.774" class="k">st</text><text x="9.018" y="53.774" class="m">art</text></svg><svg x="7040"><use xlink:href="#a"/><use xlink:href="#b" x="9.996" y="52.079"/><use xlink:href="#18"/><use xlink:href="#19" y="2.171"/><use xlink:href="#20" y="6.513"/><use xlink:href="#21" y="8.684"/><use xlink:href="#22" y="13.026"/><use xlink:href="#23" y="15.197"/><use xlink:href="#24" y="19.539"/><use xlink:href="#25" y="21.71"/><use xlink:href="#26" y="23.881"/><use xlink:href="#27" y="28.223"/><use xlink:href="#28" y="32.565"/><use xlink:href="#18" y="34.736"/><use xlink:href="#29" y="39.078"/><use xlink:href="#30" y="43.42"/><use xlink:href="#32" y="45.591"/><use xlink:href="#33" y="49.933"/><text y="53.774" class="g">λ</text><text x="2.004" y="53.774" class="j">yarn</text><text x="7.014" y="53.774" class="k">sta</text><text x="10.02" y="53.774" class="m">rt</text></svg><svg x="7120"><use xlink:href="#a"/><use xlink:href="#b" x="10.996" y="52.079"/><use xlink:href="#18"/><use xlink:href="#19" y="2.171"/><use xlink:href="#20" y="6.513"/><use xlink:href="#21" y="8.684"/><use xlink:href="#22" y="13.026"/><use xlink:href="#23" y="15.197"/><use xlink:href="#24" y="19.539"/><use xlink:href="#25" y="21.71"/><use xlink:href="#26" y="23.881"/><use xlink:href="#27" y="28.223"/><use xlink:href="#28" y="32.565"/><use xlink:href="#18" y="34.736"/><use xlink:href="#29" y="39.078"/><use xlink:href="#30" y="43.42"/><use xlink:href="#32" y="45.591"/><use xlink:href="#33" y="49.933"/><text y="53.774" class="g">λ</text><text x="2.004" y="53.774" class="j">yarn</text><text x="7.014" y="53.774" class="k">star</text><text x="11.022" y="53.774" class="m">t</text></svg><svg x="7200"><use xlink:href="#a"/><use xlink:href="#b" x="11.996" y="52.079"/><use xlink:href="#18"/><use xlink:href="#19" y="2.171"/><use xlink:href="#20" y="6.513"/><use xlink:href="#21" y="8.684"/><use xlink:href="#22" y="13.026"/><use xlink:href="#23" y="15.197"/><use xlink:href="#24" y="19.539"/><use xlink:href="#25" y="21.71"/><use xlink:href="#26" y="23.881"/><use xlink:href="#27" y="28.223"/><use xlink:href="#28" y="32.565"/><use xlink:href="#18" y="34.736"/><use xlink:href="#29" y="39.078"/><use xlink:href="#30" y="43.42"/><use xlink:href="#32" y="45.591"/><use xlink:href="#33" y="49.933"/><use xlink:href="#35" y="52.104"/></svg><svg x="7280"><use xlink:href="#a"/><use xlink:href="#b" x="-.004" y="52.079"/><use xlink:href="#19"/><use xlink:href="#20" y="4.342"/><use xlink:href="#21" y="6.513"/><use xlink:href="#22" y="10.855"/><use xlink:href="#23" y="13.026"/><use xlink:href="#24" y="17.368"/><use xlink:href="#25" y="19.539"/><use xlink:href="#26" y="21.71"/><use xlink:href="#27" y="26.052"/><use xlink:href="#28" y="30.394"/><use xlink:href="#18" y="32.565"/><use xlink:href="#29" y="36.907"/><use xlink:href="#30" y="41.249"/><use xlink:href="#32" y="43.42"/><use xlink:href="#33" y="47.762"/><use xlink:href="#35" y="49.933"/></svg><svg x="7360"><use xlink:href="#a"/><use xlink:href="#b" x="-.004" y="52.079"/><use xlink:href="#19"/><use xlink:href="#20" y="4.342"/><use xlink:href="#21" y="6.513"/><use xlink:href="#22" y="10.855"/><use xlink:href="#23" y="13.026"/><use xlink:href="#24" y="17.368"/><use xlink:href="#25" y="19.539"/><use xlink:href="#26" y="21.71"/><use xlink:href="#27" y="26.052"/><use xlink:href="#28" y="30.394"/><use xlink:href="#18" y="32.565"/><use xlink:href="#29" y="36.907"/><use xlink:href="#30" y="41.249"/><use xlink:href="#32" y="43.42"/><use xlink:href="#33" y="47.762"/><use xlink:href="#35" y="49.933"/></svg><svg x="7440"><use xlink:href="#a"/><use xlink:href="#b" x="-.004" y="52.079"/><use xlink:href="#19"/><use xlink:href="#20" y="4.342"/><use xlink:href="#21" y="6.513"/><use xlink:href="#22" y="10.855"/><use xlink:href="#23" y="13.026"/><use xlink:href="#24" y="17.368"/><use xlink:href="#25" y="19.539"/><use xlink:href="#26" y="21.71"/><use xlink:href="#27" y="26.052"/><use xlink:href="#28" y="30.394"/><use xlink:href="#18" y="32.565"/><use xlink:href="#29" y="36.907"/><use xlink:href="#30" y="41.249"/><use xlink:href="#32" y="43.42"/><use xlink:href="#33" y="47.762"/><use xlink:href="#35" y="49.933"/></svg><svg x="7520"><use xlink:href="#a"/><use xlink:href="#b" x="-.004" y="52.079"/><use xlink:href="#19"/><use xlink:href="#20" y="4.342"/><use xlink:href="#21" y="6.513"/><use xlink:href="#22" y="10.855"/><use xlink:href="#23" y="13.026"/><use xlink:href="#24" y="17.368"/><use xlink:href="#25" y="19.539"/><use xlink:href="#26" y="21.71"/><use xlink:href="#27" y="26.052"/><use xlink:href="#28" y="30.394"/><use xlink:href="#18" y="32.565"/><use xlink:href="#29" y="36.907"/><use xlink:href="#30" y="41.249"/><use xlink:href="#32" y="43.42"/><use xlink:href="#33" y="47.762"/><use xlink:href="#35" y="49.933"/></svg><svg x="7600"><use xlink:href="#a"/><use xlink:href="#b" x="-.004" y="52.079"/><use xlink:href="#19"/><use xlink:href="#20" y="4.342"/><use xlink:href="#21" y="6.513"/><use xlink:href="#22" y="10.855"/><use xlink:href="#23" y="13.026"/><use xlink:href="#24" y="17.368"/><use xlink:href="#25" y="19.539"/><use xlink:href="#26" y="21.71"/><use xlink:href="#27" y="26.052"/><use xlink:href="#28" y="30.394"/><use xlink:href="#18" y="32.565"/><use xlink:href="#29" y="36.907"/><use xlink:href="#30" y="41.249"/><use xlink:href="#32" y="43.42"/><use xlink:href="#33" y="47.762"/><use xlink:href="#35" y="49.933"/></svg><svg x="7680"><use xlink:href="#a"/><use xlink:href="#b" x="-.004" y="52.079"/><use xlink:href="#20" y="2.171"/><use xlink:href="#21" y="4.342"/><use xlink:href="#22" y="8.684"/><use xlink:href="#23" y="10.855"/><use xlink:href="#24" y="15.197"/><use xlink:href="#25" y="17.368"/><use xlink:href="#26" y="19.539"/><use xlink:href="#27" y="23.881"/><use xlink:href="#28" y="28.223"/><use xlink:href="#18" y="30.394"/><use xlink:href="#29" y="34.736"/><use xlink:href="#30" y="39.078"/><use xlink:href="#32" y="41.249"/><use xlink:href="#33" y="45.591"/><use xlink:href="#35" y="47.762"/><use xlink:href="#36" y="49.933"/></svg><svg x="7760"><use xlink:href="#a"/><use xlink:href="#b" x="-.004" y="52.079"/><use xlink:href="#20" y="2.171"/><use xlink:href="#21" y="4.342"/><use xlink:href="#22" y="8.684"/><use xlink:href="#23" y="10.855"/><use xlink:href="#24" y="15.197"/><use xlink:href="#25" y="17.368"/><use xlink:href="#26" y="19.539"/><use xlink:href="#27" y="23.881"/><use xlink:href="#28" y="28.223"/><use xlink:href="#18" y="30.394"/><use xlink:href="#29" y="34.736"/><use xlink:href="#30" y="39.078"/><use xlink:href="#32" y="41.249"/><use xlink:href="#33" y="45.591"/><use xlink:href="#35" y="47.762"/><use xlink:href="#36" y="49.933"/></svg><svg x="7840"><use xlink:href="#a"/><use xlink:href="#b" x="-.004" y="52.079"/><use xlink:href="#20"/><use xlink:href="#21" y="2.171"/><use xlink:href="#22" y="6.513"/><use xlink:href="#23" y="8.684"/><use xlink:href="#24" y="13.026"/><use xlink:href="#25" y="15.197"/><use xlink:href="#26" y="17.368"/><use xlink:href="#27" y="21.71"/><use xlink:href="#28" y="26.052"/><use xlink:href="#18" y="28.223"/><use xlink:href="#29" y="32.565"/><use xlink:href="#30" y="36.907"/><use xlink:href="#32" y="39.078"/><use xlink:href="#33" y="43.42"/><use xlink:href="#35" y="45.591"/><use xlink:href="#36" y="47.762"/><text y="51.603" class="h">$</text><text x="2.004" y="51.603" class="h">react-scripts</text><text x="16.032" y="51.603" class="h">start</text></svg><svg x="7920"><use xlink:href="#a"/><use xlink:href="#b" x="-.004"/></svg><svg x="8000"><use xlink:href="#a"/><use xlink:href="#b" x="-.004" y="4.317"/><text y="1.67" class="k">Starting</text><text x="9.018" y="1.67" class="k">the</text><text x="13.026" y="1.67" class="k">development</text><text x="25.05" y="1.67" class="k">server...</text></svg><svg x="8080"><use xlink:href="#a"/><use xlink:href="#b" x="-.004"/></svg><svg x="8160"><use xlink:href="#a"/><use xlink:href="#b" x="-.004" y="2.146"/></svg><svg x="8240"><use xlink:href="#a"/><use xlink:href="#b" x="-.004" y="2.146"/><text y="1.67" class="h">Compiling...</text></svg><svg x="8320"><use xlink:href="#a"/><use xlink:href="#b" x="-.004"/></svg><svg x="8400"><use xlink:href="#a"/><use xlink:href="#b" x="-.004" y="2.146"/><use xlink:href="#37"/></svg><svg x="8480"><use xlink:href="#a"/><use xlink:href="#b" x="-.004" y="6.488"/><use xlink:href="#37"/><use xlink:href="#38" y="4.342"/></svg><svg x="8560"><use xlink:href="#a"/><use xlink:href="#b" x="-.004" y="8.659"/><use xlink:href="#37"/><use xlink:href="#38" y="4.342"/></svg><svg x="8640"><use xlink:href="#a"/><use xlink:href="#b" x="-.004" y="10.83"/><use xlink:href="#37"/><use xlink:href="#38" y="4.342"/><use xlink:href="#39" y="8.684"/></svg><svg x="8720"><use xlink:href="#a"/><use xlink:href="#b" x="-.004" y="13.001"/><use xlink:href="#37"/><use xlink:href="#38" y="4.342"/><use xlink:href="#39" y="8.684"/><use xlink:href="#40" y="10.855"/></svg><svg x="8800"><use xlink:href="#a"/><use xlink:href="#b" x="-.004" y="17.343"/><use xlink:href="#37"/><use xlink:href="#38" y="4.342"/><use xlink:href="#39" y="8.684"/><use xlink:href="#40" y="10.855"/><use xlink:href="#41" y="15.197"/></svg><svg x="8880"><use xlink:href="#a"/><use xlink:href="#b" x="-.004" y="19.514"/><use xlink:href="#37"/><use xlink:href="#38" y="4.342"/><use xlink:href="#39" y="8.684"/><use xlink:href="#40" y="10.855"/><use xlink:href="#41" y="15.197"/><use xlink:href="#42" y="17.368"/></svg><svg x="8960"><use xlink:href="#a"/><use xlink:href="#b" x="-.004" y="21.685"/><use xlink:href="#37"/><use xlink:href="#38" y="4.342"/><use xlink:href="#39" y="8.684"/><use xlink:href="#40" y="10.855"/><use xlink:href="#41" y="15.197"/><use xlink:href="#42" y="17.368"/></svg><svg x="9040"><use xlink:href="#a"/><use xlink:href="#b" x="-.004" y="23.856"/><use xlink:href="#37"/><use xlink:href="#38" y="4.342"/><use xlink:href="#39" y="8.684"/><use xlink:href="#40" y="10.855"/><use xlink:href="#41" y="15.197"/><use xlink:href="#42" y="17.368"/></svg></svg></g></g></svg></svg> \ No newline at end of file From 5a0b1ef56d2074d608c86ccd3f9091f0881dd0b4 Mon Sep 17 00:00:00 2001 From: Danny Calleri <daniele.calleri@gmail.com> Date: Tue, 9 Jan 2018 16:25:59 +0100 Subject: [PATCH 062/122] Better documentation for setupTests.js when ejecting (#3656) * Better documentation for setupTests.js when ejecting When running `npm run eject` before creating `src/setupTests.js`, the resulting `package.json` file, won't contain any entry for it - and this is correct in my opinion, since otherwise Jest will crash - but it's useful to have it documented and avoid pointless waste of time. * Added additional note about src/setupTests.js Added another note about src/setupTests.js and `npm run eject` in Testing Components section * Update README.md * Update README.md --- packages/react-scripts/template/README.md | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index 377b2fbe0..5cb8d4e23 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -1334,7 +1334,7 @@ import Adapter from 'enzyme-adapter-react-16'; configure({ adapter: new Adapter() }); ``` -(Note that **if you already ejected** before creating `src/setupTests.js`, this won’t work unless you set [this Jest option](https://facebook.github.io/jest/docs/en/configuration.html#setuptestframeworkscriptfile-string) to point to `src/setupTests.js`.) +>Note: Keep in mind that if you decide to "eject" before creating `src/setupTests.js`, the resulting `package.json` file won't contain any reference to it. [Read here](#initializing-test-environment) to learn how to add this after ejecting. Now you can write a smoke test with it: @@ -1425,7 +1425,14 @@ const localStorageMock = { global.localStorage = localStorageMock ``` -Note that **if you already ejected** before creating `src/setupTests.js`, this won’t work unless you set [this Jest option](https://facebook.github.io/jest/docs/en/configuration.html#setuptestframeworkscriptfile-string) to point to `src/setupTests.js`. +>Note: Keep in mind that if you decide to "eject" before creating `src/setupTests.js`, the resulting `package.json` file won't contain any reference to it, so you should manually create the property `setupTestFrameworkScriptFile` in the configuration for Jest, something like the following: + +>```js +>"jest": { +> // ... +> "setupTestFrameworkScriptFile": "<rootDir>/src/setupTests.js" +> } +> ``` ### Focusing and Excluding Tests From 85bf3a937be8d4fb1444daa069688cdb015d042b Mon Sep 17 00:00:00 2001 From: shrynx <shrynx@users.noreply.github.com> Date: Wed, 10 Jan 2018 00:46:46 +0900 Subject: [PATCH 063/122] added code-insiders to the editor list (#3652) --- packages/react-dev-utils/launchEditor.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/react-dev-utils/launchEditor.js b/packages/react-dev-utils/launchEditor.js index aee22b248..955f250d9 100644 --- a/packages/react-dev-utils/launchEditor.js +++ b/packages/react-dev-utils/launchEditor.js @@ -64,6 +64,7 @@ const COMMON_EDITORS_LINUX = { atom: 'atom', Brackets: 'brackets', code: 'code', + 'code-insiders': 'code-insiders', emacs: 'emacs', 'idea.sh': 'idea', 'phpstorm.sh': 'phpstorm', @@ -77,6 +78,7 @@ const COMMON_EDITORS_LINUX = { const COMMON_EDITORS_WIN = [ 'Brackets.exe', 'Code.exe', + 'Code - Insiders.exe', 'atom.exe', 'sublime_text.exe', 'notepad++.exe', @@ -127,6 +129,8 @@ function getArgumentsForLineNumber(editor, fileName, lineNumber, workspace) { return ['--line', lineNumber, fileName]; case 'code': case 'Code': + case 'code-insiders': + case 'Code - Insiders': return addWorkspaceToArgumentsIfExists( ['-g', fileName + ':' + lineNumber], workspace From 10b05c7662ba3b9c5191b6dc1a9c36fd236d01e3 Mon Sep 17 00:00:00 2001 From: Tharaka Wijebandara <tharaka.nw@gmail.com> Date: Tue, 9 Jan 2018 21:17:22 +0530 Subject: [PATCH 064/122] Open editor to exact column from build error overlay (#3465) * Open editor to exact column from build error overlay * Update launch editor validations --- .../react-dev-utils/errorOverlayMiddleware.js | 4 ++- packages/react-dev-utils/launchEditor.js | 35 +++++++++++++++---- .../react-dev-utils/webpackHotDevClient.js | 4 ++- .../src/utils/parseCompileError.js | 6 +++- 4 files changed, 39 insertions(+), 10 deletions(-) diff --git a/packages/react-dev-utils/errorOverlayMiddleware.js b/packages/react-dev-utils/errorOverlayMiddleware.js index b756b0ef6..873b19947 100644 --- a/packages/react-dev-utils/errorOverlayMiddleware.js +++ b/packages/react-dev-utils/errorOverlayMiddleware.js @@ -12,7 +12,9 @@ const launchEditorEndpoint = require('./launchEditorEndpoint'); module.exports = function createLaunchEditorMiddleware() { return function launchEditorMiddleware(req, res, next) { if (req.url.startsWith(launchEditorEndpoint)) { - launchEditor(req.query.fileName, req.query.lineNumber); + const lineNumber = parseInt(req.query.lineNumber, 10) || 1; + const colNumber = parseInt(req.query.colNumber, 10) || 1; + launchEditor(req.query.fileName, lineNumber, colNumber); res.end(); } else { next(); diff --git a/packages/react-dev-utils/launchEditor.js b/packages/react-dev-utils/launchEditor.js index 955f250d9..cf190b086 100644 --- a/packages/react-dev-utils/launchEditor.js +++ b/packages/react-dev-utils/launchEditor.js @@ -103,7 +103,13 @@ function addWorkspaceToArgumentsIfExists(args, workspace) { return args; } -function getArgumentsForLineNumber(editor, fileName, lineNumber, workspace) { +function getArgumentsForLineNumber( + editor, + fileName, + lineNumber, + colNumber, + workspace +) { const editorBasename = path.basename(editor).replace(/\.(exe|cmd|bat)$/i, ''); switch (editorBasename) { case 'atom': @@ -112,17 +118,19 @@ function getArgumentsForLineNumber(editor, fileName, lineNumber, workspace) { case 'subl': case 'sublime': case 'sublime_text': + return [fileName + ':' + lineNumber + ':' + colNumber]; case 'wstorm': case 'charm': return [fileName + ':' + lineNumber]; case 'notepad++': - return ['-n' + lineNumber, fileName]; + return ['-n' + lineNumber, '-c' + colNumber, fileName]; case 'vim': case 'mvim': case 'joe': + return ['+' + lineNumber, fileName]; case 'emacs': case 'emacsclient': - return ['+' + lineNumber, fileName]; + return ['+' + lineNumber + ':' + colNumber, fileName]; case 'rmate': case 'mate': case 'mine': @@ -132,7 +140,7 @@ function getArgumentsForLineNumber(editor, fileName, lineNumber, workspace) { case 'code-insiders': case 'Code - Insiders': return addWorkspaceToArgumentsIfExists( - ['-g', fileName + ':' + lineNumber], + ['-g', fileName + ':' + lineNumber + ':' + colNumber], workspace ); case 'appcode': @@ -255,17 +263,24 @@ function printInstructions(fileName, errorMessage) { } let _childProcess = null; -function launchEditor(fileName, lineNumber) { +function launchEditor(fileName, lineNumber, colNumber) { if (!fs.existsSync(fileName)) { return; } // Sanitize lineNumber to prevent malicious use on win32 // via: https://github.com/nodejs/node/blob/c3bb4b1aa5e907d489619fb43d233c3336bfc03d/lib/child_process.js#L333 - if (lineNumber && isNaN(lineNumber)) { + // and it should be a positive integer + if (!(Number.isInteger(lineNumber) && lineNumber > 0)) { return; } + // colNumber is optional, but should be a positive integer too + // default is 1 + if (!(Number.isInteger(colNumber) && colNumber > 0)) { + colNumber = 1; + } + let [editor, ...args] = guessEditor(); if (!editor) { @@ -294,7 +309,13 @@ function launchEditor(fileName, lineNumber) { let workspace = null; if (lineNumber) { args = args.concat( - getArgumentsForLineNumber(editor, fileName, lineNumber, workspace) + getArgumentsForLineNumber( + editor, + fileName, + lineNumber, + colNumber, + workspace + ) ); } else { args.push(fileName); diff --git a/packages/react-dev-utils/webpackHotDevClient.js b/packages/react-dev-utils/webpackHotDevClient.js index 296e38046..cbbc80029 100644 --- a/packages/react-dev-utils/webpackHotDevClient.js +++ b/packages/react-dev-utils/webpackHotDevClient.js @@ -30,7 +30,9 @@ ErrorOverlay.setEditorHandler(function editorHandler(errorLocation) { '?fileName=' + window.encodeURIComponent(errorLocation.fileName) + '&lineNumber=' + - window.encodeURIComponent(errorLocation.lineNumber || 1) + window.encodeURIComponent(errorLocation.lineNumber || 1) + + '&colNumber=' + + window.encodeURIComponent(errorLocation.colNumber || 1) ); }); diff --git a/packages/react-error-overlay/src/utils/parseCompileError.js b/packages/react-error-overlay/src/utils/parseCompileError.js index 2c9b6e60e..e87c45622 100644 --- a/packages/react-error-overlay/src/utils/parseCompileError.js +++ b/packages/react-error-overlay/src/utils/parseCompileError.js @@ -4,6 +4,7 @@ import Anser from 'anser'; export type ErrorLocation = {| fileName: string, lineNumber: number, + colNumber?: number, |}; const filePathRegex = /^\.(\/[^/\n ]+)+\.[^/\n ]+$/; @@ -25,6 +26,7 @@ function parseCompileError(message: string): ?ErrorLocation { const lines: Array<string> = message.split('\n'); let fileName: string = ''; let lineNumber: number = 0; + let colNumber: number = 0; for (let i = 0; i < lines.length; i++) { const line: string = Anser.ansiToText(lines[i]).trim(); @@ -41,6 +43,8 @@ function parseCompileError(message: string): ?ErrorLocation { const match: ?Array<string> = line.match(lineNumberRegexes[k]); if (match) { lineNumber = parseInt(match[1], 10); + // colNumber starts with 0 and hence add 1 + colNumber = parseInt(match[2], 10) + 1 || 1; break; } k++; @@ -51,7 +55,7 @@ function parseCompileError(message: string): ?ErrorLocation { } } - return fileName && lineNumber ? { fileName, lineNumber } : null; + return fileName && lineNumber ? { fileName, lineNumber, colNumber } : null; } export default parseCompileError; From 0d716713c47ec1b954f144b742c9584b9bc3f9b2 Mon Sep 17 00:00:00 2001 From: Jonathan <jonathan@xgecko.com> Date: Tue, 9 Jan 2018 07:49:17 -0800 Subject: [PATCH 065/122] Allowing "file:<path>" --scripts-version values (#3629) * Allowing for local "file:" prefixed scripts packages * Fixing test failure --- packages/create-react-app/createReactApp.js | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/packages/create-react-app/createReactApp.js b/packages/create-react-app/createReactApp.js index e7dbbb358..f8330a48d 100755 --- a/packages/create-react-app/createReactApp.js +++ b/packages/create-react-app/createReactApp.js @@ -268,7 +268,7 @@ function run( template, useYarn ) { - const packageToInstall = getInstallPackage(version); + const packageToInstall = getInstallPackage(version, originalDirectory); const allDependencies = ['react', 'react-dom', packageToInstall]; console.log('Installing packages. This might take a couple of minutes.'); @@ -365,11 +365,16 @@ function run( }); } -function getInstallPackage(version) { +function getInstallPackage(version, originalDirectory) { let packageToInstall = 'react-scripts'; const validSemver = semver.valid(version); if (validSemver) { packageToInstall += `@${validSemver}`; + } else if (version && version.match(/^file:/)) { + packageToInstall = `file:${path.resolve( + originalDirectory, + version.match(/^file:(.*)?$/)[1] + )}`; } else if (version) { // for tar.gz or alternative paths packageToInstall = version; @@ -459,6 +464,10 @@ function getPackageName(installPackage) { return Promise.resolve( installPackage.charAt(0) + installPackage.substr(1).split('@')[0] ); + } else if (installPackage.match(/^file:/)) { + const installPackagePath = installPackage.match(/^file:(.*)?$/)[1]; + const installPackageJson = require(path.join(installPackagePath, 'package.json')); + return Promise.resolve(installPackageJson.name); } return Promise.resolve(installPackage); } From 5d154cbcee3eaa8e1b0b5b1ed4d31fff57b8245d Mon Sep 17 00:00:00 2001 From: Andy Kenward <hello@andykenward.com> Date: Tue, 9 Jan 2018 15:49:48 +0000 Subject: [PATCH 066/122] Travis CI use trusty instead precise (#3661) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit It appears trusty has Yarn ^v1.0.0 now. So (#3054) shouldn’t be an issue changing to trusty. As Travis CI [precise support](https://blog.travis-ci.com/2017-08-31-trusty-as-default-status) will be dropped in March 2018 . --- .travis.yml | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/.travis.yml b/.travis.yml index 0ca362c23..e2afbfa97 100644 --- a/.travis.yml +++ b/.travis.yml @@ -1,9 +1,5 @@ --- -# Use Ubuntu Precise instead of new default Trusty which cause build fail -# with pre installed yarn v0.17.8 -# https://github.com/facebookincubator/create-react-app/issues/3054 -# TODO: remove after Trusty environment is updated with a lastet version of yarn -dist: precise +dist: trusty language: node_js node_js: - 6 From 373687feaf9a5961fe87951e4ed28beed414322b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tao=20G=C3=B3mez=20Gil?= <tao.gomez.gil@gmail.com> Date: Tue, 9 Jan 2018 16:50:20 +0100 Subject: [PATCH 067/122] Add Powershell commands to README.md (#3515) --- packages/react-scripts/template/README.md | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index 5cb8d4e23..772db4754 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -932,6 +932,12 @@ set "REACT_APP_SECRET_CODE=abcdef" && npm start (Note: Quotes around the variable assignment are required to avoid a trailing whitespace.) +#### Windows (Powershell) + +```Powershell +($env:REACT_APP_SECRET_CODE = "abcdef") -and (npm start) +``` + #### Linux, macOS (Bash) ```bash @@ -1179,6 +1185,12 @@ To do this, set the `HTTPS` environment variable to `true`, then start the dev s set HTTPS=true&&npm start ``` +#### Windows (Powershell) + +```Powershell +($env:HTTPS = $true) -and (npm start) +``` + (Note: the lack of whitespace is intentional.) #### Linux, macOS (Bash) @@ -1527,6 +1539,16 @@ set CI=true&&npm run build (Note: the lack of whitespace is intentional.) +##### Windows (Powershell) + +```Powershell +($env:CI = $true) -and (npm test) +``` + +```Powershell +($env:CI = $true) -and (npm run build) +``` + ##### Linux, macOS (Bash) ```bash From ab507e62f8dd57ca1e810b3c8cc1bc321081fffe Mon Sep 17 00:00:00 2001 From: David Boyne <davidboyne123@hotmail.co.uk> Date: Tue, 9 Jan 2018 15:59:26 +0000 Subject: [PATCH 068/122] Updated babel-preset-react-app README.md (#3463) Added some more documentation to install the babel-preset-react-app making it more clear on how to get started with this preset outside of create-react-app. --- packages/babel-preset-react-app/README.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/babel-preset-react-app/README.md b/packages/babel-preset-react-app/README.md index 4dc9fb9b1..5653831ac 100644 --- a/packages/babel-preset-react-app/README.md +++ b/packages/babel-preset-react-app/README.md @@ -16,6 +16,12 @@ If you want to use this Babel preset in a project not built with Create React Ap First, [install Babel](https://babeljs.io/docs/setup/). +Then install babel-preset-react-app. + +```sh +npm install babel-preset-react-app --save-dev +``` + Then create a file named `.babelrc` with following contents in the root folder of your project: ```js From b507a9aec1455d7ead63e6842db0354ba98469c2 Mon Sep 17 00:00:00 2001 From: Trevor Brindle <tabrindle@gmail.com> Date: Tue, 9 Jan 2018 11:02:15 -0500 Subject: [PATCH 069/122] =?UTF-8?q?add=20envinfo=20package,=20=E2=80=94inf?= =?UTF-8?q?o=20flag=20(#3408)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * add envinfo package, —info flag * update envinfo to use new duplicates option --- packages/create-react-app/createReactApp.js | 10 ++++++++++ packages/create-react-app/package.json | 1 + 2 files changed, 11 insertions(+) diff --git a/packages/create-react-app/createReactApp.js b/packages/create-react-app/createReactApp.js index f8330a48d..062c9f2f6 100755 --- a/packages/create-react-app/createReactApp.js +++ b/packages/create-react-app/createReactApp.js @@ -47,6 +47,7 @@ const tmp = require('tmp'); const unpack = require('tar-pack').unpack; const url = require('url'); const hyperquest = require('hyperquest'); +const envinfo = require('envinfo'); const packageJson = require('./package.json'); @@ -60,6 +61,7 @@ const program = new commander.Command(packageJson.name) projectName = name; }) .option('--verbose', 'print additional logs') + .option('--info', 'print environment debug info') .option( '--scripts-version <alternative-package>', 'use a non-standard version of react-scripts' @@ -100,6 +102,14 @@ const program = new commander.Command(packageJson.name) .parse(process.argv); if (typeof projectName === 'undefined') { + if (program.info) { + envinfo.print({ + packages: ['react', 'react-dom', 'react-scripts'], + noNativeIDE: true, + duplicates: true, + }); + process.exit(0); + } console.error('Please specify the project directory:'); console.log( ` ${chalk.cyan(program.name())} ${chalk.green('<project-directory>')}` diff --git a/packages/create-react-app/package.json b/packages/create-react-app/package.json index 569985f5c..1b3b60aac 100644 --- a/packages/create-react-app/package.json +++ b/packages/create-react-app/package.json @@ -24,6 +24,7 @@ "chalk": "^1.1.1", "commander": "^2.9.0", "cross-spawn": "^4.0.0", + "envinfo": "^3.8.0", "fs-extra": "^1.0.0", "hyperquest": "^2.1.2", "semver": "^5.0.3", From dccc752cac5b7067e46df820316d8f32e2cf1010 Mon Sep 17 00:00:00 2001 From: Moos <mooster@42at.com> Date: Tue, 9 Jan 2018 08:05:36 -0800 Subject: [PATCH 070/122] =?UTF-8?q?fix=20#2223=20-=20[feature]=20Implement?= =?UTF-8?q?=20dotenv-expand=20to=20accept=20variable=20expa=E2=80=A6=20(#3?= =?UTF-8?q?387)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix #2223 - [feature] Implement dotenv-expand to accept variable expansion in dot env files * add to README TOC * fix readme * Update README.md --- packages/react-scripts/config/env.js | 11 ++++++---- .../react-scripts/fixtures/kitchensink/.env | 4 ++++ .../kitchensink/integration/env.test.js | 17 +++++++++++++++ .../fixtures/kitchensink/src/App.js | 5 +++++ .../src/features/env/ExpandEnvVariables.js | 21 +++++++++++++++++++ .../features/env/ExpandEnvVariables.test.js | 17 +++++++++++++++ packages/react-scripts/package.json | 1 + packages/react-scripts/template/README.md | 19 +++++++++++++++++ 8 files changed, 91 insertions(+), 4 deletions(-) create mode 100644 packages/react-scripts/fixtures/kitchensink/src/features/env/ExpandEnvVariables.js create mode 100644 packages/react-scripts/fixtures/kitchensink/src/features/env/ExpandEnvVariables.test.js diff --git a/packages/react-scripts/config/env.js b/packages/react-scripts/config/env.js index fa42747f6..ceda79604 100644 --- a/packages/react-scripts/config/env.js +++ b/packages/react-scripts/config/env.js @@ -35,13 +35,16 @@ var dotenvFiles = [ // Load environment variables from .env* files. Suppress warnings using silent // if this file is missing. dotenv will never modify any environment variables -// that have already been set. +// that have already been set. Variable expansion is supported in .env files. // https://github.com/motdotla/dotenv +// https://github.com/motdotla/dotenv-expand dotenvFiles.forEach(dotenvFile => { if (fs.existsSync(dotenvFile)) { - require('dotenv').config({ - path: dotenvFile, - }); + require('dotenv-expand')( + require('dotenv').config({ + path: dotenvFile, + }) + ); } }); diff --git a/packages/react-scripts/fixtures/kitchensink/.env b/packages/react-scripts/fixtures/kitchensink/.env index 3e2f7b14a..9f7acc602 100644 --- a/packages/react-scripts/fixtures/kitchensink/.env +++ b/packages/react-scripts/fixtures/kitchensink/.env @@ -1,3 +1,7 @@ REACT_APP_X = x-from-original-env REACT_APP_ORIGINAL_1 = from-original-env-1 REACT_APP_ORIGINAL_2 = from-original-env-2 +REACT_APP_BASIC = basic +REACT_APP_BASIC_EXPAND = ${REACT_APP_BASIC} +REACT_APP_BASIC_EXPAND_SIMPLE = $REACT_APP_BASIC +REACT_APP_EXPAND_EXISTING = $REACT_APP_SHELL_ENV_MESSAGE diff --git a/packages/react-scripts/fixtures/kitchensink/integration/env.test.js b/packages/react-scripts/fixtures/kitchensink/integration/env.test.js index 5138bc513..43badcbde 100644 --- a/packages/react-scripts/fixtures/kitchensink/integration/env.test.js +++ b/packages/react-scripts/fixtures/kitchensink/integration/env.test.js @@ -67,5 +67,22 @@ describe('Integration', () => { doc.getElementById('feature-shell-env-variables').textContent ).to.equal('fromtheshell.'); }); + + it('expand .env variables', async () => { + const doc = await initDOM('expand-env-variables'); + + expect(doc.getElementById('feature-expand-env-1').textContent).to.equal( + 'basic' + ); + expect(doc.getElementById('feature-expand-env-2').textContent).to.equal( + 'basic' + ); + expect(doc.getElementById('feature-expand-env-3').textContent).to.equal( + 'basic' + ); + expect( + doc.getElementById('feature-expand-env-existing').textContent + ).to.equal('fromtheshell'); + }); }); }); diff --git a/packages/react-scripts/fixtures/kitchensink/src/App.js b/packages/react-scripts/fixtures/kitchensink/src/App.js index 5fe13accf..0a1663192 100644 --- a/packages/react-scripts/fixtures/kitchensink/src/App.js +++ b/packages/react-scripts/fixtures/kitchensink/src/App.js @@ -179,6 +179,11 @@ class App extends Component { this.setFeature(f.default) ); break; + case 'expand-env-variables': + import('./features/env/ExpandEnvVariables').then(f => + this.setFeature(f.default) + ); + break; default: throw new Error(`Missing feature "${feature}"`); } diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/env/ExpandEnvVariables.js b/packages/react-scripts/fixtures/kitchensink/src/features/env/ExpandEnvVariables.js new file mode 100644 index 000000000..58fc00e3a --- /dev/null +++ b/packages/react-scripts/fixtures/kitchensink/src/features/env/ExpandEnvVariables.js @@ -0,0 +1,21 @@ +/** + * Copyright (c) 2015-present, Facebook, Inc. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +import React from 'react'; + +export default () => ( + <span> + <span id="feature-expand-env-1">{process.env.REACT_APP_BASIC}</span> + <span id="feature-expand-env-2">{process.env.REACT_APP_BASIC_EXPAND}</span> + <span id="feature-expand-env-3"> + {process.env.REACT_APP_BASIC_EXPAND_SIMPLE} + </span> + <span id="feature-expand-env-existing"> + {process.env.REACT_APP_EXPAND_EXISTING} + </span> + </span> +); diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/env/ExpandEnvVariables.test.js b/packages/react-scripts/fixtures/kitchensink/src/features/env/ExpandEnvVariables.test.js new file mode 100644 index 000000000..4e4200abe --- /dev/null +++ b/packages/react-scripts/fixtures/kitchensink/src/features/env/ExpandEnvVariables.test.js @@ -0,0 +1,17 @@ +/** + * Copyright (c) 2015-present, Facebook, Inc. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +import React from 'react'; +import ReactDOM from 'react-dom'; +import ExpandEnvVariables from './ExpandEnvVariables'; + +describe('expand .env variables', () => { + it('renders without crashing', () => { + const div = document.createElement('div'); + ReactDOM.render(<ExpandEnvVariables />, div); + }); +}); diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index dcac53cf4..f6bff1dea 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -32,6 +32,7 @@ "chalk": "1.1.3", "css-loader": "0.28.7", "dotenv": "4.0.0", + "dotenv-expand": "4.0.1", "eslint": "4.10.0", "eslint-config-react-app": "^2.0.1", "eslint-loader": "1.9.0", diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index 772db4754..17b85756b 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -978,6 +978,25 @@ Please refer to the [dotenv documentation](https://github.com/motdotla/dotenv) f >Note: If you are defining environment variables for development, your CI and/or hosting platform will most likely need these defined as well. Consult their documentation how to do this. For example, see the documentation for [Travis CI](https://docs.travis-ci.com/user/environment-variables/) or [Heroku](https://devcenter.heroku.com/articles/config-vars). +#### Expanding Environment Variables In `.env` + +>Note: this feature is available with `react-scripts@1.0.18` and higher. + +Expand variables already on your machine for use in your .env file (using [dotenv-expand](https://github.com/motdotla/dotenv-expand)). See [#2223](https://github.com/facebookincubator/create-react-app/issues/2223). + +For example, to get the environment variable `npm_package_version`: +``` +REACT_APP_VERSION=$npm_package_version +# also works: +# REACT_APP_VERSION=${npm_package_version} +``` +Or expand variables local to the current `.env` file: +``` +DOMAIN=www.example.com +REACT_APP_FOO=$DOMAIN/foo +REACT_APP_BAR=$DOMAIN/bar +``` + ## Can I Use Decorators? Many popular libraries use [decorators](https://medium.com/google-developers/exploring-es7-decorators-76ecb65fb841) in their documentation.<br> From 887fd10ed842d9a4a6e61b6483e0b5b21bcb4725 Mon Sep 17 00:00:00 2001 From: Ryan McCue <me@ryanmccue.info> Date: Wed, 10 Jan 2018 02:07:21 +1000 Subject: [PATCH 071/122] Print full directory name from lsof (#3440) awk splits lines based on spaces, which causes directory names with spaces to end up in other fields. Using a for loop allows us to print from the 9th field onwards instead of just the 9th field. --- packages/react-dev-utils/getProcessForPort.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-dev-utils/getProcessForPort.js b/packages/react-dev-utils/getProcessForPort.js index 932f3e5bf..f9eda7752 100644 --- a/packages/react-dev-utils/getProcessForPort.js +++ b/packages/react-dev-utils/getProcessForPort.js @@ -58,7 +58,7 @@ function getProcessCommand(processId, processDirectory) { function getDirectoryOfProcessById(processId) { return execSync( - 'lsof -p ' + processId + ' | awk \'$4=="cwd" {print $9}\'', + 'lsof -p ' + processId + ' | awk \'$4=="cwd" {for (i=9; i<=NF; i++) printf "%s ", $i}\'', execOptions ).trim(); } From 3a0b836be376575b5227a0237e8b2334a9f9ab24 Mon Sep 17 00:00:00 2001 From: Maksym Dogadailo <m.dogadailo@gmail.com> Date: Tue, 9 Jan 2018 18:30:25 +0100 Subject: [PATCH 072/122] added getProxy (#3320) * added getProxy getProxy checks proxy settings from process.env.https_proxy or Yarn (NPM) config (.npmrc) * changed yarn for npm to get https-proxy default value for https-proxy is null, not undefined like in yarn --- packages/create-react-app/createReactApp.js | 20 ++++++++++++++++++-- 1 file changed, 18 insertions(+), 2 deletions(-) diff --git a/packages/create-react-app/createReactApp.js b/packages/create-react-app/createReactApp.js index 062c9f2f6..420dde1b1 100755 --- a/packages/create-react-app/createReactApp.js +++ b/packages/create-react-app/createReactApp.js @@ -639,6 +639,21 @@ function isSafeToCreateProjectIn(root, name) { return false; } +function getProxy() { + if (process.env.https_proxy) { + return process.env.https_proxy; + } else { + try { + // Trying to read https-proxy from .npmrc + let httpsProxy = execSync('npm config get https-proxy') + .toString() + .trim(); + return httpsProxy !== 'null' ? httpsProxy : undefined; + } catch (e) { + return; + } + } +} function checkThatNpmCanReadCwd() { const cwd = process.cwd(); let childOutput = null; @@ -709,10 +724,11 @@ function checkIfOnline(useYarn) { return new Promise(resolve => { dns.lookup('registry.yarnpkg.com', err => { - if (err != null && process.env.https_proxy) { + let proxy; + if (err != null && (proxy = getProxy())) { // If a proxy is defined, we likely can't resolve external hostnames. // Try to resolve the proxy name as an indication of a connection. - dns.lookup(url.parse(process.env.https_proxy).hostname, proxyErr => { + dns.lookup(url.parse(proxy).hostname, proxyErr => { resolve(proxyErr == null); }); } else { From 11f09a16aaad3498f94d67667cb78445cac57205 Mon Sep 17 00:00:00 2001 From: Sascha Dens <SaschaDens@users.noreply.github.com> Date: Tue, 9 Jan 2018 18:34:46 +0100 Subject: [PATCH 073/122] Extend --scripts-version to include .tar.gz format (#3725) * Extend --scripts-version to include .tar.gz format * Removal of debug console.log --- packages/create-react-app/createReactApp.js | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/packages/create-react-app/createReactApp.js b/packages/create-react-app/createReactApp.js index 420dde1b1..f91608f34 100755 --- a/packages/create-react-app/createReactApp.js +++ b/packages/create-react-app/createReactApp.js @@ -85,6 +85,11 @@ const program = new commander.Command(packageJson.name) 'https://mysite.com/my-react-scripts-0.8.2.tgz' )}` ); + console.log( + ` - a .tar.gz archive: ${chalk.green( + 'https://mysite.com/my-react-scripts-0.8.2.tar.gz' + )}` + ); console.log( ` It is not needed unless you specifically want to use a fork.` ); @@ -432,7 +437,7 @@ function extractStream(stream, dest) { // Extract package name from tarball url or path. function getPackageName(installPackage) { - if (installPackage.indexOf('.tgz') > -1) { + if (installPackage.match(/^.+\.(tgz|tar\.gz)$/)) { return getTemporaryDirectory() .then(obj => { let stream; @@ -455,7 +460,7 @@ function getPackageName(installPackage) { `Could not extract the package name from the archive: ${err.message}` ); const assumedProjectName = installPackage.match( - /^.+\/(.+?)(?:-\d+.+)?\.tgz$/ + /^.+\/(.+?)(?:-\d+.+)?\.(tgz|tar\.gz)$/ )[1]; console.log( `Based on the filename, assuming it is "${chalk.cyan( From b20b96a97131345e3cc1dee82a0e1fb6703259c3 Mon Sep 17 00:00:00 2001 From: Ian Schmitz <ianschmitz@gmail.com> Date: Tue, 9 Jan 2018 09:38:33 -0800 Subject: [PATCH 074/122] Port cra.sh development task to javascript (#2309) * Port cra.sh development task to javascript * Port cra.sh development task to javascript Use absolute path when generating .tgz path --- package.json | 2 +- tasks/cra.js | 109 +++++++++++++++++++++++++++++++++++++++++++++++++++ tasks/cra.sh | 84 --------------------------------------- 3 files changed, 110 insertions(+), 85 deletions(-) create mode 100644 tasks/cra.js delete mode 100755 tasks/cra.sh diff --git a/package.json b/package.json index e912ba893..9cf2f50f1 100644 --- a/package.json +++ b/package.json @@ -3,7 +3,7 @@ "scripts": { "build": "node packages/react-scripts/scripts/build.js", "changelog": "lerna-changelog", - "create-react-app": "tasks/cra.sh", + "create-react-app": "node tasks/cra.js", "e2e": "tasks/e2e-simple.sh", "e2e:docker": "tasks/local-test.sh", "postinstall": "node bootstrap.js && cd packages/react-error-overlay/ && npm run build:prod", diff --git a/tasks/cra.js b/tasks/cra.js new file mode 100644 index 000000000..ec15d702a --- /dev/null +++ b/tasks/cra.js @@ -0,0 +1,109 @@ +#!/usr/bin/env node +/** + * Copyright (c) 2015-present, Facebook, Inc. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +'use strict'; + +const fs = require('fs'); +const path = require('path'); +const cp = require('child_process'); + +const cleanup = () => { + console.log('Cleaning up.'); + // Uncomment when snapshot testing is enabled by default: + // rm ./template/src/__snapshots__/App.test.js.snap +}; + +const handleExit = () => { + cleanup(); + console.log('Exiting without error.'); + process.exit(); +}; + +const handleError = e => { + console.error('ERROR! An error was encountered while executing\n', e); + cleanup(); + console.log('Exiting with error.'); + process.exit(1); +}; + +process.on('SIGINT', handleExit); +process.on('uncaughtException', handleError); + +// ****************************************************************************** +// Pack react- scripts so we can verify they work. +// ****************************************************************************** + +const rootDir = path.join(__dirname, '..'); +const reactScriptsDir = path.join(rootDir, 'packages', 'react-scripts'); +const packageJsonPath = path.join(reactScriptsDir, 'package.json'); +const packageJsonOrigPath = path.join(reactScriptsDir, 'package.json.orig'); + +// Install all our packages +const lernaPath = path.join(rootDir, 'node_modules', '.bin', 'lerna'); +cp.execSync(`${lernaPath} bootstrap`, { + cwd: rootDir, + stdio: 'inherit', +}); + +// Save package.json because we're going to touch it +fs.writeFileSync(packageJsonOrigPath, fs.readFileSync(packageJsonPath)); + +// Replace own dependencies (those in the`packages` dir) with the local paths +// of those packages +const replaceOwnDepsPath = path.join(__dirname, 'replace-own-deps.js'); +cp.execSync(`node ${replaceOwnDepsPath}`, { stdio: 'inherit' }); + +// Finally, pack react-scripts +// Don't redirect stdio as we want to capture the output that will be returned +// from execSync(). In this case it will be the .tgz filename. +const scriptsFileName = cp + .execSync(`npm pack`, { cwd: reactScriptsDir }) + .toString() + .trim(); +const scriptsPath = path.join( + rootDir, + 'packages', + 'react-scripts', + scriptsFileName +); + +// Restore package.json +fs.unlinkSync(packageJsonPath); +fs.writeFileSync(packageJsonPath, fs.readFileSync(packageJsonOrigPath)); +fs.unlinkSync(packageJsonOrigPath); + +// ****************************************************************************** +// Now that we have packed them, call the global CLI. +// ****************************************************************************** + +// If Yarn is installed, clean its cache because it may have cached react-scripts +try { + cp.execSync('yarn cache clean'); +} catch (e) { + // We can safely ignore this as the user doesn't have yarn installed +} + +const args = process.argv.slice(2); + +// Now run the CRA command +const craScriptPath = path.join( + rootDir, + 'packages', + 'create-react-app', + 'index.js' +); +cp.execSync( + `node ${craScriptPath} --scripts-version="${scriptsPath}" ${args.join(' ')}`, + { + cwd: rootDir, + stdio: 'inherit', + } +); + +// Cleanup +handleExit(); diff --git a/tasks/cra.sh b/tasks/cra.sh deleted file mode 100755 index 7929cdbf5..000000000 --- a/tasks/cra.sh +++ /dev/null @@ -1,84 +0,0 @@ -#!/bin/bash -# Copyright (c) 2015-present, Facebook, Inc. -# -# This source code is licensed under the MIT license found in the -# LICENSE file in the root directory of this source tree. - -# ****************************************************************************** -# This creates an app with the global CLI and `react-scripts` from the source. -# It is useful for testing the end-to-end flow locally. -# ****************************************************************************** - -# Start in tasks/ even if run from root directory -cd "$(dirname "$0")" - -function cleanup { - echo 'Cleaning up.' - # Uncomment when snapshot testing is enabled by default: - # rm ./template/src/__snapshots__/App.test.js.snap -} - -# Error messages are redirected to stderr -function handle_error { - echo "$(basename $0): ERROR! An error was encountered executing line $1." 1>&2; - cleanup - echo 'Exiting with error.' 1>&2; - exit 1 -} - -function handle_exit { - cleanup - echo 'Exiting without error.' 1>&2; - exit -} - -# Exit the script with a helpful error message when any error is encountered -trap 'set +x; handle_error $LINENO $BASH_COMMAND' ERR - -# Cleanup before exit on any termination signal -trap 'set +x; handle_exit' SIGQUIT SIGTERM SIGINT SIGKILL SIGHUP - -# Echo every command being executed -set -x - -# Go to root -cd .. -root_path=$PWD - -# ****************************************************************************** -# Pack react-scripts so we can verify they work. -# ****************************************************************************** - -# Install all our packages -"$root_path"/node_modules/.bin/lerna bootstrap - -cd packages/react-scripts - -# Save package.json because we're going to touch it -cp package.json package.json.orig - -# Replace own dependencies (those in the `packages` dir) with the local paths -# of those packages. -node "$root_path"/tasks/replace-own-deps.js - -# Finally, pack react-scripts -scripts_path="$root_path"/packages/react-scripts/`npm pack` - -# Restore package.json -rm package.json -mv package.json.orig package.json - - -# ****************************************************************************** -# Now that we have packed them, call the global CLI. -# ****************************************************************************** - -# If Yarn is installed, clean its cache because it may have cached react-scripts -yarn cache clean || true - -# Go back to the root directory and run the command from here -cd "$root_path" -node packages/create-react-app/index.js --scripts-version="$scripts_path" "$@" - -# Cleanup -cleanup From c162920e7fdcfda73e3d6129c89287cd247120b2 Mon Sep 17 00:00:00 2001 From: Dubes <Dubes@users.noreply.github.com> Date: Tue, 9 Jan 2018 23:08:54 +0530 Subject: [PATCH 075/122] Documentation to help windows contributors (#2841) * Added documentation for contributors using windows 10 Hopefully encourages devs on Windows machine to contribute * corrected the wordings a little --- CONTRIBUTING.md | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 86b392f2f..8957c0c3d 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -96,6 +96,21 @@ and then run `npm start` or `npm run build`. More detailed information are in the dedicated [README](/packages/react-scripts/fixtures/kitchensink/README.md). +## Tips for contributors using Windows + +The scripts in tasks folder and other scripts in `package.json` will not work in Windows out of the box. However, using [Bash on windows](https://msdn.microsoft.com/en-us/commandline/wsl/about) makes it easier to use those scripts without any workarounds. The steps to do so are detailed below: + +### Install Bash on Ubuntu on Windows + +A good step by step guide can be found [here](https://www.howtogeek.com/249966/how-to-install-and-use-the-linux-bash-shell-on-windows-10/) + +### Install Node.js and npm +Even if you have node and npm installed on your windows, it would not be accessible from the bash shell. You would have to install it again. Installing via [`nvm`](https://github.com/creationix/nvm#install-script) is recommended. + +### Line endings + +By default git would use `CRLF` line endings which would cause the scripts to fail. You can change it for this repo only by setting `autocrlf` to false by running `git config core.autocrlf false`. You can also enable it for all your repos by using the `--global` flag if you wish to do so. + ## Cutting a Release 1. Tag all merged pull requests that go into the release with the relevant milestone. Each merged PR should also be labeled with one of the [labels](https://github.com/facebookincubator/create-react-app/labels) named `tag: ...` to indicate what kind of change it is. From 72b6eb8c3c65e6ed0f2413708069287311a386c2 Mon Sep 17 00:00:00 2001 From: Jonathan <jonathan@xgecko.com> Date: Tue, 9 Jan 2018 09:41:10 -0800 Subject: [PATCH 076/122] Cleaning up printHostingInstructions a bit (#3036) * Replacing literal 'build' with `buildFolder` variable * Cleaning up the printHostingInstructions a bit * Fixing undefined variable --- .../printHostingInstructions.js | 159 ++++++++---------- 1 file changed, 73 insertions(+), 86 deletions(-) diff --git a/packages/react-dev-utils/printHostingInstructions.js b/packages/react-dev-utils/printHostingInstructions.js index 4a080dba2..2371d6d60 100644 --- a/packages/react-dev-utils/printHostingInstructions.js +++ b/packages/react-dev-utils/printHostingInstructions.js @@ -19,60 +19,32 @@ function printHostingInstructions( buildFolder, useYarn ) { - const publicPathname = url.parse(publicPath).pathname; - if (publicUrl && publicUrl.indexOf('.github.io/') !== -1) { + if (publicUrl && publicUrl.includes('.github.io/')) { // "homepage": "http://user.github.io/project" - console.log( - `The project was built assuming it is hosted at ${chalk.green( - publicPathname - )}.` - ); - console.log( - `You can control this with the ${chalk.green( - 'homepage' - )} field in your ${chalk.cyan('package.json')}.` - ); - console.log(); - console.log(`The ${chalk.cyan('build')} folder is ready to be deployed.`); - console.log(`To publish it at ${chalk.green(publicUrl)}, run:`); - // If script deploy has been added to package.json, skip the instructions - if (typeof appPackage.scripts.deploy === 'undefined') { - console.log(); - if (useYarn) { - console.log(` ${chalk.cyan('yarn')} add --dev gh-pages`); - } else { - console.log(` ${chalk.cyan('npm')} install --save-dev gh-pages`); - } - console.log(); - console.log( - `Add the following script in your ${chalk.cyan('package.json')}.` - ); - console.log(); - console.log(` ${chalk.dim('// ...')}`); - console.log(` ${chalk.yellow('"scripts"')}: {`); - console.log(` ${chalk.dim('// ...')}`); - console.log( - ` ${chalk.yellow('"predeploy"')}: ${chalk.yellow( - '"npm run build",' - )}` - ); - console.log( - ` ${chalk.yellow('"deploy"')}: ${chalk.yellow( - '"gh-pages -d build"' - )}` - ); - console.log(' }'); - console.log(); - console.log('Then run:'); - } - console.log(); - console.log(` ${chalk.cyan(useYarn ? 'yarn' : 'npm')} run deploy`); - console.log(); + const publicPathname = url.parse(publicPath).pathname; + const hasDeployScript = typeof appPackage.scripts.deploy !== 'undefined'; + printBaseMessage(buildFolder, publicPathname); + + printDeployInstructions(publicUrl, hasDeployScript, useYarn); + } else if (publicPath !== '/') { // "homepage": "http://mywebsite.com/project" + printBaseMessage(buildFolder, publicPath); + + } else { + // "homepage": "http://mywebsite.com" + // or no homepage + printBaseMessage(buildFolder, publicUrl); + + printStaticServerInstructions(buildFolder, useYarn); + } + console.log(); +} + +function printBaseMessage(buildFolder, hostingLocation) { console.log( `The project was built assuming it is hosted at ${chalk.green( - publicPath + hostingLocation || 'the server root' )}.` ); console.log( @@ -80,57 +52,72 @@ function printHostingInstructions( 'homepage' )} field in your ${chalk.cyan('package.json')}.` ); - console.log(); - console.log(`The ${chalk.cyan('build')} folder is ready to be deployed.`); - console.log(); - } else { - if (publicUrl) { - // "homepage": "http://mywebsite.com" - console.log( - `The project was built assuming it is hosted at ${chalk.green( - publicUrl - )}.` - ); - console.log( - `You can control this with the ${chalk.green( - 'homepage' - )} field in your ${chalk.cyan('package.json')}.` - ); - console.log(); - } else { - // no homepage - console.log( - 'The project was built assuming it is hosted at the server root.' - ); - console.log( - `To override this, specify the ${chalk.green( - 'homepage' - )} in your ${chalk.cyan('package.json')}.` - ); + + if (!hostingLocation) { console.log('For example, add this to build it for GitHub Pages:'); console.log(); + console.log( ` ${chalk.green('"homepage"')} ${chalk.cyan(':')} ${chalk.green( '"http://myname.github.io/myapp"' )}${chalk.cyan(',')}` ); - console.log(); } + console.log(); + console.log( `The ${chalk.cyan(buildFolder)} folder is ready to be deployed.` ); - console.log('You may serve it with a static server:'); - console.log(); - if (!fs.existsSync(`${globalModules}/serve`)) { - if (useYarn) { - console.log(` ${chalk.cyan('yarn')} global add serve`); - } else { - console.log(` ${chalk.cyan('npm')} install -g serve`); - } +} + +function printDeployInstructions(publicUrl, hasDeployScript, useYarn) { + console.log(`To publish it at ${chalk.green(publicUrl)}, run:`); + console.log(); + + // If script deploy has been added to package.json, skip the instructions + if (!hasDeployScript) { + if (useYarn) { + console.log(` ${chalk.cyan('yarn')} add --dev gh-pages`); + } else { + console.log(` ${chalk.cyan('npm')} install --save-dev gh-pages`); } - console.log(` ${chalk.cyan('serve')} -s ${buildFolder}`); console.log(); + + console.log(`Add the following script in your ${chalk.cyan( + 'package.json' + )}.`); + console.log(); + + console.log(` ${chalk.dim('// ...')}`); + console.log(` ${chalk.yellow('"scripts"')}: {`); + console.log(` ${chalk.dim('// ...')}`); + console.log(` ${chalk.yellow('"predeploy"')}: ${chalk.yellow( + '"npm run build",' + )}`); + console.log(` ${chalk.yellow('"deploy"')}: ${chalk.yellow( + '"gh-pages -d build"' + )}`); + console.log(' }'); + console.log(); + + console.log('Then run:'); + console.log(); + } + console.log(` ${chalk.cyan(useYarn ? 'yarn' : 'npm')} run deploy`); +} + +function printStaticServerInstructions(buildFolder, useYarn) { + console.log('You may serve it with a static server:'); + console.log(); + + if (!fs.existsSync(`${globalModules}/serve`)) { + if (useYarn) { + console.log(` ${chalk.cyan('yarn')} global add serve`); + } else { + console.log(` ${chalk.cyan('npm')} install -g serve`); + } } + console.log(` ${chalk.cyan('serve')} -s ${buildFolder}`); } module.exports = printHostingInstructions; From 91d968f916ee2b9c07444eb32619f76a62ffb852 Mon Sep 17 00:00:00 2001 From: Eli Perelman <eli@eliperelman.com> Date: Tue, 9 Jan 2018 17:48:44 -0600 Subject: [PATCH 077/122] Update README.md to note Neutrino's support of react components (#3729) --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index a09383382..d6945417a 100644 --- a/README.md +++ b/README.md @@ -190,7 +190,7 @@ Here’s a few common cases where you might want to try something else: * If you need to **integrate React code with a server-side template framework** like Rails or Django, or if you’re **not building a single-page app**, consider using [nwb](https://github.com/insin/nwb) or [Neutrino](https://neutrino.js.org/) which are more flexible. -* If you need to **publish a React component**, [nwb](https://github.com/insin/nwb) can [also do this](https://github.com/insin/nwb#react-components-and-libraries). +* If you need to **publish a React component**, [nwb](https://github.com/insin/nwb) can [also do this](https://github.com/insin/nwb#react-components-and-libraries), as well as [Neutrino's react-components preset](https://neutrino.js.org/packages/react-components/). * If you want to do **server rendering** with React and Node.js, check out [Next.js](https://github.com/zeit/next.js/) or [Razzle](https://github.com/jaredpalmer/razzle). Create React App is agnostic of the backend, and just produces static HTML/JS/CSS bundles. From 0ec41350db21a2e87d6d8288ecacca45227f368a Mon Sep 17 00:00:00 2001 From: Siddharth Doshi <sidoshi510@gmail.com> Date: Wed, 10 Jan 2018 17:30:03 +0530 Subject: [PATCH 078/122] Use proxy for all request methods other than GET (#3726) * Use proxy for all request methods other than GET * Add comment --- packages/react-dev-utils/WebpackDevServerUtils.js | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/packages/react-dev-utils/WebpackDevServerUtils.js b/packages/react-dev-utils/WebpackDevServerUtils.js index f19582e12..4add9f9c1 100644 --- a/packages/react-dev-utils/WebpackDevServerUtils.js +++ b/packages/react-dev-utils/WebpackDevServerUtils.js @@ -317,15 +317,19 @@ function prepareProxy(proxy, appPublicFolder) { // For single page apps, we generally want to fallback to /index.html. // However we also want to respect `proxy` for API calls. // So if `proxy` is specified as a string, we need to decide which fallback to use. - // We use a heuristic: if request `accept`s text/html, we pick /index.html. + // We use a heuristic: We want to proxy all the requests that are not meant + // for static assets and as all the requests for static assets will be using + // `GET` method, we can proxy all non-`GET` requests. + // For `GET` requests, if request `accept`s text/html, we pick /index.html. // Modern browsers include text/html into `accept` header when navigating. // However API calls like `fetch()` won’t generally accept text/html. // If this heuristic doesn’t work well for you, use a custom `proxy` object. context: function(pathname, req) { return ( - mayProxy(pathname) && - req.headers.accept && - req.headers.accept.indexOf('text/html') === -1 + req.method !== 'GET' || + (mayProxy(pathname) && + req.headers.accept && + req.headers.accept.indexOf('text/html') === -1) ); }, onProxyReq: proxyReq => { From d49744f04cffa969f1b69e90503eab0d12b8a0e7 Mon Sep 17 00:00:00 2001 From: Vladimir Tolstikov <bobrosoft@yandex.ru> Date: Wed, 10 Jan 2018 17:02:45 +0400 Subject: [PATCH 079/122] docs: add info about HTTP caching headers into Firebase section (#3659) --- packages/react-scripts/template/README.md | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index 17b85756b..e5c0cf6bf 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -2086,6 +2086,18 @@ Then run the `firebase init` command from your project’s root. You need to cho ✔ Firebase initialization complete! ``` +IMPORTANT: you need to set proper HTTP caching headers for `service-worker.js` file in `firebase.json` file or you will not be able to see changes after first deployment ([issue #2440](https://github.com/facebookincubator/create-react-app/issues/2440)). It should be added inside `"hosting"` key like next: + +``` +{ + "hosting": { + ... + "headers": [ + {"source": "/service-worker.js", "headers": [{"key": "Cache-Control", "value": "no-cache"}]} + ] + ... +``` + Now, after you create a production build with `npm run build`, you can deploy it by running `firebase deploy`. ```sh From 70b3a4db89f0f912824a8ba707305e4944da417a Mon Sep 17 00:00:00 2001 From: Dan Abramov <dan.abramov@gmail.com> Date: Wed, 10 Jan 2018 16:24:27 +0000 Subject: [PATCH 080/122] Lint against files with old license (#3361) * Lint against files with old license * Update e2e-simple.sh * Update e2e-simple.sh * oh no --- tasks/e2e-simple.sh | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/tasks/e2e-simple.sh b/tasks/e2e-simple.sh index 9e51b0080..342034077 100755 --- a/tasks/e2e-simple.sh +++ b/tasks/e2e-simple.sh @@ -88,6 +88,19 @@ set -x cd .. root_path=$PWD +# Make sure we don't introduce accidental references to PATENTS. +EXPECTED='packages/react-error-overlay/fixtures/bundle.mjs +packages/react-error-overlay/fixtures/bundle.mjs.map +packages/react-error-overlay/fixtures/bundle_u.mjs +packages/react-error-overlay/fixtures/bundle_u.mjs.map +tasks/e2e-simple.sh' +ACTUAL=$(git grep -l PATENTS) +if [ "$EXPECTED" != "$ACTUAL" ]; then + echo "PATENTS crept into some new files?" + diff -u <(echo "$EXPECTED") <(echo "$ACTUAL") || true + exit 1 +fi + # Clear cache to avoid issues with incorrect packages being used if hash yarnpkg 2>/dev/null then From 7fd37d35ed61ad7764b9f3e32527617aefeea61b Mon Sep 17 00:00:00 2001 From: Ade Viankakrisna Fadlil <viankakrisna@gmail.com> Date: Wed, 10 Jan 2018 23:51:12 +0700 Subject: [PATCH 081/122] add link to deployment docs after build (#3104) * add link to deployment docs after build * Update printHostingInstructions.js --- packages/react-dev-utils/printHostingInstructions.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/react-dev-utils/printHostingInstructions.js b/packages/react-dev-utils/printHostingInstructions.js index 2371d6d60..aa440377c 100644 --- a/packages/react-dev-utils/printHostingInstructions.js +++ b/packages/react-dev-utils/printHostingInstructions.js @@ -68,6 +68,11 @@ function printBaseMessage(buildFolder, hostingLocation) { console.log( `The ${chalk.cyan(buildFolder)} folder is ready to be deployed.` ); + console.log() + console.log('Find out more about deployment here:'); + console.log(); + console.log(` ${chalk.yellow('http://bit.ly/2vY88Kr')}`); + console.log(); } function printDeployInstructions(publicUrl, hasDeployScript, useYarn) { From 7b881f12e398fc6bcfdf39a0a3fafde8b48bac7e Mon Sep 17 00:00:00 2001 From: Ade Viankakrisna Fadlil <viankakrisna@gmail.com> Date: Thu, 11 Jan 2018 00:43:32 +0700 Subject: [PATCH 082/122] move the link for deployment to the bottom (#3736) --- .../printHostingInstructions.js | 74 +++++++++---------- 1 file changed, 36 insertions(+), 38 deletions(-) diff --git a/packages/react-dev-utils/printHostingInstructions.js b/packages/react-dev-utils/printHostingInstructions.js index aa440377c..4f761dfb0 100644 --- a/packages/react-dev-utils/printHostingInstructions.js +++ b/packages/react-dev-utils/printHostingInstructions.js @@ -26,11 +26,9 @@ function printHostingInstructions( printBaseMessage(buildFolder, publicPathname); printDeployInstructions(publicUrl, hasDeployScript, useYarn); - } else if (publicPath !== '/') { // "homepage": "http://mywebsite.com/project" printBaseMessage(buildFolder, publicPath); - } else { // "homepage": "http://mywebsite.com" // or no homepage @@ -39,40 +37,36 @@ function printHostingInstructions( printStaticServerInstructions(buildFolder, useYarn); } console.log(); + console.log('Find out more about deployment here:'); + console.log(); + console.log(` ${chalk.yellow('http://bit.ly/2vY88Kr')}`); + console.log(); } function printBaseMessage(buildFolder, hostingLocation) { - console.log( - `The project was built assuming it is hosted at ${chalk.green( - hostingLocation || 'the server root' - )}.` - ); - console.log( - `You can control this with the ${chalk.green( - 'homepage' - )} field in your ${chalk.cyan('package.json')}.` - ); - - if (!hostingLocation) { - console.log('For example, add this to build it for GitHub Pages:'); - console.log(); - - console.log( - ` ${chalk.green('"homepage"')} ${chalk.cyan(':')} ${chalk.green( - '"http://myname.github.io/myapp"' - )}${chalk.cyan(',')}` - ); - } + console.log( + `The project was built assuming it is hosted at ${chalk.green( + hostingLocation || 'the server root' + )}.` + ); + console.log( + `You can control this with the ${chalk.green( + 'homepage' + )} field in your ${chalk.cyan('package.json')}.` + ); + + if (!hostingLocation) { + console.log('For example, add this to build it for GitHub Pages:'); console.log(); console.log( - `The ${chalk.cyan(buildFolder)} folder is ready to be deployed.` + ` ${chalk.green('"homepage"')} ${chalk.cyan(':')} ${chalk.green( + '"http://myname.github.io/myapp"' + )}${chalk.cyan(',')}` ); - console.log() - console.log('Find out more about deployment here:'); - console.log(); - console.log(` ${chalk.yellow('http://bit.ly/2vY88Kr')}`); - console.log(); + } + console.log(); + console.log(`The ${chalk.cyan(buildFolder)} folder is ready to be deployed.`); } function printDeployInstructions(publicUrl, hasDeployScript, useYarn) { @@ -88,20 +82,24 @@ function printDeployInstructions(publicUrl, hasDeployScript, useYarn) { } console.log(); - console.log(`Add the following script in your ${chalk.cyan( - 'package.json' - )}.`); + console.log( + `Add the following script in your ${chalk.cyan('package.json')}.` + ); console.log(); console.log(` ${chalk.dim('// ...')}`); console.log(` ${chalk.yellow('"scripts"')}: {`); console.log(` ${chalk.dim('// ...')}`); - console.log(` ${chalk.yellow('"predeploy"')}: ${chalk.yellow( - '"npm run build",' - )}`); - console.log(` ${chalk.yellow('"deploy"')}: ${chalk.yellow( - '"gh-pages -d build"' - )}`); + console.log( + ` ${chalk.yellow('"predeploy"')}: ${chalk.yellow( + '"npm run build",' + )}` + ); + console.log( + ` ${chalk.yellow('"deploy"')}: ${chalk.yellow( + '"gh-pages -d build"' + )}` + ); console.log(' }'); console.log(); From a03524c594062a8accb3e1a404f03fbc68fb44b1 Mon Sep 17 00:00:00 2001 From: Dan Abramov <dan.abramov@gmail.com> Date: Wed, 10 Jan 2018 21:55:18 +0000 Subject: [PATCH 083/122] Use latest npm in e2e tests (#3735) * Use latest npm in e2e tests * Keep default npm version in "simple" test * Try to fix CI by using a version that supports Yarn --- tasks/e2e-installs.sh | 17 +++++++---------- tasks/e2e-kitchensink.sh | 5 +---- tasks/e2e-simple.sh | 4 ---- 3 files changed, 8 insertions(+), 18 deletions(-) diff --git a/tasks/e2e-installs.sh b/tasks/e2e-installs.sh index 489cadb37..8cd3c0ef6 100755 --- a/tasks/e2e-installs.sh +++ b/tasks/e2e-installs.sh @@ -93,10 +93,7 @@ fi if hash npm 2>/dev/null then - # npm 5 is too buggy right now - if [ $(npm -v | head -c 1) -eq 5 ]; then - npm i -g npm@^4.x - fi; + npm i -g npm@latest npm cache clean || npm cache verify fi @@ -137,12 +134,12 @@ npm install "$cli_path" # ****************************************************************************** cd "$temp_app_path" -create_react_app --scripts-version=0.4.0 test-app-version-number +create_react_app --scripts-version=1.0.17 test-app-version-number cd test-app-version-number # Check corresponding scripts version is installed. exists node_modules/react-scripts -grep '"version": "0.4.0"' node_modules/react-scripts/package.json +grep '"version": "1.0.17"' node_modules/react-scripts/package.json checkDependencies # ****************************************************************************** @@ -150,13 +147,13 @@ checkDependencies # ****************************************************************************** cd "$temp_app_path" -create_react_app --use-npm --scripts-version=0.4.0 test-use-npm-flag +create_react_app --use-npm --scripts-version=1.0.17 test-use-npm-flag cd test-use-npm-flag # Check corresponding scripts version is installed. exists node_modules/react-scripts [ ! -e "yarn.lock" ] && echo "yarn.lock correctly does not exist" -grep '"version": "0.4.0"' node_modules/react-scripts/package.json +grep '"version": "1.0.17"' node_modules/react-scripts/package.json checkDependencies # ****************************************************************************** @@ -164,12 +161,12 @@ checkDependencies # ****************************************************************************** cd "$temp_app_path" -create_react_app --scripts-version=https://registry.npmjs.org/react-scripts/-/react-scripts-0.4.0.tgz test-app-tarball-url +create_react_app --scripts-version=https://registry.npmjs.org/react-scripts/-/react-scripts-1.0.17.tgz test-app-tarball-url cd test-app-tarball-url # Check corresponding scripts version is installed. exists node_modules/react-scripts -grep '"version": "0.4.0"' node_modules/react-scripts/package.json +grep '"version": "1.0.17"' node_modules/react-scripts/package.json checkDependencies # ****************************************************************************** diff --git a/tasks/e2e-kitchensink.sh b/tasks/e2e-kitchensink.sh index 547821b65..26c2ed083 100755 --- a/tasks/e2e-kitchensink.sh +++ b/tasks/e2e-kitchensink.sh @@ -110,10 +110,7 @@ fi if hash npm 2>/dev/null then - # npm 5 is too buggy right now - if [ $(npm -v | head -c 1) -eq 5 ]; then - npm i -g npm@^4.x - fi; + npm i -g npm@latest npm cache clean || npm cache verify fi diff --git a/tasks/e2e-simple.sh b/tasks/e2e-simple.sh index 342034077..bb8f9b123 100755 --- a/tasks/e2e-simple.sh +++ b/tasks/e2e-simple.sh @@ -122,10 +122,6 @@ fi if hash npm 2>/dev/null then - # npm 5 is too buggy right now - if [ $(npm -v | head -c 1) -eq 5 ]; then - npm i -g npm@^4.x - fi; npm cache clean || npm cache verify fi From dcd8ea6b5cf654eb452e019b8f90cd2d77ca3829 Mon Sep 17 00:00:00 2001 From: Dan Abramov <dan.abramov@gmail.com> Date: Wed, 10 Jan 2018 23:30:59 +0000 Subject: [PATCH 084/122] Always use Yarn on CI (#3738) --- .travis.yml | 6 ------ tasks/e2e-installs.sh | 7 ------- tasks/e2e-kitchensink.sh | 14 +------------- tasks/e2e-simple.sh | 14 +------------- tasks/local-test.sh | 6 ------ 5 files changed, 2 insertions(+), 45 deletions(-) diff --git a/.travis.yml b/.travis.yml index e2afbfa97..e970cf01c 100644 --- a/.travis.yml +++ b/.travis.yml @@ -15,8 +15,6 @@ script: - 'if [ $TEST_SUITE = "installs" ]; then tasks/e2e-installs.sh; fi' - 'if [ $TEST_SUITE = "kitchensink" ]; then tasks/e2e-kitchensink.sh; fi' env: - global: - - USE_YARN=no matrix: - TEST_SUITE=simple - TEST_SUITE=installs @@ -25,7 +23,3 @@ matrix: include: - node_js: 0.10 env: TEST_SUITE=simple -# There's a weird Yarn/Lerna bug related to prerelease versions. -# TODO: reenable after we ship 1.0. -# - node_js: 6 -# env: USE_YARN=yes TEST_SUITE=simple diff --git a/tasks/e2e-installs.sh b/tasks/e2e-installs.sh index 8cd3c0ef6..402ab7bc2 100755 --- a/tasks/e2e-installs.sh +++ b/tasks/e2e-installs.sh @@ -103,13 +103,6 @@ grep -v "postinstall" package.json > temp && mv temp package.json npm install mv package.json.bak package.json -if [ "$USE_YARN" = "yes" ] -then - # Install Yarn so that the test can use it to install packages. - npm install -g yarn - yarn cache clean -fi - # We removed the postinstall, so do it manually node bootstrap.js diff --git a/tasks/e2e-kitchensink.sh b/tasks/e2e-kitchensink.sh index 26c2ed083..ddcd4873f 100755 --- a/tasks/e2e-kitchensink.sh +++ b/tasks/e2e-kitchensink.sh @@ -58,12 +58,7 @@ function install_package { # Install `dependencies` cd node_modules/$pkg/ - if [ "$USE_YARN" = "yes" ] - then - yarn install --production - else - npm install --only=production - fi + npm install --only=production # Remove our packages to ensure side-by-side versions are used (which we link) rm -rf node_modules/{babel-preset-react-app,eslint-config-react-app,react-dev-utils,react-error-overlay,react-scripts} cd ../.. @@ -120,13 +115,6 @@ grep -v "postinstall" package.json > temp && mv temp package.json npm install mv package.json.bak package.json -if [ "$USE_YARN" = "yes" ] -then - # Install Yarn so that the test can use it to install packages. - npm install -g yarn - yarn cache clean -fi - # We removed the postinstall, so do it manually node bootstrap.js diff --git a/tasks/e2e-simple.sh b/tasks/e2e-simple.sh index bb8f9b123..15a74e13a 100755 --- a/tasks/e2e-simple.sh +++ b/tasks/e2e-simple.sh @@ -57,12 +57,7 @@ function install_package { # Install `dependencies` cd node_modules/$pkg/ - if [ "$USE_YARN" = "yes" ] - then - yarn install --production - else - npm install --only=production - fi + npm install --only=production # Remove our packages to ensure side-by-side versions are used (which we link) rm -rf node_modules/{babel-preset-react-app,eslint-config-react-app,react-dev-utils,react-error-overlay,react-scripts} cd ../.. @@ -147,13 +142,6 @@ then [[ $err_output =~ You\ are\ running\ Node ]] && exit 0 || exit 1 fi -if [ "$USE_YARN" = "yes" ] -then - # Install Yarn so that the test can use it to install packages. - npm install -g yarn - yarn cache clean -fi - # We removed the postinstall, so do it manually here node bootstrap.js diff --git a/tasks/local-test.sh b/tasks/local-test.sh index 8ce44b640..0416fb5d9 100755 --- a/tasks/local-test.sh +++ b/tasks/local-test.sh @@ -11,7 +11,6 @@ function print_help { echo " --node-version <version> the node version to use while testing [6]" echo " --git-branch <branch> the git branch to checkout for testing [the current one]" echo " --test-suite <suite> which test suite to use ('simple', installs', 'kitchensink', 'all') ['all']" - echo " --yarn if present, use yarn as the package manager" echo " --interactive gain a bash shell after the test run" echo " --help print this message and exit" echo "" @@ -22,7 +21,6 @@ cd $(dirname $0) node_version=6 current_git_branch=`git rev-parse --abbrev-ref HEAD` git_branch=${current_git_branch} -use_yarn=no test_suite=all interactive=false @@ -36,9 +34,6 @@ while [ "$1" != "" ]; do shift git_branch=$1 ;; - "--yarn") - use_yarn=yes - ;; "--test-suite") shift test_suite=$1 @@ -107,7 +102,6 @@ CMD docker run \ --env CI=true \ --env NPM_CONFIG_QUIET=true \ - --env USE_YARN=${use_yarn} \ --tty \ --user node \ --volume ${PWD}/..:/var/create-react-app \ From d29d41b3c69d0164ba80818cb6ab8e149327ddec Mon Sep 17 00:00:00 2001 From: Dan Abramov <dan.abramov@gmail.com> Date: Thu, 11 Jan 2018 00:54:49 +0000 Subject: [PATCH 085/122] Try to use Yarn in more E2E scripts (#3739) * Try to use Yarn in more E2E scripts * Keep using npm pack * Maybe this will fix Windows? * Try this --- tasks/e2e-installs.sh | 37 +++--------------- tasks/e2e-kitchensink.sh | 55 ++++++--------------------- tasks/e2e-simple.sh | 82 ++++++++++++---------------------------- 3 files changed, 42 insertions(+), 132 deletions(-) diff --git a/tasks/e2e-installs.sh b/tasks/e2e-installs.sh index 402ab7bc2..d3c3bcf83 100755 --- a/tasks/e2e-installs.sh +++ b/tasks/e2e-installs.sh @@ -72,42 +72,17 @@ set -x cd .. root_path=$PWD -# Clear cache to avoid issues with incorrect packages being used -if hash yarnpkg 2>/dev/null -then - # AppVeyor uses an old version of yarn. - # Once updated to 0.24.3 or above, the workaround can be removed - # and replaced with `yarnpkg cache clean` - # Issues: - # https://github.com/yarnpkg/yarn/issues/2591 - # https://github.com/appveyor/ci/issues/1576 - # https://github.com/facebookincubator/create-react-app/pull/2400 - # When removing workaround, you may run into - # https://github.com/facebookincubator/create-react-app/issues/2030 - case "$(uname -s)" in - *CYGWIN*|MSYS*|MINGW*) yarn=yarn.cmd;; - *) yarn=yarnpkg;; - esac - $yarn cache clean -fi - -if hash npm 2>/dev/null -then - npm i -g npm@latest - npm cache clean || npm cache verify -fi - # Prevent bootstrap, we only want top-level dependencies cp package.json package.json.bak grep -v "postinstall" package.json > temp && mv temp package.json -npm install +yarn mv package.json.bak package.json # We removed the postinstall, so do it manually node bootstrap.js cd packages/react-error-overlay/ -npm run build:prod +yarn run build:prod cd ../.. # ****************************************************************************** @@ -120,7 +95,7 @@ cli_path=$PWD/`npm pack` # Install the CLI in a temporary location cd "$temp_cli_path" -npm install "$cli_path" +yarn add "$cli_path" # ****************************************************************************** # Test --scripts-version with a version number @@ -222,20 +197,20 @@ cd test-app-nested-paths-t1 mkdir -p test-app-nested-paths-t1/aa/bb/cc/dd create_react_app test-app-nested-paths-t1/aa/bb/cc/dd cd test-app-nested-paths-t1/aa/bb/cc/dd -npm start -- --smoke-test +yarn start --smoke-test # Testing a path that does not exist cd "$temp_app_path" create_react_app test-app-nested-paths-t2/aa/bb/cc/dd cd test-app-nested-paths-t2/aa/bb/cc/dd -npm start -- --smoke-test +yarn start --smoke-test # Testing a path that is half exists cd "$temp_app_path" mkdir -p test-app-nested-paths-t3/aa create_react_app test-app-nested-paths-t3/aa/bb/cc/dd cd test-app-nested-paths-t3/aa/bb/cc/dd -npm start -- --smoke-test +yarn start --smoke-test # Cleanup cleanup diff --git a/tasks/e2e-kitchensink.sh b/tasks/e2e-kitchensink.sh index ddcd4873f..085f62f5b 100755 --- a/tasks/e2e-kitchensink.sh +++ b/tasks/e2e-kitchensink.sh @@ -58,7 +58,7 @@ function install_package { # Install `dependencies` cd node_modules/$pkg/ - npm install --only=production + yarn --production # Remove our packages to ensure side-by-side versions are used (which we link) rm -rf node_modules/{babel-preset-react-app,eslint-config-react-app,react-dev-utils,react-error-overlay,react-scripts} cd ../.. @@ -84,42 +84,17 @@ set -x cd .. root_path=$PWD -# Clear cache to avoid issues with incorrect packages being used -if hash yarnpkg 2>/dev/null -then - # AppVeyor uses an old version of yarn. - # Once updated to 0.24.3 or above, the workaround can be removed - # and replaced with `yarnpkg cache clean` - # Issues: - # https://github.com/yarnpkg/yarn/issues/2591 - # https://github.com/appveyor/ci/issues/1576 - # https://github.com/facebookincubator/create-react-app/pull/2400 - # When removing workaround, you may run into - # https://github.com/facebookincubator/create-react-app/issues/2030 - case "$(uname -s)" in - *CYGWIN*|MSYS*|MINGW*) yarn=yarn.cmd;; - *) yarn=yarnpkg;; - esac - $yarn cache clean -fi - -if hash npm 2>/dev/null -then - npm i -g npm@latest - npm cache clean || npm cache verify -fi - # Prevent bootstrap, we only want top-level dependencies cp package.json package.json.bak grep -v "postinstall" package.json > temp && mv temp package.json -npm install +yarn mv package.json.bak package.json # We removed the postinstall, so do it manually node bootstrap.js cd packages/react-error-overlay/ -npm run build:prod +yarn build:prod cd ../.. # ****************************************************************************** @@ -153,7 +128,7 @@ mv package.json.orig package.json # Install the CLI in a temporary location cd "$temp_cli_path" -npm install "$cli_path" +yarn add "$cli_path" # Install the app in a temporary location cd $temp_app_path @@ -161,7 +136,7 @@ create_react_app --scripts-version="$scripts_path" --internal-testing-template=" # Install the test module cd "$temp_module_path" -npm install test-integrity@^2.0.1 +yarn add test-integrity@^2.0.1 # ****************************************************************************** # Now that we used create-react-app to create an app depending on react-scripts, @@ -184,7 +159,7 @@ install_package "$temp_module_path/node_modules/test-integrity" REACT_APP_SHELL_ENV_MESSAGE=fromtheshell \ NODE_PATH=src \ PUBLIC_URL=http://www.example.org/spa/ \ - npm run build + yarn build # Check for expected output exists build/*.html @@ -195,14 +170,14 @@ REACT_APP_SHELL_ENV_MESSAGE=fromtheshell \ CI=true \ NODE_PATH=src \ NODE_ENV=test \ - npm test -- --no-cache --testPathPattern=src + yarn test --no-cache --testPathPattern=src # Test "development" environment tmp_server_log=`mktemp` PORT=3001 \ REACT_APP_SHELL_ENV_MESSAGE=fromtheshell \ NODE_PATH=src \ - nohup npm start &>$tmp_server_log & + nohup yarn start &>$tmp_server_log & grep -q 'You can now view' <(tail -f $tmp_server_log) E2E_URL="http://localhost:3001" \ REACT_APP_SHELL_ENV_MESSAGE=fromtheshell \ @@ -225,14 +200,6 @@ E2E_FILE=./build/index.html \ # Eject... echo yes | npm run eject -# Ensure Yarn is ran after eject; at the time of this commit, we don't run Yarn -# after ejecting. Soon, we may only skip Yarn on Windows. Let's try to remove -# this in the near future. -if hash yarnpkg 2>/dev/null -then - yarn install --check-files -fi - # ...but still link to the local packages install_package "$root_path"/packages/babel-preset-react-app install_package "$root_path"/packages/eslint-config-react-app @@ -246,7 +213,7 @@ install_package "$temp_module_path/node_modules/test-integrity" REACT_APP_SHELL_ENV_MESSAGE=fromtheshell \ NODE_PATH=src \ PUBLIC_URL=http://www.example.org/spa/ \ - npm run build + yarn build # Check for expected output exists build/*.html @@ -257,14 +224,14 @@ REACT_APP_SHELL_ENV_MESSAGE=fromtheshell \ CI=true \ NODE_PATH=src \ NODE_ENV=test \ - npm test -- --no-cache --testPathPattern=src + yarn test --no-cache --testPathPattern=src # Test "development" environment tmp_server_log=`mktemp` PORT=3002 \ REACT_APP_SHELL_ENV_MESSAGE=fromtheshell \ NODE_PATH=src \ - nohup npm start &>$tmp_server_log & + nohup yarn start &>$tmp_server_log & grep -q 'You can now view' <(tail -f $tmp_server_log) E2E_URL="http://localhost:3002" \ REACT_APP_SHELL_ENV_MESSAGE=fromtheshell \ diff --git a/tasks/e2e-simple.sh b/tasks/e2e-simple.sh index 15a74e13a..449c5f3ba 100755 --- a/tasks/e2e-simple.sh +++ b/tasks/e2e-simple.sh @@ -57,7 +57,7 @@ function install_package { # Install `dependencies` cd node_modules/$pkg/ - npm install --only=production + yarn --production # Remove our packages to ensure side-by-side versions are used (which we link) rm -rf node_modules/{babel-preset-react-app,eslint-config-react-app,react-dev-utils,react-error-overlay,react-scripts} cd ../.. @@ -96,39 +96,15 @@ if [ "$EXPECTED" != "$ACTUAL" ]; then exit 1 fi -# Clear cache to avoid issues with incorrect packages being used -if hash yarnpkg 2>/dev/null -then - # AppVeyor uses an old version of yarn. - # Once updated to 0.24.3 or above, the workaround can be removed - # and replaced with `yarnpkg cache clean` - # Issues: - # https://github.com/yarnpkg/yarn/issues/2591 - # https://github.com/appveyor/ci/issues/1576 - # https://github.com/facebookincubator/create-react-app/pull/2400 - # When removing workaround, you may run into - # https://github.com/facebookincubator/create-react-app/issues/2030 - case "$(uname -s)" in - *CYGWIN*|MSYS*|MINGW*) yarn=yarn.cmd;; - *) yarn=yarnpkg;; - esac - $yarn cache clean -fi - -if hash npm 2>/dev/null -then - npm cache clean || npm cache verify -fi - # Prevent bootstrap, we only want top-level dependencies cp package.json package.json.bak grep -v "postinstall" package.json > temp && mv temp package.json -npm install +yarn mv package.json.bak package.json # We need to install create-react-app deps to test it cd "$root_path"/packages/create-react-app -npm install +yarn cd "$root_path" # If the node version is < 6, the script should just give an error. @@ -153,11 +129,11 @@ node bootstrap.js ./node_modules/.bin/eslint --max-warnings 0 packages/react-scripts/ cd packages/react-error-overlay/ ./node_modules/.bin/eslint --max-warnings 0 src/ -npm test -npm run build:prod +yarn test +yarn build:prod cd ../.. cd packages/react-dev-utils/ -npm test +yarn test cd ../.. # ****************************************************************************** @@ -166,7 +142,7 @@ cd ../.. # ****************************************************************************** # Test local build command -npm run build +yarn build # Check for expected output exists build/*.html exists build/static/js/*.js @@ -175,12 +151,12 @@ exists build/static/media/*.svg exists build/favicon.ico # Run tests with CI flag -CI=true npm test +CI=true yarn test # Uncomment when snapshot testing is enabled by default: # exists template/src/__snapshots__/App.test.js.snap # Test local start command -npm start -- --smoke-test +yarn start --smoke-test # ****************************************************************************** # Next, pack react-scripts and create-react-app so we can verify they work. @@ -216,10 +192,10 @@ cd "$temp_cli_path" # Initialize package.json before installing the CLI because npm will not install # the CLI properly in the temporary location if it is missing. -npm init --yes +yarn init --yes # Now we can install the CLI from the local package. -npm install "$cli_path" +yarn add "$cli_path" # Install the app in a temporary location cd $temp_app_path @@ -240,24 +216,24 @@ function verify_env_url { # Test relative path build awk -v n=2 -v s=" \"homepage\": \".\"," 'NR == n {print s} {print}' package.json > tmp && mv tmp package.json - npm run build + yarn build # Disabled until this can be tested # grep -F -R --exclude=*.map "../../static/" build/ -q; test $? -eq 0 || exit 1 grep -F -R --exclude=*.map "\"./static/" build/ -q; test $? -eq 0 || exit 1 grep -F -R --exclude=*.map "\"/static/" build/ -q; test $? -eq 1 || exit 1 - PUBLIC_URL="/anabsolute" npm run build + PUBLIC_URL="/anabsolute" yarn build grep -F -R --exclude=*.map "/anabsolute/static/" build/ -q; test $? -eq 0 || exit 1 grep -F -R --exclude=*.map "\"/static/" build/ -q; test $? -eq 1 || exit 1 # Test absolute path build sed "2s/.*/ \"homepage\": \"\/testingpath\",/" package.json > tmp && mv tmp package.json - npm run build + yarn build grep -F -R --exclude=*.map "/testingpath/static/" build/ -q; test $? -eq 0 || exit 1 grep -F -R --exclude=*.map "\"/static/" build/ -q; test $? -eq 1 || exit 1 - PUBLIC_URL="https://www.example.net/overridetest" npm run build + PUBLIC_URL="https://www.example.net/overridetest" yarn build grep -F -R --exclude=*.map "https://www.example.net/overridetest/static/" build/ -q; test $? -eq 0 || exit 1 grep -F -R --exclude=*.map "\"/static/" build/ -q; test $? -eq 1 || exit 1 grep -F -R --exclude=*.map "testingpath/static" build/ -q; test $? -eq 1 || exit 1 @@ -265,11 +241,11 @@ function verify_env_url { # Test absolute url build sed "2s/.*/ \"homepage\": \"https:\/\/www.example.net\/testingpath\",/" package.json > tmp && mv tmp package.json - npm run build + yarn build grep -F -R --exclude=*.map "/testingpath/static/" build/ -q; test $? -eq 0 || exit 1 grep -F -R --exclude=*.map "\"/static/" build/ -q; test $? -eq 1 || exit 1 - PUBLIC_URL="https://www.example.net/overridetest" npm run build + PUBLIC_URL="https://www.example.net/overridetest" yarn build grep -F -R --exclude=*.map "https://www.example.net/overridetest/static/" build/ -q; test $? -eq 0 || exit 1 grep -F -R --exclude=*.map "\"/static/" build/ -q; test $? -eq 1 || exit 1 grep -F -R --exclude=*.map "testingpath/static" build/ -q; test $? -eq 1 || exit 1 @@ -290,7 +266,7 @@ function verify_module_scope { echo "import sampleJson from '../sample'" | cat - src/App.js > src/App.js.temp && mv src/App.js.temp src/App.js # Make sure the build fails - npm run build; test $? -eq 1 || exit 1 + yarn build; test $? -eq 1 || exit 1 # TODO: check for error message # Restore App.js @@ -302,7 +278,7 @@ function verify_module_scope { cd test-app # Test the build -npm run build +yarn build # Check for expected output exists build/*.html exists build/static/js/*.js @@ -311,12 +287,12 @@ exists build/static/media/*.svg exists build/favicon.ico # Run tests with CI flag -CI=true npm test +CI=true yarn test # Uncomment when snapshot testing is enabled by default: # exists src/__snapshots__/App.test.js.snap # Test the server -npm start -- --smoke-test +yarn start --smoke-test # Test environment handling verify_env_url @@ -331,21 +307,13 @@ verify_module_scope # Eject... echo yes | npm run eject -# Ensure Yarn is ran after eject; at the time of this commit, we don't run Yarn -# after ejecting. Soon, we may only skip Yarn on Windows. Let's try to remove -# this in the near future. -if hash yarnpkg 2>/dev/null -then - yarnpkg install --check-files -fi - # ...but still link to the local packages install_package "$root_path"/packages/babel-preset-react-app install_package "$root_path"/packages/eslint-config-react-app install_package "$root_path"/packages/react-dev-utils # Test the build -npm run build +yarn build # Check for expected output exists build/*.html exists build/static/js/*.js @@ -354,15 +322,15 @@ exists build/static/media/*.svg exists build/favicon.ico # Run tests, overring the watch option to disable it. -# `CI=true npm test` won't work here because `npm test` becomes just `jest`. +# `CI=true yarn test` won't work here because `yarn test` becomes just `jest`. # We should either teach Jest to respect CI env variable, or make # `scripts/test.js` survive ejection (right now it doesn't). -npm test -- --watch=no +yarn test --watch=no # Uncomment when snapshot testing is enabled by default: # exists src/__snapshots__/App.test.js.snap # Test the server -npm start -- --smoke-test +yarn start --smoke-test # Test environment handling verify_env_url From 99c14e710ffb01d1c4a1124fc3ed2172bf58afbd Mon Sep 17 00:00:00 2001 From: Dan Abramov <dan.abramov@gmail.com> Date: Thu, 11 Jan 2018 01:55:55 +0000 Subject: [PATCH 086/122] Separate old Node E2E test (#3742) * Separate old Node E2E test * Try this for old node --- .travis.yml | 3 ++- tasks/e2e-old-node.sh | 61 +++++++++++++++++++++++++++++++++++++++++++ tasks/e2e-simple.sh | 16 ------------ 3 files changed, 63 insertions(+), 17 deletions(-) create mode 100755 tasks/e2e-old-node.sh diff --git a/.travis.yml b/.travis.yml index e970cf01c..ef223ffd5 100644 --- a/.travis.yml +++ b/.travis.yml @@ -14,6 +14,7 @@ script: - 'if [ $TEST_SUITE = "simple" ]; then tasks/e2e-simple.sh; fi' - 'if [ $TEST_SUITE = "installs" ]; then tasks/e2e-installs.sh; fi' - 'if [ $TEST_SUITE = "kitchensink" ]; then tasks/e2e-kitchensink.sh; fi' + - 'if [ $TEST_SUITE = "old-node" ]; then tasks/e2e-old-node.sh; fi' env: matrix: - TEST_SUITE=simple @@ -22,4 +23,4 @@ env: matrix: include: - node_js: 0.10 - env: TEST_SUITE=simple + env: TEST_SUITE=old-node diff --git a/tasks/e2e-old-node.sh b/tasks/e2e-old-node.sh new file mode 100755 index 000000000..8245dd24e --- /dev/null +++ b/tasks/e2e-old-node.sh @@ -0,0 +1,61 @@ +#!/bin/bash +# Copyright (c) 2015-present, Facebook, Inc. +# +# This source code is licensed under the MIT license found in the +# LICENSE file in the root directory of this source tree. + +# ****************************************************************************** +# This is an end-to-end test intended to run on CI. +# You can also run it locally but it's slow. +# ****************************************************************************** + +# Start in tasks/ even if run from root directory +cd "$(dirname "$0")" + +temp_app_path=`mktemp -d 2>/dev/null || mktemp -d -t 'temp_app_path'` + +function cleanup { + echo 'Cleaning up.' + cd "$root_path" + rm -rf $temp_app_path +} + +# Error messages are redirected to stderr +function handle_error { + echo "$(basename $0): ERROR! An error was encountered executing line $1." 1>&2; + cleanup + echo 'Exiting with error.' 1>&2; + exit 1 +} + +function handle_exit { + cleanup + echo 'Exiting without error.' 1>&2; + exit +} + +# Exit the script with a helpful error message when any error is encountered +trap 'set +x; handle_error $LINENO $BASH_COMMAND' ERR + +# Cleanup before exit on any termination signal +trap 'set +x; handle_exit' SIGQUIT SIGTERM SIGINT SIGKILL SIGHUP + +# Echo every command being executed +set -x + +# Go to root +cd .. +root_path=$PWD + +# We need to install create-react-app deps to test it +cd "$root_path"/packages/create-react-app +npm install +cd "$root_path" + +# If the node version is < 6, the script should just give an error. +cd $temp_app_path +err_output=`node "$root_path"/packages/create-react-app/index.js test-node-version 2>&1 > /dev/null || echo ''` +[[ $err_output =~ You\ are\ running\ Node ]] && exit 0 || exit 1 + +# Cleanup +cleanup diff --git a/tasks/e2e-simple.sh b/tasks/e2e-simple.sh index 449c5f3ba..72bc757d9 100755 --- a/tasks/e2e-simple.sh +++ b/tasks/e2e-simple.sh @@ -102,22 +102,6 @@ grep -v "postinstall" package.json > temp && mv temp package.json yarn mv package.json.bak package.json -# We need to install create-react-app deps to test it -cd "$root_path"/packages/create-react-app -yarn -cd "$root_path" - -# If the node version is < 6, the script should just give an error. -nodeVersion=`node --version | cut -d v -f2` -nodeMajor=`echo $nodeVersion | cut -d. -f1` -nodeMinor=`echo $nodeVersion | cut -d. -f2` -if [[ nodeMajor -lt 6 ]] -then - cd $temp_app_path - err_output=`node "$root_path"/packages/create-react-app/index.js test-node-version 2>&1 > /dev/null || echo ''` - [[ $err_output =~ You\ are\ running\ Node ]] && exit 0 || exit 1 -fi - # We removed the postinstall, so do it manually here node bootstrap.js From 75d71e154167707be00d838e73680eb418ea1b82 Mon Sep 17 00:00:00 2001 From: Joe Haddad <timer150@gmail.com> Date: Thu, 11 Jan 2018 00:49:39 -0500 Subject: [PATCH 087/122] Use private registry (#3744) * Run e2e-simple in a realistic scenario * Use npx for everything * oops --- tasks/e2e-simple.sh | 95 +++++++++++++-------------------------------- 1 file changed, 27 insertions(+), 68 deletions(-) diff --git a/tasks/e2e-simple.sh b/tasks/e2e-simple.sh index 72bc757d9..b162adc92 100755 --- a/tasks/e2e-simple.sh +++ b/tasks/e2e-simple.sh @@ -12,9 +12,8 @@ # Start in tasks/ even if run from root directory cd "$(dirname "$0")" -# CLI and app temporary locations +# App temporary location # http://unix.stackexchange.com/a/84980 -temp_cli_path=`mktemp -d 2>/dev/null || mktemp -d -t 'temp_cli_path'` temp_app_path=`mktemp -d 2>/dev/null || mktemp -d -t 'temp_app_path'` function cleanup { @@ -22,7 +21,7 @@ function cleanup { cd "$root_path" # Uncomment when snapshot testing is enabled by default: # rm ./packages/react-scripts/template/src/__snapshots__/App.test.js.snap - rm -rf "$temp_cli_path" $temp_app_path + rm -rf "$temp_app_path" } # Error messages are redirected to stderr @@ -39,30 +38,6 @@ function handle_exit { exit } -function create_react_app { - node "$temp_cli_path"/node_modules/create-react-app/index.js "$@" -} - -function install_package { - local pkg=$(basename $1) - - # Clean target (for safety) - rm -rf node_modules/$pkg/ - rm -rf node_modules/**/$pkg/ - - # Copy package into node_modules/ ignoring installed deps - # rsync -a ${1%/} node_modules/ --exclude node_modules - cp -R ${1%/} node_modules/ - rm -rf node_modules/$pkg/node_modules/ - - # Install `dependencies` - cd node_modules/$pkg/ - yarn --production - # Remove our packages to ensure side-by-side versions are used (which we link) - rm -rf node_modules/{babel-preset-react-app,eslint-config-react-app,react-dev-utils,react-error-overlay,react-scripts} - cd ../.. -} - # Check for the existence of one or more files. function exists { for f in $*; do @@ -96,12 +71,31 @@ if [ "$EXPECTED" != "$ACTUAL" ]; then exit 1 fi +if hash npm 2>/dev/null +then + npm i -g npm@latest + npm cache clean || npm cache verify +fi + # Prevent bootstrap, we only want top-level dependencies cp package.json package.json.bak grep -v "postinstall" package.json > temp && mv temp package.json yarn mv package.json.bak package.json +# Start local registry +tmp_registry_log=`mktemp` +nohup npx verdaccio@2.7.2 &>$tmp_registry_log & +# Wait for `verdaccio` to boot +grep -q 'http address' <(tail -f $tmp_registry_log) + +# Set registry to local registry +npm set registry http://localhost:4873 +yarn config set registry http://localhost:4873 + +# Login so we can publish packages +npx npm-cli-login@0.0.10 -u user -p password -e user@example.com -r http://localhost:4873 --quotes + # We removed the postinstall, so do it manually here node bootstrap.js @@ -142,48 +136,18 @@ CI=true yarn test # Test local start command yarn start --smoke-test -# ****************************************************************************** -# Next, pack react-scripts and create-react-app so we can verify they work. -# ****************************************************************************** - -# Pack CLI -cd "$root_path"/packages/create-react-app -cli_path=$PWD/`npm pack` - -# Go to react-scripts -cd "$root_path"/packages/react-scripts - -# Save package.json because we're going to touch it -cp package.json package.json.orig - -# Replace own dependencies (those in the `packages` dir) with the local paths -# of those packages. -node "$root_path"/tasks/replace-own-deps.js - -# Finally, pack react-scripts -scripts_path="$root_path"/packages/react-scripts/`npm pack` - -# Restore package.json -rm package.json -mv package.json.orig package.json +git clean -f +./tasks/release.sh --yes --force-publish=* --skip-git --cd-version=prerelease --exact --npm-tag=latest # ****************************************************************************** -# Now that we have packed them, create a clean app folder and install them. +# Install react-scripts prerelease via create-react-app prerelease. # ****************************************************************************** -# Install the CLI in a temporary location -cd "$temp_cli_path" - -# Initialize package.json before installing the CLI because npm will not install -# the CLI properly in the temporary location if it is missing. -yarn init --yes - -# Now we can install the CLI from the local package. -yarn add "$cli_path" - # Install the app in a temporary location cd $temp_app_path -create_react_app --scripts-version="$scripts_path" test-app +npx create-react-app test-app + +# TODO: verify we installed prerelease # ****************************************************************************** # Now that we used create-react-app to create an app depending on react-scripts, @@ -291,11 +255,6 @@ verify_module_scope # Eject... echo yes | npm run eject -# ...but still link to the local packages -install_package "$root_path"/packages/babel-preset-react-app -install_package "$root_path"/packages/eslint-config-react-app -install_package "$root_path"/packages/react-dev-utils - # Test the build yarn build # Check for expected output From 29e06fc91a31ae30e03bbbcbb53c384ec03499ec Mon Sep 17 00:00:00 2001 From: Joe Haddad <timer150@gmail.com> Date: Thu, 11 Jan 2018 01:38:10 -0500 Subject: [PATCH 088/122] Follow-up: use private registry (#3746) * Convert e2e-installs * Convert kitchensink tests * Upgrade npm for kitchensink --- tasks/e2e-installs.sh | 56 +++++++++++++++---------- tasks/e2e-kitchensink.sh | 91 ++++++++++++---------------------------- 2 files changed, 59 insertions(+), 88 deletions(-) diff --git a/tasks/e2e-installs.sh b/tasks/e2e-installs.sh index d3c3bcf83..3a40a78cb 100755 --- a/tasks/e2e-installs.sh +++ b/tasks/e2e-installs.sh @@ -14,13 +14,12 @@ cd "$(dirname "$0")" # CLI and app temporary locations # http://unix.stackexchange.com/a/84980 -temp_cli_path=`mktemp -d 2>/dev/null || mktemp -d -t 'temp_cli_path'` temp_app_path=`mktemp -d 2>/dev/null || mktemp -d -t 'temp_app_path'` function cleanup { echo 'Cleaning up.' cd "$root_path" - rm -rf "$temp_cli_path" "$temp_app_path" + rm -rf "$temp_app_path" } # Error messages are redirected to stderr @@ -55,10 +54,6 @@ function checkDependencies { fi } -function create_react_app { - node "$temp_cli_path"/node_modules/create-react-app/index.js $* -} - # Exit the script with a helpful error message when any error is encountered trap 'set +x; handle_error $LINENO $BASH_COMMAND' ERR @@ -72,6 +67,12 @@ set -x cd .. root_path=$PWD +if hash npm 2>/dev/null +then + npm i -g npm@latest + npm cache clean || npm cache verify +fi + # Prevent bootstrap, we only want top-level dependencies cp package.json package.json.bak grep -v "postinstall" package.json > temp && mv temp package.json @@ -86,23 +87,32 @@ yarn run build:prod cd ../.. # ****************************************************************************** -# First, pack and install create-react-app. +# First, publish the monorepo. # ****************************************************************************** -# Pack CLI -cd "$root_path"/packages/create-react-app -cli_path=$PWD/`npm pack` +# Start local registry +tmp_registry_log=`mktemp` +nohup npx verdaccio@2.7.2 &>$tmp_registry_log & +# Wait for `verdaccio` to boot +grep -q 'http address' <(tail -f $tmp_registry_log) + +# Set registry to local registry +npm set registry http://localhost:4873 +yarn config set registry http://localhost:4873 + +# Login so we can publish packages +npx npm-cli-login@0.0.10 -u user -p password -e user@example.com -r http://localhost:4873 --quotes -# Install the CLI in a temporary location -cd "$temp_cli_path" -yarn add "$cli_path" +# Publish the monorepo +git clean -f +./tasks/release.sh --yes --force-publish=* --skip-git --cd-version=prerelease --exact --npm-tag=latest # ****************************************************************************** # Test --scripts-version with a version number # ****************************************************************************** cd "$temp_app_path" -create_react_app --scripts-version=1.0.17 test-app-version-number +npx create-react-app --scripts-version=1.0.17 test-app-version-number cd test-app-version-number # Check corresponding scripts version is installed. @@ -115,7 +125,7 @@ checkDependencies # ****************************************************************************** cd "$temp_app_path" -create_react_app --use-npm --scripts-version=1.0.17 test-use-npm-flag +npx create-react-app --use-npm --scripts-version=1.0.17 test-use-npm-flag cd test-use-npm-flag # Check corresponding scripts version is installed. @@ -129,7 +139,7 @@ checkDependencies # ****************************************************************************** cd "$temp_app_path" -create_react_app --scripts-version=https://registry.npmjs.org/react-scripts/-/react-scripts-1.0.17.tgz test-app-tarball-url +npx create-react-app --scripts-version=https://registry.npmjs.org/react-scripts/-/react-scripts-1.0.17.tgz test-app-tarball-url cd test-app-tarball-url # Check corresponding scripts version is installed. @@ -142,7 +152,7 @@ checkDependencies # ****************************************************************************** cd "$temp_app_path" -create_react_app --scripts-version=react-scripts-fork test-app-fork +npx create-react-app --scripts-version=react-scripts-fork test-app-fork cd test-app-fork # Check corresponding scripts version is installed. @@ -154,7 +164,7 @@ exists node_modules/react-scripts-fork cd "$temp_app_path" # we will install a non-existing package to simulate a failed installataion. -create_react_app --scripts-version=`date +%s` test-app-should-not-exist || true +npx create-react-app --scripts-version=`date +%s` test-app-should-not-exist || true # confirm that the project folder was deleted test ! -d test-app-should-not-exist @@ -166,7 +176,7 @@ cd "$temp_app_path" mkdir test-app-should-remain echo '## Hello' > ./test-app-should-remain/README.md # we will install a non-existing package to simulate a failed installataion. -create_react_app --scripts-version=`date +%s` test-app-should-remain || true +npx create-react-app --scripts-version=`date +%s` test-app-should-remain || true # confirm the file exist test -e test-app-should-remain/README.md # confirm only README.md is the only file in the directory @@ -180,7 +190,7 @@ fi cd $temp_app_path curl "https://registry.npmjs.org/@enoah_netzach/react-scripts/-/react-scripts-0.9.0.tgz" -o enoah-scripts-0.9.0.tgz -create_react_app --scripts-version=$temp_app_path/enoah-scripts-0.9.0.tgz test-app-scoped-fork-tgz +npx create-react-app --scripts-version=$temp_app_path/enoah-scripts-0.9.0.tgz test-app-scoped-fork-tgz cd test-app-scoped-fork-tgz # Check corresponding scripts version is installed. @@ -195,20 +205,20 @@ cd "$temp_app_path" mkdir test-app-nested-paths-t1 cd test-app-nested-paths-t1 mkdir -p test-app-nested-paths-t1/aa/bb/cc/dd -create_react_app test-app-nested-paths-t1/aa/bb/cc/dd +npx create-react-app test-app-nested-paths-t1/aa/bb/cc/dd cd test-app-nested-paths-t1/aa/bb/cc/dd yarn start --smoke-test # Testing a path that does not exist cd "$temp_app_path" -create_react_app test-app-nested-paths-t2/aa/bb/cc/dd +npx create-react-app test-app-nested-paths-t2/aa/bb/cc/dd cd test-app-nested-paths-t2/aa/bb/cc/dd yarn start --smoke-test # Testing a path that is half exists cd "$temp_app_path" mkdir -p test-app-nested-paths-t3/aa -create_react_app test-app-nested-paths-t3/aa/bb/cc/dd +npx create-react-app test-app-nested-paths-t3/aa/bb/cc/dd cd test-app-nested-paths-t3/aa/bb/cc/dd yarn start --smoke-test diff --git a/tasks/e2e-kitchensink.sh b/tasks/e2e-kitchensink.sh index 085f62f5b..709d82753 100755 --- a/tasks/e2e-kitchensink.sh +++ b/tasks/e2e-kitchensink.sh @@ -14,7 +14,6 @@ cd "$(dirname "$0")" # CLI, app, and test module temporary locations # http://unix.stackexchange.com/a/84980 -temp_cli_path=`mktemp -d 2>/dev/null || mktemp -d -t 'temp_cli_path'` temp_app_path=`mktemp -d 2>/dev/null || mktemp -d -t 'temp_app_path'` temp_module_path=`mktemp -d 2>/dev/null || mktemp -d -t 'temp_module_path'` @@ -23,7 +22,7 @@ function cleanup { ps -ef | grep 'react-scripts' | grep -v grep | awk '{print $2}' | xargs kill -9 cd "$root_path" # TODO: fix "Device or resource busy" and remove ``|| $CI` - rm -rf "$temp_cli_path" "$temp_app_path" "$temp_module_path" || $CI + rm -rf "$temp_app_path" "$temp_module_path" || $CI } # Error messages are redirected to stderr @@ -40,30 +39,6 @@ function handle_exit { exit } -function create_react_app { - node "$temp_cli_path"/node_modules/create-react-app/index.js "$@" -} - -function install_package { - local pkg=$(basename $1) - - # Clean target (for safety) - rm -rf node_modules/$pkg/ - rm -rf node_modules/**/$pkg/ - - # Copy package into node_modules/ ignoring installed deps - # rsync -a ${1%/} node_modules/ --exclude node_modules - cp -R ${1%/} node_modules/ - rm -rf node_modules/$pkg/node_modules/ - - # Install `dependencies` - cd node_modules/$pkg/ - yarn --production - # Remove our packages to ensure side-by-side versions are used (which we link) - rm -rf node_modules/{babel-preset-react-app,eslint-config-react-app,react-dev-utils,react-error-overlay,react-scripts} - cd ../.. -} - # Check for the existence of one or more files. function exists { for f in $*; do @@ -84,6 +59,12 @@ set -x cd .. root_path=$PWD +if hash npm 2>/dev/null +then + npm i -g npm@latest + npm cache clean || npm cache verify +fi + # Prevent bootstrap, we only want top-level dependencies cp package.json package.json.bak grep -v "postinstall" package.json > temp && mv temp package.json @@ -98,41 +79,33 @@ yarn build:prod cd ../.. # ****************************************************************************** -# First, pack react-scripts and create-react-app so we can use them. +# First, publish the monorepo. # ****************************************************************************** -# Pack CLI -cd "$root_path"/packages/create-react-app -cli_path=$PWD/`npm pack` - -# Go to react-scripts -cd "$root_path"/packages/react-scripts - -# Save package.json because we're going to touch it -cp package.json package.json.orig +# Start local registry +tmp_registry_log=`mktemp` +nohup npx verdaccio@2.7.2 &>$tmp_registry_log & +# Wait for `verdaccio` to boot +grep -q 'http address' <(tail -f $tmp_registry_log) -# Replace own dependencies (those in the `packages` dir) with the local paths -# of those packages. -node "$root_path"/tasks/replace-own-deps.js +# Set registry to local registry +npm set registry http://localhost:4873 +yarn config set registry http://localhost:4873 -# Finally, pack react-scripts -scripts_path="$root_path"/packages/react-scripts/`npm pack` +# Login so we can publish packages +npx npm-cli-login@0.0.10 -u user -p password -e user@example.com -r http://localhost:4873 --quotes -# Restore package.json -rm package.json -mv package.json.orig package.json +# Publish the monorepo +git clean -f +./tasks/release.sh --yes --force-publish=* --skip-git --cd-version=prerelease --exact --npm-tag=latest # ****************************************************************************** -# Now that we have packed them, create a clean app folder and install them. +# Now that we have published them, create a clean app folder and install them. # ****************************************************************************** -# Install the CLI in a temporary location -cd "$temp_cli_path" -yarn add "$cli_path" - # Install the app in a temporary location cd $temp_app_path -create_react_app --scripts-version="$scripts_path" --internal-testing-template="$root_path"/packages/react-scripts/fixtures/kitchensink test-kitchensink +npx create-react-app --internal-testing-template="$root_path"/packages/react-scripts/fixtures/kitchensink test-kitchensink # Install the test module cd "$temp_module_path" @@ -146,14 +119,8 @@ yarn add test-integrity@^2.0.1 # Enter the app directory cd "$temp_app_path/test-kitchensink" -# Link to our preset -install_package "$root_path"/packages/babel-preset-react-app -# Link to error overlay package because now it's a dependency -# of react-dev-utils and not react-scripts -install_package "$root_path"/packages/react-error-overlay - # Link to test module -install_package "$temp_module_path/node_modules/test-integrity" +npm link "$temp_module_path/node_modules/test-integrity" # Test the build REACT_APP_SHELL_ENV_MESSAGE=fromtheshell \ @@ -198,16 +165,10 @@ E2E_FILE=./build/index.html \ # ****************************************************************************** # Eject... -echo yes | npm run eject - -# ...but still link to the local packages -install_package "$root_path"/packages/babel-preset-react-app -install_package "$root_path"/packages/eslint-config-react-app -install_package "$root_path"/packages/react-error-overlay -install_package "$root_path"/packages/react-dev-utils +echo yes | yarn eject # Link to test module -install_package "$temp_module_path/node_modules/test-integrity" +npm link "$temp_module_path/node_modules/test-integrity" # Test the build REACT_APP_SHELL_ENV_MESSAGE=fromtheshell \ From ebddb83dd6e07a25474ab8dd24dd3a1cccd22611 Mon Sep 17 00:00:00 2001 From: Joe Haddad <timer150@gmail.com> Date: Thu, 11 Jan 2018 01:40:03 -0500 Subject: [PATCH 089/122] Remove redundant steps in e2e tests (#3747) * This doesn't look needed anymore * Remove unnecessary rebuilds --- tasks/e2e-installs.sh | 12 +----------- tasks/e2e-kitchensink.sh | 12 +----------- tasks/e2e-simple.sh | 9 +-------- 3 files changed, 3 insertions(+), 30 deletions(-) diff --git a/tasks/e2e-installs.sh b/tasks/e2e-installs.sh index 3a40a78cb..73ca1c04b 100755 --- a/tasks/e2e-installs.sh +++ b/tasks/e2e-installs.sh @@ -73,18 +73,8 @@ then npm cache clean || npm cache verify fi -# Prevent bootstrap, we only want top-level dependencies -cp package.json package.json.bak -grep -v "postinstall" package.json > temp && mv temp package.json +# Bootstrap monorepo yarn -mv package.json.bak package.json - -# We removed the postinstall, so do it manually -node bootstrap.js - -cd packages/react-error-overlay/ -yarn run build:prod -cd ../.. # ****************************************************************************** # First, publish the monorepo. diff --git a/tasks/e2e-kitchensink.sh b/tasks/e2e-kitchensink.sh index 709d82753..20c6dbb05 100755 --- a/tasks/e2e-kitchensink.sh +++ b/tasks/e2e-kitchensink.sh @@ -65,18 +65,8 @@ then npm cache clean || npm cache verify fi -# Prevent bootstrap, we only want top-level dependencies -cp package.json package.json.bak -grep -v "postinstall" package.json > temp && mv temp package.json +# Bootstrap monorepo yarn -mv package.json.bak package.json - -# We removed the postinstall, so do it manually -node bootstrap.js - -cd packages/react-error-overlay/ -yarn build:prod -cd ../.. # ****************************************************************************** # First, publish the monorepo. diff --git a/tasks/e2e-simple.sh b/tasks/e2e-simple.sh index b162adc92..44ee14fb1 100755 --- a/tasks/e2e-simple.sh +++ b/tasks/e2e-simple.sh @@ -77,11 +77,8 @@ then npm cache clean || npm cache verify fi -# Prevent bootstrap, we only want top-level dependencies -cp package.json package.json.bak -grep -v "postinstall" package.json > temp && mv temp package.json +# Bootstrap monorepo yarn -mv package.json.bak package.json # Start local registry tmp_registry_log=`mktemp` @@ -96,9 +93,6 @@ yarn config set registry http://localhost:4873 # Login so we can publish packages npx npm-cli-login@0.0.10 -u user -p password -e user@example.com -r http://localhost:4873 --quotes -# We removed the postinstall, so do it manually here -node bootstrap.js - # Lint own code ./node_modules/.bin/eslint --max-warnings 0 packages/babel-preset-react-app/ ./node_modules/.bin/eslint --max-warnings 0 packages/create-react-app/ @@ -108,7 +102,6 @@ node bootstrap.js cd packages/react-error-overlay/ ./node_modules/.bin/eslint --max-warnings 0 src/ yarn test -yarn build:prod cd ../.. cd packages/react-dev-utils/ yarn test From 1098a4a177521f06febb1fcf7da94791febb19ba Mon Sep 17 00:00:00 2001 From: Joe Haddad <timer150@gmail.com> Date: Thu, 11 Jan 2018 02:21:25 -0500 Subject: [PATCH 090/122] Oops --- tasks/e2e-kitchensink.sh | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tasks/e2e-kitchensink.sh b/tasks/e2e-kitchensink.sh index 20c6dbb05..d12a3d645 100755 --- a/tasks/e2e-kitchensink.sh +++ b/tasks/e2e-kitchensink.sh @@ -155,7 +155,7 @@ E2E_FILE=./build/index.html \ # ****************************************************************************** # Eject... -echo yes | yarn eject +echo yes | npm run eject # Link to test module npm link "$temp_module_path/node_modules/test-integrity" From 89bf2fcc55ffea57e7541faacd1606c18b65a5b9 Mon Sep 17 00:00:00 2001 From: Jonathan <jonathan@xgecko.com> Date: Thu, 11 Jan 2018 04:29:35 -0800 Subject: [PATCH 091/122] Adding some more non-conflicting files to validFiles (#3740) --- packages/create-react-app/createReactApp.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/create-react-app/createReactApp.js b/packages/create-react-app/createReactApp.js index f91608f34..a2d9fdbd8 100755 --- a/packages/create-react-app/createReactApp.js +++ b/packages/create-react-app/createReactApp.js @@ -619,6 +619,12 @@ function isSafeToCreateProjectIn(root, name) { '.hg', '.hgignore', '.hgcheck', + '.npmignore', + 'mkdocs.yml', + 'docs', + '.travis.yml', + '.gitlab-ci.yml', + '.gitattributes', ]; console.log(); From 4c0bf037d1255e41aa6596952913f6ceed5cf1cb Mon Sep 17 00:00:00 2001 From: Dan Abramov <dan.abramov@gmail.com> Date: Thu, 11 Jan 2018 12:35:51 +0000 Subject: [PATCH 092/122] Delete old file It's been here long enough. --- template/README.md | 4 ---- 1 file changed, 4 deletions(-) delete mode 100644 template/README.md diff --git a/template/README.md b/template/README.md deleted file mode 100644 index 32efd00ff..000000000 --- a/template/README.md +++ /dev/null @@ -1,4 +0,0 @@ -This page has moved!<br> -Please update your link to point [here](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md) instead. - -Sorry for the inconvenience! From b02fe6673264d03cd12d9a0e0adca1b724806b68 Mon Sep 17 00:00:00 2001 From: Ade Viankakrisna Fadlil <viankakrisna@gmail.com> Date: Fri, 12 Jan 2018 06:25:27 +0700 Subject: [PATCH 093/122] clean up changes to npm and yarn registry (#3756) --- tasks/e2e-installs.sh | 11 ++++++++--- tasks/e2e-kitchensink.sh | 11 ++++++++--- tasks/e2e-simple.sh | 11 ++++++++--- 3 files changed, 24 insertions(+), 9 deletions(-) diff --git a/tasks/e2e-installs.sh b/tasks/e2e-installs.sh index 73ca1c04b..9d7a0e99d 100755 --- a/tasks/e2e-installs.sh +++ b/tasks/e2e-installs.sh @@ -15,11 +15,16 @@ cd "$(dirname "$0")" # CLI and app temporary locations # http://unix.stackexchange.com/a/84980 temp_app_path=`mktemp -d 2>/dev/null || mktemp -d -t 'temp_app_path'` +custom_registry_url=http://localhost:4873 +original_npm_registry_url=`npm get registry` +original_yarn_registry_url=`yarn config get registry` function cleanup { echo 'Cleaning up.' cd "$root_path" rm -rf "$temp_app_path" + npm set registry "$original_npm_registry_url" + yarn config set registry "$original_yarn_registry_url" } # Error messages are redirected to stderr @@ -87,11 +92,11 @@ nohup npx verdaccio@2.7.2 &>$tmp_registry_log & grep -q 'http address' <(tail -f $tmp_registry_log) # Set registry to local registry -npm set registry http://localhost:4873 -yarn config set registry http://localhost:4873 +npm set registry "$custom_registry_url" +yarn config set registry "$custom_registry_url" # Login so we can publish packages -npx npm-cli-login@0.0.10 -u user -p password -e user@example.com -r http://localhost:4873 --quotes +npx npm-cli-login@0.0.10 -u user -p password -e user@example.com -r "$custom_registry_url" --quotes # Publish the monorepo git clean -f diff --git a/tasks/e2e-kitchensink.sh b/tasks/e2e-kitchensink.sh index d12a3d645..9dc2370da 100755 --- a/tasks/e2e-kitchensink.sh +++ b/tasks/e2e-kitchensink.sh @@ -16,6 +16,9 @@ cd "$(dirname "$0")" # http://unix.stackexchange.com/a/84980 temp_app_path=`mktemp -d 2>/dev/null || mktemp -d -t 'temp_app_path'` temp_module_path=`mktemp -d 2>/dev/null || mktemp -d -t 'temp_module_path'` +custom_registry_url=http://localhost:4873 +original_npm_registry_url=`npm get registry` +original_yarn_registry_url=`yarn config get registry` function cleanup { echo 'Cleaning up.' @@ -23,6 +26,8 @@ function cleanup { cd "$root_path" # TODO: fix "Device or resource busy" and remove ``|| $CI` rm -rf "$temp_app_path" "$temp_module_path" || $CI + npm set registry "$original_npm_registry_url" + yarn config set registry "$original_yarn_registry_url" } # Error messages are redirected to stderr @@ -79,11 +84,11 @@ nohup npx verdaccio@2.7.2 &>$tmp_registry_log & grep -q 'http address' <(tail -f $tmp_registry_log) # Set registry to local registry -npm set registry http://localhost:4873 -yarn config set registry http://localhost:4873 +npm set registry "$custom_registry_url" +yarn config set registry "$custom_registry_url" # Login so we can publish packages -npx npm-cli-login@0.0.10 -u user -p password -e user@example.com -r http://localhost:4873 --quotes +npx npm-cli-login@0.0.10 -u user -p password -e user@example.com -r "$custom_registry_url" --quotes # Publish the monorepo git clean -f diff --git a/tasks/e2e-simple.sh b/tasks/e2e-simple.sh index 44ee14fb1..98941f256 100755 --- a/tasks/e2e-simple.sh +++ b/tasks/e2e-simple.sh @@ -15,6 +15,9 @@ cd "$(dirname "$0")" # App temporary location # http://unix.stackexchange.com/a/84980 temp_app_path=`mktemp -d 2>/dev/null || mktemp -d -t 'temp_app_path'` +custom_registry_url=http://localhost:4873 +original_npm_registry_url=`npm get registry` +original_yarn_registry_url=`yarn config get registry` function cleanup { echo 'Cleaning up.' @@ -22,6 +25,8 @@ function cleanup { # Uncomment when snapshot testing is enabled by default: # rm ./packages/react-scripts/template/src/__snapshots__/App.test.js.snap rm -rf "$temp_app_path" + npm set registry "$original_npm_registry_url" + yarn config set registry "$original_yarn_registry_url" } # Error messages are redirected to stderr @@ -87,11 +92,11 @@ nohup npx verdaccio@2.7.2 &>$tmp_registry_log & grep -q 'http address' <(tail -f $tmp_registry_log) # Set registry to local registry -npm set registry http://localhost:4873 -yarn config set registry http://localhost:4873 +npm set registry "$custom_registry_url" +yarn config set registry "$custom_registry_url" # Login so we can publish packages -npx npm-cli-login@0.0.10 -u user -p password -e user@example.com -r http://localhost:4873 --quotes +npx npm-cli-login@0.0.10 -u user -p password -e user@example.com -r "$custom_registry_url" --quotes # Lint own code ./node_modules/.bin/eslint --max-warnings 0 packages/babel-preset-react-app/ From 3f7851deab848dbaf14844a55c27b09a6f5cb308 Mon Sep 17 00:00:00 2001 From: Dan Abramov <dan.abramov@gmail.com> Date: Fri, 12 Jan 2018 00:01:30 +0000 Subject: [PATCH 094/122] Try updating Flow (#3757) --- packages/react-error-overlay/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-error-overlay/package.json b/packages/react-error-overlay/package.json index d4e528ea6..f2148885c 100644 --- a/packages/react-error-overlay/package.json +++ b/packages/react-error-overlay/package.json @@ -46,7 +46,7 @@ "eslint-plugin-import": "2.7.0", "eslint-plugin-jsx-a11y": "5.1.1", "eslint-plugin-react": "7.1.0", - "flow-bin": "^0.54.0", + "flow-bin": "^0.63.1", "html-entities": "1.2.1", "jest": "20.0.4", "jest-fetch-mock": "1.2.1", From 0aeffe62efb27abf489fa779647aad400a2dec0b Mon Sep 17 00:00:00 2001 From: Dan Abramov <dan.abramov@gmail.com> Date: Fri, 12 Jan 2018 01:54:53 +0000 Subject: [PATCH 095/122] Switch to Yarn Workspaces (#3755) * Switch to Yarn Workspaces * Feedback * Move flowconfig * Use publish script * Keep git status check * Fix Flow without perf penalty * Remove Flow from package.json "test" * Try running it from script directly (?) * Try magic incantations * lol flow COME ON * Try to skip Flow on AppVeyor * -df * -df * -df * Try to fix CI * Revert unrelated changes * Update CONTRIBUTING.md --- .yarnrc | 1 + CONTRIBUTING.md | 18 +++--- bootstrap.js | 67 ----------------------- lerna.json | 9 ++- package.json | 15 +++-- packages/react-error-overlay/.flowconfig | 14 +++-- packages/react-error-overlay/flow/env.js | 19 +++++++ packages/react-error-overlay/package.json | 2 +- tasks/e2e-installs.sh | 4 +- tasks/e2e-kitchensink.sh | 4 +- tasks/e2e-simple.sh | 10 +++- tasks/{release.sh => publish.sh} | 9 +-- 12 files changed, 65 insertions(+), 107 deletions(-) create mode 100644 .yarnrc delete mode 100644 bootstrap.js create mode 100644 packages/react-error-overlay/flow/env.js rename tasks/{release.sh => publish.sh} (84%) diff --git a/.yarnrc b/.yarnrc new file mode 100644 index 000000000..acaaffdb7 --- /dev/null +++ b/.yarnrc @@ -0,0 +1 @@ +--install.no-lockfile true diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 8957c0c3d..62908c39b 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -75,20 +75,18 @@ All functionality must be retained (and configuration given to the user) if they 1. Clone the repo with `git clone https://github.com/facebookincubator/create-react-app` -2. Run `npm install` in the root `create-react-app` folder. +2. Run `yarn` in the root `create-react-app` folder. -Once it is done, you can modify any file locally and run `npm start`, `npm test` or `npm run build` just like in a generated project. +Once it is done, you can modify any file locally and run `yarn start`, `yarn test` or `yarn build` just like in a generated project. If you want to try out the end-to-end flow with the global CLI, you can do this too: ``` -npm run create-react-app my-app +yarn create-react-app my-app cd my-app ``` -and then run `npm start` or `npm run build`. - -*Note: if you are using yarn, we suggest that you use `yarn install --no-lockfile` instead of the bare `yarn` or `yarn install` because we [intentionally](https://github.com/facebookincubator/create-react-app/pull/2014#issuecomment-300811661) do not ignore or add yarn.lock to our repo.* +and then run `yarn start` or `yarn build`. ## Contributing to E2E (end to end) tests @@ -104,8 +102,8 @@ The scripts in tasks folder and other scripts in `package.json` will not work in A good step by step guide can be found [here](https://www.howtogeek.com/249966/how-to-install-and-use-the-linux-bash-shell-on-windows-10/) -### Install Node.js and npm -Even if you have node and npm installed on your windows, it would not be accessible from the bash shell. You would have to install it again. Installing via [`nvm`](https://github.com/creationix/nvm#install-script) is recommended. +### Install Node.js and yarn +Even if you have node and yarn installed on your windows, it would not be accessible from the bash shell. You would have to install it again. Installing via [`nvm`](https://github.com/creationix/nvm#install-script) is recommended. ### Line endings @@ -119,11 +117,11 @@ By default git would use `CRLF` line endings which would cause the scripts to fa 4. Note that files in `packages/create-react-app` should be modified with extreme caution. Since it’s a global CLI, any version of `create-react-app` (global CLI) including very old ones should work with the latest version of `react-scripts`. 5. Create a change log entry for the release: * You'll need an [access token for the GitHub API](https://help.github.com/articles/creating-an-access-token-for-command-line-use/). Save it to this environment variable: `export GITHUB_AUTH="..."` - * Run `npm run changelog`. The command will find all the labeled pull requests merged since the last release and group them by the label and affected packages, and create a change log entry with all the changes and links to PRs and their authors. Copy and paste it to `CHANGELOG.md`. + * Run `yarn changelog`. The command will find all the labeled pull requests merged since the last release and group them by the label and affected packages, and create a change log entry with all the changes and links to PRs and their authors. Copy and paste it to `CHANGELOG.md`. * Add a four-space indented paragraph after each non-trivial list item, explaining what changed and why. For each breaking change also write who it affects and instructions for migrating existing code. * Maybe add some newlines here and there. Preview the result on GitHub to get a feel for it. Changelog generator output is a bit too terse for my taste, so try to make it visually pleasing and well grouped. 6. Make sure to include “Migrating from ...” instructions for the previous release. Often you can copy and paste them. -7. **Do not run `npm publish`. Instead, run `npm run publish`.** +7. Run `yarn run publish`. (Don’t forget the `run` there.) 8. Wait for a long time, and it will get published. Don’t worry that it’s stuck. In the end the publish script will prompt for versions before publishing the packages. 9. After publishing, create a GitHub Release with the same text as the changelog entry. See previous Releases for inspiration. diff --git a/bootstrap.js b/bootstrap.js deleted file mode 100644 index b54a1ed9f..000000000 --- a/bootstrap.js +++ /dev/null @@ -1,67 +0,0 @@ -'use strict'; - -const { execSync, spawn } = require('child_process'); -const { resolve } = require('path'); -const { existsSync } = require('fs'); -const { platform } = require('os'); - -function shouldUseYarn() { - try { - execSync('yarnpkg --version', { stdio: 'ignore' }); - return true; - } catch (e) { - return false; - } -} - -function shouldUseNpmConcurrently() { - try { - const versionString = execSync('npm --version'); - const m = /^(\d+)[.]/.exec(versionString); - // NPM >= 5 support concurrent installs - return Number(m[1]) >= 5; - } catch (e) { - return false; - } -} - -const yarn = shouldUseYarn(); -const windows = platform() === 'win32'; -const lerna = resolve( - __dirname, - 'node_modules', - '.bin', - windows ? 'lerna.cmd' : 'lerna' -); - -if (!existsSync(lerna)) { - if (yarn) { - console.log('Cannot find lerna. Please run `yarn --check-files`.'); - } else { - console.log( - 'Cannot find lerna. Please remove `node_modules` and run `npm install`.' - ); - } - process.exit(1); -} - -let child; -if (yarn) { - // Yarn does not support concurrency - child = spawn(lerna, ['bootstrap', '--npm-client=yarn', '--concurrency=1'], { - stdio: 'inherit', - }); -} else { - let args = ['bootstrap']; - if ( - // The Windows filesystem does not handle concurrency well - windows || - // Only newer npm versions support concurrency - !shouldUseNpmConcurrently() - ) { - args.push('--concurrency=1'); - } - child = spawn(lerna, args, { stdio: 'inherit' }); -} - -child.on('close', code => process.exit(code)); diff --git a/lerna.json b/lerna.json index 1673f8a31..f1d78d84b 100644 --- a/lerna.json +++ b/lerna.json @@ -1,5 +1,7 @@ { - "lerna": "2.0.0", + "lerna": "2.6.0", + "npmClient": "yarn", + "useWorkspaces": true, "version": "independent", "changelog": { "repo": "facebookincubator/create-react-app", @@ -12,8 +14,5 @@ "tag: internal": ":house: Internal" }, "cacheDir": ".changelog" - }, - "packages": [ - "packages/*" - ] + } } diff --git a/package.json b/package.json index 9cf2f50f1..15f463a10 100644 --- a/package.json +++ b/package.json @@ -1,23 +1,26 @@ { "private": true, + "workspaces": [ + "packages/*" + ], "scripts": { - "build": "node packages/react-scripts/scripts/build.js", + "build": "cd packages/react-scripts && node scripts/build.js", "changelog": "lerna-changelog", "create-react-app": "node tasks/cra.js", "e2e": "tasks/e2e-simple.sh", "e2e:docker": "tasks/local-test.sh", - "postinstall": "node bootstrap.js && cd packages/react-error-overlay/ && npm run build:prod", - "publish": "tasks/release.sh", - "start": "node packages/react-scripts/scripts/start.js", + "postinstall": "cd packages/react-error-overlay/ && yarn build:prod", + "publish": "tasks/publish.sh", + "start": "cd packages/react-scripts && node scripts/start.js", "screencast": "svg-term --cast hItN7sl5yfCPTHxvFg5glhhfp --out screencast.svg --window", - "test": "node packages/react-scripts/scripts/test.js --env=jsdom", + "test": "cd packages/react-scripts && node scripts/test.js --env=jsdom", "format": "prettier --trailing-comma es5 --single-quote --write 'packages/*/*.js' 'packages/*/!(node_modules)/**/*.js'", "precommit": "lint-staged" }, "devDependencies": { "eslint": "^4.4.1", "husky": "^0.13.2", - "lerna": "^2.0.0", + "lerna": "^2.6.0", "lerna-changelog": "^0.6.0", "lint-staged": "^3.3.1", "prettier": "1.6.1", diff --git a/packages/react-error-overlay/.flowconfig b/packages/react-error-overlay/.flowconfig index 8d7de784e..c976167c2 100644 --- a/packages/react-error-overlay/.flowconfig +++ b/packages/react-error-overlay/.flowconfig @@ -1,9 +1,15 @@ -[ignore] -.*/node_modules/eslint-plugin-jsx-a11y/.* - [include] -src/**/*.js +<PROJECT_ROOT>/src/**/*.js + +[ignore] +.*/node_modules/.* +.*/.git/.* +.*/__test__/.* +.*/fixtures/.* [libs] +flow/ [options] +module.file_ext=.js +sharedmemory.hash_table_pow=19 diff --git a/packages/react-error-overlay/flow/env.js b/packages/react-error-overlay/flow/env.js new file mode 100644 index 000000000..12b151f5e --- /dev/null +++ b/packages/react-error-overlay/flow/env.js @@ -0,0 +1,19 @@ +declare module 'anser' { + declare module.exports: any; +} + +declare module 'babel-code-frame' { + declare module.exports: any; +} + +declare module 'html-entities' { + declare module.exports: any; +} + +declare module 'settle-promise' { + declare module.exports: any; +} + +declare module 'source-map' { + declare module.exports: any; +} diff --git a/packages/react-error-overlay/package.json b/packages/react-error-overlay/package.json index f2148885c..9808a9da8 100644 --- a/packages/react-error-overlay/package.json +++ b/packages/react-error-overlay/package.json @@ -6,7 +6,7 @@ "scripts": { "prepublishOnly": "npm run build:prod && npm test", "start": "cross-env NODE_ENV=development node build.js --watch", - "test": "flow && cross-env NODE_ENV=test jest", + "test": "cross-env NODE_ENV=test jest", "build": "cross-env NODE_ENV=development node build.js", "build:prod": "cross-env NODE_ENV=production node build.js" }, diff --git a/tasks/e2e-installs.sh b/tasks/e2e-installs.sh index 9d7a0e99d..bcd616f36 100755 --- a/tasks/e2e-installs.sh +++ b/tasks/e2e-installs.sh @@ -99,8 +99,8 @@ yarn config set registry "$custom_registry_url" npx npm-cli-login@0.0.10 -u user -p password -e user@example.com -r "$custom_registry_url" --quotes # Publish the monorepo -git clean -f -./tasks/release.sh --yes --force-publish=* --skip-git --cd-version=prerelease --exact --npm-tag=latest +git clean -df +./tasks/publish.sh --yes --force-publish=* --skip-git --cd-version=prerelease --exact --npm-tag=latest # ****************************************************************************** # Test --scripts-version with a version number diff --git a/tasks/e2e-kitchensink.sh b/tasks/e2e-kitchensink.sh index 9dc2370da..d73c45ddb 100755 --- a/tasks/e2e-kitchensink.sh +++ b/tasks/e2e-kitchensink.sh @@ -91,8 +91,8 @@ yarn config set registry "$custom_registry_url" npx npm-cli-login@0.0.10 -u user -p password -e user@example.com -r "$custom_registry_url" --quotes # Publish the monorepo -git clean -f -./tasks/release.sh --yes --force-publish=* --skip-git --cd-version=prerelease --exact --npm-tag=latest +git clean -df +./tasks/publish.sh --yes --force-publish=* --skip-git --cd-version=prerelease --exact --npm-tag=latest # ****************************************************************************** # Now that we have published them, create a clean app folder and install them. diff --git a/tasks/e2e-simple.sh b/tasks/e2e-simple.sh index 98941f256..b566ae37a 100755 --- a/tasks/e2e-simple.sh +++ b/tasks/e2e-simple.sh @@ -107,6 +107,12 @@ npx npm-cli-login@0.0.10 -u user -p password -e user@example.com -r "$custom_reg cd packages/react-error-overlay/ ./node_modules/.bin/eslint --max-warnings 0 src/ yarn test + +if [ $APPVEYOR != 'True' ]; then + # Flow started hanging on AppVeyor after we moved to Yarn Workspaces :-( + yarn flow +fi + cd ../.. cd packages/react-dev-utils/ yarn test @@ -134,8 +140,8 @@ CI=true yarn test # Test local start command yarn start --smoke-test -git clean -f -./tasks/release.sh --yes --force-publish=* --skip-git --cd-version=prerelease --exact --npm-tag=latest +git clean -df +./tasks/publish.sh --yes --force-publish=* --skip-git --cd-version=prerelease --exact --npm-tag=latest # ****************************************************************************** # Install react-scripts prerelease via create-react-app prerelease. diff --git a/tasks/release.sh b/tasks/publish.sh similarity index 84% rename from tasks/release.sh rename to tasks/publish.sh index 0f11bb0d6..c1cae86c2 100755 --- a/tasks/release.sh +++ b/tasks/publish.sh @@ -26,21 +26,14 @@ set -x cd .. root_path=$PWD -# You can only release with npm >= 3 -if [ $(npm -v | head -c 1) -lt 3 ]; then - echo "Releasing requires npm >= 3. Aborting."; - exit 1; -fi; - if [ -n "$(git status --porcelain)" ]; then echo "Your git status is not clean. Aborting."; exit 1; fi -cd "$root_path" # Compile cd packages/react-error-overlay/ npm run build:prod cd ../.. # Go! -./node_modules/.bin/lerna publish --independent "$@" +./node_modules/.bin/lerna publish --independent "$@" \ No newline at end of file From 3f0994775f19bd33119dc303a0b4101eea2616e3 Mon Sep 17 00:00:00 2001 From: Dan Abramov <dan.abramov@gmail.com> Date: Fri, 12 Jan 2018 13:50:42 +0000 Subject: [PATCH 096/122] Pin Lerna --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 15f463a10..9a32bc135 100644 --- a/package.json +++ b/package.json @@ -20,7 +20,7 @@ "devDependencies": { "eslint": "^4.4.1", "husky": "^0.13.2", - "lerna": "^2.6.0", + "lerna": "2.6.0", "lerna-changelog": "^0.6.0", "lint-staged": "^3.3.1", "prettier": "1.6.1", From 238af4b1dac7e2e2026217c9d07eb58ba8422b2d Mon Sep 17 00:00:00 2001 From: Joe Haddad <timer150@gmail.com> Date: Fri, 12 Jan 2018 22:14:27 -0500 Subject: [PATCH 097/122] Enable Yarn check files (#3769) * This is a good default. Adds approx 4 seconds to install time, but can save some headaches. * Add no lockfile for add, too --- .yarnrc | 2 ++ 1 file changed, 2 insertions(+) diff --git a/.yarnrc b/.yarnrc index acaaffdb7..07e44a9a5 100644 --- a/.yarnrc +++ b/.yarnrc @@ -1 +1,3 @@ --install.no-lockfile true +--install.check-files true +--add.no-lockfile true From a3d33c46084d88ece2c5ab49e61e5fc62f3a8187 Mon Sep 17 00:00:00 2001 From: Dan Abramov <dan.abramov@gmail.com> Date: Sun, 14 Jan 2018 02:48:15 +0000 Subject: [PATCH 098/122] Add an explicit link to Code of Conduct (#3781) All FB open source projects including this one enforce [our code of conduct](https://code.facebook.com/pages/876921332402685/open-source-code-of-conduct), but I just realized we haven't explicitly linked to it from a Markdown file. So I'm doing just that. --- CODE_OF_CONDUCT.md | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 CODE_OF_CONDUCT.md diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md new file mode 100644 index 000000000..55203be74 --- /dev/null +++ b/CODE_OF_CONDUCT.md @@ -0,0 +1,3 @@ +# Code of Conduct + +Facebook has adopted a Code of Conduct that we expect project participants to adhere to. Please [read the full text](https://code.facebook.com/pages/876921332402685/open-source-code-of-conduct) so that you can understand what actions will and will not be tolerated. From 585608e3d6c33d99f53f3b14ead39c8eb069abbf Mon Sep 17 00:00:00 2001 From: Dan Abramov <dan.abramov@gmail.com> Date: Sun, 14 Jan 2018 10:24:00 +0000 Subject: [PATCH 099/122] Update opn (#3784) --- packages/react-dev-utils/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-dev-utils/package.json b/packages/react-dev-utils/package.json index 54606f33f..d6fe1bd3e 100644 --- a/packages/react-dev-utils/package.json +++ b/packages/react-dev-utils/package.json @@ -47,7 +47,7 @@ "gzip-size": "3.0.0", "inquirer": "3.3.0", "is-root": "1.0.0", - "opn": "5.1.0", + "opn": "5.2.0", "react-error-overlay": "^3.0.0", "recursive-readdir": "2.2.1", "shell-quote": "1.6.1", From 77148107d9f3b20fb874a8da3146172c34e921db Mon Sep 17 00:00:00 2001 From: Dan Abramov <dan.abramov@gmail.com> Date: Sun, 14 Jan 2018 11:52:10 +0000 Subject: [PATCH 100/122] Add npx note to quick overview --- README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README.md b/README.md index d6945417a..b09630e90 100644 --- a/README.md +++ b/README.md @@ -16,6 +16,8 @@ cd my-app npm start ``` +*([npx](https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b) comes with npm 5.2+ and higher, see [instructions for older npm versions](https://gist.github.com/gaearon/4064d3c23a77c74a3614c498a8bb1c5f))* + Then open [http://localhost:3000/](http://localhost:3000/) to see your app.<br> When you’re ready to deploy to production, create a minified bundle with `npm run build`. From 1e9eaf3630cbce6eeb54f456b847133d2309c378 Mon Sep 17 00:00:00 2001 From: Dan Abramov <dan.abramov@gmail.com> Date: Sun, 14 Jan 2018 15:05:38 +0000 Subject: [PATCH 101/122] Bump detect-port-alt (#3787) * Bump detect-port-alt * Bump again --- packages/react-dev-utils/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-dev-utils/package.json b/packages/react-dev-utils/package.json index d6fe1bd3e..d4b933f71 100644 --- a/packages/react-dev-utils/package.json +++ b/packages/react-dev-utils/package.json @@ -40,7 +40,7 @@ "babel-code-frame": "6.26.0", "chalk": "1.1.3", "cross-spawn": "5.1.0", - "detect-port-alt": "1.1.3", + "detect-port-alt": "1.1.5", "escape-string-regexp": "1.0.5", "filesize": "3.5.11", "global-modules": "1.0.0", From 22f9fe0d33dded7ec5a361ef08f69167874a4eb7 Mon Sep 17 00:00:00 2001 From: Dan Abramov <dan.abramov@gmail.com> Date: Sun, 14 Jan 2018 15:37:00 +0000 Subject: [PATCH 102/122] Always include destructuring transform (#3788) * Always include destructuring transform * Fix lint --- packages/babel-preset-react-app/index.js | 4 ++++ packages/babel-preset-react-app/package.json | 1 + .../kitchensink/src/features/syntax/ObjectDestructuring.js | 4 +++- 3 files changed, 8 insertions(+), 1 deletion(-) diff --git a/packages/babel-preset-react-app/index.js b/packages/babel-preset-react-app/index.js index 0d961af6f..d90fb6af5 100644 --- a/packages/babel-preset-react-app/index.js +++ b/packages/babel-preset-react-app/index.js @@ -7,6 +7,10 @@ 'use strict'; const plugins = [ + // Necessary to include regardless of the environment because + // in practice some other transforms (such as object-rest-spread) + // don't work without it: https://github.com/babel/babel/issues/7215 + require.resolve('babel-plugin-transform-es2015-destructuring'), // class { handleClick = () => { } } require.resolve('babel-plugin-transform-class-properties'), // The following two plugins use Object.assign directly, instead of Babel's diff --git a/packages/babel-preset-react-app/package.json b/packages/babel-preset-react-app/package.json index f020f99e0..23c221423 100644 --- a/packages/babel-preset-react-app/package.json +++ b/packages/babel-preset-react-app/package.json @@ -14,6 +14,7 @@ "babel-plugin-dynamic-import-node": "1.1.0", "babel-plugin-syntax-dynamic-import": "6.18.0", "babel-plugin-transform-class-properties": "6.24.1", + "babel-plugin-transform-es2015-destructuring": "6.23.0", "babel-plugin-transform-object-rest-spread": "6.26.0", "babel-plugin-transform-react-constant-elements": "6.23.0", "babel-plugin-transform-react-jsx": "6.24.1", diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ObjectDestructuring.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ObjectDestructuring.js index be519175f..14b06f7a4 100644 --- a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ObjectDestructuring.js +++ b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ObjectDestructuring.js @@ -40,7 +40,9 @@ export default class extends Component { return ( <div id="feature-object-destructuring"> {this.state.users.map(user => { - const { id, name } = user; + const { id, ...rest } = user; + // eslint-disable-next-line no-unused-vars + const [{ name, ...innerRest }] = [{ ...rest }]; return <div key={id}>{name}</div>; })} </div> From b86fe056a36c2da948e9c3ad363217712b4a37bc Mon Sep 17 00:00:00 2001 From: Ian Sutherland <ian@iansutherland.ca> Date: Sun, 14 Jan 2018 12:14:37 -0700 Subject: [PATCH 103/122] Add warning when HOST environment variable is set (#3730) * Add warning when HOST environment variable is set (#3719) * Improve HOST environment variable warning message * Adjust text and message Closes #3719 --- packages/react-scripts/scripts/start.js | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/packages/react-scripts/scripts/start.js b/packages/react-scripts/scripts/start.js index 7eb7ad464..3ff1b91f4 100644 --- a/packages/react-scripts/scripts/start.js +++ b/packages/react-scripts/scripts/start.js @@ -51,6 +51,21 @@ if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) { const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000; const HOST = process.env.HOST || '0.0.0.0'; +if (process.env.HOST) { + console.log( + chalk.cyan( + `Attempting to bind to HOST environment variable: ${chalk.yellow( + chalk.bold(process.env.HOST) + )}` + ) + ); + console.log( + `If this was unintentional, check that you haven't mistakenly set it in your shell.` + ); + console.log(`Learn more here: ${chalk.yellow('http://bit.ly/2mwWSwH')}`); + console.log(); +} + // We attempt to use the default port but if it is busy, we offer the user to // run on a different port. `choosePort()` Promise resolves to the next free port. choosePort(HOST, DEFAULT_PORT) From 12d05447b925f121c9b03954b59c6378bf783693 Mon Sep 17 00:00:00 2001 From: Dan Abramov <dan.abramov@gmail.com> Date: Sun, 14 Jan 2018 23:57:49 +0000 Subject: [PATCH 104/122] Test Node 9 on CI (#3793) * Test Node 9 on CI * Oops --- .travis.yml | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/.travis.yml b/.travis.yml index ef223ffd5..860000b5c 100644 --- a/.travis.yml +++ b/.travis.yml @@ -2,8 +2,8 @@ dist: trusty language: node_js node_js: - - 6 - 8 + - 9 cache: directories: - node_modules @@ -24,3 +24,5 @@ matrix: include: - node_js: 0.10 env: TEST_SUITE=old-node + - node_js: 6 + env: TEST_SUITE=kitchensink From 95b26012a4a0debeef98c8bc69214db3a83b5646 Mon Sep 17 00:00:00 2001 From: Dan Abramov <dan.abramov@gmail.com> Date: Mon, 15 Jan 2018 00:36:53 +0000 Subject: [PATCH 105/122] Tweak section on expanding env variables --- packages/react-scripts/template/README.md | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index e5c0cf6bf..7c6414560 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -980,17 +980,20 @@ these defined as well. Consult their documentation how to do this. For example, #### Expanding Environment Variables In `.env` ->Note: this feature is available with `react-scripts@1.0.18` and higher. +>Note: this feature is available with `react-scripts@1.1.0` and higher. -Expand variables already on your machine for use in your .env file (using [dotenv-expand](https://github.com/motdotla/dotenv-expand)). See [#2223](https://github.com/facebookincubator/create-react-app/issues/2223). +Expand variables already on your machine for use in your `.env` file (using [dotenv-expand](https://github.com/motdotla/dotenv-expand)). For example, to get the environment variable `npm_package_version`: + ``` REACT_APP_VERSION=$npm_package_version # also works: # REACT_APP_VERSION=${npm_package_version} ``` + Or expand variables local to the current `.env` file: + ``` DOMAIN=www.example.com REACT_APP_FOO=$DOMAIN/foo From aa5bdcd05f490e9e1b529a45deb1f0ab6fa487fa Mon Sep 17 00:00:00 2001 From: Dan Abramov <dan.abramov@gmail.com> Date: Mon, 15 Jan 2018 00:37:46 +0000 Subject: [PATCH 106/122] Changelog for 1.1.0 (#3795) --- CHANGELOG.md | 187 +++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 187 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index f233de0ad..a2dfec8fe 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,190 @@ +## 1.1.0 (January 15, 2018) + +#### :rocket: New Feature + +* `react-scripts` + + * [#3387](https://github.com/facebookincubator/create-react-app/pull/3387) Add support for variable expansion in `.env` files. ([@moos](https://github.com/moos)) + +* `react-error-overlay` + + * [#3474](https://github.com/facebookincubator/create-react-app/pull/3474) Allow the error overlay to be unregistered. ([@Timer](https://github.com/Timer)) + +* `create-react-app` + + * [#3408](https://github.com/facebookincubator/create-react-app/pull/3408) Add `--info` flag to help gather bug reports. ([@tabrindle](https://github.com/tabrindle)) + * [#3409](https://github.com/facebookincubator/create-react-app/pull/3409) Add `--use-npm` flag to bypass Yarn even on systems that have it. ([@tabrindle](https://github.com/tabrindle)) + * [#3725](https://github.com/facebookincubator/create-react-app/pull/3725) Extend `--scripts-version` to include `.tar.gz` format. ([@SaschaDens](https://github.com/SaschaDens)) + * [#3629](https://github.com/facebookincubator/create-react-app/pull/3629) Allowing `"file:<path>"` `--scripts-version` values. ([@GreenGremlin](https://github.com/GreenGremlin)) + + +#### :bug: Bug Fix + +* `babel-preset-react-app`, `react-scripts` + + * [#3788](https://github.com/facebookincubator/create-react-app/pull/3788) Fix object destructuring inside an array on Node 6. ([@gaearon](https://github.com/gaearon)) + +* `react-dev-utils` + + * [#3784](https://github.com/facebookincubator/create-react-app/pull/3784) Detach browser process from the shell on Linux. ([@gaearon](https://github.com/gaearon)) + * [#3726](https://github.com/facebookincubator/create-react-app/pull/3726) Use proxy for all request methods other than `GET`. ([@doshisid](https://github.com/doshisid)) + * [#3440](https://github.com/facebookincubator/create-react-app/pull/3440) Print full directory name from `lsof`. ([@rmccue](https://github.com/rmccue)) + * [#2071](https://github.com/facebookincubator/create-react-app/pull/2071) Fix broken console clearing on Windows. ([@danielverejan](https://github.com/danielverejan)) + * [#3686](https://github.com/facebookincubator/create-react-app/pull/3686) Fix starting a project in directory with `++` in the name. ([@Norris1z](https://github.com/Norris1z)) + +* `create-react-app` + + * [#3320](https://github.com/facebookincubator/create-react-app/pull/3320) Fix offline installation to respect proxy from `.npmrc`. ([@mdogadailo](https://github.com/mdogadailo)) + +* `react-scripts` + + * [#3537](https://github.com/facebookincubator/create-react-app/pull/3537) Add `mjs` and `jsx` filename extensions to `file-loader` exclude pattern. ([@iansu](https://github.com/iansu)) + * [#3511](https://github.com/facebookincubator/create-react-app/pull/3511) Unmount the component in the default generated test. ([@gaearon](https://github.com/gaearon)) + +#### :nail_care: Enhancement + +* `react-scripts` + + * [#3730](https://github.com/facebookincubator/create-react-app/pull/3730) Print when `HOST` environment variable is set. ([@iansu](https://github.com/iansu)) + * [#3455](https://github.com/facebookincubator/create-react-app/pull/3455) Add a localhost-only log message pointing folks to the PWA docs. ([@jeffposnick](https://github.com/jeffposnick)) + * [#3416](https://github.com/facebookincubator/create-react-app/pull/3416) Improve eject message. ([@xjlim](https://github.com/xjlim)) + +* `create-react-app` + + * [#3740](https://github.com/facebookincubator/create-react-app/pull/3740) Allow more non-conflicting files in initial project directory. ([@GreenGremlin](https://github.com/GreenGremlin)) + +* `react-dev-utils` + + * [#3104](https://github.com/facebookincubator/create-react-app/pull/3104) Add link to deployment docs after build. ([@viankakrisna](https://github.com/viankakrisna)) + * [#3652](https://github.com/facebookincubator/create-react-app/pull/3652) Add `code-insiders` to the editor list. ([@shrynx](https://github.com/shrynx)) + * [#3700](https://github.com/facebookincubator/create-react-app/pull/3700) Add editor support for Sublime Dev & VSCode Insiders. ([@yyx990803](https://github.com/yyx990803)) + * [#3545](https://github.com/facebookincubator/create-react-app/pull/3545) Autodetect MacVim editor. ([@gnapse](https://github.com/gnapse)) + +* `react-dev-utils`, `react-error-overlay` + + * [#3465](https://github.com/facebookincubator/create-react-app/pull/3465) Open editor to exact column from build error overlay. ([@tharakawj](https://github.com/tharakawj)) + +* `react-dev-utils`, `react-scripts` + + * [#3721](https://github.com/facebookincubator/create-react-app/pull/3721) Support setting `none` in `REACT_EDITOR` environment variable. ([@raerpo](https://github.com/raerpo)) + +* `eslint-config-react-app` + + * [#3716](https://github.com/facebookincubator/create-react-app/pull/3716) Relax `no-cond-assign` rule. ([@gaearon](https://github.com/gaearon)) + +#### :memo: Documentation + +* User Guide + + * [#3659](https://github.com/facebookincubator/create-react-app/pull/3659) Add info about service-worker and HTTP caching headers into Firebase section. ([@bobrosoft](https://github.com/bobrosoft)) + * [#3515](https://github.com/facebookincubator/create-react-app/pull/3515) Add Powershell commands to README.md. ([@Gua-naiko-che](https://github.com/Gua-naiko-che)) + * [#3656](https://github.com/facebookincubator/create-react-app/pull/3656) Better documentation for setupTests.js when ejecting. ([@dannycalleri](https://github.com/dannycalleri)) + * [#1791](https://github.com/facebookincubator/create-react-app/pull/1791) Add link for automatic deployment to azure. ([@ulrikstrid](https://github.com/ulrikstrid)) + * [#3717](https://github.com/facebookincubator/create-react-app/pull/3717) Update README.md. ([@maecapozzi](https://github.com/maecapozzi)) + * [#3710](https://github.com/facebookincubator/create-react-app/pull/3710) Link to an explanation for forking react-scripts. ([@gaearon](https://github.com/gaearon)) + * [#3709](https://github.com/facebookincubator/create-react-app/pull/3709) Document adding a router. ([@gaearon](https://github.com/gaearon)) + * [#3670](https://github.com/facebookincubator/create-react-app/pull/3670) Fix typo in the User Guide. ([@qbahers](https://github.com/qbahers)) + * [#3645](https://github.com/facebookincubator/create-react-app/pull/3645) Update README.md. ([@elie222](https://github.com/elie222)) + * [#3533](https://github.com/facebookincubator/create-react-app/pull/3533) Use safer/more aesthetic syntax for setting environment variables on Windows. ([@cdanielsen](https://github.com/cdanielsen)) + * [#3605](https://github.com/facebookincubator/create-react-app/pull/3605) Updated Debugging Tests for VSCode. ([@amadeogallardo](https://github.com/amadeogallardo)) + * [#3601](https://github.com/facebookincubator/create-react-app/pull/3601) Fixed typo in webpack.config.dev.js. ([@nmenglund](https://github.com/nmenglund)) + * [#3576](https://github.com/facebookincubator/create-react-app/pull/3576) Updates comment to reflect codebase. ([@rahulcs](https://github.com/rahulcs)) + * [#3510](https://github.com/facebookincubator/create-react-app/pull/3510) Update User Guide with deploying to GitHub User pages. ([@aaronlna](https://github.com/aaronlna)) + * [#3503](https://github.com/facebookincubator/create-react-app/pull/3503) Update Prettier editor integration link. ([@gaving](https://github.com/gaving)) + * [#3453](https://github.com/facebookincubator/create-react-app/pull/3453) Fix dead links. ([@vannio](https://github.com/vannio)) + * [#2992](https://github.com/facebookincubator/create-react-app/pull/2992) Docs: How to Debug Unit Tests. ([@MattMorgis](https://github.com/MattMorgis)) + +* Other + + * [#3729](https://github.com/facebookincubator/create-react-app/pull/3729) Update README.md to note Neutrino's support of react components. ([@eliperelman](https://github.com/eliperelman)) + * [#2841](https://github.com/facebookincubator/create-react-app/pull/2841) Documentation to help windows contributors. ([@Dubes](https://github.com/Dubes)) + * [#3489](https://github.com/facebookincubator/create-react-app/pull/3489) Add link to nvm-windows. ([@davidgilbertson](https://github.com/davidgilbertson)) + +* `eslint-config-react-app` + + * [#3460](https://github.com/facebookincubator/create-react-app/pull/3460) Fix broken link to `href-no-hash` eslint rule. ([@hazolsky](https://github.com/hazolsky)) + +#### :house: Internal + +* Other + + * [#3769](https://github.com/facebookincubator/create-react-app/pull/3769) Enable Yarn check files. ([@Timer](https://github.com/Timer)) + * [#3756](https://github.com/facebookincubator/create-react-app/pull/3756) Clean up changes to npm and yarn registry in E2E tests. ([@viankakrisna](https://github.com/viankakrisna)) + * [#3744](https://github.com/facebookincubator/create-react-app/pull/3744) Use private registry in E2E tests. ([@Timer](https://github.com/Timer)) + * [#3738](https://github.com/facebookincubator/create-react-app/pull/3738) Always use Yarn on CI. ([@gaearon](https://github.com/gaearon)) + * [#2309](https://github.com/facebookincubator/create-react-app/pull/2309) Port `cra.sh` development task to javascript. ([@ianschmitz](https://github.com/ianschmitz)) + * [#3411](https://github.com/facebookincubator/create-react-app/pull/3411) Simplify waiting for app start in E2E tests. ([@xjlim](https://github.com/xjlim)) + * [#3755](https://github.com/facebookincubator/create-react-app/pull/3755) Switch to Yarn Workspaces. ([@gaearon](https://github.com/gaearon)) + * [#3757](https://github.com/facebookincubator/create-react-app/pull/3757) Try updating Flow. ([@gaearon](https://github.com/gaearon)) + * [#3414](https://github.com/facebookincubator/create-react-app/pull/3414) Export `dismissRuntimeErrors` function. ([@skidding](https://github.com/skidding)) + * [#3036](https://github.com/facebookincubator/create-react-app/pull/3036) Cleaning up `printHostingInstructions` a bit. ([@GreenGremlin](https://github.com/GreenGremlin)) + * [#3514](https://github.com/facebookincubator/create-react-app/pull/3514) Fix `FileSizeReporter` for multi build Webpack setups. ([@iiska](https://github.com/iiska)) + * [#3362](https://github.com/facebookincubator/create-react-app/pull/3362) Refactor extra watch options regex to `react-dev-utils`. ([@xjlim](https://github.com/xjlim)) + +#### Committers: 47 + +- Aaron Lamb ([aaronlna](https://github.com/aaronlna)) +- Ade Viankakrisna Fadlil ([viankakrisna](https://github.com/viankakrisna)) +- Amadeo Gallardo ([amadeogallardo](https://github.com/amadeogallardo)) +- Andy Kenward ([andykenward](https://github.com/andykenward)) +- Christian Danielsen ([cdanielsen](https://github.com/cdanielsen)) +- Clayton Ray ([iamclaytonray](https://github.com/iamclaytonray)) +- Dan Abramov ([gaearon](https://github.com/gaearon)) +- Daniel Verejan ([danielverejan](https://github.com/danielverejan)) +- Danny Calleri ([dannycalleri](https://github.com/dannycalleri)) +- David Boyne ([boyney123](https://github.com/boyney123)) +- David Gilbertson ([davidgilbertson](https://github.com/davidgilbertson)) +- Eli Perelman ([eliperelman](https://github.com/eliperelman)) +- Elie ([elie222](https://github.com/elie222)) +- Ernesto García ([gnapse](https://github.com/gnapse)) +- Evan You ([yyx990803](https://github.com/yyx990803)) +- Gavin Gilmour ([gaving](https://github.com/gaving)) +- Ian Schmitz ([ianschmitz](https://github.com/ianschmitz)) +- Ian Sutherland ([iansu](https://github.com/iansu)) +- JANG SUN HYUK ([wkdtjsgur100](https://github.com/wkdtjsgur100)) +- Jeffrey Posnick ([jeffposnick](https://github.com/jeffposnick)) +- Joe Haddad ([Timer](https://github.com/Timer)) +- Joe Lim ([xjlim](https://github.com/xjlim)) +- Jonathan ([GreenGremlin](https://github.com/GreenGremlin)) +- Juhamatti Niemelä ([iiska](https://github.com/iiska)) +- Mae Capozzi ([maecapozzi](https://github.com/maecapozzi)) +- Maksym Dogadailo ([mdogadailo](https://github.com/mdogadailo)) +- Mario Nebl ([marionebl](https://github.com/marionebl)) +- Matt Morgis ([MattMorgis](https://github.com/MattMorgis)) +- Misha Khokhlov ([hazolsky](https://github.com/hazolsky)) +- Moos ([moos](https://github.com/moos)) +- Nils Magnus Englund ([nmenglund](https://github.com/nmenglund)) +- Norris Oduro ([Norris1z](https://github.com/Norris1z)) +- Ovidiu Cherecheș ([skidding](https://github.com/skidding)) +- Quentin Bahers ([qbahers](https://github.com/qbahers)) +- Rafael E. Poveda ([raerpo](https://github.com/raerpo)) +- Rahul Chanila ([rahulcs](https://github.com/rahulcs)) +- Ryan McCue ([rmccue](https://github.com/rmccue)) +- Sascha Dens ([SaschaDens](https://github.com/SaschaDens)) +- Siddharth Doshi ([doshisid](https://github.com/doshisid)) +- Tao Gómez Gil ([Gua-naiko-che](https://github.com/Gua-naiko-che)) +- Tharaka Wijebandara ([tharakawj](https://github.com/tharakawj)) +- Trevor Brindle ([tabrindle](https://github.com/tabrindle)) +- Ulrik Strid ([ulrikstrid](https://github.com/ulrikstrid)) +- Vladimir Tolstikov ([bobrosoft](https://github.com/bobrosoft)) +- [Dubes](https://github.com/Dubes) +- [vannio](https://github.com/vannio) +- shrynx ([shrynx](https://github.com/shrynx)) + +### Migrating from 1.0.17 to 1.1.0 + +Inside any created project that has not been ejected, run: + +``` +npm install --save --save-exact react-scripts@1.1.0 +``` + +or + +``` +yarn add --exact react-scripts@1.1.0 +``` + ## 1.0.17 (November 3, 2017) #### :nail_care: Enhancement From e73a783ef1f0deec3401f1d0c853a30b6c88bf71 Mon Sep 17 00:00:00 2001 From: Dan <dan.abramov@gmail.com> Date: Mon, 15 Jan 2018 00:53:37 +0000 Subject: [PATCH 107/122] Publish - babel-preset-react-app@3.1.1 - create-react-app@1.5.0 - eslint-config-react-app@2.1.0 - react-dev-utils@5.0.0 - react-error-overlay@4.0.0 - react-scripts@1.1.0 --- packages/babel-preset-react-app/package.json | 2 +- packages/create-react-app/package.json | 2 +- packages/eslint-config-react-app/package.json | 2 +- packages/react-dev-utils/package.json | 4 ++-- packages/react-error-overlay/package.json | 6 +++--- packages/react-scripts/package.json | 8 ++++---- 6 files changed, 12 insertions(+), 12 deletions(-) diff --git a/packages/babel-preset-react-app/package.json b/packages/babel-preset-react-app/package.json index 23c221423..c6a7e2944 100644 --- a/packages/babel-preset-react-app/package.json +++ b/packages/babel-preset-react-app/package.json @@ -1,6 +1,6 @@ { "name": "babel-preset-react-app", - "version": "3.1.0", + "version": "3.1.1", "description": "Babel preset used by Create React App", "repository": "facebookincubator/create-react-app", "license": "MIT", diff --git a/packages/create-react-app/package.json b/packages/create-react-app/package.json index 1b3b60aac..65ab56a16 100644 --- a/packages/create-react-app/package.json +++ b/packages/create-react-app/package.json @@ -1,6 +1,6 @@ { "name": "create-react-app", - "version": "1.4.3", + "version": "1.5.0", "keywords": [ "react" ], diff --git a/packages/eslint-config-react-app/package.json b/packages/eslint-config-react-app/package.json index a10ef6799..c13b0417c 100644 --- a/packages/eslint-config-react-app/package.json +++ b/packages/eslint-config-react-app/package.json @@ -1,6 +1,6 @@ { "name": "eslint-config-react-app", - "version": "2.0.1", + "version": "2.1.0", "description": "ESLint configuration used by Create React App", "repository": "facebookincubator/create-react-app", "license": "MIT", diff --git a/packages/react-dev-utils/package.json b/packages/react-dev-utils/package.json index d4b933f71..18f37c971 100644 --- a/packages/react-dev-utils/package.json +++ b/packages/react-dev-utils/package.json @@ -1,6 +1,6 @@ { "name": "react-dev-utils", - "version": "4.2.1", + "version": "5.0.0", "description": "Webpack utilities used by Create React App", "repository": "facebookincubator/create-react-app", "license": "MIT", @@ -48,7 +48,7 @@ "inquirer": "3.3.0", "is-root": "1.0.0", "opn": "5.2.0", - "react-error-overlay": "^3.0.0", + "react-error-overlay": "^4.0.0", "recursive-readdir": "2.2.1", "shell-quote": "1.6.1", "sockjs-client": "1.1.4", diff --git a/packages/react-error-overlay/package.json b/packages/react-error-overlay/package.json index 9808a9da8..87099dd5e 100644 --- a/packages/react-error-overlay/package.json +++ b/packages/react-error-overlay/package.json @@ -1,6 +1,6 @@ { "name": "react-error-overlay", - "version": "3.0.0", + "version": "4.0.0", "description": "An overlay for displaying stack frames.", "main": "lib/index.js", "scripts": { @@ -35,13 +35,13 @@ "babel-core": "^6.26.0", "babel-eslint": "7.2.3", "babel-loader": "^7.1.2", - "babel-preset-react-app": "^3.1.0", + "babel-preset-react-app": "^3.1.1", "babel-runtime": "6.26.0", "chalk": "^2.1.0", "chokidar": "^1.7.0", "cross-env": "5.0.5", "eslint": "4.4.1", - "eslint-config-react-app": "^2.0.1", + "eslint-config-react-app": "^2.1.0", "eslint-plugin-flowtype": "2.35.0", "eslint-plugin-import": "2.7.0", "eslint-plugin-jsx-a11y": "5.1.1", diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index f6bff1dea..91d4a584c 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -1,6 +1,6 @@ { "name": "react-scripts", - "version": "1.0.17", + "version": "1.1.0", "description": "Configuration and scripts for Create React App.", "repository": "facebookincubator/create-react-app", "license": "MIT", @@ -26,7 +26,7 @@ "babel-eslint": "7.2.3", "babel-jest": "20.0.3", "babel-loader": "7.1.2", - "babel-preset-react-app": "^3.1.0", + "babel-preset-react-app": "^3.1.1", "babel-runtime": "6.26.0", "case-sensitive-paths-webpack-plugin": "2.1.1", "chalk": "1.1.3", @@ -34,7 +34,7 @@ "dotenv": "4.0.0", "dotenv-expand": "4.0.1", "eslint": "4.10.0", - "eslint-config-react-app": "^2.0.1", + "eslint-config-react-app": "^2.1.0", "eslint-loader": "1.9.0", "eslint-plugin-flowtype": "2.39.1", "eslint-plugin-import": "2.8.0", @@ -50,7 +50,7 @@ "postcss-loader": "2.0.8", "promise": "8.0.1", "raf": "3.4.0", - "react-dev-utils": "^4.2.1", + "react-dev-utils": "^5.0.0", "style-loader": "0.19.0", "sw-precache-webpack-plugin": "0.11.4", "url-loader": "0.6.2", From d9799641268dfadffb625af68ce0a78895147728 Mon Sep 17 00:00:00 2001 From: Dan Abramov <dan.abramov@gmail.com> Date: Mon, 15 Jan 2018 00:55:15 +0000 Subject: [PATCH 108/122] Tweak publishing note --- CONTRIBUTING.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 62908c39b..72994ebbf 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -121,7 +121,7 @@ By default git would use `CRLF` line endings which would cause the scripts to fa * Add a four-space indented paragraph after each non-trivial list item, explaining what changed and why. For each breaking change also write who it affects and instructions for migrating existing code. * Maybe add some newlines here and there. Preview the result on GitHub to get a feel for it. Changelog generator output is a bit too terse for my taste, so try to make it visually pleasing and well grouped. 6. Make sure to include “Migrating from ...” instructions for the previous release. Often you can copy and paste them. -7. Run `yarn run publish`. (Don’t forget the `run` there.) +7. Run `npm run publish`. (It has to be `npm run publish` exactly, not just `npm publish` or `yarn publish`.) 8. Wait for a long time, and it will get published. Don’t worry that it’s stuck. In the end the publish script will prompt for versions before publishing the packages. 9. After publishing, create a GitHub Release with the same text as the changelog entry. See previous Releases for inspiration. From 2bf092967ff7437fb4b4c7a9734cca49faa22267 Mon Sep 17 00:00:00 2001 From: Bond <bondz@users.noreply.github.com> Date: Thu, 18 Jan 2018 12:55:02 +0100 Subject: [PATCH 109/122] pin envinfo version to 3.4.2 (#3853) See #3837 --- packages/create-react-app/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/create-react-app/package.json b/packages/create-react-app/package.json index 65ab56a16..e1fe32f00 100644 --- a/packages/create-react-app/package.json +++ b/packages/create-react-app/package.json @@ -24,7 +24,7 @@ "chalk": "^1.1.1", "commander": "^2.9.0", "cross-spawn": "^4.0.0", - "envinfo": "^3.8.0", + "envinfo": "3.4.2", "fs-extra": "^1.0.0", "hyperquest": "^2.1.2", "semver": "^5.0.3", From 034c6ad348416b1067fa3a389b163ddf0cfaeef6 Mon Sep 17 00:00:00 2001 From: Dan Abramov <dan.abramov@gmail.com> Date: Thu, 18 Jan 2018 12:08:58 +0000 Subject: [PATCH 110/122] 1.5.1 --- packages/create-react-app/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/create-react-app/package.json b/packages/create-react-app/package.json index e1fe32f00..93d7b00ad 100644 --- a/packages/create-react-app/package.json +++ b/packages/create-react-app/package.json @@ -1,6 +1,6 @@ { "name": "create-react-app", - "version": "1.5.0", + "version": "1.5.1", "keywords": [ "react" ], From bab2c295220a88f1ea5bdabd0bf65fb7c7a98152 Mon Sep 17 00:00:00 2001 From: Robin van der Vleuten <robin@webstronauts.co> Date: Sat, 20 Jan 2018 20:31:27 +0100 Subject: [PATCH 111/122] Set the public path to the asset manifest entries (#2544) --- packages/react-scripts/config/webpack.config.prod.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js index 3b2a2068d..83bcadb63 100644 --- a/packages/react-scripts/config/webpack.config.prod.js +++ b/packages/react-scripts/config/webpack.config.prod.js @@ -319,6 +319,7 @@ module.exports = { // having to parse `index.html`. new ManifestPlugin({ fileName: 'asset-manifest.json', + publicPath: publicPath }), // Generate a service worker script that will precache, and keep up to date, // the HTML & assets that are part of the Webpack build. From eee29075d64a4d3c2c5af4f4b9836e54e8f8bb3e Mon Sep 17 00:00:00 2001 From: Ronald Rey <reyronald@gmail.com> Date: Mon, 22 Jan 2018 09:51:38 -0400 Subject: [PATCH 112/122] Include `{json,css}` files in prettier command (#3894) Update User Guide's README.md to include `json` and `css` files in the command to format the entire project for the first time with prettier, that it's consistent with the `lint-staged` command. --- packages/react-scripts/template/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index 7c6414560..3fe1b8c48 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -348,7 +348,7 @@ Next we add a 'lint-staged' field to the `package.json`, for example: "scripts": { ``` -Now, whenever you make a commit, Prettier will format the changed files automatically. You can also run `./node_modules/.bin/prettier --single-quote --write "src/**/*.{js,jsx}"` to format your entire project for the first time. +Now, whenever you make a commit, Prettier will format the changed files automatically. You can also run `./node_modules/.bin/prettier --single-quote --write "src/**/*.{js,jsx,json,css}"` to format your entire project for the first time. Next you might want to integrate Prettier in your favorite editor. Read the section on [Editor Integration](https://prettier.io/docs/en/editors.html) on the Prettier GitHub page. From 815853db7fdd1f372701ecc09f90b7d5b45f7b87 Mon Sep 17 00:00:00 2001 From: Alf Eaton <hubgit@users.noreply.github.com> Date: Sun, 4 Feb 2018 15:54:14 +0000 Subject: [PATCH 113/122] Update instructions for continuous delivery with Netlify (#3971) --- packages/react-scripts/template/README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index 3fe1b8c48..d40c87ebc 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -2264,7 +2264,8 @@ With this setup Netlify will build and deploy when you push to git or open a pul 1. [Start a new netlify project](https://app.netlify.com/signup) 2. Pick your Git hosting service and select your repository -3. Click `Build your site` +3. Set `yarn build` as the build command and `build` as the publish directory +4. Click `Deploy site` **Support for client-side routing:** From 32ea0c0e6d886aab35ec2f476605b5a1cb0a0095 Mon Sep 17 00:00:00 2001 From: Ian Sutherland <ian@iansutherland.ca> Date: Fri, 9 Feb 2018 05:08:30 -0800 Subject: [PATCH 114/122] Update dotenv-expand to fix bug with environment variables that contain a $. (#4000) --- packages/react-scripts/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index 91d4a584c..41ff76e85 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -32,7 +32,7 @@ "chalk": "1.1.3", "css-loader": "0.28.7", "dotenv": "4.0.0", - "dotenv-expand": "4.0.1", + "dotenv-expand": "4.2.0", "eslint": "4.10.0", "eslint-config-react-app": "^2.1.0", "eslint-loader": "1.9.0", From 09d216ecce97a6cabf8e34a97c82b6acff82f27e Mon Sep 17 00:00:00 2001 From: Dan Abramov <dan.abramov@gmail.com> Date: Fri, 9 Feb 2018 13:10:41 +0000 Subject: [PATCH 115/122] Unpin and bump fsevents (for 1.x branch) (#4006) --- packages/react-scripts/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index 41ff76e85..b8f1006e5 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -64,6 +64,6 @@ "react-dom": "^16.0.0" }, "optionalDependencies": { - "fsevents": "1.1.2" + "fsevents": "^1.1.3" } } From 984d661811299ce2256b81ea65258037ac65e68e Mon Sep 17 00:00:00 2001 From: Dan Abramov <dan.abramov@gmail.com> Date: Fri, 9 Feb 2018 13:19:49 +0000 Subject: [PATCH 116/122] Add 1.1.1 changelog --- CHANGELOG.md | 40 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 40 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index a2dfec8fe..b79db6b87 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,43 @@ +## 1.1.1 (February 2, 2018) + +#### :bug: Bug Fix +* `react-scripts` + * [#4000](https://github.com/facebook/create-react-app/pull/4000) Fix escaping `$` in environment variables. ([@iansu](https://github.com/iansu)) + +#### :nail_care: Enhancement +* `react-scripts` + * [#4006](https://github.com/facebook/create-react-app/pull/4006) Add Node 9 compatibility for `fsevents`. ([@gaearon](https://github.com/gaearon)) + +#### :memo: Documentation +* `react-scripts` + * [#3971](https://github.com/facebook/create-react-app/pull/3971) Update instructions for continuous delivery with Netlify. ([@hubgit](https://github.com/hubgit)) + * [#3894](https://github.com/facebook/create-react-app/pull/3894) Include `{json,css}` files in prettier command. ([@reyronald](https://github.com/reyronald)) + +#### :house: Internal +* `create-react-app` + * [#3853](https://github.com/facebook/create-react-app/pull/3853) pin envinfo version to 3.4.2. ([@bondz](https://github.com/bondz)) + +#### Committers: 6 +- Alf Eaton ([hubgit](https://github.com/hubgit)) +- Bond ([bondz](https://github.com/bondz)) +- Dan Abramov ([gaearon](https://github.com/gaearon)) +- Ian Sutherland ([iansu](https://github.com/iansu)) +- Ronald Rey ([reyronald](https://github.com/reyronald)) + +### Migrating from 1.1.0 to 1.1.1 + +Inside any created project that has not been ejected, run: + +``` +npm install --save --save-exact react-scripts@1.1.1 +``` + +or + +``` +yarn add --exact react-scripts@1.1.1 +``` + ## 1.1.0 (January 15, 2018) #### :rocket: New Feature From 1a9722f50a8b8786803c1f784efca366a43f38da Mon Sep 17 00:00:00 2001 From: Dan Abramov <dan.abramov@gmail.com> Date: Fri, 9 Feb 2018 13:13:49 +0000 Subject: [PATCH 117/122] Revert "Set the public path to the asset manifest entries (#2544)" This reverts commit bab2c295220a88f1ea5bdabd0bf65fb7c7a98152. I meant to apply it to `next` instead. --- packages/react-scripts/config/webpack.config.prod.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js index 83bcadb63..3b2a2068d 100644 --- a/packages/react-scripts/config/webpack.config.prod.js +++ b/packages/react-scripts/config/webpack.config.prod.js @@ -319,7 +319,6 @@ module.exports = { // having to parse `index.html`. new ManifestPlugin({ fileName: 'asset-manifest.json', - publicPath: publicPath }), // Generate a service worker script that will precache, and keep up to date, // the HTML & assets that are part of the Webpack build. From 0b1d6365768ae3bd267b042b74bab249673f1a9f Mon Sep 17 00:00:00 2001 From: Dan Abramov <dan.abramov@gmail.com> Date: Fri, 9 Feb 2018 13:20:59 +0000 Subject: [PATCH 118/122] Publish - create-react-app@1.5.2 - react-scripts@1.1.1 --- packages/create-react-app/package.json | 2 +- packages/react-scripts/package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/create-react-app/package.json b/packages/create-react-app/package.json index 93d7b00ad..4d8f4112e 100644 --- a/packages/create-react-app/package.json +++ b/packages/create-react-app/package.json @@ -1,6 +1,6 @@ { "name": "create-react-app", - "version": "1.5.1", + "version": "1.5.2", "keywords": [ "react" ], diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index b8f1006e5..94d8e98df 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -1,6 +1,6 @@ { "name": "react-scripts", - "version": "1.1.0", + "version": "1.1.1", "description": "Configuration and scripts for Create React App.", "repository": "facebookincubator/create-react-app", "license": "MIT", From be1dfe79cabc69cd44c4d2c6383a520504a9fbc7 Mon Sep 17 00:00:00 2001 From: William Monk <will@williammonk.co.uk> Date: Mon, 9 Apr 2018 08:58:15 +0100 Subject: [PATCH 119/122] Add Facebooks Travis File --- .travis.yml | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/.travis.yml b/.travis.yml index 167fc436b..860000b5c 100644 --- a/.travis.yml +++ b/.travis.yml @@ -1,13 +1,9 @@ --- -# Use Ubuntu Precise instead of new default Trusty which cause build fail -# with pre installed yarn v0.17.8 -# https://github.com/facebookincubator/create-react-app/issues/3054 -# TODO: remove after Trusty environment is updated with a lastet version of yarn -dist: precise +dist: trusty language: node_js node_js: - - 6 - 8 + - 9 cache: directories: - node_modules @@ -16,13 +12,17 @@ cache: install: true script: - 'if [ $TEST_SUITE = "simple" ]; then tasks/e2e-simple.sh; fi' + - 'if [ $TEST_SUITE = "installs" ]; then tasks/e2e-installs.sh; fi' + - 'if [ $TEST_SUITE = "kitchensink" ]; then tasks/e2e-kitchensink.sh; fi' + - 'if [ $TEST_SUITE = "old-node" ]; then tasks/e2e-old-node.sh; fi' env: - global: - - USE_YARN=no matrix: - TEST_SUITE=simple - - TEST_SUITE=install -# There's a weird Yarn/Lerna bug related to prerelease versions. -# TODO: reenable after we ship 1.0. -# - node_js: 6 -# env: USE_YARN=yes TEST_SUITE=simple + - TEST_SUITE=installs + - TEST_SUITE=kitchensink +matrix: + include: + - node_js: 0.10 + env: TEST_SUITE=old-node + - node_js: 6 + env: TEST_SUITE=kitchensink From fec29ab07405fceeb09d8978d746d72201ae5962 Mon Sep 17 00:00:00 2001 From: William Monk <will@williammonk.co.uk> Date: Mon, 9 Apr 2018 09:06:48 +0100 Subject: [PATCH 120/122] Fix Build --- package.json | 23 ++++++++++++++--------- tasks/e2e-simple.sh | 1 - tasks/replace-own-deps.js | 6 +++--- 3 files changed, 17 insertions(+), 13 deletions(-) diff --git a/package.json b/package.json index 596eaa1ad..001b09995 100644 --- a/package.json +++ b/package.json @@ -1,16 +1,20 @@ { "private": true, + "workspaces": [ + "packages/*" + ], "scripts": { - "build": "node packages/react-scripts/scripts/build.js", + "build": "cd packages/react-scripts && node scripts/build.js", "changelog": "lerna-changelog", - "create-react-app": "tasks/cra.sh", + "create-react-app": "node tasks/cra.js", "e2e": "tasks/e2e-simple.sh", "e2e:docker": "tasks/local-test.sh", - "postinstall": "node bootstrap.js && cd packages/react-error-overlay/ && npm run build:prod", - "publish": "tasks/release.sh", - "start": "node packages/react-scripts/scripts/start.js", - "test": "node packages/react-scripts/scripts/test.js --env=jsdom", - "format": "prettier --trailing-comma es5 --single-quote --write \"packages/*/*.js\" \"packages/*/!(node_modules)/**/*.js\"", + "postinstall": "cd packages/react-error-overlay/ && yarn build:prod", + "publish": "tasks/publish.sh", + "start": "cd packages/react-scripts && node scripts/start.js", + "screencast": "svg-term --cast hItN7sl5yfCPTHxvFg5glhhfp --out screencast.svg --window", + "test": "cd packages/react-scripts && node scripts/test.js --env=jsdom", + "format": "prettier --trailing-comma es5 --single-quote --write 'packages/*/*.js' 'packages/*/!(node_modules)/**/*.js'", "precommit": "lint-staged" }, "devDependencies": { @@ -20,10 +24,11 @@ "@types/react-dom": "^15.5.0", "eslint": "^4.4.1", "husky": "^0.13.2", - "lerna": "^2.0.0", + "lerna": "2.6.0", "lerna-changelog": "^0.6.0", "lint-staged": "^3.3.1", - "prettier": "^1.5.2" + "prettier": "1.6.1", + "svg-term-cli": "^2.0.3" }, "lint-staged": { "*.js": [ diff --git a/tasks/e2e-simple.sh b/tasks/e2e-simple.sh index 014b0d415..35f6dd39d 100755 --- a/tasks/e2e-simple.sh +++ b/tasks/e2e-simple.sh @@ -232,7 +232,6 @@ cd test-app # Test the build yarn build # Check for expected output -pwd exists build/*.html exists build/static/js/*.js exists build/static/css/*.css diff --git a/tasks/replace-own-deps.js b/tasks/replace-own-deps.js index 0708f00d7..9178b0102 100755 --- a/tasks/replace-own-deps.js +++ b/tasks/replace-own-deps.js @@ -16,13 +16,13 @@ const packagesDir = path.join(__dirname, '../packages'); const pkgFilename = path.join(packagesDir, 'react-scripts/package.json'); const data = require(pkgFilename); -fs.readdirSync(packagesDir).forEach(name => { +fs.readdirSync(packagesDir).forEach((name) => { if (data.dependencies[name]) { data.dependencies[name] = 'file:' + path.join(packagesDir, name); } -}); +}) -fs.writeFile(pkgFilename, JSON.stringify(data, null, 2), 'utf8', err => { +fs.writeFile(pkgFilename, JSON.stringify(data, null, 2), 'utf8', (err) => { if (err) throw err; console.log('Replaced local dependencies.'); }); From 7db4c43ea1d10080d2864a091482a6a476ee2be7 Mon Sep 17 00:00:00 2001 From: William Monk <will@williammonk.co.uk> Date: Mon, 9 Apr 2018 22:18:28 +0100 Subject: [PATCH 121/122] Use Old Test Setup --- .travis.yml | 26 ++-- package.json | 23 ++- packages/react-scripts/package.json | 2 +- tasks/e2e-installs.sh | 120 +++++++++------- tasks/e2e-kitchensink.sh | 178 ++++++++++++++++++----- tasks/e2e-simple.sh | 216 +++++++++++++++++++--------- tasks/local-test.sh | 6 + tasks/replace-own-deps.js | 6 +- 8 files changed, 393 insertions(+), 184 deletions(-) diff --git a/.travis.yml b/.travis.yml index 860000b5c..167fc436b 100644 --- a/.travis.yml +++ b/.travis.yml @@ -1,9 +1,13 @@ --- -dist: trusty +# Use Ubuntu Precise instead of new default Trusty which cause build fail +# with pre installed yarn v0.17.8 +# https://github.com/facebookincubator/create-react-app/issues/3054 +# TODO: remove after Trusty environment is updated with a lastet version of yarn +dist: precise language: node_js node_js: + - 6 - 8 - - 9 cache: directories: - node_modules @@ -12,17 +16,13 @@ cache: install: true script: - 'if [ $TEST_SUITE = "simple" ]; then tasks/e2e-simple.sh; fi' - - 'if [ $TEST_SUITE = "installs" ]; then tasks/e2e-installs.sh; fi' - - 'if [ $TEST_SUITE = "kitchensink" ]; then tasks/e2e-kitchensink.sh; fi' - - 'if [ $TEST_SUITE = "old-node" ]; then tasks/e2e-old-node.sh; fi' env: + global: + - USE_YARN=no matrix: - TEST_SUITE=simple - - TEST_SUITE=installs - - TEST_SUITE=kitchensink -matrix: - include: - - node_js: 0.10 - env: TEST_SUITE=old-node - - node_js: 6 - env: TEST_SUITE=kitchensink + - TEST_SUITE=install +# There's a weird Yarn/Lerna bug related to prerelease versions. +# TODO: reenable after we ship 1.0. +# - node_js: 6 +# env: USE_YARN=yes TEST_SUITE=simple diff --git a/package.json b/package.json index 001b09995..596eaa1ad 100644 --- a/package.json +++ b/package.json @@ -1,20 +1,16 @@ { "private": true, - "workspaces": [ - "packages/*" - ], "scripts": { - "build": "cd packages/react-scripts && node scripts/build.js", + "build": "node packages/react-scripts/scripts/build.js", "changelog": "lerna-changelog", - "create-react-app": "node tasks/cra.js", + "create-react-app": "tasks/cra.sh", "e2e": "tasks/e2e-simple.sh", "e2e:docker": "tasks/local-test.sh", - "postinstall": "cd packages/react-error-overlay/ && yarn build:prod", - "publish": "tasks/publish.sh", - "start": "cd packages/react-scripts && node scripts/start.js", - "screencast": "svg-term --cast hItN7sl5yfCPTHxvFg5glhhfp --out screencast.svg --window", - "test": "cd packages/react-scripts && node scripts/test.js --env=jsdom", - "format": "prettier --trailing-comma es5 --single-quote --write 'packages/*/*.js' 'packages/*/!(node_modules)/**/*.js'", + "postinstall": "node bootstrap.js && cd packages/react-error-overlay/ && npm run build:prod", + "publish": "tasks/release.sh", + "start": "node packages/react-scripts/scripts/start.js", + "test": "node packages/react-scripts/scripts/test.js --env=jsdom", + "format": "prettier --trailing-comma es5 --single-quote --write \"packages/*/*.js\" \"packages/*/!(node_modules)/**/*.js\"", "precommit": "lint-staged" }, "devDependencies": { @@ -24,11 +20,10 @@ "@types/react-dom": "^15.5.0", "eslint": "^4.4.1", "husky": "^0.13.2", - "lerna": "2.6.0", + "lerna": "^2.0.0", "lerna-changelog": "^0.6.0", "lint-staged": "^3.3.1", - "prettier": "1.6.1", - "svg-term-cli": "^2.0.3" + "prettier": "^1.5.2" }, "lint-staged": { "*.js": [ diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index 4c75073dd..538422439 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -1,6 +1,6 @@ { "name": "react-scripts-ts", - "version": "2.14.0", + "version": "2.14.1-0", "description": "Configuration and scripts for Create React App.", "repository": "wmonk/create-react-app", "license": "BSD-3-Clause", diff --git a/tasks/e2e-installs.sh b/tasks/e2e-installs.sh index bcd616f36..f352a5448 100755 --- a/tasks/e2e-installs.sh +++ b/tasks/e2e-installs.sh @@ -14,17 +14,13 @@ cd "$(dirname "$0")" # CLI and app temporary locations # http://unix.stackexchange.com/a/84980 +temp_cli_path=`mktemp -d 2>/dev/null || mktemp -d -t 'temp_cli_path'` temp_app_path=`mktemp -d 2>/dev/null || mktemp -d -t 'temp_app_path'` -custom_registry_url=http://localhost:4873 -original_npm_registry_url=`npm get registry` -original_yarn_registry_url=`yarn config get registry` function cleanup { echo 'Cleaning up.' cd "$root_path" - rm -rf "$temp_app_path" - npm set registry "$original_npm_registry_url" - yarn config set registry "$original_yarn_registry_url" + rm -rf "$temp_cli_path" "$temp_app_path" } # Error messages are redirected to stderr @@ -59,6 +55,10 @@ function checkDependencies { fi } +function create_react_app { + node "$temp_cli_path"/node_modules/create-react-app/index.js $* +} + # Exit the script with a helpful error message when any error is encountered trap 'set +x; handle_error $LINENO $BASH_COMMAND' ERR @@ -72,61 +72,77 @@ set -x cd .. root_path=$PWD +# Clear cache to avoid issues with incorrect packages being used +if hash yarnpkg 2>/dev/null +then + # AppVeyor uses an old version of yarn. + # Once updated to 0.24.3 or above, the workaround can be removed + # and replaced with `yarnpkg cache clean` + # Issues: + # https://github.com/yarnpkg/yarn/issues/2591 + # https://github.com/appveyor/ci/issues/1576 + # https://github.com/facebookincubator/create-react-app/pull/2400 + # When removing workaround, you may run into + # https://github.com/facebookincubator/create-react-app/issues/2030 + case "$(uname -s)" in + *CYGWIN*|MSYS*|MINGW*) yarn=yarn.cmd;; + *) yarn=yarnpkg;; + esac + $yarn cache clean +fi + if hash npm 2>/dev/null then - npm i -g npm@latest + # npm 5 is too buggy right now + if [ $(npm -v | head -c 1) -eq 5 ]; then + npm i -g npm@^4.x + fi; npm cache clean || npm cache verify fi -# Bootstrap monorepo -yarn +# Prevent bootstrap, we only want top-level dependencies +cp package.json package.json.bak +grep -v "postinstall" package.json > temp && mv temp package.json +npm install +mv package.json.bak package.json -# ****************************************************************************** -# First, publish the monorepo. -# ****************************************************************************** - -# Start local registry -tmp_registry_log=`mktemp` -nohup npx verdaccio@2.7.2 &>$tmp_registry_log & -# Wait for `verdaccio` to boot -grep -q 'http address' <(tail -f $tmp_registry_log) - -# Set registry to local registry -npm set registry "$custom_registry_url" -yarn config set registry "$custom_registry_url" +if [ "$USE_YARN" = "yes" ] +then + # Install Yarn so that the test can use it to install packages. + npm install -g yarn + yarn cache clean +fi -# Login so we can publish packages -npx npm-cli-login@0.0.10 -u user -p password -e user@example.com -r "$custom_registry_url" --quotes +# We removed the postinstall, so do it manually +node bootstrap.js -# Publish the monorepo -git clean -df -./tasks/publish.sh --yes --force-publish=* --skip-git --cd-version=prerelease --exact --npm-tag=latest +cd packages/react-error-overlay/ +npm run build:prod +cd ../.. # ****************************************************************************** -# Test --scripts-version with a version number +# First, pack and install create-react-app. # ****************************************************************************** -cd "$temp_app_path" -npx create-react-app --scripts-version=1.0.17 test-app-version-number -cd test-app-version-number +# Pack CLI +cd "$root_path"/packages/create-react-app +cli_path=$PWD/`npm pack` -# Check corresponding scripts version is installed. -exists node_modules/react-scripts -grep '"version": "1.0.17"' node_modules/react-scripts/package.json -checkDependencies +# Install the CLI in a temporary location +cd "$temp_cli_path" +npm install "$cli_path" # ****************************************************************************** -# Test --use-npm flag +# Test --scripts-version with a version number # ****************************************************************************** cd "$temp_app_path" -npx create-react-app --use-npm --scripts-version=1.0.17 test-use-npm-flag -cd test-use-npm-flag +create_react_app --scripts-version=0.4.0 test-app-version-number +cd test-app-version-number # Check corresponding scripts version is installed. exists node_modules/react-scripts -[ ! -e "yarn.lock" ] && echo "yarn.lock correctly does not exist" -grep '"version": "1.0.17"' node_modules/react-scripts/package.json +grep '"version": "0.4.0"' node_modules/react-scripts/package.json checkDependencies # ****************************************************************************** @@ -134,12 +150,12 @@ checkDependencies # ****************************************************************************** cd "$temp_app_path" -npx create-react-app --scripts-version=https://registry.npmjs.org/react-scripts/-/react-scripts-1.0.17.tgz test-app-tarball-url +create_react_app --scripts-version=https://registry.npmjs.org/react-scripts/-/react-scripts-0.4.0.tgz test-app-tarball-url cd test-app-tarball-url # Check corresponding scripts version is installed. exists node_modules/react-scripts -grep '"version": "1.0.17"' node_modules/react-scripts/package.json +grep '"version": "0.4.0"' node_modules/react-scripts/package.json checkDependencies # ****************************************************************************** @@ -147,7 +163,7 @@ checkDependencies # ****************************************************************************** cd "$temp_app_path" -npx create-react-app --scripts-version=react-scripts-fork test-app-fork +create_react_app --scripts-version=react-scripts-fork test-app-fork cd test-app-fork # Check corresponding scripts version is installed. @@ -159,7 +175,7 @@ exists node_modules/react-scripts-fork cd "$temp_app_path" # we will install a non-existing package to simulate a failed installataion. -npx create-react-app --scripts-version=`date +%s` test-app-should-not-exist || true +create_react_app --scripts-version=`date +%s` test-app-should-not-exist || true # confirm that the project folder was deleted test ! -d test-app-should-not-exist @@ -171,7 +187,7 @@ cd "$temp_app_path" mkdir test-app-should-remain echo '## Hello' > ./test-app-should-remain/README.md # we will install a non-existing package to simulate a failed installataion. -npx create-react-app --scripts-version=`date +%s` test-app-should-remain || true +create_react_app --scripts-version=`date +%s` test-app-should-remain || true # confirm the file exist test -e test-app-should-remain/README.md # confirm only README.md is the only file in the directory @@ -185,7 +201,7 @@ fi cd $temp_app_path curl "https://registry.npmjs.org/@enoah_netzach/react-scripts/-/react-scripts-0.9.0.tgz" -o enoah-scripts-0.9.0.tgz -npx create-react-app --scripts-version=$temp_app_path/enoah-scripts-0.9.0.tgz test-app-scoped-fork-tgz +create_react_app --scripts-version=$temp_app_path/enoah-scripts-0.9.0.tgz test-app-scoped-fork-tgz cd test-app-scoped-fork-tgz # Check corresponding scripts version is installed. @@ -200,22 +216,22 @@ cd "$temp_app_path" mkdir test-app-nested-paths-t1 cd test-app-nested-paths-t1 mkdir -p test-app-nested-paths-t1/aa/bb/cc/dd -npx create-react-app test-app-nested-paths-t1/aa/bb/cc/dd +create_react_app test-app-nested-paths-t1/aa/bb/cc/dd cd test-app-nested-paths-t1/aa/bb/cc/dd -yarn start --smoke-test +npm start -- --smoke-test # Testing a path that does not exist cd "$temp_app_path" -npx create-react-app test-app-nested-paths-t2/aa/bb/cc/dd +create_react_app test-app-nested-paths-t2/aa/bb/cc/dd cd test-app-nested-paths-t2/aa/bb/cc/dd -yarn start --smoke-test +npm start -- --smoke-test # Testing a path that is half exists cd "$temp_app_path" mkdir -p test-app-nested-paths-t3/aa -npx create-react-app test-app-nested-paths-t3/aa/bb/cc/dd +create_react_app test-app-nested-paths-t3/aa/bb/cc/dd cd test-app-nested-paths-t3/aa/bb/cc/dd -yarn start --smoke-test +npm start -- --smoke-test # Cleanup cleanup diff --git a/tasks/e2e-kitchensink.sh b/tasks/e2e-kitchensink.sh index d73c45ddb..c1167c1de 100755 --- a/tasks/e2e-kitchensink.sh +++ b/tasks/e2e-kitchensink.sh @@ -14,20 +14,16 @@ cd "$(dirname "$0")" # CLI, app, and test module temporary locations # http://unix.stackexchange.com/a/84980 +temp_cli_path=`mktemp -d 2>/dev/null || mktemp -d -t 'temp_cli_path'` temp_app_path=`mktemp -d 2>/dev/null || mktemp -d -t 'temp_app_path'` temp_module_path=`mktemp -d 2>/dev/null || mktemp -d -t 'temp_module_path'` -custom_registry_url=http://localhost:4873 -original_npm_registry_url=`npm get registry` -original_yarn_registry_url=`yarn config get registry` function cleanup { echo 'Cleaning up.' ps -ef | grep 'react-scripts' | grep -v grep | awk '{print $2}' | xargs kill -9 cd "$root_path" # TODO: fix "Device or resource busy" and remove ``|| $CI` - rm -rf "$temp_app_path" "$temp_module_path" || $CI - npm set registry "$original_npm_registry_url" - yarn config set registry "$original_yarn_registry_url" + rm -rf "$temp_cli_path" "$temp_app_path" "$temp_module_path" || $CI } # Error messages are redirected to stderr @@ -44,6 +40,35 @@ function handle_exit { exit } +function create_react_app { + node "$temp_cli_path"/node_modules/create-react-app/index.js "$@" +} + +function install_package { + local pkg=$(basename $1) + + # Clean target (for safety) + rm -rf node_modules/$pkg/ + rm -rf node_modules/**/$pkg/ + + # Copy package into node_modules/ ignoring installed deps + # rsync -a ${1%/} node_modules/ --exclude node_modules + cp -R ${1%/} node_modules/ + rm -rf node_modules/$pkg/node_modules/ + + # Install `dependencies` + cd node_modules/$pkg/ + if [ "$USE_YARN" = "yes" ] + then + yarn install --production + else + npm install --only=production + fi + # Remove our packages to ensure side-by-side versions are used (which we link) + rm -rf node_modules/{babel-preset-react-app,eslint-config-react-app,react-dev-utils,react-error-overlay,react-scripts} + cd ../.. +} + # Check for the existence of one or more files. function exists { for f in $*; do @@ -64,47 +89,94 @@ set -x cd .. root_path=$PWD +# Clear cache to avoid issues with incorrect packages being used +if hash yarnpkg 2>/dev/null +then + # AppVeyor uses an old version of yarn. + # Once updated to 0.24.3 or above, the workaround can be removed + # and replaced with `yarnpkg cache clean` + # Issues: + # https://github.com/yarnpkg/yarn/issues/2591 + # https://github.com/appveyor/ci/issues/1576 + # https://github.com/facebookincubator/create-react-app/pull/2400 + # When removing workaround, you may run into + # https://github.com/facebookincubator/create-react-app/issues/2030 + case "$(uname -s)" in + *CYGWIN*|MSYS*|MINGW*) yarn=yarn.cmd;; + *) yarn=yarnpkg;; + esac + $yarn cache clean +fi + if hash npm 2>/dev/null then - npm i -g npm@latest + # npm 5 is too buggy right now + if [ $(npm -v | head -c 1) -eq 5 ]; then + npm i -g npm@^4.x + fi; npm cache clean || npm cache verify fi -# Bootstrap monorepo -yarn +# Prevent bootstrap, we only want top-level dependencies +cp package.json package.json.bak +grep -v "postinstall" package.json > temp && mv temp package.json +npm install +mv package.json.bak package.json + +if [ "$USE_YARN" = "yes" ] +then + # Install Yarn so that the test can use it to install packages. + npm install -g yarn + yarn cache clean +fi + +# We removed the postinstall, so do it manually +node bootstrap.js + +cd packages/react-error-overlay/ +npm run build:prod +cd ../.. # ****************************************************************************** -# First, publish the monorepo. +# First, pack react-scripts and create-react-app so we can use them. # ****************************************************************************** -# Start local registry -tmp_registry_log=`mktemp` -nohup npx verdaccio@2.7.2 &>$tmp_registry_log & -# Wait for `verdaccio` to boot -grep -q 'http address' <(tail -f $tmp_registry_log) +# Pack CLI +cd "$root_path"/packages/create-react-app +cli_path=$PWD/`npm pack` + +# Go to react-scripts +cd "$root_path"/packages/react-scripts -# Set registry to local registry -npm set registry "$custom_registry_url" -yarn config set registry "$custom_registry_url" +# Save package.json because we're going to touch it +cp package.json package.json.orig -# Login so we can publish packages -npx npm-cli-login@0.0.10 -u user -p password -e user@example.com -r "$custom_registry_url" --quotes +# Replace own dependencies (those in the `packages` dir) with the local paths +# of those packages. +node "$root_path"/tasks/replace-own-deps.js -# Publish the monorepo -git clean -df -./tasks/publish.sh --yes --force-publish=* --skip-git --cd-version=prerelease --exact --npm-tag=latest +# Finally, pack react-scripts +scripts_path="$root_path"/packages/react-scripts/`npm pack` + +# Restore package.json +rm package.json +mv package.json.orig package.json # ****************************************************************************** -# Now that we have published them, create a clean app folder and install them. +# Now that we have packed them, create a clean app folder and install them. # ****************************************************************************** +# Install the CLI in a temporary location +cd "$temp_cli_path" +npm install "$cli_path" + # Install the app in a temporary location cd $temp_app_path -npx create-react-app --internal-testing-template="$root_path"/packages/react-scripts/fixtures/kitchensink test-kitchensink +create_react_app --scripts-version="$scripts_path" --internal-testing-template="$root_path"/packages/react-scripts/fixtures/kitchensink test-kitchensink # Install the test module cd "$temp_module_path" -yarn add test-integrity@^2.0.1 +npm install test-integrity@^2.0.1 # ****************************************************************************** # Now that we used create-react-app to create an app depending on react-scripts, @@ -114,14 +186,20 @@ yarn add test-integrity@^2.0.1 # Enter the app directory cd "$temp_app_path/test-kitchensink" +# Link to our preset +install_package "$root_path"/packages/babel-preset-react-app +# Link to error overlay package because now it's a dependency +# of react-dev-utils and not react-scripts +install_package "$root_path"/packages/react-error-overlay + # Link to test module -npm link "$temp_module_path/node_modules/test-integrity" +install_package "$temp_module_path/node_modules/test-integrity" # Test the build REACT_APP_SHELL_ENV_MESSAGE=fromtheshell \ NODE_PATH=src \ PUBLIC_URL=http://www.example.org/spa/ \ - yarn build + npm run build # Check for expected output exists build/*.html @@ -132,15 +210,22 @@ REACT_APP_SHELL_ENV_MESSAGE=fromtheshell \ CI=true \ NODE_PATH=src \ NODE_ENV=test \ - yarn test --no-cache --testPathPattern=src + npm test -- --no-cache --testPathPattern=src # Test "development" environment tmp_server_log=`mktemp` PORT=3001 \ REACT_APP_SHELL_ENV_MESSAGE=fromtheshell \ NODE_PATH=src \ - nohup yarn start &>$tmp_server_log & -grep -q 'You can now view' <(tail -f $tmp_server_log) + nohup npm start &>$tmp_server_log & +while true +do + if grep -q 'You can now view' $tmp_server_log; then + break + else + sleep 1 + fi +done E2E_URL="http://localhost:3001" \ REACT_APP_SHELL_ENV_MESSAGE=fromtheshell \ CI=true NODE_PATH=src \ @@ -162,14 +247,28 @@ E2E_FILE=./build/index.html \ # Eject... echo yes | npm run eject +# Ensure Yarn is ran after eject; at the time of this commit, we don't run Yarn +# after ejecting. Soon, we may only skip Yarn on Windows. Let's try to remove +# this in the near future. +if hash yarnpkg 2>/dev/null +then + yarn install --check-files +fi + +# ...but still link to the local packages +install_package "$root_path"/packages/babel-preset-react-app +install_package "$root_path"/packages/eslint-config-react-app +install_package "$root_path"/packages/react-error-overlay +install_package "$root_path"/packages/react-dev-utils + # Link to test module -npm link "$temp_module_path/node_modules/test-integrity" +install_package "$temp_module_path/node_modules/test-integrity" # Test the build REACT_APP_SHELL_ENV_MESSAGE=fromtheshell \ NODE_PATH=src \ PUBLIC_URL=http://www.example.org/spa/ \ - yarn build + npm run build # Check for expected output exists build/*.html @@ -180,15 +279,22 @@ REACT_APP_SHELL_ENV_MESSAGE=fromtheshell \ CI=true \ NODE_PATH=src \ NODE_ENV=test \ - yarn test --no-cache --testPathPattern=src + npm test -- --no-cache --testPathPattern=src # Test "development" environment tmp_server_log=`mktemp` PORT=3002 \ REACT_APP_SHELL_ENV_MESSAGE=fromtheshell \ NODE_PATH=src \ - nohup yarn start &>$tmp_server_log & -grep -q 'You can now view' <(tail -f $tmp_server_log) + nohup npm start &>$tmp_server_log & +while true +do + if grep -q 'You can now view' $tmp_server_log; then + break + else + sleep 1 + fi +done E2E_URL="http://localhost:3002" \ REACT_APP_SHELL_ENV_MESSAGE=fromtheshell \ CI=true NODE_PATH=src \ diff --git a/tasks/e2e-simple.sh b/tasks/e2e-simple.sh index 35f6dd39d..04781ebaf 100755 --- a/tasks/e2e-simple.sh +++ b/tasks/e2e-simple.sh @@ -12,21 +12,17 @@ # Start in tasks/ even if run from root directory cd "$(dirname "$0")" -# App temporary location +# CLI and app temporary locations # http://unix.stackexchange.com/a/84980 +temp_cli_path=`mktemp -d 2>/dev/null || mktemp -d -t 'temp_cli_path'` temp_app_path=`mktemp -d 2>/dev/null || mktemp -d -t 'temp_app_path'` -custom_registry_url=http://localhost:4873 -original_npm_registry_url=`npm get registry` -original_yarn_registry_url=`yarn config get registry` function cleanup { echo 'Cleaning up.' cd "$root_path" # Uncomment when snapshot testing is enabled by default: # rm ./packages/react-scripts/template/src/__snapshots__/App.test.js.snap - rm -rf "$temp_app_path" - npm set registry "$original_npm_registry_url" - yarn config set registry "$original_yarn_registry_url" + rm -rf "$temp_cli_path" $temp_app_path } # Error messages are redirected to stderr @@ -43,6 +39,35 @@ function handle_exit { exit } +function create_react_app { + node "$temp_cli_path"/node_modules/create-react-app/index.js "$@" +} + +function install_package { + local pkg=$(basename $1) + + # Clean target (for safety) + rm -rf node_modules/$pkg/ + rm -rf node_modules/**/$pkg/ + + # Copy package into node_modules/ ignoring installed deps + # rsync -a ${1%/} node_modules/ --exclude node_modules + cp -R ${1%/} node_modules/ + rm -rf node_modules/$pkg/node_modules/ + + # Install `dependencies` + cd node_modules/$pkg/ + if [ "$USE_YARN" = "yes" ] + then + yarn install --production + else + npm install --only=production + fi + # Remove our packages to ensure side-by-side versions are used (which we link) + rm -rf node_modules/{babel-preset-react-app,eslint-config-react-app,react-dev-utils,react-error-overlay,react-scripts} + cd ../.. +} + # Check for the existence of one or more files. function exists { for f in $*; do @@ -63,40 +88,65 @@ set -x cd .. root_path=$PWD -# Make sure we don't introduce accidental references to PATENTS. -EXPECTED='packages/react-error-overlay/fixtures/bundle.mjs -packages/react-error-overlay/fixtures/bundle.mjs.map -packages/react-error-overlay/fixtures/bundle_u.mjs -packages/react-error-overlay/fixtures/bundle_u.mjs.map -tasks/e2e-simple.sh' -ACTUAL=$(git grep -l PATENTS) -if [ "$EXPECTED" != "$ACTUAL" ]; then - echo "PATENTS crept into some new files?" - diff -u <(echo "$EXPECTED") <(echo "$ACTUAL") || true - exit 1 +# Clear cache to avoid issues with incorrect packages being used +if hash yarnpkg 2>/dev/null +then + # AppVeyor uses an old version of yarn. + # Once updated to 0.24.3 or above, the workaround can be removed + # and replaced with `yarnpkg cache clean` + # Issues: + # https://github.com/yarnpkg/yarn/issues/2591 + # https://github.com/appveyor/ci/issues/1576 + # https://github.com/facebookincubator/create-react-app/pull/2400 + # When removing workaround, you may run into + # https://github.com/facebookincubator/create-react-app/issues/2030 + case "$(uname -s)" in + *CYGWIN*|MSYS*|MINGW*) yarn=yarn.cmd;; + *) yarn=yarnpkg;; + esac + $yarn cache clean fi if hash npm 2>/dev/null then - npm i -g npm@latest + # npm 5 is too buggy right now + if [ $(npm -v | head -c 1) -eq 5 ]; then + npm i -g npm@^4.x + fi; npm cache clean || npm cache verify fi -# Bootstrap monorepo -yarn - -# Start local registry -tmp_registry_log=`mktemp` -nohup npx verdaccio@2.7.2 &>$tmp_registry_log & -# Wait for `verdaccio` to boot -grep -q 'http address' <(tail -f $tmp_registry_log) +# Prevent bootstrap, we only want top-level dependencies +cp package.json package.json.bak +grep -v "postinstall" package.json > temp && mv temp package.json +npm install +mv package.json.bak package.json + +# We need to install create-react-app deps to test it +cd "$root_path"/packages/create-react-app +npm install +cd "$root_path" + +# If the node version is < 6, the script should just give an error. +nodeVersion=`node --version | cut -d v -f2` +nodeMajor=`echo $nodeVersion | cut -d. -f1` +nodeMinor=`echo $nodeVersion | cut -d. -f2` +if [[ nodeMajor -lt 6 ]] +then + cd $temp_app_path + err_output=`node "$root_path"/packages/create-react-app/index.js test-node-version 2>&1 > /dev/null || echo ''` + [[ $err_output =~ You\ are\ running\ Node ]] && exit 0 || exit 1 +fi -# Set registry to local registry -npm set registry "$custom_registry_url" -yarn config set registry "$custom_registry_url" +if [ "$USE_YARN" = "yes" ] +then + # Install Yarn so that the test can use it to install packages. + npm install -g yarn + yarn cache clean +fi -# Login so we can publish packages -npx npm-cli-login@0.0.10 -u user -p password -e user@example.com -r "$custom_registry_url" --quotes +# We removed the postinstall, so do it manually here +node bootstrap.js # Lint own code ./node_modules/.bin/eslint --max-warnings 0 packages/babel-preset-react-app/ @@ -106,16 +156,8 @@ npx npm-cli-login@0.0.10 -u user -p password -e user@example.com -r "$custom_reg ./node_modules/.bin/eslint --max-warnings 0 packages/react-scripts/ cd packages/react-error-overlay/ ./node_modules/.bin/eslint --max-warnings 0 src/ -yarn test - -if [ $APPVEYOR != 'True' ]; then - # Flow started hanging on AppVeyor after we moved to Yarn Workspaces :-( - yarn flow -fi - -cd ../.. -cd packages/react-dev-utils/ -yarn test +npm test +npm run build:prod cd ../.. # ****************************************************************************** @@ -124,7 +166,7 @@ cd ../.. # ****************************************************************************** # Test local build command -yarn build +npm run build # Check for expected output exists build/*.html exists build/static/js/*.js @@ -133,25 +175,55 @@ exists build/static/media/*.svg exists build/favicon.ico # Run tests with CI flag -CI=true yarn test +CI=true npm test # Uncomment when snapshot testing is enabled by default: # exists template/src/__snapshots__/App.test.js.snap # Test local start command -yarn start --smoke-test +npm start -- --smoke-test -git clean -df -./tasks/publish.sh --yes --force-publish=* --skip-git --cd-version=prerelease --exact --npm-tag=latest +# ****************************************************************************** +# Next, pack react-scripts and create-react-app so we can verify they work. +# ****************************************************************************** + +# Pack CLI +cd "$root_path"/packages/create-react-app +cli_path=$PWD/`npm pack` + +# Go to react-scripts +cd "$root_path"/packages/react-scripts + +# Save package.json because we're going to touch it +cp package.json package.json.orig + +# Replace own dependencies (those in the `packages` dir) with the local paths +# of those packages. +node "$root_path"/tasks/replace-own-deps.js + +# Finally, pack react-scripts +scripts_path="$root_path"/packages/react-scripts/`npm pack` + +# Restore package.json +rm package.json +mv package.json.orig package.json # ****************************************************************************** -# Install react-scripts prerelease via create-react-app prerelease. +# Now that we have packed them, create a clean app folder and install them. # ****************************************************************************** +# Install the CLI in a temporary location +cd "$temp_cli_path" + +# Initialize package.json before installing the CLI because npm will not install +# the CLI properly in the temporary location if it is missing. +npm init --yes + +# Now we can install the CLI from the local package. +npm install "$cli_path" + # Install the app in a temporary location cd $temp_app_path -npx create-react-app test-app - -# TODO: verify we installed prerelease +create_react_app --scripts-version="$scripts_path" test-app # ****************************************************************************** # Now that we used create-react-app to create an app depending on react-scripts, @@ -168,24 +240,24 @@ function verify_env_url { # Test relative path build awk -v n=2 -v s=" \"homepage\": \".\"," 'NR == n {print s} {print}' package.json > tmp && mv tmp package.json - yarn build + npm run build # Disabled until this can be tested # grep -F -R --exclude=*.map "../../static/" build/ -q; test $? -eq 0 || exit 1 grep -F -R --exclude=*.map "\"./static/" build/ -q; test $? -eq 0 || exit 1 grep -F -R --exclude=*.map "\"/static/" build/ -q; test $? -eq 1 || exit 1 - PUBLIC_URL="/anabsolute" yarn build + PUBLIC_URL="/anabsolute" npm run build grep -F -R --exclude=*.map "/anabsolute/static/" build/ -q; test $? -eq 0 || exit 1 grep -F -R --exclude=*.map "\"/static/" build/ -q; test $? -eq 1 || exit 1 # Test absolute path build sed "2s/.*/ \"homepage\": \"\/testingpath\",/" package.json > tmp && mv tmp package.json - yarn build + npm run build grep -F -R --exclude=*.map "/testingpath/static/" build/ -q; test $? -eq 0 || exit 1 grep -F -R --exclude=*.map "\"/static/" build/ -q; test $? -eq 1 || exit 1 - PUBLIC_URL="https://www.example.net/overridetest" yarn build + PUBLIC_URL="https://www.example.net/overridetest" npm run build grep -F -R --exclude=*.map "https://www.example.net/overridetest/static/" build/ -q; test $? -eq 0 || exit 1 grep -F -R --exclude=*.map "\"/static/" build/ -q; test $? -eq 1 || exit 1 grep -F -R --exclude=*.map "testingpath/static" build/ -q; test $? -eq 1 || exit 1 @@ -193,11 +265,11 @@ function verify_env_url { # Test absolute url build sed "2s/.*/ \"homepage\": \"https:\/\/www.example.net\/testingpath\",/" package.json > tmp && mv tmp package.json - yarn build + npm run build grep -F -R --exclude=*.map "/testingpath/static/" build/ -q; test $? -eq 0 || exit 1 grep -F -R --exclude=*.map "\"/static/" build/ -q; test $? -eq 1 || exit 1 - PUBLIC_URL="https://www.example.net/overridetest" yarn build + PUBLIC_URL="https://www.example.net/overridetest" npm run build grep -F -R --exclude=*.map "https://www.example.net/overridetest/static/" build/ -q; test $? -eq 0 || exit 1 grep -F -R --exclude=*.map "\"/static/" build/ -q; test $? -eq 1 || exit 1 grep -F -R --exclude=*.map "testingpath/static" build/ -q; test $? -eq 1 || exit 1 @@ -218,7 +290,7 @@ function verify_module_scope { echo "import sampleJson from '../sample.json'" | cat - src/App.tsx > src/App.tsx.temp && mv src/App.tsx.temp src/App.tsx # Make sure the build fails - yarn build; test $? -eq 1 || exit 1 + npm run build; test $? -eq 1 || exit 1 # TODO: check for error message # Restore App.tsx @@ -230,8 +302,9 @@ function verify_module_scope { cd test-app # Test the build -yarn build +npm run build # Check for expected output +pwd exists build/*.html exists build/static/js/*.js exists build/static/css/*.css @@ -239,12 +312,12 @@ exists build/static/media/*.svg exists build/favicon.ico # Run tests with CI flag -CI=true yarn test +CI=true npm test # Uncomment when snapshot testing is enabled by default: # exists src/__snapshots__/App.test.tsx.snap # Test the server -yarn start --smoke-test +npm start -- --smoke-test # Test environment handling verify_env_url @@ -259,8 +332,21 @@ verify_module_scope # Eject... echo yes | npm run eject +# Ensure Yarn is ran after eject; at the time of this commit, we don't run Yarn +# after ejecting. Soon, we may only skip Yarn on Windows. Let's try to remove +# this in the near future. +if hash yarnpkg 2>/dev/null +then + yarnpkg install --check-files +fi + +# ...but still link to the local packages +install_package "$root_path"/packages/babel-preset-react-app +install_package "$root_path"/packages/eslint-config-react-app +install_package "$root_path"/packages/react-dev-utils + # Test the build -yarn build +npm run build # Check for expected output exists build/*.html exists build/static/js/*.js @@ -269,15 +355,15 @@ exists build/static/media/*.svg exists build/favicon.ico # Run tests, overring the watch option to disable it. -# `CI=true yarn test` won't work here because `yarn test` becomes just `jest`. +# `CI=true npm test` won't work here because `npm test` becomes just `jest`. # We should either teach Jest to respect CI env variable, or make # `scripts/test.js` survive ejection (right now it doesn't). -yarn test --watch=no +npm test -- --watch=no # Uncomment when snapshot testing is enabled by default: # exists src/__snapshots__/App.test.js.snap # Test the server -yarn start --smoke-test +npm start -- --smoke-test # Test environment handling verify_env_url diff --git a/tasks/local-test.sh b/tasks/local-test.sh index 0416fb5d9..8ce44b640 100755 --- a/tasks/local-test.sh +++ b/tasks/local-test.sh @@ -11,6 +11,7 @@ function print_help { echo " --node-version <version> the node version to use while testing [6]" echo " --git-branch <branch> the git branch to checkout for testing [the current one]" echo " --test-suite <suite> which test suite to use ('simple', installs', 'kitchensink', 'all') ['all']" + echo " --yarn if present, use yarn as the package manager" echo " --interactive gain a bash shell after the test run" echo " --help print this message and exit" echo "" @@ -21,6 +22,7 @@ cd $(dirname $0) node_version=6 current_git_branch=`git rev-parse --abbrev-ref HEAD` git_branch=${current_git_branch} +use_yarn=no test_suite=all interactive=false @@ -34,6 +36,9 @@ while [ "$1" != "" ]; do shift git_branch=$1 ;; + "--yarn") + use_yarn=yes + ;; "--test-suite") shift test_suite=$1 @@ -102,6 +107,7 @@ CMD docker run \ --env CI=true \ --env NPM_CONFIG_QUIET=true \ + --env USE_YARN=${use_yarn} \ --tty \ --user node \ --volume ${PWD}/..:/var/create-react-app \ diff --git a/tasks/replace-own-deps.js b/tasks/replace-own-deps.js index 9178b0102..0708f00d7 100755 --- a/tasks/replace-own-deps.js +++ b/tasks/replace-own-deps.js @@ -16,13 +16,13 @@ const packagesDir = path.join(__dirname, '../packages'); const pkgFilename = path.join(packagesDir, 'react-scripts/package.json'); const data = require(pkgFilename); -fs.readdirSync(packagesDir).forEach((name) => { +fs.readdirSync(packagesDir).forEach(name => { if (data.dependencies[name]) { data.dependencies[name] = 'file:' + path.join(packagesDir, name); } -}) +}); -fs.writeFile(pkgFilename, JSON.stringify(data, null, 2), 'utf8', (err) => { +fs.writeFile(pkgFilename, JSON.stringify(data, null, 2), 'utf8', err => { if (err) throw err; console.log('Replaced local dependencies.'); }); From 00e385e62921d6ac79e3693a982e847075a9c0d9 Mon Sep 17 00:00:00 2001 From: William Monk <will@williammonk.co.uk> Date: Mon, 9 Apr 2018 22:20:54 +0100 Subject: [PATCH 122/122] Readd Bootstrap.js --- bootstrap.js | 67 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 67 insertions(+) create mode 100644 bootstrap.js diff --git a/bootstrap.js b/bootstrap.js new file mode 100644 index 000000000..b54a1ed9f --- /dev/null +++ b/bootstrap.js @@ -0,0 +1,67 @@ +'use strict'; + +const { execSync, spawn } = require('child_process'); +const { resolve } = require('path'); +const { existsSync } = require('fs'); +const { platform } = require('os'); + +function shouldUseYarn() { + try { + execSync('yarnpkg --version', { stdio: 'ignore' }); + return true; + } catch (e) { + return false; + } +} + +function shouldUseNpmConcurrently() { + try { + const versionString = execSync('npm --version'); + const m = /^(\d+)[.]/.exec(versionString); + // NPM >= 5 support concurrent installs + return Number(m[1]) >= 5; + } catch (e) { + return false; + } +} + +const yarn = shouldUseYarn(); +const windows = platform() === 'win32'; +const lerna = resolve( + __dirname, + 'node_modules', + '.bin', + windows ? 'lerna.cmd' : 'lerna' +); + +if (!existsSync(lerna)) { + if (yarn) { + console.log('Cannot find lerna. Please run `yarn --check-files`.'); + } else { + console.log( + 'Cannot find lerna. Please remove `node_modules` and run `npm install`.' + ); + } + process.exit(1); +} + +let child; +if (yarn) { + // Yarn does not support concurrency + child = spawn(lerna, ['bootstrap', '--npm-client=yarn', '--concurrency=1'], { + stdio: 'inherit', + }); +} else { + let args = ['bootstrap']; + if ( + // The Windows filesystem does not handle concurrency well + windows || + // Only newer npm versions support concurrency + !shouldUseNpmConcurrently() + ) { + args.push('--concurrency=1'); + } + child = spawn(lerna, args, { stdio: 'inherit' }); +} + +child.on('close', code => process.exit(code));