From 319f5bbc372fb418573bd93722ec31617dd76a39 Mon Sep 17 00:00:00 2001 From: John Reilly Date: Tue, 30 Oct 2018 10:38:47 +0000 Subject: [PATCH 1/6] Enable click to go to error in console --- packages/react-dev-utils/typescriptFormatter.js | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/packages/react-dev-utils/typescriptFormatter.js b/packages/react-dev-utils/typescriptFormatter.js index ab1ca9b0706..d3e615a88bd 100644 --- a/packages/react-dev-utils/typescriptFormatter.js +++ b/packages/react-dev-utils/typescriptFormatter.js @@ -15,7 +15,8 @@ const fs = require('fs'); function formatter(message, useColors) { const colors = new chalk.constructor({ enabled: useColors }); const messageColor = message.isWarningSeverity() ? colors.yellow : colors.red; - + const fileAndNumberColor = colors.bold.cyan; + const source = message.getFile() && fs.existsSync(message.getFile()) && @@ -34,7 +35,11 @@ function formatter(message, useColors) { } return [ - messageColor.bold(`Type ${message.getSeverity().toLowerCase()}: `) + + messageColor.bold(`Type ${message.getSeverity().toLowerCase()} in `) + + fileAndNumberColor( + `${message.getFile()}(${message.getLine()},${message.getCharacter()})` + ) + + messageColor(':'), message.getContent() + ' ' + messageColor.underline(`TS${message.code}`), From 372bc87aa83dc7f8e8142cec87e078459b476c60 Mon Sep 17 00:00:00 2001 From: John Reilly Date: Sat, 3 Nov 2018 16:54:01 +0000 Subject: [PATCH 2/6] As suggested by @Timer, appPath is now excluded from reported error --- .../react-dev-utils/typescriptFormatter.js | 73 ++++++++++--------- .../config/webpack.config.dev.js | 3 +- 2 files changed, 42 insertions(+), 34 deletions(-) diff --git a/packages/react-dev-utils/typescriptFormatter.js b/packages/react-dev-utils/typescriptFormatter.js index d3e615a88bd..d3f9ea5262f 100644 --- a/packages/react-dev-utils/typescriptFormatter.js +++ b/packages/react-dev-utils/typescriptFormatter.js @@ -12,40 +12,47 @@ const codeFrame = require('@babel/code-frame').codeFrameColumns; const chalk = require('chalk'); const fs = require('fs'); -function formatter(message, useColors) { - const colors = new chalk.constructor({ enabled: useColors }); - const messageColor = message.isWarningSeverity() ? colors.yellow : colors.red; - const fileAndNumberColor = colors.bold.cyan; - - const source = - message.getFile() && - fs.existsSync(message.getFile()) && - fs.readFileSync(message.getFile(), 'utf-8'); - let frame = ''; +function makeFormatter(appPath) { + return function formatter(message, useColors) { + const colors = new chalk.constructor({ enabled: useColors }); + const messageColor = message.isWarningSeverity() + ? colors.yellow + : colors.red; + const fileAndNumberColor = colors.bold.cyan; - if (source) { - frame = codeFrame( - source, - { start: { line: message.line, column: message.character } }, - { highlightCode: useColors } - ) - .split('\n') - .map(str => ' ' + str) - .join(os.EOL); - } + const source = + message.getFile() && + fs.existsSync(message.getFile()) && + fs.readFileSync(message.getFile(), 'utf-8'); + let frame = ''; - return [ - messageColor.bold(`Type ${message.getSeverity().toLowerCase()} in `) + - fileAndNumberColor( - `${message.getFile()}(${message.getLine()},${message.getCharacter()})` - ) + - messageColor(':'), - message.getContent() + - ' ' + - messageColor.underline(`TS${message.code}`), - '', - frame, - ].join(os.EOL); + if (source) { + frame = codeFrame( + source, + { start: { line: message.line, column: message.character } }, + { highlightCode: useColors } + ) + .split('\n') + .map(str => ' ' + str) + .join(os.EOL); + } + + return [ + messageColor.bold(`Type ${message.getSeverity().toLowerCase()} in `) + + fileAndNumberColor( + `${message + .getFile() + .replace( + appPath, + '' + )}(${message.getLine()},${message.getCharacter()})` + ) + + messageColor(':'), + message.getContent() + ' ' + messageColor.underline(`TS${message.code}`), + '', + frame, + ].join(os.EOL); + }; } -module.exports = formatter; +module.exports = makeFormatter; diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js index f8b7c64c40e..2c5fca756e2 100644 --- a/packages/react-scripts/config/webpack.config.dev.js +++ b/packages/react-scripts/config/webpack.config.dev.js @@ -442,7 +442,8 @@ module.exports = { ], watch: paths.appSrc, silent: true, - formatter: typescriptFormatter, + // Create formatter which displays filepath with appPath excluded + formatter: typescriptFormatter(paths.appPath.replace(/\\/g, '/')), }), ].filter(Boolean), From 93b496579a59a59f49f015ec325138d3b5ba98e5 Mon Sep 17 00:00:00 2001 From: John Reilly Date: Sat, 3 Nov 2018 18:00:45 +0000 Subject: [PATCH 3/6] strip liading slash as suggested by @ianschmitz --- packages/react-dev-utils/typescriptFormatter.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/react-dev-utils/typescriptFormatter.js b/packages/react-dev-utils/typescriptFormatter.js index d3f9ea5262f..758d5968d85 100644 --- a/packages/react-dev-utils/typescriptFormatter.js +++ b/packages/react-dev-utils/typescriptFormatter.js @@ -13,6 +13,7 @@ const chalk = require('chalk'); const fs = require('fs'); function makeFormatter(appPath) { + const pathToExclude = appPath + '/'; return function formatter(message, useColors) { const colors = new chalk.constructor({ enabled: useColors }); const messageColor = message.isWarningSeverity() @@ -43,7 +44,7 @@ function makeFormatter(appPath) { `${message .getFile() .replace( - appPath, + pathToExclude, '' )}(${message.getLine()},${message.getCharacter()})` ) + From 9b432f6bf93c10d450f6e63ec9b60567691a939e Mon Sep 17 00:00:00 2001 From: John Reilly Date: Sat, 23 Feb 2019 07:46:10 +0000 Subject: [PATCH 4/6] formatWebpackMessages now takes filePathToExclude parameter - webpackHotDevClient uses process.cwd() as discussed with @ianschmitz --- packages/react-dev-utils/README.md | 2 +- .../react-dev-utils/WebpackDevServerUtils.js | 3 ++- .../react-dev-utils/formatWebpackMessages.js | 20 +++++++++-------- .../react-dev-utils/webpackHotDevClient.js | 22 ++++++++++++------- 4 files changed, 28 insertions(+), 19 deletions(-) diff --git a/packages/react-dev-utils/README.md b/packages/react-dev-utils/README.md index d615f66b5cf..5d1c0eba1b4 100644 --- a/packages/react-dev-utils/README.md +++ b/packages/react-dev-utils/README.md @@ -220,7 +220,7 @@ measureFileSizesBeforeBuild(buildFolder).then(previousFileSizes => { }); ``` -#### `formatWebpackMessages({errors: Array, warnings: Array}): {errors: Array, warnings: Array}` +#### `formatWebpackMessages({errors: Array, warnings: Array}): {errors: Array, warnings: Array}, filePathToExclude: string)` Extracts and prettifies warning and error messages from webpack [stats](https://github.com/webpack/docs/wiki/node.js-api#stats) object. diff --git a/packages/react-dev-utils/WebpackDevServerUtils.js b/packages/react-dev-utils/WebpackDevServerUtils.js index 0a3e233e641..7b7da62b178 100644 --- a/packages/react-dev-utils/WebpackDevServerUtils.js +++ b/packages/react-dev-utils/WebpackDevServerUtils.js @@ -153,7 +153,8 @@ function createCompiler(webpack, config, appName, urls, useYarn) { // We only construct the warnings and errors for speed: // https://github.com/facebook/create-react-app/issues/4492#issuecomment-421959548 const messages = formatWebpackMessages( - stats.toJson({ all: false, warnings: true, errors: true }) + stats.toJson({ all: false, warnings: true, errors: true }), + paths.appPath.replace(/\\/g, '/') ); const isSuccessful = !messages.errors.length && !messages.warnings.length; if (isSuccessful) { diff --git a/packages/react-dev-utils/formatWebpackMessages.js b/packages/react-dev-utils/formatWebpackMessages.js index 4b0f44acb74..62df732ce66 100644 --- a/packages/react-dev-utils/formatWebpackMessages.js +++ b/packages/react-dev-utils/formatWebpackMessages.js @@ -16,7 +16,7 @@ function isLikelyASyntaxError(message) { // Cleans up webpack error messages. // eslint-disable-next-line no-unused-vars -function formatMessage(message, isError) { +function formatMessage(message, filePathToExclude) { let lines = message.split('\n'); // Strip Webpack-added headers off errors/warnings @@ -65,7 +65,9 @@ function formatMessage(message, isError) { lines.splice(1, 1); } // Clean up file name - lines[0] = lines[0].replace(/^(.*) \d+:\d+-\d+$/, '$1'); + lines[0] = lines[0] + .replace(/^(.*) \d+:\d+-\d+$/, '$1') + .replace(filePathToExclude, ''); // Cleans up verbose "module not found" messages for files and packages. if (lines[1] && lines[1].indexOf('Module not found: ') === 0) { @@ -109,13 +111,13 @@ function formatMessage(message, isError) { return message.trim(); } -function formatWebpackMessages(json) { - const formattedErrors = json.errors.map(function(message) { - return formatMessage(message, true); - }); - const formattedWarnings = json.warnings.map(function(message) { - return formatMessage(message, false); - }); +function formatWebpackMessages(json, filePathToExclude) { + const formattedErrors = json.errors.map(message => + formatMessage(message, filePathToExclude) + ); + const formattedWarnings = json.warnings.map(message => + formatMessage(message, filePathToExclude) + ); const result = { errors: formattedErrors, warnings: formattedWarnings }; if (result.errors.some(isLikelyASyntaxError)) { // If there are any syntax errors, show just them. diff --git a/packages/react-dev-utils/webpackHotDevClient.js b/packages/react-dev-utils/webpackHotDevClient.js index cc7dc61684b..b921f51edef 100644 --- a/packages/react-dev-utils/webpackHotDevClient.js +++ b/packages/react-dev-utils/webpackHotDevClient.js @@ -121,10 +121,13 @@ function handleWarnings(warnings) { function printWarnings() { // Print warnings to the console. - var formatted = formatWebpackMessages({ - warnings: warnings, - errors: [], - }); + var formatted = formatWebpackMessages( + { + warnings: warnings, + errors: [], + }, + process.cwd() + ); if (typeof console !== 'undefined' && typeof console.warn === 'function') { for (var i = 0; i < formatted.warnings.length; i++) { @@ -164,10 +167,13 @@ function handleErrors(errors) { hasCompileErrors = true; // "Massage" webpack messages. - var formatted = formatWebpackMessages({ - errors: errors, - warnings: [], - }); + var formatted = formatWebpackMessages( + { + errors: errors, + warnings: [], + }, + process.cwd() + ); // Only show the first error. ErrorOverlay.reportBuildError(formatted.errors[0]); From 6819e409da83fbbfb9282a4ebec53a3de45e480b Mon Sep 17 00:00:00 2001 From: John Reilly Date: Sat, 23 Feb 2019 08:45:56 +0000 Subject: [PATCH 5/6] merge upstream changes take 2 --- .eslintrc => .eslintrc.json | 0 .github/CODEOWNERS | 2 + .github/lock.yml | 11 + .github/stale.yml | 56 + .travis.yml | 2 +- CHANGELOG.md | 403 +- CONTRIBUTING.md | 16 +- README.md | 20 +- appveyor.cleanup-cache.txt | 4 - appveyor.yml | 54 - .../docs/adding-a-css-modules-stylesheet.md | 2 +- docusaurus/docs/adding-bootstrap.md | 18 +- .../adding-custom-environment-variables.md | 42 +- docusaurus/docs/adding-typescript.md | 22 +- docusaurus/docs/alternatives-to-ejecting.md | 2 +- docusaurus/docs/analyzing-the-bundle-size.md | 4 +- docusaurus/docs/available-scripts.md | 4 +- docusaurus/docs/code-splitting.md | 4 +- .../developing-components-in-isolation.md | 12 +- docusaurus/docs/getting-started.md | 6 +- docusaurus/docs/importing-a-component.md | 4 +- .../docs/making-a-progressive-web-app.md | 10 +- docusaurus/docs/post-processing-css.md | 2 +- docusaurus/docs/production-build.md | 30 + .../proxying-api-requests-in-development.md | 16 +- docusaurus/docs/running-tests.md | 57 +- docusaurus/docs/setting-up-your-editor.md | 9 +- .../docs/supported-browsers-features.md | 2 +- docusaurus/docs/troubleshooting.md | 2 +- docusaurus/docs/using-https-in-development.md | 2 +- docusaurus/website/i18n/en.json | 5 +- docusaurus/website/package.json | 2 +- docusaurus/website/sidebars.json | 11 +- docusaurus/website/yarn.lock | 4341 +++++++++-------- lerna.json | 3 +- netlify.toml | 10 + package.json | 8 +- .../babel-plugin-named-asset-import/index.js | 120 +- .../index.test.js | 97 + .../package.json | 9 +- packages/babel-preset-react-app/README.md | 16 +- packages/babel-preset-react-app/create.js | 34 +- packages/babel-preset-react-app/package.json | 33 +- packages/confusing-browser-globals/README.md | 2 +- packages/create-react-app/README.md | 4 +- packages/create-react-app/createReactApp.js | 31 +- packages/create-react-app/package.json | 4 +- packages/create-react-app/yarn.lock.cached | 3317 +++++++------ packages/eslint-config-react-app/README.md | 16 +- packages/eslint-config-react-app/index.js | 7 + packages/eslint-config-react-app/package.json | 2 +- packages/react-app-polyfill/ie11.js | 8 +- packages/react-app-polyfill/ie9.js | 8 +- packages/react-app-polyfill/package.json | 6 +- .../ForkTsCheckerWebpackPlugin.js | 12 + packages/react-dev-utils/README.md | 21 +- .../react-dev-utils/WebpackDevServerUtils.js | 127 +- packages/react-dev-utils/chalk.js | 12 + packages/react-dev-utils/openBrowser.js | 2 +- packages/react-dev-utils/package.json | 29 +- packages/react-dev-utils/printBuildError.js | 2 +- .../printHostingInstructions.js | 2 +- .../react-dev-utils/typescriptFormatter.js | 32 +- .../react-dev-utils/webpackHotDevClient.js | 18 +- packages/react-error-overlay/README.md | 2 +- packages/react-error-overlay/package.json | 25 +- .../src/components/Collapsible.js | 6 +- packages/react-error-overlay/src/index.js | 58 +- .../src/listenToRuntimeErrors.js | 46 +- packages/react-scripts/README.md | 4 +- packages/react-scripts/bin/react-scripts.js | 2 +- .../config/jest/fileTransform.js | 17 +- .../config/webpack.config.dev.js | 462 -- .../react-scripts/config/webpack.config.js | 653 +++ .../config/webpack.config.prod.js | 580 --- .../config/webpackDevServer.config.js | 3 +- .../fixtures/kitchensink/README.md | 2 +- .../fixtures/kitchensink/public/index.html | 8 +- .../src/features/webpack/SvgComponent.js | 8 +- .../src/features/webpack/SvgComponent.test.js | 11 +- packages/react-scripts/lib/react-app.d.ts | 10 +- packages/react-scripts/package.json | 51 +- packages/react-scripts/scripts/build.js | 7 +- packages/react-scripts/scripts/eject.js | 10 +- packages/react-scripts/scripts/init.js | 2 +- packages/react-scripts/scripts/start.js | 26 +- packages/react-scripts/scripts/test.js | 9 +- .../scripts/utils/createJestConfig.js | 10 +- .../scripts/utils/verifyPackageTree.js | 4 +- .../scripts/utils/verifyTypeScriptSetup.js | 8 +- .../template-typescript/public/index.html | 21 +- .../template-typescript/src/App.css | 1 + .../template-typescript/src/index.tsx | 2 +- .../template-typescript/src/serviceWorker.ts | 12 +- packages/react-scripts/template/README.md | 24 + .../react-scripts/template/public/index.html | 21 +- packages/react-scripts/template/src/App.css | 1 + packages/react-scripts/template/src/index.js | 2 +- .../template/src/serviceWorker.js | 6 +- tasks/cra.js | 2 +- tasks/e2e-simple.sh | 4 + tasks/local-test.sh | 10 +- .../__shared__/template/public/index.html | 2 +- .../issue-5947-not-typescript/index.test.js | 36 + .../issue-5947-not-typescript/package.json | 3 + test/fixtures/relative-paths/package.json | 5 +- .../typescript-typecheck/.disable-pnp | 0 .../typescript-typecheck/index.test.js | 33 + .../typescript-typecheck/package.json | 9 + .../fixtures/typescript-typecheck/src/App.tsx | 13 + .../typescript-typecheck/src/index.tsx | 5 + test/fixtures/typescript/src/App.test.ts | 7 + test/fixtures/typescript/src/App.ts | 13 + test/fixtures/typescript/tsconfig.json | 5 + 114 files changed, 6441 insertions(+), 4989 deletions(-) rename .eslintrc => .eslintrc.json (100%) create mode 100644 .github/CODEOWNERS create mode 100644 .github/lock.yml create mode 100644 .github/stale.yml delete mode 100644 appveyor.cleanup-cache.txt delete mode 100644 appveyor.yml create mode 100644 docusaurus/docs/production-build.md create mode 100644 netlify.toml create mode 100644 packages/babel-plugin-named-asset-import/index.test.js create mode 100644 packages/react-dev-utils/ForkTsCheckerWebpackPlugin.js create mode 100644 packages/react-dev-utils/chalk.js delete mode 100644 packages/react-scripts/config/webpack.config.dev.js create mode 100644 packages/react-scripts/config/webpack.config.js delete mode 100644 packages/react-scripts/config/webpack.config.prod.js create mode 100644 test/fixtures/issue-5947-not-typescript/index.test.js create mode 100644 test/fixtures/issue-5947-not-typescript/package.json create mode 100644 test/fixtures/typescript-typecheck/.disable-pnp create mode 100644 test/fixtures/typescript-typecheck/index.test.js create mode 100644 test/fixtures/typescript-typecheck/package.json create mode 100644 test/fixtures/typescript-typecheck/src/App.tsx create mode 100644 test/fixtures/typescript-typecheck/src/index.tsx create mode 100644 test/fixtures/typescript/tsconfig.json diff --git a/.eslintrc b/.eslintrc.json similarity index 100% rename from .eslintrc rename to .eslintrc.json diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS new file mode 100644 index 00000000000..ebb18e94002 --- /dev/null +++ b/.github/CODEOWNERS @@ -0,0 +1,2 @@ +packages/ @amyrlam @bugzpodder @gaearon @ianschmitz @iansu @mrmckeb @petetnt @timer +docusaurus/ @amyrlam @iansu diff --git a/.github/lock.yml b/.github/lock.yml new file mode 100644 index 00000000000..1815cbffcec --- /dev/null +++ b/.github/lock.yml @@ -0,0 +1,11 @@ +# Configuration for lock-threads - https://github.com/dessant/lock-threads + +# Number of days of inactivity before a closed issue or pull request is locked +daysUntilLock: 5 + +# Issues and pull requests with these labels will not be locked. Set to `[]` to disable +exemptLabels: [] + +# Do not comment when locking +setLockReason: false +lockComment: false diff --git a/.github/stale.yml b/.github/stale.yml new file mode 100644 index 00000000000..a87891011fd --- /dev/null +++ b/.github/stale.yml @@ -0,0 +1,56 @@ +# Configuration for probot-stale - https://github.com/probot/stale + +# Number of days of inactivity before an Issue or Pull Request becomes stale +daysUntilStale: 30 + +# Number of days of inactivity before a stale Issue or Pull Request is closed. +# Set to false to disable. If disabled, issues still need to be closed manually, but will remain marked as stale. +daysUntilClose: 5 + +# Issues or Pull Requests with these labels will never be considered stale. Set to `[]` to disable +exemptLabels: + - "contributions: claimed" + - "contributions: up for grabs!" + - "good first issue" + - "issue: announcement" + - "issue: bug" + - "issue: needs investigation" + - "issue: proposal" + - "tag: bug fix" + - "tag: breaking change" + +# Set to true to ignore issues in a project (defaults to false) +exemptProjects: true + +# Set to true to ignore issues in a milestone (defaults to false) +exemptMilestones: true + +# Label to use when marking as stale +staleLabel: stale + +# Limit the number of actions per hour, from 1-30. Default is 30 +limitPerRun: 30 + +issues: + # Comment to post when marking Issues as stale. + markComment: > + This issue has been automatically marked as stale because it has not had any + recent activity. It will be closed in 5 days if no further activity occurs. + + # Comment to post when closing a stale Issue. + closeComment: > + This issue has been automatically closed because it has not had any recent + activity. If you have a question or comment, please open a new issue. + +pulls: + # Comment to post when marking Pull Request as stale. + markComment: > + This pull request has been automatically marked as stale because it has not + had any recent activity. It will be closed in 5 days if no further activity + occurs. + + # Comment to post when closing a stale Pull Request. + closeComment: > + This pull request has been automatically closed because it has not had any + recent activity. If you have a question or comment, please open a new + issue. Thank you for your contribution! diff --git a/.travis.yml b/.travis.yml index 846a8143750..dda58096f90 100644 --- a/.travis.yml +++ b/.travis.yml @@ -9,7 +9,7 @@ cache: directories: - .npm before_install: - - curl -o- -L https://yarnpkg.com/install.sh | bash -s -- --nightly + - curl -o- -L https://yarnpkg.com/install.sh | bash -s - export PATH="$HOME/.yarn/bin:$PATH" install: true script: diff --git a/CHANGELOG.md b/CHANGELOG.md index 83b7e660df6..48bcaf53274 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,10 +1,387 @@ +## 2.1.5 (February 11, 2019) + +v2.1.5 is a maintenance release that reverts the TypeScript speed improvements ([#5903](https://github.com/facebook/create-react-app/pull/5903)) to fix a dependency issue in `react-dev-utils`. + +### Migrating from 2.1.4 to 2.1.5 + +Inside any created project that has not been ejected, run: + +```sh +npm install --save --save-exact react-scripts@2.1.5 +``` + +or + +```sh +yarn add --exact react-scripts@2.1.5 +``` + +## 2.1.4 (February 10, 2019) + +v2.1.4 is a maintenance release that brings a number of awesome improvements. A few notable ones include: + +- :rocket: Reduced TypeScript rebuild times while running the development server. TypeScript is now blazing fast! Special thanks to [@deftomat](https://github.com/deftomat) and [@johnnyreilly](https://github.com/johnnyreilly) and the other contributors for their hard work on this. ([#5903](https://github.com/facebook/create-react-app/pull/5903)) +- Jest [type ahead support](https://github.com/jest-community/jest-watch-typeahead) which provides a much nicer experience when filtering your tests using the Jest CLI ([#5213](https://github.com/facebook/create-react-app/pull/5213)) +- And many more improvements! + +#### :bug: Bug Fix + +- `react-scripts` + - [#6364](https://github.com/facebook/create-react-app/pull/6364) Use semicolons in the ProcessEnv interface. ([@DominikPalo](https://github.com/DominikPalo)) + - [#6276](https://github.com/facebook/create-react-app/pull/6276) Prevent cursor events on app-logo svg. ([@kostadriano](https://github.com/kostadriano)) + +#### :nail_care: Enhancement + +- `react-scripts` + - [#5213](https://github.com/facebook/create-react-app/pull/5213) Add Jest typeahead plugin. ([@gaearon](https://github.com/gaearon)) + - [#5713](https://github.com/facebook/create-react-app/pull/5713) Sass source map for dev. ([@zhuoli99](https://github.com/zhuoli99)) + - [#6285](https://github.com/facebook/create-react-app/pull/6285) Allow react-scripts test --no-watch. ([@ricokahler](https://github.com/ricokahler)) + - [#5060](https://github.com/facebook/create-react-app/pull/5060) Enable eval-source-map for firefox. ([@jasonLaster](https://github.com/jasonLaster)) +- `react-dev-utils`, `react-scripts` + - [#5903](https://github.com/facebook/create-react-app/pull/5903) Speed up TypeScript projects. ([@deftomat](https://github.com/deftomat)) + +#### :memo: Documentation + +- Other + - [#6383](https://github.com/facebook/create-react-app/pull/6383) Update docs links to prefer HTTPS for supported domains. ([@ianschmitz](https://github.com/ianschmitz)) + - [#6062](https://github.com/facebook/create-react-app/pull/6062) [docs] Warn/clarify that env vars are NOT "SECRET". ([@JBallin](https://github.com/JBallin)) + - [#6359](https://github.com/facebook/create-react-app/pull/6359) Update ZEIT Now deployment instructions. ([@timothyis](https://github.com/timothyis)) + - [#6346](https://github.com/facebook/create-react-app/pull/6346) Minor issue in README.md. ([@nathanlschneider](https://github.com/nathanlschneider)) + - [#6331](https://github.com/facebook/create-react-app/pull/6331) Update docs to document `--no-watch`. ([@ricokahler](https://github.com/ricokahler)) + - [#6229](https://github.com/facebook/create-react-app/pull/6229) Update `serve` port flag and add example. ([@lyzhovnik](https://github.com/lyzhovnik)) + - [#6190](https://github.com/facebook/create-react-app/pull/6190) Updating updating-to-new-releases.md for users who installed CRA globally. ([@carpben](https://github.com/carpben)) + - [#6095](https://github.com/facebook/create-react-app/pull/6095) Changes to steps for publishing GitHub User Page. ([@StevenTan](https://github.com/StevenTan)) + - [#6157](https://github.com/facebook/create-react-app/pull/6157) Add note for global install of CLI. ([@ianschmitz](https://github.com/ianschmitz)) + - [#6149](https://github.com/facebook/create-react-app/pull/6149) update link for difference between proposal stages. ([@loveky](https://github.com/loveky)) + - [#6141](https://github.com/facebook/create-react-app/pull/6141) Remove extra table cell. ([@yangshun](https://github.com/yangshun)) +- `react-scripts` + - [#6355](https://github.com/facebook/create-react-app/pull/6355) Make manifest.json description more generic. ([@chrisself](https://github.com/chrisself)) + +#### :house: Internal + +- Other + - [#6050](https://github.com/facebook/create-react-app/pull/6050) Fix e2e:docker failure with "access denied". ([@jamesknelson](https://github.com/jamesknelson)) + - [#6179](https://github.com/facebook/create-react-app/pull/6179) Update local-test.sh to return test exit code. ([@dallonf](https://github.com/dallonf)) + - [#6165](https://github.com/facebook/create-react-app/pull/6165) Fix CI builds. ([@ianschmitz](https://github.com/ianschmitz)) +- `react-scripts` + - [#5798](https://github.com/facebook/create-react-app/pull/5798) Added `module` to ignored node modules list. ([@dotansimha](https://github.com/dotansimha)) + - [#6022](https://github.com/facebook/create-react-app/pull/6022) TypeScript detection filtering 'node_modules'.. ([@holloway](https://github.com/holloway)) +- `react-dev-utils`, `react-scripts` + - [#6150](https://github.com/facebook/create-react-app/pull/6150) dependencies: move chalk to react-dev-utils. ([@otaviopace](https://github.com/otaviopace)) +- `babel-plugin-named-asset-import`, `react-scripts` + - [#5816](https://github.com/facebook/create-react-app/pull/5816) Upgrade @svgr/webpack to 4.1.0. ([@alaycock](https://github.com/alaycock)) +- `react-dev-utils` + - [#6162](https://github.com/facebook/create-react-app/pull/6162) Update react-dev-util globby dependency to v8.0.2. ([@davidlukerice](https://github.com/davidlukerice)) +- `babel-preset-react-app`, `react-app-polyfill`, `react-dev-utils`, `react-error-overlay`, `react-scripts` + - [#6137](https://github.com/facebook/create-react-app/pull/6137) Fix CI and upgrade dependencies. ([@Timer](https://github.com/Timer)) + +#### :hammer: Underlying Tools + +- `babel-preset-react-app`, `react-app-polyfill`, `react-dev-utils`, `react-scripts` + - [#6393](https://github.com/facebook/create-react-app/pull/6393) Upgrade dependencies. ([@ianschmitz](https://github.com/ianschmitz)) +- `babel-preset-react-app` + - [#6307](https://github.com/facebook/create-react-app/pull/6307) Update babel-plugin-macros 2.4.4 -> 2.4.5. ([@maniax89](https://github.com/maniax89)) +- `eslint-config-react-app`, `react-scripts` + - [#6132](https://github.com/facebook/create-react-app/pull/6132) Bump eslint-plugin-react version and update webpack config. ([@ianschmitz](https://github.com/ianschmitz)) + +#### Committers: 29 + +- Adam Laycock ([alaycock](https://github.com/alaycock)) +- Adriano Costa ([kostadriano](https://github.com/kostadriano)) +- Andrew Turgeon ([maniax89](https://github.com/maniax89)) +- Ben Carp ([carpben](https://github.com/carpben)) +- Charles Pritchard ([Downchuck](https://github.com/Downchuck)) +- Chris Self ([chrisself](https://github.com/chrisself)) +- Dallon Feldner ([dallonf](https://github.com/dallonf)) +- Dan Abramov ([gaearon](https://github.com/gaearon)) +- David Rice ([davidlukerice](https://github.com/davidlukerice)) +- Dominik Palo ([DominikPalo](https://github.com/DominikPalo)) +- Dotan Simha ([dotansimha](https://github.com/dotansimha)) +- Ian Schmitz ([ianschmitz](https://github.com/ianschmitz)) +- JBallin ([JBallin](https://github.com/JBallin)) +- James George ([jamesgeorge007](https://github.com/jamesgeorge007)) +- James K Nelson ([jamesknelson](https://github.com/jamesknelson)) +- Jason Laster ([jasonLaster](https://github.com/jasonLaster)) +- Joe Haddad ([Timer](https://github.com/Timer)) +- Matthew Holloway ([holloway](https://github.com/holloway)) +- Nathan Schneider ([nathanlschneider](https://github.com/nathanlschneider)) +- Nikita Lyzhov ([lyzhovnik](https://github.com/lyzhovnik)) +- Otávio Pace ([otaviopace](https://github.com/otaviopace)) +- Rico Kahler ([ricokahler](https://github.com/ricokahler)) +- Steven Tan ([StevenTan](https://github.com/StevenTan)) +- Timothy ([timothyis](https://github.com/timothyis)) +- Tomáš Szabo ([deftomat](https://github.com/deftomat)) +- Yangshun Tay ([yangshun](https://github.com/yangshun)) +- [gottfired](https://github.com/gottfired) +- [zhuoli99](https://github.com/zhuoli99) +- loveky ([loveky](https://github.com/loveky)) + +### Migrating from 2.1.3 to 2.1.4 + +Inside any created project that has not been ejected, run: + +```sh +npm install --save --save-exact react-scripts@2.1.4 +``` + +or + +```sh +yarn add --exact react-scripts@2.1.4 +``` + +## 2.1.3 (January 4, 2019) + +v2.1.3 is a maintenance release to fix a [vulnerability in webpack-dev-server](https://www.npmjs.com/advisories/725). + +#### :memo: Documentation + +- Other + - [#6067](https://github.com/facebook/create-react-app/pull/6067) Correct an error for documentation. ([@hardo](https://github.com/hardo)) + - [#6110](https://github.com/facebook/create-react-app/pull/6110) Replace deprecated VSCode launch.json variable. ([@raiskila](https://github.com/raiskila)) + - [#5631](https://github.com/facebook/create-react-app/pull/5631) Generalize the adding bootstrap documentation. ([@jquense](https://github.com/jquense)) + - [#6084](https://github.com/facebook/create-react-app/pull/6084) Remove outdated docs for setting up eslint in editor. ([@LukasWerfel](https://github.com/LukasWerfel)) + - [#6061](https://github.com/facebook/create-react-app/pull/6061) Fix control comment of CSS Grid prefixing. ([@denexapp](https://github.com/denexapp)) +- `react-scripts` + - [#6036](https://github.com/facebook/create-react-app/pull/6036) Fix comment typo. ([@shawtung](https://github.com/shawtung)) + +#### :house: Internal + +- `create-react-app`, `react-error-overlay` + - [#6104](https://github.com/facebook/create-react-app/pull/6104) Typo fixes. ([@prashant-andani](https://github.com/prashant-andani)) + +#### :hammer: Underlying Tools + +- `react-scripts` + - [#6064](https://github.com/facebook/create-react-app/pull/6064) Update webpack-dev-server 3.1.9 -> 3.1.14. ([@Friss](https://github.com/Friss)) + +#### Committers: 8 + +- Denis Mukhametov ([denexapp](https://github.com/denexapp)) +- Hardo ([hardo](https://github.com/hardo)) +- Janne Raiskila ([raiskila](https://github.com/raiskila)) +- Jason Quense ([jquense](https://github.com/jquense)) +- Lukas Werfel ([LukasWerfel](https://github.com/LukasWerfel)) +- Prashant Andani ([prashant-andani](https://github.com/prashant-andani)) +- Zachary Friss ([Friss](https://github.com/Friss)) +- [shawtung](https://github.com/shawtung) + +### Migrating from 2.1.2 to 2.1.3 + +Inside any created project that has not been ejected, run: + +```sh +npm install --save --save-exact react-scripts@2.1.3 +``` + +or + +```sh +yarn add --exact react-scripts@2.1.3 +``` + +## 2.1.2 (December 23, 2018) + +v2.1.2 is a maintenance release including various bug fixes. + +#### :rocket: New Feature + +- `babel-preset-react-app` + - [#5487](https://github.com/facebook/create-react-app/pull/5487) Add `allowESModules` option to `babel-preset-react-app` ([@Pajn](https://github.com/Pajn)) + +#### :bug: Bug Fix + +- `create-react-app` + - [#5905](https://github.com/facebook/create-react-app/pull/5905) Disable copy to clipboard in `create-react-app --info` ([@heyimalex](https://github.com/heyimalex)) + - [#5685](https://github.com/facebook/create-react-app/pull/5685) Update envinfo to `5.11.1` ([@tabrindle](https://github.com/tabrindle)) +- `babel-preset-react-app` + - [#5783](https://github.com/facebook/create-react-app/pull/5783) Fix TypeScript decorator support ([@ianschmitz](https://github.com/ianschmitz)) +- `babel-plugin-named-asset-import` + - [#5573](https://github.com/facebook/create-react-app/pull/5573) Fix named-asset-import plugin to work with export-as syntax ([@NShahri](https://github.com/NShahri)) +- `react-app-polyfill` + - [#5789](https://github.com/facebook/create-react-app/pull/5789) Don't polyfill fetch for Node ([@gshilin](https://github.com/gshilin)) +- `react-scripts` + - [#5721](https://github.com/facebook/create-react-app/pull/5721) Version bump `postcss-preset-env` to latest ([@BPScott](https://github.com/BPScott)) + - [#5701](https://github.com/facebook/create-react-app/pull/5701) Fix `tsconfig.json` lib suggested value ([@ianschmitz](https://github.com/ianschmitz)) + +#### :nail_care: Enhancement + +- `react-scripts` + - [#5698](https://github.com/facebook/create-react-app/pull/5698) Add support for `setupTests.ts` ([@ianschmitz](https://github.com/ianschmitz)) + +#### :memo: Documentation + +- Other + - [#6009](https://github.com/facebook/create-react-app/pull/6009) Correct markdown to avoid comment. ([@souzasmatheus](https://github.com/souzasmatheus)) + - [#6015](https://github.com/facebook/create-react-app/pull/6015) Add example command to create typed project. ([@mbelsky](https://github.com/mbelsky)) + - [#6000](https://github.com/facebook/create-react-app/pull/6000) Make links to docs consistent in README. ([@iansu](https://github.com/iansu)) + - [#5900](https://github.com/facebook/create-react-app/pull/5900) Add production build section to docs. ([@ianschmitz](https://github.com/ianschmitz)) + - [#5985](https://github.com/facebook/create-react-app/pull/5985) Use https for linked images to fix mixed content warnings. ([@iansu](https://github.com/iansu)) + - [#5919](https://github.com/facebook/create-react-app/pull/5919) Docs: update localStorage mock in “Running Tests”. ([@phacks](https://github.com/phacks)) + - [#5917](https://github.com/facebook/create-react-app/pull/5917) Add SASS_PATH instructions to Sass stylesheet docs. ([@jayantbh](https://github.com/jayantbh)) + - [#5823](https://github.com/facebook/create-react-app/pull/5823) Add default values to `file_ext` note. ([@alaycock](https://github.com/alaycock)) + - [#5907](https://github.com/facebook/create-react-app/pull/5907) Update README.md with updated link about PWAs. ([@wuweiweiwu](https://github.com/wuweiweiwu)) + - [#5858](https://github.com/facebook/create-react-app/pull/5858) Some Grammar fixes. ([@nikhilknoldus](https://github.com/nikhilknoldus)) + - [#5883](https://github.com/facebook/create-react-app/pull/5883) Fix link to page about running tests. ([@wsmoak](https://github.com/wsmoak)) + - [#5849](https://github.com/facebook/create-react-app/pull/5849) React native repository updated in `README.md`. ([@pavinthan](https://github.com/pavinthan)) + - [#5806](https://github.com/facebook/create-react-app/pull/5806) Rename 'getting started' link to 'docs'. ([@kulek1](https://github.com/kulek1)) + - [#5788](https://github.com/facebook/create-react-app/pull/5788) docs: Simplify installing Storybook with `npx` ([@sagirk](https://github.com/sagirk)) + - [#5779](https://github.com/facebook/create-react-app/pull/5779) docs: Change story book command to `sb init` ([@andys8](https://github.com/andys8)) + - [#5759](https://github.com/facebook/create-react-app/pull/5759) Add PR welcoming badge ([@open-source-explorer](https://github.com/open-source-explorer)) + - [#5730](https://github.com/facebook/create-react-app/pull/5730) Suggest Encore when not building a SPA with Symfony ([@dunglas](https://github.com/dunglas)) + - [#5710](https://github.com/facebook/create-react-app/pull/5710) Updated the link to firebase hosting ([@githubsaturn](https://github.com/githubsaturn)) + - [#5704](https://github.com/facebook/create-react-app/pull/5704) Fixed link to manifest.json file ([@m4jing](https://github.com/m4jing)) + - [#5670](https://github.com/facebook/create-react-app/pull/5670) Fix public folder documentation link ([@makovkastar](https://github.com/makovkastar)) +- `eslint-config-react-app` + - [#5990](https://github.com/facebook/create-react-app/pull/5990) Updated docs for `.eslintrc` ([@ManoelLobo](https://github.com/ManoelLobo)) +- `babel-preset-react-app`, `create-react-app`, `eslint-config-react-app`, `react-dev-utils`, `react-scripts` + - [#5912](https://github.com/facebook/create-react-app/pull/5912) Update links to docs in all package README files ([@iansu](https://github.com/iansu)) +- `react-scripts` + - [#5974](https://github.com/facebook/create-react-app/pull/5974) Improve advice in `verifyPackageTree.js` ([@sjalgeo](https://github.com/sjalgeo)) + - [#5954](https://github.com/facebook/create-react-app/pull/5954) Add pre-eject message about new features in v2 ([@iansu](https://github.com/iansu)) + - [#5808](https://github.com/facebook/create-react-app/pull/5808) Add placeholders to template README for bit.ly links ([@iansu](https://github.com/iansu)) +- `react-app-polyfill` + - [#5814](https://github.com/facebook/create-react-app/pull/5814) Note that extra polyfills must be included manually ([@ajwann](https://github.com/ajwann)) +- `babel-preset-react-app`, `eslint-config-react-app`, `react-error-overlay`, `react-scripts` + - [#5727](https://github.com/facebook/create-react-app/pull/5727) Fix typo ([@noelyoo](https://github.com/noelyoo)) + +#### :house: Internal + +- `react-scripts` + - [#5978](https://github.com/facebook/create-react-app/pull/5978) Add `webp` support for TypeScript. ([@dugagjin](https://github.com/dugagjin)) + - [#5959](https://github.com/facebook/create-react-app/pull/5959) Suggest a different default for speed reasons. ([@Timer](https://github.com/Timer)) + - [#5839](https://github.com/facebook/create-react-app/pull/5839) Run prettier on HTML files. ([@sibiraj-s](https://github.com/sibiraj-s)) + - [#5722](https://github.com/facebook/create-react-app/pull/5722) Merge webpack configuration. ([@Timer](https://github.com/Timer)) + - [#5694](https://github.com/facebook/create-react-app/pull/5694) Add permissive TS lib defaults. ([@Timer](https://github.com/Timer)) +- Other + - [#5988](https://github.com/facebook/create-react-app/pull/5988) Added extension to `.eslintrc` ([@ManoelLobo](https://github.com/ManoelLobo)) + - [#5546](https://github.com/facebook/create-react-app/pull/5546) Add the latest stable node version. ([@noelyoo](https://github.com/noelyoo)) +- `react-dev-utils` + - [#5927](https://github.com/facebook/create-react-app/pull/5927) Correct some comments. ([@mjackson](https://github.com/mjackson)) + - [#5879](https://github.com/facebook/create-react-app/pull/5879) fix: make typescriptformatter support 0.5 of fork checker. ([@SimenB](https://github.com/SimenB)) +- `react-error-overlay` + - [#5451](https://github.com/facebook/create-react-app/pull/5451) fix: add `sideEffects: false` to react-error-overlay. ([@SimenB](https://github.com/SimenB)) +- `babel-preset-react-app` + - [#5487](https://github.com/facebook/create-react-app/pull/5487) Add allowESModules option to babel-preset-react-app. ([@Pajn](https://github.com/Pajn)) +- `create-react-app` + - [#4605](https://github.com/facebook/create-react-app/pull/4605) ignore intellij module files when generating an app. ([@denofevil](https://github.com/denofevil)) + +#### Committers: 36 + +- \ ([open-source-explorer](https://github.com/open-source-explorer)) +- Adam Laycock ([alaycock](https://github.com/alaycock)) +- Adam Wanninger ([ajwann](https://github.com/ajwann)) +- Alex Guerra ([heyimalex](https://github.com/heyimalex)) +- Andy ([andys8](https://github.com/andys8)) +- Ben Scott ([BPScott](https://github.com/BPScott)) +- Dennis Ushakov ([denofevil](https://github.com/denofevil)) +- Dugagjin Lashi ([dugagjin](https://github.com/dugagjin)) +- Gregory Shilin ([gshilin](https://github.com/gshilin)) +- Ian Schmitz ([ianschmitz](https://github.com/ianschmitz)) +- Ian Sutherland ([iansu](https://github.com/iansu)) +- Jayant Bhawal ([jayantbh](https://github.com/jayantbh)) +- Jing Ma ([m4jing](https://github.com/m4jing)) +- Joe Haddad ([Timer](https://github.com/Timer)) +- Kasra Bigdeli ([githubsaturn](https://github.com/githubsaturn)) +- Kévin Dunglas ([dunglas](https://github.com/dunglas)) +- Manoel ([ManoelLobo](https://github.com/ManoelLobo)) +- Matheus Souza ([souzasmatheus](https://github.com/souzasmatheus)) +- Max Belsky ([mbelsky](https://github.com/mbelsky)) +- Michael Jackson ([mjackson](https://github.com/mjackson)) +- Nicolas Goutay ([phacks](https://github.com/phacks)) +- Nikhil ([nikhilknoldus](https://github.com/nikhilknoldus)) +- Nima Shahri ([NShahri](https://github.com/NShahri)) +- Noel Yoo ([noelyoo](https://github.com/noelyoo)) +- Oleksandr Melnykov ([makovkastar](https://github.com/makovkastar)) +- Pavinthan ([pavinthan](https://github.com/pavinthan)) +- Rasmus Eneman ([Pajn](https://github.com/Pajn)) +- Sagir Khan ([sagirk](https://github.com/sagirk)) +- Sibiraj ([sibiraj-s](https://github.com/sibiraj-s)) +- Simen Bekkhus ([SimenB](https://github.com/SimenB)) +- Stephen Algeo ([sjalgeo](https://github.com/sjalgeo)) +- Trevor Brindle ([tabrindle](https://github.com/tabrindle)) +- Wei-Wei Wu ([wuweiweiwu](https://github.com/wuweiweiwu)) +- Wendy Smoak ([wsmoak](https://github.com/wsmoak)) +- [kulek1](https://github.com/kulek1) +- swyx ([sw-yx](https://github.com/sw-yx)) + +### Migrating from 2.1.1 to 2.1.2 + +Inside any created project that has not been ejected, run: + +```sh +npm install --save --save-exact react-scripts@2.1.2 +``` + +or + +```sh +yarn add --exact react-scripts@2.1.2 +``` + +## 2.1.1 (October 31, 2018) + +Happy Halloween 🎃 👻! This spooky release brings a treat: decorator support in TypeScript files! + +#### :bug: Bug Fix + +- `babel-preset-react-app` + - [#5659](https://github.com/facebook/create-react-app/pull/5659) Add support for decorators. ([@Timer](https://github.com/Timer)) +- `react-scripts` + - [#5621](https://github.com/facebook/create-react-app/pull/5621) fix 'Duplicate string index signature' in ProcessEnv. ([@xiaoxiangmoe](https://github.com/xiaoxiangmoe)) + +#### :nail_care: Enhancement + +- `babel-preset-react-app` + - [#5659](https://github.com/facebook/create-react-app/pull/5659) Add support for decorators. ([@Timer](https://github.com/Timer)) + +#### :memo: Documentation + +- [#5658](https://github.com/facebook/create-react-app/pull/5658) Update making-a-progressive-web-app.md. ([@jakeboone02](https://github.com/jakeboone02)) +- [#5635](https://github.com/facebook/create-react-app/pull/5635) Update minimum node version to 8.10 in README. ([@iansu](https://github.com/iansu)) +- [#5629](https://github.com/facebook/create-react-app/pull/5629) Add link to cra-ts migration guide. ([@Vinnl](https://github.com/Vinnl)) + +#### :house: Internal + +- `react-error-overlay` + - [#4709](https://github.com/facebook/create-react-app/pull/4709) Expose `reportRuntimeError`. ([@hipstersmoothie](https://github.com/hipstersmoothie)) +- `babel-plugin-named-asset-import` + - [#5575](https://github.com/facebook/create-react-app/pull/5575) add tests for named-asset-imports plugin. ([@NShahri](https://github.com/NShahri)) +- `react-scripts` + - [#5651](https://github.com/facebook/create-react-app/pull/5651) Make serviceWorker config argument optional in typescript. ([@eddedd88](https://github.com/eddedd88)) + +#### Committers: 8 + +- Andrew Lisowski ([hipstersmoothie](https://github.com/hipstersmoothie)) +- Eduardo Duran ([eddedd88](https://github.com/eddedd88)) +- Ian Sutherland ([iansu](https://github.com/iansu)) +- Jake Boone ([jakeboone02](https://github.com/jakeboone02)) +- Joe Haddad ([Timer](https://github.com/Timer)) +- Nima Shahri ([NShahri](https://github.com/NShahri)) +- Vincent ([Vinnl](https://github.com/Vinnl)) +- ZHAO Jinxiang ([xiaoxiangmoe](https://github.com/xiaoxiangmoe)) + +### Migrating from 2.1.0 to 2.1.1 + +Inside any created project that has not been ejected, run: + +```sh +npm install --save --save-exact react-scripts@2.1.1 +``` + +or + +```sh +yarn add --exact react-scripts@2.1.1 +``` + ## 2.1.0 (October 29, 2018) Create React App 2.1 adds support for TypeScript! Read [the documentation](https://facebook.github.io/create-react-app/docs/adding-typescript) to get started. New applications can be created using TypeScript by running: -```bash +```sh $ npx create-react-app my-app --typescript ``` @@ -91,13 +468,13 @@ $ npx create-react-app my-app --typescript Inside any created project that has not been ejected, run: -```bash +```sh npm install --save --save-exact react-scripts@2.1.0 ``` or -``` +```sh yarn add --exact react-scripts@2.1.0 ``` @@ -190,13 +567,13 @@ yarn add --exact react-scripts@2.1.0 Inside any created project that has not been ejected, run: -```bash +```sh npm install --save --save-exact react-scripts@2.0.5 ``` or -``` +```sh yarn add --exact react-scripts@2.0.5 ``` @@ -256,13 +633,13 @@ yarn add --exact react-scripts@2.0.5 Inside any created project that has not been ejected, run: -```bash +```sh npm install --save --save-exact react-scripts@2.0.4 ``` or -``` +```sh yarn add --exact react-scripts@2.0.4 ``` @@ -279,13 +656,13 @@ It provides a high-level overview of new features and improvements. Now let's se Inside any created project that has not been ejected, run: -```bash +```sh npm install --save --save-exact react-scripts@2.0.3 ``` or -``` +```sh yarn add --exact react-scripts@2.0.3 ``` @@ -305,13 +682,13 @@ We have dropped default support for Internet Explorer 9, 10, and 11. If you stil First, install `react-app-polyfill`: -```bash +```sh npm install react-app-polyfill ``` or -``` +```sh yarn add react-app-polyfill ``` @@ -397,13 +774,13 @@ If your `proxy` is an object, that means you are using the advanced proxy config First, install `http-proxy-middleware` using npm or Yarn: -```bash +```sh npm install http-proxy-middleware ``` or -``` +```sh yarn add http-proxy-middleware ``` diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 531befe574b..8a8f8f85028 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -94,7 +94,7 @@ Once it is done, you can modify any file locally and run `yarn start`, `yarn tes If you want to try out the end-to-end flow with the global CLI, you can do this too: -``` +```sh yarn create-react-app my-app cd my-app ``` @@ -107,6 +107,16 @@ and then run `yarn start` or `yarn build`. More detailed information are in the dedicated [README](/packages/react-scripts/fixtures/kitchensink/README.md). +### CI testing with private packages + +**create-react-app** relies on main registry to fetch all dependencies, but, if you are in the need to usage of custom private packages that need to be fetch while running E2E test you might need a different configuration. + +#### Customizing E2E registry configuration + +We use [verdaccio](https://github.com/verdaccio/verdaccio) to emulate packages publishing in a registry using a default configuration. You might modify the current behaviour just editing the file `task/verdaccio.yaml`. + +For more information about the configuration check out the [Verdaccio documentation](https://verdaccio.org/docs/en/configuration). + ## 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: @@ -142,9 +152,7 @@ By default git would use `CRLF` line endings which would cause the scripts to fa 9. 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. 10. After publishing, create a GitHub Release with the same text as the changelog entry. See previous Releases for inspiration. -Make sure to test the released version! If you want to be extra careful, you can publish a prerelease by running `npm run publish -- --npm-tag=next` instead of `npm run publish`. - -Optionally, you can cut a prerelease instead by running `npm run publish -- --canary=next --exact --cd-version patch --npm-tag=next`. +Make sure to test the released version! If you want to be extra careful, you can publish a prerelease by running `npm run publish -- --canary=next --exact --cd-version patch --npm-tag=next` instead of `npm run publish`. --- diff --git a/README.md b/README.md index 473e6ab314b..75aed91b989 100644 --- a/README.md +++ b/README.md @@ -1,9 +1,9 @@ -# Create React App [![Build Status](https://travis-ci.org/facebook/create-react-app.svg?branch=master)](https://travis-ci.org/facebook/create-react-app) +# Create React App [![Build Status](https://travis-ci.org/facebook/create-react-app.svg?branch=master)](https://travis-ci.org/facebook/create-react-app) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-green.svg)](https://github.com/facebook/create-react-app/pulls) Create React apps with no build configuration. - [Creating an App](#creating-an-app) – How to create a new app. -- [User Guide](https://facebook.github.io/create-react-app/docs/folder-structure) – How to develop apps bootstrapped with Create React App. +- [User Guide](https://facebook.github.io/create-react-app/) – How to develop apps bootstrapped with Create React App. Create React App works on macOS, Windows, and Linux.
If something doesn’t work, please [file an issue](https://github.com/facebook/create-react-app/issues/new). @@ -34,7 +34,7 @@ Just create a project, and you’re good to go. ## Creating an App -**You’ll need to have Node 8.9.0 or later 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. +**You’ll need to have Node 8.10.0 or later 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, you may choose one of the following methods: @@ -111,7 +111,7 @@ You will see the build errors and lint warnings in the console. Runs the test watcher in an interactive mode.
By default, runs tests related to files changed since the last commit. -[Read more about testing.](https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#running-tests) +[Read more about testing.](https://facebook.github.io/create-react-app/docs/running-tests) ### `npm run build` or `yarn build` @@ -134,7 +134,7 @@ Please refer to the [User Guide](https://facebook.github.io/create-react-app/doc - **One Dependency:** There is just one build dependency. It uses Webpack, Babel, ESLint, and other amazing projects, but provides a cohesive curated experience on top of them. -- **No Configuration Required:** You don't need to configure anything. Reasonably good configuration of both development and production builds is handled for you so you can focus on writing code. +- **No Configuration Required:** You don't need to configure anything. A reasonably good configuration of both development and production builds is handled for you so you can focus on writing code. - **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. @@ -148,12 +148,12 @@ Your environment will have everything you need to build a modern single-page Rea - 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/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#making-a-progressive-web-app) criteria. (_Note: Using the service worker is opt-in as of `react-scripts@2.0.0` and higher_) +- 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://facebook.github.io/create-react-app/docs/making-a-progressive-web-app) criteria. (_Note: Using the service worker is opt-in as of `react-scripts@2.0.0` and higher_) - Hassle-free updates for the above tools with a single dependency. Check out [this guide](https://github.com/nitishdayal/cra_closer_look) for an overview of how these tools fit together. -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/facebook/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. +The tradeoff is that **these tools are preconfigured to work in a specific way**. If your project needs more customization, you can ["eject"](https://facebook.github.io/create-react-app/docs/available-scripts#npm-run-eject) and customize it, but then you will need to maintain this configuration. ## Popular Alternatives @@ -163,11 +163,11 @@ Create React App is a great fit for: - **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: +Here are a few common cases where you might want to try something else: - 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. For Rails specifically, you can use [Rails Webpacker](https://github.com/rails/webpacker). +- If you need to **integrate React code with a server-side template framework** like Rails, Django or Symfony, 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. For Rails specifically, you can use [Rails Webpacker](https://github.com/rails/webpacker). For Symfony, try [Symfony's Webpack Encore](https://symfony.com/doc/current/frontend/encore/reactjs.html). - 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/). @@ -188,7 +188,7 @@ We'd love to have your helping hand on `create-react-app`! See [CONTRIBUTING.md] ## React Native Looking for something similar, but for React Native?
-Check out [Create React Native App](https://github.com/react-community/create-react-native-app/). +Check out [Expo CLI](https://github.com/expo/expo-cli). ## Acknowledgements diff --git a/appveyor.cleanup-cache.txt b/appveyor.cleanup-cache.txt deleted file mode 100644 index d48a91fdf35..00000000000 --- a/appveyor.cleanup-cache.txt +++ /dev/null @@ -1,4 +0,0 @@ -Edit this file to trigger a cache rebuild. -http://help.appveyor.com/discussions/questions/1310-delete-cache - ----- diff --git a/appveyor.yml b/appveyor.yml deleted file mode 100644 index 5f5143167d6..00000000000 --- a/appveyor.yml +++ /dev/null @@ -1,54 +0,0 @@ -image: Visual Studio 2017 - -environment: - APPVEYOR_SAVE_CACHE_ON_ERROR: true - APPVEYOR_BUILD_WORKER_CLOUD: 'GCE' - matrix: - - nodejs_version: 10 - test_suite: 'simple' - - nodejs_version: 10 - test_suite: 'installs' - - nodejs_version: 10 - test_suite: 'kitchensink' - - nodejs_version: 10 - test_suite: 'kitchensink-eject' - - nodejs_version: 8 - test_suite: 'simple' - - nodejs_version: 8 - test_suite: 'installs' - - nodejs_version: 8 - test_suite: 'kitchensink' - - nodejs_version: 8 - test_suite: 'kitchensink-eject' -cache: - - '%APPDATA%\npm-cache -> appveyor.cleanup-cache.txt' - - '%LOCALAPPDATA%\Yarn\Cache -> appveyor.cleanup-cache.txt' - -clone_depth: 50 - -matrix: - fast_finish: true - allow_failures: - - test_suite: 'installs' - -platform: - - x64 - -install: - - ps: Install-Product node $env:nodejs_version $env:platform - - ps: | - (New-Object Net.WebClient).DownloadFile("https://nightly.yarnpkg.com/latest.msi", "$env:temp\yarn.msi") - cmd /c start /wait msiexec.exe /i $env:temp\yarn.msi /quiet /qn /norestart - -build: off - -skip_commits: - files: - - '**/*.md' - -test_script: - - node --version - - npm --version - - yarn --version - - yarn cache dir - - bash tasks/e2e-%test_suite%.sh diff --git a/docusaurus/docs/adding-a-css-modules-stylesheet.md b/docusaurus/docs/adding-a-css-modules-stylesheet.md index 72b58bfe99e..be169182848 100644 --- a/docusaurus/docs/adding-a-css-modules-stylesheet.md +++ b/docusaurus/docs/adding-a-css-modules-stylesheet.md @@ -49,7 +49,7 @@ No clashes from other `.error` class names ```html - ``` **This is an optional feature.** Regular `` stylesheets and CSS files are fully supported. CSS Modules are turned on for files ending with the `.module.css` extension. diff --git a/docusaurus/docs/adding-bootstrap.md b/docusaurus/docs/adding-bootstrap.md index dc97b6cab94..dc103f81a99 100644 --- a/docusaurus/docs/adding-bootstrap.md +++ b/docusaurus/docs/adding-bootstrap.md @@ -3,18 +3,18 @@ id: adding-bootstrap title: Adding Bootstrap --- -You don’t have to use [reactstrap](https://reactstrap.github.io/) together with React but it is a popular library for integrating Bootstrap with React apps. If you need it, you can integrate it with Create React App by following these steps: +While you don’t have to use any specific library to integrate Bootstrap with React apps, it's often easier than trying to wrap the Bootstrap jQuery plugins. [React Bootstrap](https://react-bootstrap.netlify.com/) is the most popular option, that strives for complete parity with bootstrap. [reactstrap](https://reactstrap.github.io/) is also a good choice for projects looking for smaller builds at the expense of some features. -Install reactstrap and Bootstrap from npm. reactstrap does not include Bootstrap CSS so this needs to be installed as well: +Each project's respective documentation site has detailed instructions for installing and using them. Both depend on the Bootstrap css file so install that as well: ```sh -npm install --save reactstrap bootstrap@4 +npm install --save bootstrap ``` Alternatively you may use `yarn`: ```sh -yarn add bootstrap@4 reactstrap +yarn add bootstrap ``` Import Bootstrap CSS and optionally Bootstrap theme CSS in the beginning of your `src/index.js` file: @@ -25,14 +25,6 @@ import 'bootstrap/dist/css/bootstrap.css'; // components takes precedence over default styles. ``` -Import required reactstrap components within `src/App.js` file or your custom component files: - -```js -import { Button } from 'reactstrap'; -``` - -Now you are ready to use the imported reactstrap components within your component hierarchy defined in the render method. Here is an example [`App.js`](https://gist.githubusercontent.com/zx6658/d9f128cd57ca69e583ea2b5fea074238/raw/a56701c142d0c622eb6c20a457fbc01d708cb485/App.js) redone using reactstrap. - ## Using a Custom Theme > Note: this feature is available with `react-scripts@2.0.0` and higher. @@ -40,7 +32,7 @@ Now you are ready to use the imported reactstrap components within your componen Sometimes you might need to tweak the visual styles of Bootstrap (or equivalent package).
As of `react-scripts@2.0.0` you can import `.scss` files. This makes it possible to use a package's built-in Sass variables for global style preferences. -To customize Bootstrap, create a file called `src/custom.scss` (or similar) and import the Bootstrap source stylesheet. Add any overrides _before_ the imported file(s). You can reference [Bootstrap's documentation](http://getbootstrap.com/docs/4.1/getting-started/theming/#css-variables) for the names of the available variables. +To customize Bootstrap, create a file called `src/custom.scss` (or similar) and import the Bootstrap source stylesheet. Add any overrides _before_ the imported file(s). You can reference [Bootstrap's documentation](https://getbootstrap.com/docs/4.1/getting-started/theming/#css-variables) for the names of the available variables. ```scss // Override default variables before the import diff --git a/docusaurus/docs/adding-custom-environment-variables.md b/docusaurus/docs/adding-custom-environment-variables.md index 15d5527106b..b4df594ca7f 100644 --- a/docusaurus/docs/adding-custom-environment-variables.md +++ b/docusaurus/docs/adding-custom-environment-variables.md @@ -6,24 +6,23 @@ sidebar_label: Environment Variables > Note: this feature is available with `react-scripts@0.2.3` and higher. -Your project can consume variables declared in your environment as if they were declared locally in your JS files. By -default you will have `NODE_ENV` defined for you, and any other environment variables starting with -`REACT_APP_`. +Your project can consume variables declared in your environment as if they were declared locally in your JS files. By default you will have `NODE_ENV` defined for you, and any other environment variables starting with `REACT_APP_`. + +> WARNING: Do not store any secrets (such as private API keys) in your React app! +> +> Environment variables are embedded into the build, meaning anyone can view them by inspecting your app's files. **The environment variables are embedded during the build time**. Since Create React App produces a static HTML/CSS/JS bundle, it can’t possibly read them at runtime. To read them at runtime, you would need to load HTML into memory on the server and replace placeholders in runtime, just like [described here](title-and-meta-tags.md#injecting-data-from-the-server-into-the-page). Alternatively you can rebuild the app on the server anytime you change them. > 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/facebook/create-react-app/issues/865#issuecomment-252199527). Changing any environment variables will require you to restart the development server if it is running. -These environment variables will be defined for you on `process.env`. For example, having an environment -variable named `REACT_APP_SECRET_CODE` will be exposed in your JS as `process.env.REACT_APP_SECRET_CODE`. +These environment variables will be defined for you on `process.env`. For example, having an environment variable named `REACT_APP_NOT_SECRET_CODE` will be exposed in your JS as `process.env.REACT_APP_NOT_SECRET_CODE`. There is also a special built-in environment variable called `NODE_ENV`. You can read it from `process.env.NODE_ENV`. When you run `npm start`, it is always equal to `'development'`, when you run `npm test` it is always equal to `'test'`, and when you run `npm run build` to make a production bundle, it is always equal to `'production'`. **You cannot override `NODE_ENV` manually.** This prevents developers from accidentally deploying a slow development build to production. -These environment variables can be useful for displaying information conditionally based on where the project is -deployed or consuming sensitive data that lives outside of version control. +These environment variables can be useful for displaying information conditionally based on where the project is deployed or consuming sensitive data that lives outside of version control. -First, you need to have environment variables defined. For example, let’s say you wanted to consume a secret defined -in the environment inside a `
`: +First, you need to have environment variables defined. For example, let’s say you wanted to consume an environment variable inside a ``: ```jsx render() { @@ -31,29 +30,25 @@ render() {
You are running this application in {process.env.NODE_ENV} mode. - +
); } ``` -During the build, `process.env.REACT_APP_SECRET_CODE` will be replaced with the current value of the `REACT_APP_SECRET_CODE` environment variable. Remember that the `NODE_ENV` variable will be set for you automatically. +During the build, `process.env.REACT_APP_NOT_SECRET_CODE` will be replaced with the current value of the `REACT_APP_NOT_SECRET_CODE` environment variable. Remember that the `NODE_ENV` variable will be set for you automatically. When you load the app in the browser and inspect the ``, you will see its value set to `abcdef`, and the bold text will show the environment provided when using `npm start`: ```html
You are running this application in development mode. -
- -
+
``` -The above form is looking for a variable called `REACT_APP_SECRET_CODE` from the environment. In order to consume this -value, we need to have it defined in the environment. This can be done using two ways: either in your shell or in -a `.env` file. Both of these ways are described in the next few sections. +The above form is looking for a variable called `REACT_APP_NOT_SECRET_CODE` from the environment. In order to consume this value, we need to have it defined in the environment. This can be done using two ways: either in your shell or in a `.env` file. Both of these ways are described in the next few sections. Having access to the `NODE_ENV` is also useful for performing actions conditionally: @@ -82,13 +77,12 @@ Note that the caveats from the above section apply: ## Adding Temporary Environment Variables In Your Shell -Defining environment variables can vary between OSes. It’s also important to know that this manner is temporary for the -life of the shell session. +Defining environment variables can vary between OSes. It’s also important to know that this manner is temporary for the life of the shell session. ### Windows (cmd.exe) ```cmd -set "REACT_APP_SECRET_CODE=abcdef" && npm start +set "REACT_APP_NOT_SECRET_CODE=abcdef" && npm start ``` (Note: Quotes around the variable assignment are required to avoid a trailing whitespace.) @@ -96,13 +90,13 @@ set "REACT_APP_SECRET_CODE=abcdef" && npm start ### Windows (Powershell) ```Powershell -($env:REACT_APP_SECRET_CODE = "abcdef") -and (npm start) +($env:REACT_APP_NOT_SECRET_CODE = "abcdef") -and (npm start) ``` ### Linux, macOS (Bash) -```bash -REACT_APP_SECRET_CODE=abcdef npm start +```sh +REACT_APP_NOT_SECRET_CODE=abcdef npm start ``` ## Adding Development Environment Variables In `.env` @@ -112,7 +106,7 @@ REACT_APP_SECRET_CODE=abcdef npm start To define permanent environment variables, create a file called `.env` in the root of your project: ``` -REACT_APP_SECRET_CODE=abcdef +REACT_APP_NOT_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/facebook/create-react-app/issues/865#issuecomment-252199527). Changing any environment variables will require you to restart the development server if it is running. diff --git a/docusaurus/docs/adding-typescript.md b/docusaurus/docs/adding-typescript.md index efe0d0c0d9e..70bc4d20820 100644 --- a/docusaurus/docs/adding-typescript.md +++ b/docusaurus/docs/adding-typescript.md @@ -7,12 +7,24 @@ title: Adding TypeScript [TypeScript](https://www.typescriptlang.org/) is a typed superset of JavaScript that compiles to plain JavaScript. +To start a new Create React App project with [TypeScript](https://www.typescriptlang.org/), you can run: + +```sh +npx create-react-app my-app --typescript + +# or + +yarn create react-app my-app --typescript +``` + To add [TypeScript](https://www.typescriptlang.org/) to a Create React App project, first install it: -```bash -$ npm install --save typescript @types/node @types/react @types/react-dom @types/jest -$ # or -$ yarn add typescript @types/node @types/react @types/react-dom @types/jest +```sh +npm install --save typescript @types/node @types/react @types/react-dom @types/jest + +# or + +yarn add typescript @types/node @types/react @types/react-dom @types/jest ``` Next, rename any file to be a TypeScript file (e.g. `src/index.js` to `src/index.tsx`) and **restart your development server**! @@ -24,6 +36,8 @@ To learn more about TypeScript, check out [its documentation](https://www.typesc > **Note:** You are not required to make a [`tsconfig.json` file](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html), one will be made for you. > You are allowed to edit the generated TypeScript configuration. +> **Note:** If you are currently using [create-react-app-typescript](https://github.com/wmonk/create-react-app-typescript/), see [this blog post](https://vincenttunru.com/migrate-create-react-app-typescript-to-create-react-app/) for instructions on how to migrate to Create React App. + > **Note:** We recommend using [VSCode](https://code.visualstudio.com/) for a better integrated experience. > **Note:** Constant enums and namespaces are not supported. diff --git a/docusaurus/docs/alternatives-to-ejecting.md b/docusaurus/docs/alternatives-to-ejecting.md index 6686ed93408..7a37673eb0c 100644 --- a/docusaurus/docs/alternatives-to-ejecting.md +++ b/docusaurus/docs/alternatives-to-ejecting.md @@ -3,4 +3,4 @@ id: alternatives-to-ejecting title: Alternatives to Ejecting --- -[Ejecting](available-scripts.md#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/facebook/create-react-app/issues/682.md). +[Ejecting](available-scripts.md#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/facebook/create-react-app/issues/682). diff --git a/docusaurus/docs/analyzing-the-bundle-size.md b/docusaurus/docs/analyzing-the-bundle-size.md index ce175e085d6..36f753c4df2 100644 --- a/docusaurus/docs/analyzing-the-bundle-size.md +++ b/docusaurus/docs/analyzing-the-bundle-size.md @@ -24,7 +24,7 @@ Then in `package.json`, add the following line to `scripts`: ```diff "scripts": { -+ "analyze": "source-map-explorer build/static/js/main.*", ++ "analyze": "source-map-explorer 'build/static/js/*.js'", "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", @@ -33,7 +33,7 @@ Then in `package.json`, add the following line to `scripts`: Then to analyze the bundle run the production build then run the analyze script. -``` +```sh npm run build npm run analyze ``` diff --git a/docusaurus/docs/available-scripts.md b/docusaurus/docs/available-scripts.md index a6a32751926..f7adadb0853 100644 --- a/docusaurus/docs/available-scripts.md +++ b/docusaurus/docs/available-scripts.md @@ -20,9 +20,9 @@ Launches the test runner in the interactive watch mode. See the section about [r Builds the app for production to the `build` folder. It correctly bundles React in production mode and optimizes the build for the best performance. -The build is minified and the filenames include the hashes. Your app is ready to be deployed! +The build is minified and the filenames include the hashes. See the [production build](production-build.md) section for more information. -See the section about [deployment](deployment.md) for more information. +Your app is ready to be deployed! See the section about [deployment](deployment.md) for more information about deploying your application to popular hosting providers. ## `npm run eject` diff --git a/docusaurus/docs/code-splitting.md b/docusaurus/docs/code-splitting.md index b288785b574..ace13fdfcce 100644 --- a/docusaurus/docs/code-splitting.md +++ b/docusaurus/docs/code-splitting.md @@ -45,12 +45,12 @@ class App extends Component { export default App; ``` -This will make `moduleA.js` and all its unique dependencies as a separate chunk that only loads after the user clicks the 'Load' button. +This will make `moduleA.js` and all its unique dependencies as a separate chunk that only loads after the user clicks the 'Load' button. For more information on the chunks that are created, see the [production build](production-build.md) section. You can also use it with `async` / `await` syntax if you prefer it. ## With React Router -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). +If you are using React Router check out [this tutorial](https://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. diff --git a/docusaurus/docs/developing-components-in-isolation.md b/docusaurus/docs/developing-components-in-isolation.md index 98368d31636..9286348d77e 100644 --- a/docusaurus/docs/developing-components-in-isolation.md +++ b/docusaurus/docs/developing-components-in-isolation.md @@ -14,7 +14,7 @@ Usually, it’s hard to see these states without running a sample app or some ex Create React App doesn’t include any tools for this by default, but you can easily add [Storybook for React](https://storybook.js.org) ([source](https://github.com/storybooks/storybook)) or [React Styleguidist](https://react-styleguidist.js.org/) ([source](https://github.com/styleguidist/react-styleguidist)) to your project. **These are third-party tools that let you develop components and see all their states in isolation from your app**. -![Storybook for React Demo](http://i.imgur.com/7CIAWpB.gif) +![Storybook for React Demo](https://i.imgur.com/7CIAWpB.gif) You can also deploy your Storybook or style guide as a static app. This way, everyone in your team can view and review different states of UI components without starting a backend server or creating an account in your app. @@ -22,16 +22,10 @@ You can also deploy your Storybook or style guide as a static app. This way, eve Storybook is a development environment for React UI components. It allows you to browse a component library, view the different states of each component, and interactively develop and test components. -First, install the following npm package globally: +Run the following command inside your app’s directory: ```sh -npm install -g @storybook/cli -``` - -Then, run the following command inside your app’s directory: - -```sh -getstorybook +npx -p @storybook/cli sb init ``` After that, follow the instructions on the screen. diff --git a/docusaurus/docs/getting-started.md b/docusaurus/docs/getting-started.md index 8704404a20c..6945b4e6f08 100644 --- a/docusaurus/docs/getting-started.md +++ b/docusaurus/docs/getting-started.md @@ -14,9 +14,11 @@ cd my-app npm start ``` +> If you've previously installed `create-react-app` globally via `npm install -g create-react-app`, we recommend you uninstall the package using `npm uninstall -g create-react-app` to ensure that `npx` always uses the latest version. + _([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. +Then open [http://localhost:3000/](http://localhost:3000/) to see your app. When you’re ready to deploy to production, create a minified bundle with `npm run build`. @@ -108,7 +110,7 @@ The page will automatically reload if you make changes to the code. You will see Runs the test watcher in an interactive mode. By default, runs tests related to files changed since the last commit. -[Read more about testing](https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#running-tests). +[Read more about testing](https://facebook.github.io/create-react-app/docs/running-tests). ### `npm run build` or `yarn build` diff --git a/docusaurus/docs/importing-a-component.md b/docusaurus/docs/importing-a-component.md index 52767005c08..82ca5487a9c 100644 --- a/docusaurus/docs/importing-a-component.md +++ b/docusaurus/docs/importing-a-component.md @@ -37,7 +37,7 @@ class DangerButton extends Component { export default DangerButton; ``` -Be aware of the [difference between default and named exports](http://stackoverflow.com/questions/36795819/react-native-es-6-when-should-i-use-curly-braces-for-import/36796281#36796281). It is a common source of mistakes. +Be aware of the [difference between default and named exports](https://stackoverflow.com/questions/36795819/react-native-es-6-when-should-i-use-curly-braces-for-import/36796281#36796281). It is a common source of mistakes. We suggest that you stick to using default imports and exports when a module only exports a single thing (for example, a component). That’s what you get when you use `export default Button` and `import Button from './Button'`. @@ -45,6 +45,6 @@ Named exports are useful for utility modules that export several functions. A mo Learn more about ES6 modules: -- [When to use the curly braces?](http://stackoverflow.com/questions/36795819/react-native-es-6-when-should-i-use-curly-braces-for-import/36796281#36796281) +- [When to use the curly braces?](https://stackoverflow.com/questions/36795819/react-native-es-6-when-should-i-use-curly-braces-for-import/36796281#36796281) - [Exploring ES6: Modules](http://exploringjs.com/es6/ch_modules.html) - [Understanding ES6: Modules](https://leanpub.com/understandinges6/read#leanpub-auto-encapsulating-code-with-modules) diff --git a/docusaurus/docs/making-a-progressive-web-app.md b/docusaurus/docs/making-a-progressive-web-app.md index 2dd73e39f86..0eb7d404edf 100644 --- a/docusaurus/docs/making-a-progressive-web-app.md +++ b/docusaurus/docs/making-a-progressive-web-app.md @@ -15,7 +15,7 @@ following in their [`src/index.js`](https://github.com/facebook/create-react-app ```js // If you want your app to work offline and load faster, you can change // unregister() to register() below. Note this comes with some pitfalls. -// Learn more about service workers: http://bit.ly/CRA-PWA +// Learn more about service workers: https://bit.ly/CRA-PWA serviceWorker.unregister(); ``` @@ -61,7 +61,7 @@ following into account: app works offline!" message) and also let them know when the service worker has fetched the latest updates that will be available the next time they load the page (showing a "New content is available once existing tabs are closed." message). Showing - this messages is currently left as an exercise to the developer, but as a + these messages is currently left as an exercise to the developer, but as a starting point, you can make use of the logic included in [`src/serviceWorker.js`](https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/src/serviceWorker.js), which demonstrates which service worker lifecycle events to listen for to detect each scenario, and which as a default, just logs appropriate messages to the @@ -69,7 +69,7 @@ following into account: 1. Service workers [require HTTPS](https://developers.google.com/web/fundamentals/getting-started/primers/service-workers#you_need_https), although to facilitate local testing, that policy - [does not apply to `localhost`](http://stackoverflow.com/questions/34160509/options-for-testing-service-workers-via-http/34161385#34161385). + [does not apply to `localhost`](https://stackoverflow.com/questions/34160509/options-for-testing-service-workers-via-http/34161385#34161385). If your production web server does not support HTTPS, then the service worker registration will fail, but the rest of your web app will remain functional. @@ -93,11 +93,11 @@ following into account: ## Progressive Web App Metadata The default configuration includes a web app manifest located at -[`public/manifest.json`](public/manifest.json), that you can customize with +[`public/manifest.json`](https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/public/manifest.json), that you can customize with details specific to your web application. When a user adds a web app to their homescreen using Chrome or Firefox on -Android, the metadata in [`manifest.json`](public/manifest.json) determines what +Android, the metadata in [`manifest.json`](https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/public/manifest.json) determines what icons, names, and branding colors to use when the web app is displayed. [The Web App Manifest guide](https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/) provides more context about what each field means, and how your customizations diff --git a/docusaurus/docs/post-processing-css.md b/docusaurus/docs/post-processing-css.md index 3fb4556a836..b7589d2719f 100644 --- a/docusaurus/docs/post-processing-css.md +++ b/docusaurus/docs/post-processing-css.md @@ -40,4 +40,4 @@ If you need to disable autoprefixing for some reason, [follow this section](http [CSS Grid Layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout) prefixing is disabled by default, but it will **not** strip manual prefixing. If you'd like to opt-in to CSS Grid prefixing, [first familiarize yourself about its limitations](https://github.com/postcss/autoprefixer#does-autoprefixer-polyfill-grid-layout-for-ie).
-To enable CSS Grid prefixing, add `/* autoprefixer grid: on */` to the top of your CSS file. +To enable CSS Grid prefixing, add `/* autoprefixer grid: autoplace */` to the top of your CSS file. diff --git a/docusaurus/docs/production-build.md b/docusaurus/docs/production-build.md new file mode 100644 index 00000000000..f57e5a9b959 --- /dev/null +++ b/docusaurus/docs/production-build.md @@ -0,0 +1,30 @@ +--- +id: production-build +title: Creating a Production Build +--- + +`npm run build` creates a `build` directory with a production build of your app. Inside the `build/static` directory will be your JavaScript and CSS files. Each filename inside of `build/static` will contain a unique hash of the file contents. This hash in the file name enables [long term caching techniques](#static-file-caching). + +When running a production build of freshly created Create React App application, there are 3 `.js` files (called _chunks_) that are generated and placed in the `build/static/js` directory: + +`main.[hash].chunk.js` + +- This is your _application_ code. `App.js`, etc. + +`1.[hash].chunk.js` + +- This is your _vendor_ code, which includes modules you've imported from within `node_modules`. One of the potential advantages with splitting your _vendor_ and _application_ code is to enable [long term caching techniques](#static-file-caching) to improve application loading performance. Since _vendor_ code tends to change less often than the actual _application_ code, the browser will be able to cache them separately, and won't re-download them each time the app code changes. + +`runtime~main.[hash].js` + +- This is a small chunk of [webpack runtime](https://webpack.js.org/configuration/optimization/#optimization-runtimechunk) logic which is used to load and run your application. The contents of this will be embedded in your `build/index.html` file by default to save an additional network request. You can opt out of this by specifying `INLINE_RUNTIME_CHUNK=false` as documented in our [advanced configuration](advanced-configuration.md), which will load this chunk instead of embedding it in your `index.html`. + +If you're using [code splitting](code-splitting.md) to split up your application, this will create additional chunks in the `build/static` folder as well. + +## Static File Caching + +Each file inside of the `build/static` directory will have a unique hash appended to the filename that is generated based on the contents of the file, which allows you to use [aggressive caching techniques](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching#invalidating_and_updating_cached_responses) to avoid the browser re-downloading your assets if the file contents haven't changed. If the contents of a file changes in a subsequent build, the filename hash that is generated will be different. + +To deliver the best performance to your users, it's best practice to specify a `Cache-Control` header for `index.html`, as well as the files within `build/static`. This header allows you to control the length of time that the browser as well as CDNs will cache your static assets. If you aren't familiar with what `Cache-Control` does, see [this article](https://jakearchibald.com/2016/caching-best-practices/) for a great introduction. + +Using `Cache-Control: max-age=31536000` for your `build/static` assets, and `Cache-Control: no-cache` for everything else is a safe and effective starting point that ensures your user's browser will always check for an updated `index.html` file, and will cache all of the `build/static` files for one year. Note that you can use the one year expiration on `build/static` safely because the file contents hash is embedded into the filename. diff --git a/docusaurus/docs/proxying-api-requests-in-development.md b/docusaurus/docs/proxying-api-requests-in-development.md index 3d27f7d96e6..a113f4d4211 100644 --- a/docusaurus/docs/proxying-api-requests-in-development.md +++ b/docusaurus/docs/proxying-api-requests-in-development.md @@ -9,23 +9,21 @@ sidebar_label: Proxying in Development People often serve the front-end React app from the same host and port as their backend implementation.
For example, a production setup might look like this after the app is deployed: -``` -/ - static server returns index.html with React app -/todos - static server returns index.html with React app -/api/todos - server handles any /api/* requests using the backend implementation -``` + / - static server returns index.html with React app + /todos - static server returns index.html with React app + /api/todos - server handles any /api/* requests using the backend implementation Such setup is **not** required. However, if you **do** have a setup like this, it is convenient to write requests like `fetch('/api/todos')` without worrying about redirecting them to another host or port during development. To tell the development server to proxy any unknown requests to your API server in development, add a `proxy` field to your `package.json`, for example: -```js +```json "proxy": "http://localhost:4000", ``` This way, when you `fetch('/api/todos')` in development, the development server will recognize that it’s not a static asset, and will proxy your request to `http://localhost:4000/api/todos` as a fallback. The development server will **only** attempt to send requests without `text/html` in its `Accept` header to the proxy. -Conveniently, this avoids [CORS issues](http://stackoverflow.com/questions/21854516/understanding-ajax-cors-and-security-considerations) and error messages like this in development: +Conveniently, this avoids [CORS issues](https://stackoverflow.com/questions/21854516/understanding-ajax-cors-and-security-considerations) and error messages like this in development: ``` Fetch API cannot load http://localhost:4000/api/todos. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled. @@ -37,7 +35,7 @@ The `proxy` option supports HTTP, HTTPS and WebSocket connections.
If the `proxy` option is **not** flexible enough for you, alternatively you can: - [Configure the proxy yourself](#configuring-the-proxy-manually) -- Enable CORS on your server ([here’s how to do it for Express](http://enable-cors.org/server_expressjs.html)). +- Enable CORS on your server ([here’s how to do it for Express](https://enable-cors.org/server_expressjs.html)). - Use [environment variables](adding-custom-environment-variables.md) to inject the right server host and port into your app. ## "Invalid Host Header" Errors After Configuring Proxy @@ -76,7 +74,7 @@ You can use this feature in conjunction with the `proxy` property in `package.js First, install `http-proxy-middleware` using npm or Yarn: -```bash +```sh $ npm install http-proxy-middleware --save $ # or $ yarn add http-proxy-middleware diff --git a/docusaurus/docs/running-tests.md b/docusaurus/docs/running-tests.md index ea1b32579f0..5f93a391771 100644 --- a/docusaurus/docs/running-tests.md +++ b/docusaurus/docs/running-tests.md @@ -5,9 +5,9 @@ title: Running Tests > Note: this feature is available with `react-scripts@0.3.0` and higher.
-> [Read the migration guide to learn how to enable it in older projects!](https://github.com/facebook/create-react-app/blob/master/CHANGELOG.md#migrating-from-023-to-030) +> [Read the migration guide to learn how to enable it in older projects!](https://github.com/facebook/create-react-app/blob/master/CHANGELOG-0.x.md#migrating-from-023-to-030) -Create React App uses [Jest](https://facebook.github.io/jest/) as its test runner. To prepare for this integration, we did a [major revamp](https://facebook.github.io/jest/blog/2016/09/01/jest-15.html) of Jest so if you heard bad things about it years ago, give it another try. +Create React App uses [Jest](https://jestjs.io/) as its test runner. To prepare for this integration, we did a [major revamp](https://jestjs.io/blog/2016/09/01/jest-15.html) of Jest so if you heard bad things about it years ago, give it another try. Jest is a Node-based runner. This means that the tests always run in a Node environment and not in a real browser. This lets us enable fast iteration speed and prevent flakiness. @@ -25,15 +25,17 @@ Jest will look for test files with any of the following popular naming conventio The `.test.js` / `.spec.js` files (or the `__tests__` folders) can be located at any depth under the `src` top level folder. -We recommend to put the test files (or `__tests__` folders) next to the code they are testing so that relative imports appear shorter. For example, if `App.test.js` and `App.js` are in the same folder, the test just needs to `import App from './App'` instead of a long relative path. Colocation also helps find tests more quickly in larger projects. +We recommend to put the test files (or `__tests__` folders) next to the code they are testing so that relative imports appear shorter. For example, if `App.test.js` and `App.js` are in the same folder, the test just needs to `import App from './App'` instead of a long relative path. Collocation also helps find tests more quickly in larger projects. ## Command Line Interface -When you run `npm test`, Jest will launch in the watch mode. Every time you save a file, it will re-run the tests, just like `npm start` recompiles the code. +When you run `npm test`, Jest will launch in watch mode\*. Every time you save a file, it will re-run the tests, just like `npm start` recompiles the code. The watcher includes an interactive command-line interface with the ability to run all tests, or focus on a search pattern. It is designed this way so that you can keep it open and enjoy fast re-runs. You can learn the commands from the “Watch Usage” note that the watcher prints after every run: -![Jest watch mode](http://facebook.github.io/jest/img/blog/15-watch.gif) +![Jest watch mode](https://jestjs.io/img/blog/15-watch.gif) + +> \*Although we recommend running your tests in watch mode during development, you can disable this behavior by passing in the `--no-watch` flag. In most CI environments, this is handled for you (see [On CI servers](#on-ci-servers)). ## Version Control Integration @@ -58,8 +60,8 @@ it('sums numbers', () => { }); ``` -All `expect()` matchers supported by Jest are [extensively documented here](https://facebook.github.io/jest/docs/en/expect.html#content).
-You can also use [`jest.fn()` and `expect(fn).toBeCalled()`](https://facebook.github.io/jest/docs/en/expect.html#tohavebeencalled) to create “spies” or mock functions. +All `expect()` matchers supported by Jest are [extensively documented here](https://jestjs.io/docs/en/expect.html#content).
+You can also use [`jest.fn()` and `expect(fn).toBeCalled()`](https://jestjs.io/docs/en/expect.html#tohavebeencalled) to create “spies” or mock functions. ## Testing Components @@ -84,7 +86,7 @@ When you encounter bugs caused by changing components, you will gain a deeper in ### Option 1: Shallow Rendering -If you’d like to test components in isolation from the child components they render, we recommend using [`shallow()` rendering API](http://airbnb.io/enzyme/docs/api/shallow.html) from [Enzyme](http://airbnb.io/enzyme/). To install it, run: +If you’d like to test components in isolation from the child components they render, we recommend using [`shallow()` rendering API](https://airbnb.io/enzyme/docs/api/shallow.html) from [Enzyme](https://airbnb.io/enzyme/). To install it, run: ```sh npm install --save enzyme enzyme-adapter-react-16 react-test-renderer @@ -125,9 +127,9 @@ it('renders without crashing', () => { }); ``` -Unlike the previous smoke test using `ReactDOM.render()`, this test only renders `` and doesn’t go deeper. For example, even if `` itself renders a `