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/stale.yml b/.github/stale.yml index e9387e49029..a87891011fd 100644 --- a/.github/stale.yml +++ b/.github/stale.yml @@ -9,8 +9,15 @@ daysUntilClose: 5 # Issues or Pull Requests with these labels will never be considered stale. Set to `[]` to disable exemptLabels: - - "issue: proposal" + - "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 diff --git a/.travis.yml b/.travis.yml index fd0ba53313b..dda58096f90 100644 --- a/.travis.yml +++ b/.travis.yml @@ -4,7 +4,6 @@ language: node_js node_js: - 8 - 10 - - node cache: yarn: true directories: diff --git a/CHANGELOG-0.x.md b/CHANGELOG-0.x.md index 10893488cd5..2cb14cb3e2e 100644 --- a/CHANGELOG-0.x.md +++ b/CHANGELOG-0.x.md @@ -44,7 +44,7 @@ Inside any created project that has not been ejected, run: -``` +```sh npm install --save-dev --save-exact react-scripts@0.9.5 ``` @@ -130,13 +130,13 @@ npm install --save-dev --save-exact react-scripts@0.9.5 Inside any created project that has not been ejected, run: -``` +```sh npm install --save-dev --save-exact react-scripts@0.9.4 ``` You may also optionally update the global command-line utility for scoped package support: -``` +```sh npm install -g create-react-app@1.3.0 ``` @@ -187,13 +187,13 @@ npm install -g create-react-app@1.3.0 Inside any created project that has not been ejected, run: -``` +```sh npm install --save-dev --save-exact react-scripts@0.9.3 ``` You may also optionally update the global command-line utility for offline Yarn cache support: -``` +```sh npm install -g create-react-app@1.2.1 ``` @@ -322,13 +322,13 @@ npm install -g create-react-app@1.2.1 Inside any created project that has not been ejected, run: -``` +```sh npm install --save-dev --save-exact react-scripts@0.9.2 ``` You may also optionally update the global command-line utility for more efficient installs (thanks [@n3tr](https://github.com/n3tr)): -``` +```sh npm install -g create-react-app@1.1.0 ``` @@ -494,7 +494,7 @@ Thanks to [@Timer](https://github.com/timer) for cutting this release. Inside any created project that has not been ejected, run: -``` +```sh npm install --save-dev --save-exact react-scripts@0.9.0 ``` @@ -519,13 +519,13 @@ Thanks to [@fson](https://github.com/fson) for cutting this release. Inside any created project that has not been ejected, run: -``` +```sh npm install --save-dev --save-exact react-scripts@0.8.5 ``` You may also optionally update the global command-line utility: -``` +```sh npm install -g create-react-app@1.0.3 ``` @@ -621,13 +621,13 @@ npm install -g create-react-app@1.0.3 Inside any created project that has not been ejected, run: -``` +```sh npm install --save-dev --save-exact react-scripts@0.8.4 ``` You may also optionally update the global command-line utility: -``` +```sh npm install -g create-react-app@1.0.2 ``` @@ -662,13 +662,13 @@ npm install -g create-react-app@1.0.2 Inside any created project that has not been ejected, run: -``` +```sh npm install --save-dev --save-exact react-scripts@0.8.3 ``` You can optionally update the global CLI too: -``` +```sh npm install -g create-react-app@1.0.1 ``` @@ -751,7 +751,7 @@ npm install -g create-react-app@1.0.1 Inside any created project that has not been ejected, run: -``` +```sh npm install --save-dev --save-exact react-scripts@0.8.2 ``` @@ -767,7 +767,7 @@ Thanks to [@fson](https://github.com/fson) for cutting this release. Inside any created project that has not been ejected, run: -``` +```sh npm install --save-dev --save-exact react-scripts@0.8.1 ``` @@ -917,13 +917,13 @@ Thanks to [@fson](https://github.com/fson) for cutting this release. You may optionally update the global command (it’s not required, but it adds Yarn support for new projects): -``` +```sh npm install -g create-react-app@1.0.0 ``` Inside any created project that has not been ejected, run: -``` +```sh npm install --save-dev --save-exact react-scripts@0.8.0 ``` @@ -969,13 +969,13 @@ Thanks to [@fson](https://github.com/fson) for cutting this release. You may optionally update the global command (it’s not required): -``` +```sh npm install -g create-react-app@0.6.0 ``` Inside any created project that has not been ejected, run: -``` +```sh npm install --save-dev --save-exact react-scripts@0.7.0 ``` @@ -984,7 +984,7 @@ npm install --save-dev --save-exact react-scripts@0.7.0 #### Updating Snapshots Jest 16 includes [improvements to snapshot testing and changes to the snapshot format](https://facebook.github.io/jest/blog/2016/10/03/jest-16.html#snapshot-updates). If your project uses snapshot testing, you'll need to update the snapshot files. To update the snapshots, run: -``` +```sh npm test -- -u ``` @@ -1002,7 +1002,7 @@ npm test -- -u Inside any created project that has not been ejected, run: -``` +```sh npm install --save-dev --save-exact react-scripts@0.6.1 ``` @@ -1020,7 +1020,7 @@ npm install --save-dev --save-exact react-scripts@0.6.1 Inside any created project that has not been ejected, run: -``` +```sh npm install --save-dev --save-exact react-scripts@0.6.0 ``` @@ -1040,7 +1040,7 @@ npm install --save-dev --save-exact react-scripts@0.6.0 Inside any created project that has not been ejected, run: -``` +```sh npm install --save-dev --save-exact react-scripts@0.5.1 ``` @@ -1077,7 +1077,7 @@ npm install --save-dev --save-exact react-scripts@0.5.1 Inside any created project that has not been ejected, run: -``` +```sh npm install --save-dev --save-exact react-scripts@0.5.0 ``` @@ -1095,7 +1095,7 @@ You can no longer reference any files from `./src` in `index.html`. Instead, `pu For example, instead of: -```js +```html ``` @@ -1120,7 +1120,7 @@ It contained no changes to the code. Inside any created project that has not been ejected, run: -``` +```sh npm install --save-dev --save-exact react-scripts@0.4.3 ``` @@ -1153,13 +1153,13 @@ npm install --save-dev --save-exact react-scripts@0.4.3 You may optionally update the global command (it’s not required): -``` +```sh npm install -g create-react-app@0.4.2 ``` Inside any created project that has not been ejected, run: -``` +```sh npm install --save-dev --save-exact react-scripts@0.4.2 ``` @@ -1174,7 +1174,7 @@ npm install --save-dev --save-exact react-scripts@0.4.2 Inside any created project that has not been ejected, run: -``` +```sh npm install --save-dev --save-exact react-scripts@0.4.1 ``` @@ -1191,7 +1191,7 @@ npm install --save-dev --save-exact react-scripts@0.4.1 Inside any created project that has not been ejected, run: -``` +```sh npm install --save-dev --save-exact react-scripts@0.4.0 ``` @@ -1215,7 +1215,7 @@ If you referenced some other files from `index.html`, please file an issue to di Inside any created project that has not been ejected, run: -``` +```sh npm install --save-dev --save-exact react-scripts@0.3.1 ``` @@ -1239,13 +1239,13 @@ npm install --save-dev --save-exact react-scripts@0.3.1 You may optionally update the global command (it’s not required): -``` +```sh npm install -g create-react-app@0.3.0 ``` Inside any created project that has not been ejected, run: -``` +```sh npm install --save-dev --save-exact react-scripts@0.3.0 ``` @@ -1357,13 +1357,13 @@ Newly created projects will use `0.2.1` automatically. You **don’t** need to u You may optionally update the global command (it’s not required): -``` +```sh npm install -g create-react-app@0.2.0 ``` Inside any created project that has not been ejected, run: -``` +```sh npm install --save-dev --save-exact react-scripts@0.2.0 ``` diff --git a/CHANGELOG-1.x.md b/CHANGELOG-1.x.md index 144699233cb..ae2725af297 100644 --- a/CHANGELOG-1.x.md +++ b/CHANGELOG-1.x.md @@ -21,13 +21,13 @@ Inside any created project that has not been ejected, run: -``` +```sh npm install --save --save-exact react-scripts@1.1.5 ``` or -``` +```sh yarn add --exact react-scripts@1.1.5 ``` @@ -47,13 +47,13 @@ yarn add --exact react-scripts@1.1.5 Inside any created project that has not been ejected, run: -``` +```sh npm install --save --save-exact react-scripts@1.1.4 ``` or -``` +```sh yarn add --exact react-scripts@1.1.4 ``` @@ -73,13 +73,13 @@ yarn add --exact react-scripts@1.1.4 Inside any created project that has not been ejected, run: -``` +```sh npm install --save --save-exact react-scripts@1.1.3 ``` or -``` +```sh yarn add --exact react-scripts@1.1.3 ``` @@ -106,13 +106,13 @@ yarn add --exact react-scripts@1.1.3 Inside any created project that has not been ejected, run: -``` +```sh npm install --save --save-exact react-scripts@1.1.2 ``` or -``` +```sh yarn add --exact react-scripts@1.1.2 ``` @@ -151,13 +151,13 @@ yarn add --exact react-scripts@1.1.2 Inside any created project that has not been ejected, run: -``` +```sh npm install --save --save-exact react-scripts@1.1.1 ``` or -``` +```sh yarn add --exact react-scripts@1.1.1 ``` @@ -337,13 +337,13 @@ yarn add --exact react-scripts@1.1.1 Inside any created project that has not been ejected, run: -``` +```sh npm install --save --save-exact react-scripts@1.1.0 ``` or -``` +```sh yarn add --exact react-scripts@1.1.0 ``` @@ -372,13 +372,13 @@ yarn add --exact react-scripts@1.1.0 Inside any created project that has not been ejected, run: -``` +```sh npm install --save --save-exact react-scripts@1.0.17 ``` or -``` +```sh yarn add --exact react-scripts@1.0.17 ``` @@ -403,13 +403,13 @@ yarn add --exact react-scripts@1.0.17 Inside any created project that has not been ejected, run: -``` +```sh npm install --save --save-exact react-scripts@1.0.16 ``` or -``` +```sh yarn add --exact react-scripts@1.0.16 ``` @@ -519,13 +519,13 @@ yarn add --exact react-scripts@1.0.16 Inside any created project that has not been ejected, run: -``` +```sh npm install --save --save-exact react-scripts@1.0.15 ``` or -``` +```sh yarn add --exact react-scripts@1.0.15 ``` @@ -604,13 +604,13 @@ yarn add --exact react-scripts@1.0.15 Inside any created project that has not been ejected, run: -``` +```sh npm install --save --save-exact react-scripts@1.0.14 ``` or -``` +```sh yarn add --exact react-scripts@1.0.14 ``` @@ -653,13 +653,13 @@ yarn add --exact react-scripts@1.0.14 Inside any created project that has not been ejected, run: -``` +```sh npm install --save --save-exact react-scripts@1.0.13 ``` or -``` +```sh yarn add --exact react-scripts@1.0.13 ``` @@ -718,13 +718,13 @@ yarn add --exact react-scripts@1.0.13 Inside any created project that has not been ejected, run: -``` +```sh npm install --save --save-exact react-scripts@1.0.12 ``` or -``` +```sh yarn add --exact react-scripts@1.0.12 ``` @@ -841,13 +841,13 @@ yarn add --exact react-scripts@1.0.12 Inside any created project that has not been ejected, run: -``` +```sh npm install --save --save-exact react-scripts@1.0.11 ``` or -``` +```sh yarn add --exact react-scripts@1.0.11 ``` @@ -880,13 +880,13 @@ yarn add --exact react-scripts@1.0.11 Inside any created project that has not been ejected, run: -``` +```sh npm install --save --save-exact react-scripts@1.0.10 ``` or -``` +```sh yarn add --exact react-scripts@1.0.10 ``` @@ -925,13 +925,13 @@ yarn add --exact react-scripts@1.0.10 Inside any created project that has not been ejected, run: -``` +```sh npm install --save --save-exact react-scripts@1.0.9 ``` or -``` +```sh yarn add --exact react-scripts@1.0.9 ``` @@ -1094,13 +1094,13 @@ yarn add --exact react-scripts@1.0.9 Inside any created project that has not been ejected, run: -``` +```sh npm install --save-dev --save-exact react-scripts@1.0.8 ``` or -``` +```sh yarn add --dev --exact react-scripts@1.0.8 ``` @@ -1153,13 +1153,13 @@ If you haven't changed the default CSS organization, you may want to apply [this Inside any created project that has not been ejected, run: -``` +```sh npm install --save-dev --save-exact react-scripts@1.0.7 ``` or -``` +```sh yarn add --dev --exact react-scripts@1.0.7 ``` @@ -1198,13 +1198,13 @@ yarn add --dev --exact react-scripts@1.0.7 Inside any created project that has not been ejected, run: -``` +```sh npm install --save-dev --save-exact react-scripts@1.0.6 ``` or -``` +```sh yarn add --dev --exact react-scripts@1.0.6 ``` @@ -1241,13 +1241,13 @@ yarn add --dev --exact react-scripts@1.0.6 Inside any created project that has not been ejected, run: -``` +```sh npm install --save-dev --save-exact react-scripts@1.0.5 ``` or -``` +```sh yarn add --dev --exact react-scripts@1.0.5 ``` @@ -1262,13 +1262,13 @@ yarn add --dev --exact react-scripts@1.0.5 Inside any created project that has not been ejected, run: -``` +```sh npm install --save-dev --save-exact react-scripts@1.0.4 ``` or -``` +```sh yarn add --dev --exact react-scripts@1.0.4 ``` @@ -1302,13 +1302,13 @@ yarn add --dev --exact react-scripts@1.0.4 Inside any created project that has not been ejected, run: -``` +```sh npm install --save-dev --save-exact react-scripts@1.0.3 ``` or -``` +```sh yarn add --dev --exact react-scripts@1.0.3 ``` @@ -1355,13 +1355,13 @@ yarn add --dev --exact react-scripts@1.0.3 Inside any created project that has not been ejected, run: -``` +```sh npm install --save-dev --save-exact react-scripts@1.0.2 ``` or -``` +```sh yarn add --dev --exact react-scripts@1.0.2 ``` @@ -1431,13 +1431,13 @@ If you previously had issues with an `Invalid Host Header` error, [follow these Inside any created project that has not been ejected, run: -``` +```sh npm install --save-dev --save-exact react-scripts@1.0.1 ``` or -``` +```sh yarn add --dev --exact react-scripts@1.0.1 ``` @@ -1456,13 +1456,13 @@ First, ensure you are using the latest [Node 6 LTS or newer](https://nodejs.org/ Inside any created project that has not been ejected, run: -``` +```sh npm install --save-dev --save-exact react-scripts@1.0.0 ``` You may also optionally update the global command-line utility for bug fixes: -``` +```sh npm install -g create-react-app ``` @@ -1473,7 +1473,7 @@ We also never explicitly forbid doing so, which caused confusion when things did When running or building your application, you may see a message like so: -``` +```sh You attempted to import ... which falls outside of the project src/ directory. ``` diff --git a/CHANGELOG.md b/CHANGELOG.md index 763083ccd08..27d74fd97dc 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,255 @@ +## 2.1.8 (March 7, 2019) + +v2.1.8 is a maintenance release that reapplies the TypeScript speed improvements ([#6406](https://github.com/facebook/create-react-app/pull/6406)) in a new major version of `react-dev-utils`. + +### Migrating from 2.1.7 to 2.1.8 + +Inside any created project that has not been ejected, run: + +```sh +npm install --save --save-exact react-scripts@2.1.8 +``` + +or + +```sh +yarn add --exact react-scripts@2.1.8 +``` + +## 2.1.7 (March 7, 2019) + +v2.1.7 is a maintenance release that temporarily reverts the TypeScript speed improvements ([#6406](https://github.com/facebook/create-react-app/pull/6406)) to fix a dependency issue in `react-dev-utils`. + +### Migrating from 2.1.6 to 2.1.7 + +Inside any created project that has not been ejected, run: + +```sh +npm install --save --save-exact react-scripts@2.1.7 +``` + +or + +```sh +yarn add --exact react-scripts@2.1.7 +``` + +## 2.1.6 (March 6, 2019) + +v2.1.6 is a maintenance release that brings a few new improvements, most notably: + +- :rocket: Reduced TypeScript rebuild times while running the development server. This was previously introduced in v2.1.4 but had to be reverted. Thanks to [@ianschmitz](https://github.com/ianschmitz) for getting this ready. + +#### :bug: Bug Fix + +- `react-dev-utils` + - [#6511](https://github.com/facebook/create-react-app/pull/6511) Fix deploy instructions to make link clickable. ([@sbimochan](https://github.com/sbimochan)) +- `react-scripts` + - [#6472](https://github.com/facebook/create-react-app/pull/6472) Revert CSS sourcemaps in development. ([@bugzpodder](https://github.com/bugzpodder)) + - [#6444](https://github.com/facebook/create-react-app/pull/6444) Revert "Switch to eval-source-map (#5060)". ([@ianschmitz](https://github.com/ianschmitz)) + +#### :nail_care: Enhancement + +- `react-dev-utils`, `react-scripts` + - [#6406](https://github.com/facebook/create-react-app/pull/6406) Speed up TypeScript rebuild times in development. ([@ianschmitz](https://github.com/ianschmitz)) +- `create-react-app` + - [#6253](https://github.com/facebook/create-react-app/pull/6253) Only use `yarn.lock.cached` if using the default Yarn registry. ([@hangryCat](https://github.com/hangryCat)) +- `react-scripts` + - [#5457](https://github.com/facebook/create-react-app/pull/5457) Add forward ref to React SVG Component. ([@GasimGasimzada](https://github.com/GasimGasimzada)) + +#### :memo: Documentation + +- `babel-preset-react-app` + - [#6254](https://github.com/facebook/create-react-app/pull/6254) Improve Flow and TypeScript usage docs. ([@saranshkataria](https://github.com/saranshkataria)) +- `babel-preset-react-app`, `confusing-browser-globals`, `react-app-polyfill` + - [#6419](https://github.com/facebook/create-react-app/pull/6419) Improve language used in markdown code blocks. ([@cherouvim](https://github.com/cherouvim)) +- `create-react-app` + - [#6481](https://github.com/facebook/create-react-app/pull/6481) Fix typo. ([@adyouri](https://github.com/adyouri)) +- `react-dev-utils` + - [#6482](https://github.com/facebook/create-react-app/pull/6482) Fix typo. ([@mattfwood](https://github.com/mattfwood)) +- Other + - [#6438](https://github.com/facebook/create-react-app/pull/6438) Update `source-map-explorer` docs to analyze all chunks. ([@Kamahl19](https://github.com/Kamahl19)) + - [#6454](https://github.com/facebook/create-react-app/pull/6454) Fix typo. ([@DenrizSusam](https://github.com/DenrizSusam)) + - [#5767](https://github.com/facebook/create-react-app/pull/5767) Add information about using custom registries in e2e testing #4488. ([@juanpicado](https://github.com/juanpicado)) +- `react-dev-utils`, `react-scripts` + - [#6239](https://github.com/facebook/create-react-app/pull/6239) Convert all bit.ly links from http to https. ([@leighhalliday](https://github.com/leighhalliday)) + +#### :house: Internal + +- [#6493](https://github.com/facebook/create-react-app/pull/6493) Remove AppVeyor config files. ([@iansu](https://github.com/iansu)) +- [#6474](https://github.com/facebook/create-react-app/pull/6474) Remove latest Node version from Travis config. ([@iansu](https://github.com/iansu)) + +#### :hammer: Underlying Tools + +- `react-scripts` + - [#6387](https://github.com/facebook/create-react-app/pull/6387) Use contenthash instead of chunkhash for better long-term caching. ([@ianschmitz](https://github.com/ianschmitz)) +- Other + - [#6365](https://github.com/facebook/create-react-app/pull/6365) Upgrade Docusaurus and enable new features. ([@yangshun](https://github.com/yangshun)) + +#### Committers: 15 + +- Abdelhadi Dyouri ([adyouri](https://github.com/adyouri)) +- Bimochan Shrestha ([sbimochan](https://github.com/sbimochan)) +- Deniz Susman ([DenrizSusam](https://github.com/DenrizSusam)) +- Gasim Gasimzada ([GasimGasimzada](https://github.com/GasimGasimzada)) +- Ian Schmitz ([ianschmitz](https://github.com/ianschmitz)) +- Ian Sutherland ([iansu](https://github.com/iansu)) +- Ioannis Cherouvim ([cherouvim](https://github.com/cherouvim)) +- Jack Zhao ([bugzpodder](https://github.com/bugzpodder)) +- Juan Picado @jotadeveloper ([juanpicado](https://github.com/juanpicado)) +- Leigh Halliday ([leighhalliday](https://github.com/leighhalliday)) +- Martin Litvaj ([Kamahl19](https://github.com/Kamahl19)) +- Matt Wood ([mattfwood](https://github.com/mattfwood)) +- Meo H. ([hangryCat](https://github.com/hangryCat)) +- Saransh Kataria ([saranshkataria](https://github.com/saranshkataria)) +- Yangshun Tay ([yangshun](https://github.com/yangshun)) + +### Migrating from 2.1.5 to 2.1.6 + +Inside any created project that has not been ejected, run: + +```sh +npm install --save --save-exact react-scripts@2.1.6 +``` + +or + +```sh +yarn add --exact react-scripts@2.1.6 +``` + +## 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). @@ -38,13 +290,13 @@ v2.1.3 is a maintenance release to fix a [vulnerability in webpack-dev-server](h Inside any created project that has not been ejected, run: -```bash +```sh npm install --save --save-exact react-scripts@2.1.3 ``` or -``` +```sh yarn add --exact react-scripts@2.1.3 ``` @@ -177,13 +429,13 @@ v2.1.2 is a maintenance release including various bug fixes. Inside any created project that has not been ejected, run: -```bash +```sh npm install --save --save-exact react-scripts@2.1.2 ``` or -``` +```sh yarn add --exact react-scripts@2.1.2 ``` @@ -233,13 +485,13 @@ Happy Halloween 🎃 👻! This spooky release brings a treat: decorator support Inside any created project that has not been ejected, run: -```bash +```sh npm install --save --save-exact react-scripts@2.1.1 ``` or -``` +```sh yarn add --exact react-scripts@2.1.1 ``` @@ -249,7 +501,7 @@ Create React App 2.1 adds support for TypeScript! Read [the documentation](https New applications can be created using TypeScript by running: -```bash +```sh $ npx create-react-app my-app --typescript ``` @@ -336,13 +588,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 ``` @@ -435,13 +687,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 ``` @@ -501,13 +753,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 ``` @@ -524,13 +776,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 ``` @@ -550,13 +802,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 ``` @@ -642,13 +894,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 afc584c3957..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: diff --git a/README.md b/README.md index 881ba7f4ad5..75aed91b989 100644 --- a/README.md +++ b/README.md @@ -163,7 +163,7 @@ Create React App is a great fit for: - **Starting new single-page React applications.** - **Creating examples** with React for your libraries and components. -Here are 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). 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 ab266ab976e..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://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-sass-stylesheet.md b/docusaurus/docs/adding-a-sass-stylesheet.md index 90d3012eb1a..1ba76380e6a 100644 --- a/docusaurus/docs/adding-a-sass-stylesheet.md +++ b/docusaurus/docs/adding-a-sass-stylesheet.md @@ -12,7 +12,7 @@ Following this rule often makes CSS preprocessors less useful, as features like To use Sass, first install `node-sass`: -```bash +```sh $ npm install node-sass --save $ # or $ yarn add node-sass @@ -42,6 +42,12 @@ If you set `SASS_PATH=node_modules:src`, this will allow you to do imports like @import 'nprogress/nprogress'; // importing a css file from the nprogress node module ``` +> **Note:** For windows operating system, use below syntax +> +> ``` +> SASS_PATH=./node_modules;./src +> ``` + > **Tip:** You can opt into using this feature with [CSS modules](adding-a-css-modules-stylesheet.md) too! > **Note:** If you're using Flow, override the [module.file_ext](https://flow.org/en/docs/config/options/#toc-module-file-ext-string) setting in your `.flowconfig` so it'll recognize `.sass` or `.scss` files. You will also need to include the `module.file_ext` default settings for `.js`, `.jsx`, `.mjs` and `.json` files. diff --git a/docusaurus/docs/adding-bootstrap.md b/docusaurus/docs/adding-bootstrap.md index 19b3e752441..dc103f81a99 100644 --- a/docusaurus/docs/adding-bootstrap.md +++ b/docusaurus/docs/adding-bootstrap.md @@ -32,7 +32,7 @@ import 'bootstrap/dist/css/bootstrap.css'; 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..0e635f6a3c0 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,17 +30,19 @@ 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. @@ -51,9 +52,9 @@ When you load the app in the browser and inspect the ``, you will see its
``` -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 +83,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 +96,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 +112,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 d67cee32b8c..25380216431 100644 --- a/docusaurus/docs/adding-typescript.md +++ b/docusaurus/docs/adding-typescript.md @@ -9,7 +9,7 @@ title: Adding TypeScript To start a new Create React App project with [TypeScript](https://www.typescriptlang.org/), you can run: -```bash +```sh npx create-react-app my-app --typescript # or @@ -19,7 +19,7 @@ yarn create react-app my-app --typescript To add [TypeScript](https://www.typescriptlang.org/) to a Create React App project, first install it: -```bash +```sh npm install --save typescript @types/node @types/react @types/react-dom @types/jest # or @@ -33,6 +33,9 @@ Type errors will show up in the same console as the build one. To learn more about TypeScript, check out [its documentation](https://www.typescriptlang.org/). +> **Note:** If your project is not created with TypeScript enabled, npx may be using a cached version of `create-react-app`. +> Remove previously installed versions with `npm uninstall -g create-react-app` (see [#6119](https://github.com/facebook/create-react-app/issues/6119#issuecomment-451614035)). + > **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. diff --git a/docusaurus/docs/advanced-configuration.md b/docusaurus/docs/advanced-configuration.md index e7a8324d827..b879d2669ec 100644 --- a/docusaurus/docs/advanced-configuration.md +++ b/docusaurus/docs/advanced-configuration.md @@ -3,7 +3,9 @@ id: advanced-configuration title: Advanced Configuration --- -You can adjust various development and production settings by setting environment variables in your shell or with [.env](adding-custom-environment-variables.md#adding-development-environment-variables-in-env). +You can adjust various development and production settings by setting environment variables in your shell or with [.env](adding-custom-environment-variables.md#adding-development-environment-variables-in-env). + +> Note: You do not need to declare `REACT_APP_` before the below variables as you would with custom environment variables. | Variable | Development | Production | Usage | | :---------------------- | :---------: | :--------: | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | 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/code-splitting.md b/docusaurus/docs/code-splitting.md index 8cfcee4700f..ace13fdfcce 100644 --- a/docusaurus/docs/code-splitting.md +++ b/docusaurus/docs/code-splitting.md @@ -51,6 +51,6 @@ 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/debugging-tests.md b/docusaurus/docs/debugging-tests.md index 93da201a9f6..b7342adace1 100644 --- a/docusaurus/docs/debugging-tests.md +++ b/docusaurus/docs/debugging-tests.md @@ -14,13 +14,13 @@ Add the following to the `scripts` section in your project's `package.json` ```json "scripts": { - "test:debug": "react-scripts --inspect-brk test --runInBand" + "test:debug": "react-scripts --inspect-brk test --runInBand --no-cache" } ``` Place `debugger;` statements in any test and run: -```bash +```sh $ npm run test:debug ``` @@ -42,7 +42,7 @@ Debugging Jest tests is supported out of the box for [Visual Studio Code](https: Use the following [`launch.json`](https://code.visualstudio.com/docs/editor/debugging#_launch-configurations) configuration file: -``` +```json { "version": "0.2.0", "configurations": [ @@ -54,7 +54,8 @@ Use the following [`launch.json`](https://code.visualstudio.com/docs/editor/debu "args": [ "test", "--runInBand", - "--no-cache" + "--no-cache", + "--no-watch" ], "cwd": "${workspaceRoot}", "protocol": "inspector", diff --git a/docusaurus/docs/deployment.md b/docusaurus/docs/deployment.md index d25f18244fe..ceda7ebc8ab 100644 --- a/docusaurus/docs/deployment.md +++ b/docusaurus/docs/deployment.md @@ -15,7 +15,11 @@ npm install -g serve serve -s build ``` -The last command shown above will serve your static site on the port **5000**. Like many of [serve](https://github.com/zeit/serve)’s internal settings, the port can be adjusted using the `-p` or `--port` flags. +The last command shown above will serve your static site on the port **5000**. Like many of [serve](https://github.com/zeit/serve)’s internal settings, the port can be adjusted using the `-l` or `--listen` flags: + +```sh +serve -s build -l 4000 +``` Run this command to get a full list of the options available: @@ -27,7 +31,7 @@ serve -h You don’t necessarily need a static server in order to run a Create React App project in production. It works just as fine integrated into an existing dynamic one. -Here’s a programmatic example using [Node](https://nodejs.org/) and [Express](http://expressjs.com/): +Here’s a programmatic example using [Node](https://nodejs.org/) and [Express](https://expressjs.com/): ```javascript const express = require('express'); @@ -75,7 +79,7 @@ If you’re using [Apache HTTP Server](https://httpd.apache.org/), you need to c It will get copied to the `build` folder when you run `npm run build`. -If you’re using [Apache Tomcat](http://tomcat.apache.org/), you need to follow [this Stack Overflow answer](https://stackoverflow.com/a/41249464/4878474). +If you’re using [Apache Tomcat](https://tomcat.apache.org/), you need to follow [this Stack Overflow answer](https://stackoverflow.com/a/41249464/4878474). Now requests to `/todos/42` will be handled correctly both in development and in production. @@ -106,7 +110,8 @@ To override this, specify the `homepage` in your `package.json`, for example: This will let Create React App correctly infer the root path to use in the generated HTML file. **Note**: If you are using `react-router@^4`, you can root ``s using the `basename` prop on any ``.
-More information [here](https://reacttraining.com/react-router/web/api/BrowserRouter/basename-string).
+More information [here](https://reacttraining.com/react-router/web/api/BrowserRouter/basename-string).
+
For example: @@ -155,6 +160,17 @@ You can specify other environments in the same way. Variables in `.env.production` will be used as fallback because `NODE_ENV` will always be set to `production` for a build. +## [AWS Amplify](http://console.amplify.aws) + +The AWS Amplify Console provides continuous deployment and hosting for modern web apps (single page apps and static site generators) with serverless backends. The Amplify Console offers globally available CDNs, easy custom domain setup, feature branch deployments, and password protection. + +1. Login to the Amplify Console [here](https://console.aws.amazon.com/amplify/home). +1. Connect your Create React App repo and pick a branch. If you're looking for a Create React App+Amplify starter, try the [create-react-app-auth-amplify starter](https://github.com/swaminator/create-react-app-auth-amplify) that demonstrates setting up auth in 10 minutes with Create React App. +1. The Amplify Console automatically detects the build settings. Choose Next. +1. Choose *Save and deploy*. + +If the build succeeds, the app is deployed and hosted on a global CDN with an amplifyapp.com domain. You can now continuously deploy changes to your frontend or backend. Continuous deployment allows developers to deploy updates to their frontend and backend on every code commit to their Git repository. + ## [Azure](https://azure.microsoft.com/) See [this](https://medium.com/@to_pe/deploying-create-react-app-on-microsoft-azure-c0f6686a4321) blog post on how to deploy your React app to Microsoft Azure. @@ -204,7 +220,7 @@ Then run the `firebase init` command from your project’s root. You need to cho IMPORTANT: you need to set proper HTTP caching headers for `service-worker.js` file in `firebase.json` file or you will not be able to see changes after first deployment ([issue #2440](https://github.com/facebook/create-react-app/issues/2440)). It should be added inside `"hosting"` key like next: -``` +```json { "hosting": { ... @@ -240,7 +256,8 @@ For more information see [Firebase Hosting](https://firebase.google.com/docs/hos ### Step 1: Add `homepage` to `package.json` -**The step below is important!**
+**The step below is important!**
+ **If you skip it, your app will not deploy correctly.** Open your `package.json` and add a `homepage` field for your project: @@ -291,11 +308,10 @@ Add the following scripts in your `package.json`: The `predeploy` script will run automatically before `deploy` is run. -If you are deploying to a GitHub user page instead of a project page you'll need to make two -additional modifications: +If you are deploying to a GitHub user page instead of a project page you'll need to make one +additional modification: -1. First, change your repository's source branch to be any branch other than **master**. -1. Additionally, tweak your `package.json` scripts to push deployments to **master**: +1. Tweak your `package.json` scripts to push deployments to **master**: ```diff "scripts": { @@ -312,11 +328,11 @@ Then run: npm run deploy ``` -### Step 4: Ensure your project’s settings use `gh-pages` +### Step 4: For a project page, ensure your project’s settings use `gh-pages` Finally, make sure **GitHub Pages** option in your GitHub project settings is set to use the `gh-pages` branch: -gh-pages branch setting +gh-pages branch setting ### Step 5: Optionally, configure the domain @@ -422,23 +438,25 @@ When you build the project, Create React App will place the `public` folder cont ## [Now](https://zeit.co/now) -Now offers a zero-configuration single-command deployment. You can use `now` to deploy your app for free. +[Now](https://zeit.co/docs) offers a simple, single-command deployment. You can use `now` to deploy your app for free. -1. Install the `now` command-line tool either via the recommended [desktop tool](https://zeit.co/download) or via node with `npm install -g now`. +The first step is to install Now. You can do this by installing [the Now Desktop app](https://zeit.co/download), which also installs Now CLI and keeps it up-to-date, or by [installing Now CLI](https://zeit.co/download#now-cli) directly with npm: -2. Build your app by running `npm run build`. +```shell +npm i -g now +``` -3. Move into the build directory by running `cd build`. +To deploy your built project directly with Now CLI in your terminal, without any configuration: -4. Run `now --name your-project-name` from within the build directory. You will see a **now.sh** URL in your output like this: +1. Build your app by running `npm run build`. - ``` - > Ready! https://your-project-name-tpspyhtdtk.now.sh (copied to clipboard) - ``` +2. Move into the build directory by running `cd build`. + +3. Run `now --name your-project-name` from within the build directory. You will be given a **now.sh** URL as a response as your build is deployed, similar to the following: https://my-cra-project-4rx7b16z3.now.sh/ - Paste that URL into your browser when the build is complete, and you will see your deployed app. + Click or paste the deployment URL into your browser when the build is complete and you will see your deployed app. -Details are available in [this article.](https://zeit.co/blog/unlimited-static) +For more information on deploying React applications with Now, including automatically building your application fresh in the cloud, setting up routes to rewrite all paths to the index.html file, and setting up caching headers for speed, see [the ZEIT Guide for Deploying a React app with Create React App](https://zeit.co/guides/deploying-react-with-now-cra/). ## [S3](https://aws.amazon.com/s3) and [CloudFront](https://aws.amazon.com/cloudfront/) diff --git a/docusaurus/docs/developing-components-in-isolation.md b/docusaurus/docs/developing-components-in-isolation.md index 601ccd4896c..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. diff --git a/docusaurus/docs/getting-started.md b/docusaurus/docs/getting-started.md index a77beb5c1b0..6945b4e6f08 100644 --- a/docusaurus/docs/getting-started.md +++ b/docusaurus/docs/getting-started.md @@ -18,7 +18,7 @@ npm start _([npx](https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b) comes with npm 5.2+ and higher, see [instructions for older npm versions](https://gist.github.com/gaearon/4064d3c23a77c74a3614c498a8bb1c5f))_ -Then open [http://localhost:3000/](http://localhost:3000/) to see your app. +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`. 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 1623defd4f9..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(); ``` @@ -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. diff --git a/docusaurus/docs/proxying-api-requests-in-development.md b/docusaurus/docs/proxying-api-requests-in-development.md index d094d267180..a113f4d4211 100644 --- a/docusaurus/docs/proxying-api-requests-in-development.md +++ b/docusaurus/docs/proxying-api-requests-in-development.md @@ -17,13 +17,13 @@ Such setup is **not** required. However, if you **do** have a setup like this, i 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. @@ -35,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 @@ -74,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 6daaffb73aa..5f93a391771 100644 --- a/docusaurus/docs/running-tests.md +++ b/docusaurus/docs/running-tests.md @@ -7,7 +7,7 @@ title: Running Tests > [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,16 +25,18 @@ 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](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 By default, when you run `npm test`, Jest will only run the tests related to files changed since the last commit. This is an optimization designed to make your tests run fast regardless of how many tests you have. However it assumes that you don’t often commit the code that doesn’t pass the tests. @@ -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 `