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/ISSUE_TEMPLATE.md b/.github/ISSUE_TEMPLATE.md index d2612759e2f..2ecabc86e07 100644 --- a/.github/ISSUE_TEMPLATE.md +++ b/.github/ISSUE_TEMPLATE.md @@ -8,10 +8,10 @@ (Write your answer here if relevant.) - ### Environment - + ``` Add `` to `` in `public/index.html`: ```html - - You need to enable JavaScript to run this app. - + + You need to enable JavaScript to run this app. + ``` Then create a file called `public/manifest.json` that looks like this: diff --git a/CHANGELOG-2.x.md b/CHANGELOG-2.x.md new file mode 100644 index 00000000000..27d74fd97dc --- /dev/null +++ b/CHANGELOG-2.x.md @@ -0,0 +1,1390 @@ +## 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). + +#### :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: + +```sh +$ npx create-react-app my-app --typescript +``` + +#### :rocket: New Feature + +- `create-react-app`, `react-scripts` + - [#5550](https://github.com/facebook/create-react-app/pull/5550) Add TypeScript app creation ([@Timer](https://github.com/Timer)) +- `babel-preset-react-app`, `react-scripts` + - [#4837](https://github.com/facebook/create-react-app/pull/4837) TypeScript support using Babel 7 ([@brunolemos](https://github.com/brunolemos)) + +#### :bug: Bug Fix + +- `react-scripts` + - [#5611](https://github.com/facebook/create-react-app/pull/5611) Remove react-scripts type reference on eject. ([@Timer](https://github.com/Timer)) + - [#5614](https://github.com/facebook/create-react-app/pull/5614) Ignore json files from TypeScript type checking. ([@brunolemos](https://github.com/brunolemos)) + - [#5609](https://github.com/facebook/create-react-app/pull/5609) Remove unsupported options. ([@Timer](https://github.com/Timer)) + - [#5608](https://github.com/facebook/create-react-app/pull/5608) Ignore test files from reported type errors. ([@Timer](https://github.com/Timer)) + - [#5589](https://github.com/facebook/create-react-app/pull/5589) Update react-app.d.ts. ([@brunolemos](https://github.com/brunolemos)) + - [#5557](https://github.com/facebook/create-react-app/pull/5557) Add typings for process.env. ([@brunolemos](https://github.com/brunolemos)) + - [#5532](https://github.com/facebook/create-react-app/pull/5532) Use TypeScript parser to read tsconfig.json. ([@brunolemos](https://github.com/brunolemos)) + - [#5527](https://github.com/facebook/create-react-app/pull/5527) Update Workbox dependency. ([@jeffposnick](https://github.com/jeffposnick)) +- `react-dev-utils`, `react-scripts` + - [#5549](https://github.com/facebook/create-react-app/pull/5549) Automatically setup TypeScript when detected. ([@Timer](https://github.com/Timer)) + - [#5537](https://github.com/facebook/create-react-app/pull/5537) Respect tsconfig.json extends when validating config. ([@ianschmitz](https://github.com/ianschmitz)) + +#### :nail_care: Enhancement + +- `create-react-app`, `react-scripts` + - [#5593](https://github.com/facebook/create-react-app/pull/5593) Refine how TypeScript types are handled. ([@Timer](https://github.com/Timer)) +- `react-scripts` + - [#5531](https://github.com/facebook/create-react-app/pull/5531) Enable TypeScript json module resolver. ([@brunolemos](https://github.com/brunolemos)) + - [#5524](https://github.com/facebook/create-react-app/pull/5524) Validate tsconfig when using TypeScript. ([@Timer](https://github.com/Timer)) + - [#5516](https://github.com/facebook/create-react-app/pull/5516) Check for TypeScript install in preflight. ([@Timer](https://github.com/Timer)) + - [#5515](https://github.com/facebook/create-react-app/pull/5515) Always type check TypeScript when being used. ([@Timer](https://github.com/Timer)) +- `react-dev-utils`, `react-scripts` + - [#5529](https://github.com/facebook/create-react-app/pull/5529) Add TypeScript error formatting. ([@Timer](https://github.com/Timer)) + +#### :memo: Documentation + +- Other + - [#5552](https://github.com/facebook/create-react-app/pull/5552) Fixing Internal Links. ([@ehfeng](https://github.com/ehfeng)) + - [#5551](https://github.com/facebook/create-react-app/pull/5551) Add Algolia search bar to Docusaurus. ([@amyrlam](https://github.com/amyrlam)) + - [#5533](https://github.com/facebook/create-react-app/pull/5533) Simplified TypeScript steps. ([@brunolemos](https://github.com/brunolemos)) + - [#5492](https://github.com/facebook/create-react-app/pull/5492) Add "edit" feature to Docusaurus pages. ([@amyrlam](https://github.com/amyrlam)) + - [#5499](https://github.com/facebook/create-react-app/pull/5499) Fix title on Safari. ([@yuyokk](https://github.com/yuyokk)) + - [#5494](https://github.com/facebook/create-react-app/pull/5494) Fix typo. ([@noelyoo](https://github.com/noelyoo)) + - [#5493](https://github.com/facebook/create-react-app/pull/5493) Fixed typo in getting-started. ([@jessepeterman](https://github.com/jessepeterman)) + - [#5344](https://github.com/facebook/create-react-app/pull/5344) Add some headings to the getting started section. ([@selbekk](https://github.com/selbekk)) + - [#5251](https://github.com/facebook/create-react-app/pull/5251) Add SoMe links to documentation. ([@selbekk](https://github.com/selbekk)) +- `react-scripts` + - [#5512](https://github.com/facebook/create-react-app/pull/5512) Update doc links in template README. ([@iansu](https://github.com/iansu)) + - [#5475](https://github.com/facebook/create-react-app/pull/5475) Fix typo. ([@thompk2](https://github.com/thompk2)) + - [#5449](https://github.com/facebook/create-react-app/pull/5449) Remove dot from the end of the link to fix it when using from GitHub. ([@ranyitz](https://github.com/ranyitz)) + +#### :house: Internal + +- `react-scripts` + - [#5607](https://github.com/facebook/create-react-app/pull/5607) Turn on certain TypeScript options. ([@Timer](https://github.com/Timer)) + - [#5559](https://github.com/facebook/create-react-app/pull/5559) Change import syntax from typescript declaration. ([@brunolemos](https://github.com/brunolemos)) + - [#5469](https://github.com/facebook/create-react-app/pull/5469) Avoid pushing .pnp folder to git. ([@NShahri](https://github.com/NShahri)) + - [#5527](https://github.com/facebook/create-react-app/pull/5527) Update Workbox dependency. ([@jeffposnick](https://github.com/jeffposnick)) +- `eslint-config-react-app` + - [#5586](https://github.com/facebook/create-react-app/pull/5586) Fixing the code splitting links in the ESLint output. ([@jheijmans](https://github.com/jheijmans)) + +#### Committers: 15 + +- Amy Lam ([amyrlam](https://github.com/amyrlam)) +- Bruno Lemos ([brunolemos](https://github.com/brunolemos)) +- Eric Feng ([ehfeng](https://github.com/ehfeng)) +- Ian Schmitz ([ianschmitz](https://github.com/ianschmitz)) +- Ian Sutherland ([iansu](https://github.com/iansu)) +- Iurii Kucherov ([yuyokk](https://github.com/yuyokk)) +- Jeffrey Posnick ([jeffposnick](https://github.com/jeffposnick)) +- Jeroen Heijmans ([jheijmans](https://github.com/jheijmans)) +- Jesse Peterman ([jessepeterman](https://github.com/jessepeterman)) +- Joe Haddad ([Timer](https://github.com/Timer)) +- Kit Thompson ([thompk2](https://github.com/thompk2)) +- Kristofer Selbekk ([selbekk](https://github.com/selbekk)) +- Nima Shahri ([NShahri](https://github.com/NShahri)) +- Noel Yoo ([noelyoo](https://github.com/noelyoo)) +- Ran Yitzhaki ([ranyitz](https://github.com/ranyitz)) + +### Migrating from 2.0.5 to 2.1.0 + +Inside any created project that has not been ejected, run: + +```sh +npm install --save --save-exact react-scripts@2.1.0 +``` + +or + +```sh +yarn add --exact react-scripts@2.1.0 +``` + +## 2.0.5 (October 14, 2018) + +#### :bug: Bug Fix + +- `react-dev-utils` + + - [#5431](https://github.com/facebook/create-react-app/pull/5431) Fix click-to-open on Windows. ([@gaearon](https://github.com/gaearon)) + - [#5335](https://github.com/facebook/create-react-app/pull/5335) Fix file size report after build. ([@OskarPersson](https://github.com/OskarPersson)) + +- `create-react-app` + + - [#5362](https://github.com/facebook/create-react-app/pull/5362) Fix CI: non-semver compliant Yarn versions. ([@Timer](https://github.com/Timer)) + +- `react-scripts` + - [#5301](https://github.com/facebook/create-react-app/pull/5301) Fix TypeError when registering service workers without config. ([@peterbe](https://github.com/peterbe)) + +#### :nail_care: Enhancement + +- `babel-preset-react-app` + + - [#4984](https://github.com/facebook/create-react-app/pull/4984) Use the correct dependency for `babel-plugin-dynamic-import-node`. ([@vikr01](https://github.com/vikr01)) + +- `react-scripts` + - [#5354](https://github.com/facebook/create-react-app/pull/5354) Add environment variable to optionaly disable inlining of chunks. ([@0xdeafcafe](https://github.com/0xdeafcafe)) + - [#5330](https://github.com/facebook/create-react-app/pull/5330) Update `eslint-plugin-jsx-a11y` version. ([@AlmeroSteyn](https://github.com/AlmeroSteyn)) + +#### :memo: Documentation + +- `react-scripts` + - [#5321](https://github.com/facebook/create-react-app/pull/5321) Added note on update to `.flowconfig` for .scss imports. ([@rlueder](https://github.com/rlueder)) + - [#5394](https://github.com/facebook/create-react-app/pull/5394) Correct instructions for HTTPS and PowerShell. ([@gavinbarron](https://github.com/gavinbarron)) + - [#5410](https://github.com/facebook/create-react-app/pull/5410) Updates to clarify the "waiting" SW behavior. ([@jeffposnick](https://github.com/jeffposnick)) + - [#5302](https://github.com/facebook/create-react-app/pull/5302) Update README.md. ([@simonCordovaByte9](https://github.com/simonCordovaByte9)) + - [#5334](https://github.com/facebook/create-react-app/pull/5334) Update README due to deprecation of react-testing-library's toBeInTheDOM. ([@rrebase](https://github.com/rrebase)) + - [#5326](https://github.com/facebook/create-react-app/pull/5326) README link fixes. ([@davidgilbertson](https://github.com/davidgilbertson)) + - [#5327](https://github.com/facebook/create-react-app/pull/5327) Updated the URL in index.html. ([@behzod](https://github.com/behzod)) + - [#5296](https://github.com/facebook/create-react-app/pull/5296) Adding documentation about git init. ([@ryancogswell](https://github.com/ryancogswell)) + - [#5290](https://github.com/facebook/create-react-app/pull/5290) Add react-testing-library documentation/examples (#4679). ([@gnapse](https://github.com/gnapse)) + - [#5286](https://github.com/facebook/create-react-app/pull/5286) Fix broken links to src/serviceWorker.js. ([@adambowles](https://github.com/adambowles)) +- Other + + - [#5374](https://github.com/facebook/create-react-app/pull/5374) Add the new SVGs feature from the template README to the root README. ([@neo](https://github.com/neo)) + - [#5371](https://github.com/facebook/create-react-app/pull/5371) Update path to serviceWorker.js in graphical folder structure. ([@jonscottclark](https://github.com/jonscottclark)) + - [#5337](https://github.com/facebook/create-react-app/pull/5337) Fix typo. ([@mvasin](https://github.com/mvasin)) + +- `eslint-config-react-app` + - [#5416](https://github.com/facebook/create-react-app/pull/5416) Fix eslint config docs. ([@ludovicofischer](https://github.com/ludovicofischer)) + +#### :house: Internal + +- Other + + - [#5365](https://github.com/facebook/create-react-app/pull/5365) Clean up the behavior tests. ([@Timer](https://github.com/Timer)) + +- `create-react-app` + - [#5362](https://github.com/facebook/create-react-app/pull/5362) Fix CI: non-semver compliant Yarn versions. ([@Timer](https://github.com/Timer)) +- `react-scripts` + - [#5317](https://github.com/facebook/create-react-app/pull/5317) Remove unused require for getCacheIdentifier after ejecting. ([@benbrandt](https://github.com/benbrandt)) + +#### Committers: 23 + +- Adam Bowles ([adambowles](https://github.com/adambowles)) +- Alex Forbes-Reed ([0xdeafcafe](https://github.com/0xdeafcafe)) +- Almero Steyn ([AlmeroSteyn](https://github.com/AlmeroSteyn)) +- Behzod Saidov ([behzod](https://github.com/behzod)) +- Ben Brandt ([benbrandt](https://github.com/benbrandt)) +- Dan Abramov ([gaearon](https://github.com/gaearon)) +- David Gilbertson ([davidgilbertson](https://github.com/davidgilbertson)) +- Ernesto García ([gnapse](https://github.com/gnapse)) +- Gavin Barron ([gavinbarron](https://github.com/gavinbarron)) +- Jeffrey Posnick ([jeffposnick](https://github.com/jeffposnick)) +- Joe Haddad ([Timer](https://github.com/Timer)) +- Jon Clark ([jonscottclark](https://github.com/jonscottclark)) +- Kristofer Selbekk ([selbekk](https://github.com/selbekk)) +- Ludovico Fischer ([ludovicofischer](https://github.com/ludovicofischer)) +- Mikhail Vasin ([mvasin](https://github.com/mvasin)) +- Oskar Persson ([OskarPersson](https://github.com/OskarPersson)) +- Peter Bengtsson ([peterbe](https://github.com/peterbe)) +- Rafael Lüder ([rlueder](https://github.com/rlueder)) +- Ragnar Rebase ([rrebase](https://github.com/rrebase)) +- Ryan Cogswell ([ryancogswell](https://github.com/ryancogswell)) +- Vikram Rangaraj ([vikr01](https://github.com/vikr01)) +- Wenchen Li ([neo](https://github.com/neo)) +- [simonCordovaByte9](https://github.com/simonCordovaByte9) + +### Migrating from 2.0.4 to 2.0.5 + +Inside any created project that has not been ejected, run: + +```sh +npm install --save --save-exact react-scripts@2.0.5 +``` + +or + +```sh +yarn add --exact react-scripts@2.0.5 +``` + +## 2.0.4 (October 3, 2018) + +#### :bug: Bug Fix + +- `react-scripts` + - [#5281](https://github.com/facebook/create-react-app/pull/5281) Fix code minifying ([@Timer](https://github.com/Timer)) + - [#5246](https://github.com/facebook/create-react-app/pull/5246) Fix `GENERATE_SOURCEMAP` env not working for css sourcemap ([@crux153](https://github.com/crux153)) +- `babel-preset-react-app` + - [#5278](https://github.com/facebook/create-react-app/pull/5278) Disable Symbol typeof transform ([@gaearon](https://github.com/gaearon)) + +#### :nail_care: Enhancement + +- `create-react-app` + - [#5270](https://github.com/facebook/create-react-app/pull/5270) Caches the Yarn resolution for faster installs ([@arcanis](https://github.com/arcanis)) + - [#5269](https://github.com/facebook/create-react-app/pull/5269) Adds a version check when using --use-pnp ([@arcanis](https://github.com/arcanis)) +- `react-scripts` + - [#5258](https://github.com/facebook/create-react-app/pull/5258) Add `.mjs` support back to webpack ([@Timer](https://github.com/Timer)) + +#### :memo: Documentation + +- Other + - [#5228](https://github.com/facebook/create-react-app/pull/5228) removed create-react-app-parcel link ([@lockround](https://github.com/lockround)) + - [#5254](https://github.com/facebook/create-react-app/pull/5254) Update README links for CSS modules and SASS ([@yuyokk](https://github.com/yuyokk)) + - [#5249](https://github.com/facebook/create-react-app/pull/5249) Set the color palette to something a bit more React-y ([@selbekk](https://github.com/selbekk)) + - [#5244](https://github.com/facebook/create-react-app/pull/5244) Update favicon and OpenGraph images ([@selbekk](https://github.com/selbekk)) + - [#5242](https://github.com/facebook/create-react-app/pull/5242) 5238 Removing sample pages ([@selbekk](https://github.com/selbekk)) + - [#5243](https://github.com/facebook/create-react-app/pull/5243) Set the project name and owner correctly ([@selbekk](https://github.com/selbekk)) + - [#5239](https://github.com/facebook/create-react-app/pull/5239) 5238 removing blog from Docusaurus ([@selbekk](https://github.com/selbekk)) + - [#5227](https://github.com/facebook/create-react-app/pull/5227) Initial setup of Docusaurus ([@amyrlam](https://github.com/amyrlam)) +- `react-scripts` + - [#5252](https://github.com/facebook/create-react-app/pull/5252) Revert change to http-proxy-middleware docs ([@iansu](https://github.com/iansu)) + - [#5226](https://github.com/facebook/create-react-app/pull/5226) Fix usage of http-proxy-middleware ([@banyan](https://github.com/banyan)) + - [#5233](https://github.com/facebook/create-react-app/pull/5233) DOCS: Add Relay example ([@zachasme](https://github.com/zachasme)) + +#### :house: Internal + +- [#5263](https://github.com/facebook/create-react-app/pull/5263) Add browser test for graphql ([@Timer](https://github.com/Timer)) + +#### Committers: 11 + +- Amy Lam ([@amyrlam](https://github.com/amyrlam)) +- Crux ([@crux153](https://github.com/crux153)) +- Dan Abramov ([@gaearon](https://github.com/gaearon)) +- Ian Sutherland ([@iansu](https://github.com/iansu)) +- Iurii Kucherov ([@yuyokk](https://github.com/yuyokk)) +- Joe Haddad ([@Timer](https://github.com/Timer)) +- Kohei Hasegawa ([@banyan](https://github.com/banyan)) +- Kristofer Selbekk ([@selbekk](https://github.com/selbekk)) +- Maël Nison ([@arcanis](https://github.com/arcanis)) +- Shubham Tiwari ([@lockround](https://github.com/lockround)) +- Zacharias Knudsen ([@zachasme](https://github.com/zachasme)) + +### Migrating from 2.0.3 to 2.0.4 + +Inside any created project that has not been ejected, run: + +```sh +npm install --save --save-exact react-scripts@2.0.4 +``` + +or + +```sh +yarn add --exact react-scripts@2.0.4 +``` + +## 2.0.3 (October 1, 2018) + +Create React App 2.0 brings a year’s worth of improvements in a single dependency update. +We summarized all of the changes in a blog post! + +Check it out: **[Create React App 2.0: Babel 7, Sass, and More](https://reactjs.org/blog/2018/10/01/create-react-app-v2.html)**. + +It provides a high-level overview of new features and improvements. Now let's see how to update your app to the latest version in detail. + +# Migrating from 1.x to 2.0.3 + +Inside any created project that has not been ejected, run: + +```sh +npm install --save --save-exact react-scripts@2.0.3 +``` + +or + +```sh +yarn add --exact react-scripts@2.0.3 +``` + +If you previously ejected but now want to upgrade, one common solution is to find the commits where you ejected (and any subsequent commits changing the configuration), revert them, upgrade, and later optionally eject again. It’s also possible that the feature you ejected for (maybe Sass or CSS Modules?) is now supported out of the box. You can find a list of notable new features in the **[Create React App 2.0 blog post](https://reactjs.org/blog/2018/10/01/create-react-app-v2.html)**. + +## Breaking Changes + +Like any major release, `react-scripts@2.0` contains a few breaking changes. We expect that they won't affect every user, but we recommend to scan over these sections to see if something is relevant to you. If we missed something, please file a new issue. + +### Node 6 is no longer supported + +Please upgrade to Node 8 (LTS) or later. + +### Polyfills for IE 9, IE 10, and IE 11 are no longer included by default (but you can opt in!) + +We have dropped default support for Internet Explorer 9, 10, and 11. If you still need to support these browsers, follow the instructions below. + +First, install `react-app-polyfill`: + +```sh +npm install react-app-polyfill +``` + +or + +```sh +yarn add react-app-polyfill +``` + +Next, place one of the following lines at the very top of `src/index.js`: + +```js +import 'react-app-polyfill/ie9'; // For IE 9-11 support +import 'react-app-polyfill/ie11'; // For IE 11 support +``` + +You can read more about [these polyfills here](https://github.com/facebook/create-react-app/tree/master/packages/react-app-polyfill). + +### Dynamic `import()` of a CommonJS module now has a `.default` property + +[Webpack 4 changed the behavior of `import()`](https://medium.com/webpack/webpack-4-import-and-commonjs-d619d626b655) to be closer in line with the specification. + +Previously, importing a CommonJS module did not require you specify the default export. In most cases, this is now required. +If you see errors in your application about `... is not a function`, you likely need to update your dynamic import, e.g.: + +```js +const throttle = await import('lodash/throttle'); +// replace with +const throttle = await import('lodash/throttle').then(m => m.default); +``` + +### `require.ensure()` is superseded by dynamic `import()` + +We previously allowed code splitting with a webpack-specific directive, `require.ensure()`. It is now disabled in favor of `import()`. To switch to `import()`, follow the examples below: + +**Single Module** + +```js +require.ensure(['module-a'], function() { + var a = require('module-a'); + // ... +}); + +// Replace with: +import('module-a').then(a => { + // ... +}); +``` + +**Multiple Module** + +```js +require.ensure(['module-a', 'module-b'], function() { + var a = require('module-a'); + var b = require('module-b'); + // ... +}); + +// Replace with: +Promise.all([import('module-a'), import('module-b')]).then(([a, b]) => { + // ... +}); +``` + +### The default Jest environment was changed to `jsdom` + +Look at the `test` entry in the `scripts` section of your `package.json`. +Here's a table how to change it from "before" and "after", depending on what you have there: + +| 1.x (if you have this...) | 2.x (...change it to this!) | +| -------------------------------- | ------------------------------- | +| `react-scripts test --env=jsdom` | `react-scripts test` | +| `react-scripts test` | `react-scripts test --env=node` | + +### Object `proxy` configuration is superseded by `src/setupProxy.js` + +To check if action is required, look for the `proxy` key in `package.json` and follow this table: + +1. I couldn't find a `proxy` key in `package.json` + - No action is required! +2. The value of `proxy` is a string (e.g. `http://localhost:5000`) + - No action is required! +3. The value of `proxy` is an object + - Follow the migration instructions below. + +**It's worth highlighting: if your `proxy` field is a `string`, e.g. `http://localhost:5000`, or you don't have it, skip this section. This feature is still supported and has the same behavior.** + +If your `proxy` is an object, that means you are using the advanced proxy configuration. It has become fully customizable so we removed the limited support for the object-style configuration. Here's how to recreate it. + +First, install `http-proxy-middleware` using npm or Yarn: + +```sh +npm install http-proxy-middleware +``` + +or + +```sh +yarn add http-proxy-middleware +``` + +Next, create `src/setupProxy.js` and place the following contents in it: + +```js +const proxy = require('http-proxy-middleware'); + +module.exports = function(app) { + // ... +}; +``` + +Now, migrate each entry in your `proxy` object one by one, e.g.: + +```json +"proxy": { + "/api": { + "target": "http://localhost:5000/" + }, + "/*.svg": { + "target": "http://localhost:5000/" + } +} +``` + +Place entries into `src/setupProxy.js` like so: + +```js +const proxy = require('http-proxy-middleware'); + +module.exports = function(app) { + app.use(proxy('/api', { target: 'http://localhost:5000/' })); + app.use(proxy('/*.svg', { target: 'http://localhost:5000/' })); +}; +``` + +You can also use completely custom logic there now! This wasn't possible before. + +### `.mjs` file extension support is removed + +Change the extension of any files in your project using `.mjs` to just `.js`. + +It was removed because of inconsistent support from underlying tools. We will add it back after it stops being experimental, and Jest gets built-in support for it. + +### `PropTypes` definitions are now removed in production + +Normally, this shouldn't affect your logic and should make the resulting bundle smaller. However, you may be relying on PropTypes definition for production logic. This is not recommended, and will break now. If a library does it, one possible solution is to file an issue in it with a proposal to use a different field (not `propTypes`) to signal that the declaration needs to be retained. + +### Anything missing? + +This was a large release, and we might have missed something. + +Please [file an issue](https://github.com/facebook/create-react-app/issues/new) and we will try to help. + +# Migrating from 2.0.0-next.xyz + +If you used 2.x alphas, please [follow these instructions](https://gist.github.com/gaearon/8650d1c70e436e5eff01f396dffc4114). + +# Detailed Changelog + +**For a readable summary of the changes, [check out our blog post](https://reactjs.org/blog/2018/10/01/create-react-app-v2.html).** + +#### :rocket: New Feature + +- `react-scripts` + - [#5218](https://github.com/facebook/create-react-app/pull/5218) Support globalSetup and globalTeardown Jest options ([@gaearon](https://github.com/gaearon)) + - [#5073](https://github.com/facebook/create-react-app/pull/5073) Add user defined proxy via middleware ([@Timer](https://github.com/Timer)) + - [#3945](https://github.com/facebook/create-react-app/pull/3945) Allow bundles to be analyzed with Webpack-specific tools ([@joshwcomeau](https://github.com/joshwcomeau)) + - [#4195](https://github.com/facebook/create-react-app/pull/4195) Sass loader ([@Fabianopb](https://github.com/Fabianopb)) + - [#3909](https://github.com/facebook/create-react-app/pull/3909) Add loader for .graphql files ([@petetnt](https://github.com/petetnt)) + - [#1288](https://github.com/facebook/create-react-app/pull/1288) Create git repository with initial commit ([@mauricedb](https://github.com/mauricedb)) + - [#3718](https://github.com/facebook/create-react-app/pull/3718) Import SVGs as React components (#1388) ([@iansu](https://github.com/iansu)) + - [#2285](https://github.com/facebook/create-react-app/pull/2285) Add support for CSS Modules with explicit filename - [name].module.css ([@ro-savage](https://github.com/ro-savage)) + - [#3804](https://github.com/facebook/create-react-app/pull/3804) Support Jest --watchAll flag ([@gaearon](https://github.com/gaearon)) + - [#3802](https://github.com/facebook/create-react-app/pull/3802) Add feature #3116 extended Jest config ([@garmeeh](https://github.com/garmeeh)) +- `react-dev-utils`, `react-scripts` + - [#5058](https://github.com/facebook/create-react-app/pull/5058) Inline the webpack runtime chunk ([@Timer](https://github.com/Timer)) +- `babel-preset-react-app` + - [#5047](https://github.com/facebook/create-react-app/pull/5047) Allow dynamic import proposal in node_modules ([@Timer](https://github.com/Timer)) + - [#3865](https://github.com/facebook/create-react-app/pull/3865) Add opt-out for preset-flow to work with @babel/preset-typescript ([@oieduardorabelo](https://github.com/oieduardorabelo)) + - [#3675](https://github.com/facebook/create-react-app/pull/3675) add experimental babel-plugin-macros support ([@kentcdodds](https://github.com/kentcdodds)) +- `babel-preset-react-app`, `confusing-browser-globals`, `eslint-config-react-app`, `react-dev-utils`, `react-error-overlay`, `react-scripts` + - [#4077](https://github.com/facebook/create-react-app/pull/4077) Webpack 4 ([@andriijas](https://github.com/andriijas)) +- `create-react-app` + - [#4350](https://github.com/facebook/create-react-app/pull/4350) Support package distribution tags ([@miraage](https://github.com/miraage)) +- `babel-preset-react-app`, `react-scripts` + - [#3776](https://github.com/facebook/create-react-app/pull/3776) Compile dependencies with babel-preset-env ([@gaearon](https://github.com/gaearon)) + +#### :boom: Breaking Change + +- `react-app-polyfill`, `react-scripts` + - [#5090](https://github.com/facebook/create-react-app/pull/5090) Drop IE 11 support by default ([@Timer](https://github.com/Timer)) +- `react-scripts` + - [#5074](https://github.com/facebook/create-react-app/pull/5074) Change default test environment to jsdom ([@Timer](https://github.com/Timer)) + - [#5027](https://github.com/facebook/create-react-app/pull/5027) Remove `mjs` support ([@Timer](https://github.com/Timer)) + - [#4009](https://github.com/facebook/create-react-app/pull/4009) Update dotenv to 5.0.0 ([@iansu](https://github.com/iansu)) + - [#2544](https://github.com/facebook/create-react-app/pull/2544) Set the public path to the asset manifest entries ([@robinvdvleuten](https://github.com/robinvdvleuten)) + - [#3884](https://github.com/facebook/create-react-app/pull/3884) Don't use app node_modules folder as a resolve fallback ([@gaearon](https://github.com/gaearon)) + - [#3817](https://github.com/facebook/create-react-app/pull/3817) Disable service worker by default ([@iansu](https://github.com/iansu)) + - [#2285](https://github.com/facebook/create-react-app/pull/2285) Add support for CSS Modules with explicit filename - [name].module.css ([@ro-savage](https://github.com/ro-savage)) + - [#3771](https://github.com/facebook/create-react-app/pull/3771) Add preflight check to guard against wrong versions of webpack/eslint/jest higher up the tree ([@gaearon](https://github.com/gaearon)) + - [#3346](https://github.com/facebook/create-react-app/pull/3346) Change the default `start_url` to `.` ([@evilchuck](https://github.com/evilchuck)) + - [#3419](https://github.com/facebook/create-react-app/pull/3419) Remove the navigateFallback behavior from the generated service worker ([@jeffposnick](https://github.com/jeffposnick)) + - [#3644](https://github.com/facebook/create-react-app/pull/3644) Move browsers to cross-tool config ([@ai](https://github.com/ai)) +- `react-dev-utils` + - [#5072](https://github.com/facebook/create-react-app/pull/5072) Drop support for advanced proxy ([@Timer](https://github.com/Timer)) +- `babel-preset-react-app` + - [#3818](https://github.com/facebook/create-react-app/pull/3818) Remove PropTypes from production build (#209) ([@iansu](https://github.com/iansu)) +- `eslint-config-react-app` + - [#2319](https://github.com/facebook/create-react-app/pull/2319) Changes no-unused-expressions lint from warning to error ([@amupitan](https://github.com/amupitan)) +- `eslint-config-react-app`, `react-error-overlay`, `react-scripts` + - [#2690](https://github.com/facebook/create-react-app/pull/2690) Bump eslint-plugin-jsx-a11y version ([@gaearon](https://github.com/gaearon)) +- `eslint-config-react-app`, `react-scripts` + - [#3121](https://github.com/facebook/create-react-app/pull/3121) Redisable require.ensure() ([@everdimension](https://github.com/everdimension)) + +#### :bug: Bug Fix + +- `react-scripts` + - [#5217](https://github.com/facebook/create-react-app/pull/5217) Verify more package versions ([@Timer](https://github.com/Timer)) + - [#5214](https://github.com/facebook/create-react-app/pull/5214) Fix absolute paths on eject ([@gaearon](https://github.com/gaearon)) + - [#5212](https://github.com/facebook/create-react-app/pull/5212) Don't crash npm test when hg/git are missing ([@gaearon](https://github.com/gaearon)) + - [#5197](https://github.com/facebook/create-react-app/pull/5197) Treat .css and .sass/.scss as side effectful ([@gaearon](https://github.com/gaearon)) + - [#5196](https://github.com/facebook/create-react-app/pull/5196) Format SVG React snapshots as tag with props ([@gaearon](https://github.com/gaearon)) + - [#5163](https://github.com/facebook/create-react-app/pull/5163) Correctly lookup assets when using a relative build directory ([@Timer](https://github.com/Timer)) + - [#5151](https://github.com/facebook/create-react-app/pull/5151) Toggle `mjs` files to `javascript/auto` type ([@Timer](https://github.com/Timer)) + - [#5131](https://github.com/facebook/create-react-app/pull/5131) Output CSS sourcemaps in separate file ([@Timer](https://github.com/Timer)) + - [#5043](https://github.com/facebook/create-react-app/pull/5043) Always lint with latest React version ([@Timer](https://github.com/Timer)) + - [#5030](https://github.com/facebook/create-react-app/pull/5030) Disable webpack chunk coalescing ([@Timer](https://github.com/Timer)) + - [#5027](https://github.com/facebook/create-react-app/pull/5027) Remove `mjs` support ([@Timer](https://github.com/Timer)) + - [#4706](https://github.com/facebook/create-react-app/pull/4706) Only use safe options when packing CSS assets ([@bugzpodder](https://github.com/bugzpodder)) + - [#4562](https://github.com/facebook/create-react-app/pull/4562) Configured the thread-loader to keeping workers alive in development mode ([@sadkovoy](https://github.com/sadkovoy)) + - [#4318](https://github.com/facebook/create-react-app/pull/4318) `.mjs` should not resolve before .js files (#4085) (#4317) ([@hobochild](https://github.com/hobochild)) + - [#4419](https://github.com/facebook/create-react-app/pull/4419) Map (s?css|sass) modules to identity-obj-proxy in jest ([@kusold](https://github.com/kusold)) + - [#4424](https://github.com/facebook/create-react-app/pull/4424) ensureSlash: Fix accidental string-to-NaN coercion ([@wchargin](https://github.com/wchargin)) + - [#4376](https://github.com/facebook/create-react-app/pull/4376) Update sass-loader (#4363) ([@miraage](https://github.com/miraage)) + - [#4247](https://github.com/facebook/create-react-app/pull/4247) Work around Jest environment resolving bug ([@gaearon](https://github.com/gaearon)) + - [#4234](https://github.com/facebook/create-react-app/pull/4234) [next] Revert to use ecma 5 in uglifyOptions ([@danielberndt](https://github.com/danielberndt)) + - [#2544](https://github.com/facebook/create-react-app/pull/2544) Set the public path to the asset manifest entries ([@robinvdvleuten](https://github.com/robinvdvleuten)) + - [#3992](https://github.com/facebook/create-react-app/pull/3992) Upgrade dotenv-expand to 4.2.0 (#3961) ([@iansu](https://github.com/iansu)) + - [#3989](https://github.com/facebook/create-react-app/pull/3989) add default value for globPatterns ([@viankakrisna](https://github.com/viankakrisna)) +- `react-error-overlay` + - [#5203](https://github.com/facebook/create-react-app/pull/5203) Fix IE 11 compatibility ([@Timer](https://github.com/Timer)) + - [#5198](https://github.com/facebook/create-react-app/pull/5198) Polyfill error overlay for IE9 support ([@Timer](https://github.com/Timer)) + - [#4024](https://github.com/facebook/create-react-app/pull/4024) Fix floating caret position incorrect while scrolling overlay ([@jihchi](https://github.com/jihchi)) +- `react-dev-utils` + - [#5184](https://github.com/facebook/create-react-app/pull/5184) Still emit runtime chunk ([@Timer](https://github.com/Timer)) + - [#5137](https://github.com/facebook/create-react-app/pull/5137) Fix displaying third party webpack plugins errors ([@Fer0x](https://github.com/Fer0x)) + - [#5134](https://github.com/facebook/create-react-app/pull/5134) Lists loader-utils in the dependencies ([@arcanis](https://github.com/arcanis)) + - [#5025](https://github.com/facebook/create-react-app/pull/5025) Fix/file size reporter ([@fiddep](https://github.com/fiddep)) + - [#4420](https://github.com/facebook/create-react-app/pull/4420) Update the thread loader test in formatWebpackMessages ([@marcofugaro](https://github.com/marcofugaro)) +- `babel-preset-react-app` + - [#5182](https://github.com/facebook/create-react-app/pull/5182) Strip flow syntax before any other transform ([@Timer](https://github.com/Timer)) + - [#4630](https://github.com/facebook/create-react-app/pull/4630) Eliminate regenerator from preset-react-app plugins ([@conartist6](https://github.com/conartist6)) + - [#5110](https://github.com/facebook/create-react-app/pull/5110) Add dynamic import transformer for dependencies in test env ([@lixiaoyan](https://github.com/lixiaoyan)) + - [#5052](https://github.com/facebook/create-react-app/pull/5052) Add Babel config sourceType: 'unambiguous' for dependencies ([@lixiaoyan](https://github.com/lixiaoyan)) + - [#5046](https://github.com/facebook/create-react-app/pull/5046) Correct Babel dependency behavior ([@Timer](https://github.com/Timer)) + - [#4248](https://github.com/facebook/create-react-app/pull/4248) Enable loose mode for `class-properties` ([@rgrochowicz](https://github.com/rgrochowicz)) +- `babel-preset-react-app`, `react-error-overlay`, `react-scripts` + - [#5142](https://github.com/facebook/create-react-app/pull/5142) Remove runtime alias hack ([@Timer](https://github.com/Timer)) +- `react-app-polyfill` + - [#5132](https://github.com/facebook/create-react-app/pull/5132) Don't polyfill fetch for Node ([@Timer](https://github.com/Timer)) +- `react-error-overlay`, `react-scripts` + - [#5109](https://github.com/facebook/create-react-app/pull/5109) Prevent Babel config overridden ([@lixiaoyan](https://github.com/lixiaoyan)) +- `babel-preset-react-app`, `react-scripts` + - [#5078](https://github.com/facebook/create-react-app/pull/5078) Prevent the cache of files using Babel Macros ([@Timer](https://github.com/Timer)) +- `react-dev-utils`, `react-error-overlay`, `react-scripts` + - [#5026](https://github.com/facebook/create-react-app/pull/5026) Switch from uglifyjs to terser ([@Timer](https://github.com/Timer)) +- `create-react-app` + - [#4677](https://github.com/facebook/create-react-app/pull/4677) Support scoped package names for scripts-version option in create-react-app cli ([@bugzpodder](https://github.com/bugzpodder)) + - [#2705](https://github.com/facebook/create-react-app/pull/2705) Don't delete error logs when install fails ([@mg](https://github.com/mg)) +- `react-dev-utils`, `react-scripts` + - [#4391](https://github.com/facebook/create-react-app/pull/4391) Update getCSSModuleLocalIdent to support Sass ([@arianon](https://github.com/arianon)) +- `babel-plugin-named-asset-import`, `babel-preset-react-app`, `eslint-config-react-app`, `react-dev-utils`, `react-error-overlay`, `react-scripts` + - [#4159](https://github.com/facebook/create-react-app/pull/4159) Bump babel-related deps ([@existentialism](https://github.com/existentialism)) +- `create-react-app`, `react-dev-utils`, `react-scripts` + - [#3997](https://github.com/facebook/create-react-app/pull/3997) Use yarn when running inside yarn workspace. ([@bradfordlemley](https://github.com/bradfordlemley)) + +#### :nail_care: Enhancement + +- `create-react-app`, `react-scripts` + - [#5136](https://github.com/facebook/create-react-app/pull/5136) Plug'n'Play support ([@arcanis](https://github.com/arcanis)) +- `react-dev-utils`, `react-scripts` + - [#5174](https://github.com/facebook/create-react-app/pull/5174) 💅 Polish webpack message output ([@Timer](https://github.com/Timer)) + - [#5065](https://github.com/facebook/create-react-app/pull/5065) (Micro) Optimize webpack rebuild speed ([@Timer](https://github.com/Timer)) + - [#5058](https://github.com/facebook/create-react-app/pull/5058) Inline the webpack runtime chunk ([@Timer](https://github.com/Timer)) + - [#4192](https://github.com/facebook/create-react-app/pull/4192) Update CSS Modules localIndetName ([@ro-savage](https://github.com/ro-savage)) + - [#3782](https://github.com/facebook/create-react-app/pull/3782) Tell user what browser support their application was built with ([@Timer](https://github.com/Timer)) +- `react-dev-utils` + - [#5150](https://github.com/facebook/create-react-app/pull/5150) Run behavioral smoke tests with Jest, add output tests ([@Timer](https://github.com/Timer)) + - [#4623](https://github.com/facebook/create-react-app/pull/4623) Use yarn build command in predeploy script if using yarn ([@alexbrazier](https://github.com/alexbrazier)) + - [#4470](https://github.com/facebook/create-react-app/pull/4470) Adjust browser defaults ([@Timer](https://github.com/Timer)) + - [#4001](https://github.com/facebook/create-react-app/pull/4001) Add support for new yarn workspaces config format ([@detrohutt](https://github.com/detrohutt)) + - [#3980](https://github.com/facebook/create-react-app/pull/3980) Autodetect GoLand editor ([@ifedyukin](https://github.com/ifedyukin)) + - [#3808](https://github.com/facebook/create-react-app/pull/3808) Use wmic to get process list on Windows ([@levrik](https://github.com/levrik)) +- `react-scripts` + - [#4169](https://github.com/facebook/create-react-app/pull/4169) Workbox service worker ([@davejm](https://github.com/davejm)) + - [#5096](https://github.com/facebook/create-react-app/pull/5096) Disable source maps for node_modules ([@Timer](https://github.com/Timer)) + - [#4716](https://github.com/facebook/create-react-app/pull/4716) add postcss-preset-env, remove autoprefixer ([@heygrady](https://github.com/heygrady)) + - [#1457](https://github.com/facebook/create-react-app/pull/1457) Add eslintConfig to new projects automatically ([@lifeiscontent](https://github.com/lifeiscontent)) + - [#5030](https://github.com/facebook/create-react-app/pull/5030) Disable webpack chunk coalescing ([@Timer](https://github.com/Timer)) + - [#4582](https://github.com/facebook/create-react-app/pull/4582) Added thread-loader tweak for application code entry-point ([@sadkovoy](https://github.com/sadkovoy)) + - [#4562](https://github.com/facebook/create-react-app/pull/4562) Configured the thread-loader to keeping workers alive in development mode ([@sadkovoy](https://github.com/sadkovoy)) + - [#4504](https://github.com/facebook/create-react-app/pull/4504) webpack 4 scope hoisting ([@bugzpodder](https://github.com/bugzpodder)) + - [#4461](https://github.com/facebook/create-react-app/pull/4461) Update svgr ([@iansu](https://github.com/iansu)) + - [#3867](https://github.com/facebook/create-react-app/pull/3867) Provide callbacks in serviceWorker (next) ([@piotr-cz](https://github.com/piotr-cz)) + - [#3235](https://github.com/facebook/create-react-app/pull/3235) Applies new theme and adds docs link to template ([@lukejacksonn](https://github.com/lukejacksonn)) + - [#3512](https://github.com/facebook/create-react-app/pull/3512) Enhance Jest config error for `setupTestFrameworkScriptFile` ([@jackfranklin](https://github.com/jackfranklin)) + - [#3778](https://github.com/facebook/create-react-app/pull/3778) Compile code in parallel ([@Timer](https://github.com/Timer)) + - [#3771](https://github.com/facebook/create-react-app/pull/3771) Add preflight check to guard against wrong versions of webpack/eslint/jest higher up the tree ([@gaearon](https://github.com/gaearon)) + - [#3618](https://github.com/facebook/create-react-app/pull/3618) use uglifyjs-webpack-plugin v1 ([@viankakrisna](https://github.com/viankakrisna)) +- `babel-preset-react-app`, `react-error-overlay`, `react-scripts` + - [#5093](https://github.com/facebook/create-react-app/pull/5093) Turn on Babel `helpers` ([@Timer](https://github.com/Timer)) +- `react-dev-utils`, `react-error-overlay`, `react-scripts` + - [#4930](https://github.com/facebook/create-react-app/pull/4930) Switch from cheap-module-source-map eval-source-map ([@jasonLaster](https://github.com/jasonLaster)) + - [#3124](https://github.com/facebook/create-react-app/pull/3124) update jest to 22 and support watchPathIgnorePatterns configuration ([@aisensiy](https://github.com/aisensiy)) +- `confusing-browser-globals`, `react-dev-utils`, `react-error-overlay`, `react-scripts` + - [#4846](https://github.com/facebook/create-react-app/pull/4846) Update jest version ([@skoging](https://github.com/skoging)) + - [#4362](https://github.com/facebook/create-react-app/pull/4362) Bumped jest version to 22.4.1 ([@CGreenburg](https://github.com/CGreenburg)) +- `babel-preset-react-app`, `confusing-browser-globals`, `eslint-config-react-app`, `react-dev-utils`, `react-error-overlay`, `react-scripts` + - [#4077](https://github.com/facebook/create-react-app/pull/4077) Webpack 4 ([@andriijas](https://github.com/andriijas)) +- `babel-preset-react-app` + - [#4432](https://github.com/facebook/create-react-app/pull/4432) Update babel-plugin-macros to fix a bug ([@stereobooster](https://github.com/stereobooster)) + - [#3818](https://github.com/facebook/create-react-app/pull/3818) Remove PropTypes from production build (#209) ([@iansu](https://github.com/iansu)) +- `create-react-app` + - [#4375](https://github.com/facebook/create-react-app/pull/4375) fix: update envinfo + implementation, update issue_template ([@tabrindle](https://github.com/tabrindle)) +- `eslint-config-react-app`, `react-error-overlay`, `react-scripts` + - [#4048](https://github.com/facebook/create-react-app/pull/4048) Add ESLint check for incorrect propTypes usage (#3840) ([@iansu](https://github.com/iansu)) + - [#2690](https://github.com/facebook/create-react-app/pull/2690) Bump eslint-plugin-jsx-a11y version ([@gaearon](https://github.com/gaearon)) +- `eslint-config-react-app` + - [#3844](https://github.com/facebook/create-react-app/pull/3844) remove radix eslint rule ([@sendilkumarn](https://github.com/sendilkumarn)) +- `create-react-app`, `react-dev-utils`, `react-scripts` + - [#3792](https://github.com/facebook/create-react-app/pull/3792) Offer to set default browsers ([@Timer](https://github.com/Timer)) +- `babel-preset-react-app`, `create-react-app`, `react-dev-utils`, `react-error-overlay`, `react-scripts` + - [#3785](https://github.com/facebook/create-react-app/pull/3785) Bump dependencies ([@gaearon](https://github.com/gaearon)) +- `babel-preset-react-app`, `react-scripts` + - [#3770](https://github.com/facebook/create-react-app/pull/3770) Loosen Babel preset to use browserslist ([@Timer](https://github.com/Timer)) +- `babel-preset-react-app`, `eslint-config-react-app`, `react-dev-utils`, `react-error-overlay`, `react-scripts` + - [#3522](https://github.com/facebook/create-react-app/pull/3522) Switch to Babel 7 ([@clemmy](https://github.com/clemmy)) + +#### :memo: Documentation + +- `react-scripts` + - [#5211](https://github.com/facebook/create-react-app/pull/5211) Adds instructions to README on how to customize Bootstrap with Sass ([@mslooten](https://github.com/mslooten)) + - [#5147](https://github.com/facebook/create-react-app/pull/5147) Document adding SVGs as React components ([@mareksuscak](https://github.com/mareksuscak)) + - [#5193](https://github.com/facebook/create-react-app/pull/5193) Fix typo in 'Configuring the Proxy Manually' ([@fabriziocucci](https://github.com/fabriziocucci)) + - [#5111](https://github.com/facebook/create-react-app/pull/5111) Updates to README to reflect Workbox usage. ([@jeffposnick](https://github.com/jeffposnick)) + - [#5169](https://github.com/facebook/create-react-app/pull/5169) Add additional troubleshooting for Github Pages ([@dwang](https://github.com/dwang)) + - [#5145](https://github.com/facebook/create-react-app/pull/5145) Mention .module.scss/sass convention ([@mareksuscak](https://github.com/mareksuscak)) + - [#5105](https://github.com/facebook/create-react-app/pull/5105) as per #5104 ([@sag1v](https://github.com/sag1v)) + - [#5071](https://github.com/facebook/create-react-app/pull/5071) Update usage advice of husky to 1.0 ([@martinlechner1](https://github.com/martinlechner1)) + - [#5077](https://github.com/facebook/create-react-app/pull/5077) small typo fix ([@tteltrab](https://github.com/tteltrab)) + - [#5070](https://github.com/facebook/create-react-app/pull/5070) Integrating with an API Backend: add API Platform ([@dunglas](https://github.com/dunglas)) + - [#5064](https://github.com/facebook/create-react-app/pull/5064) fix minor typo in troubleshooting github pages ([@kaznovac](https://github.com/kaznovac)) + - [#5035](https://github.com/facebook/create-react-app/pull/5035) Remove paywalled tutorial link for Storybook ([@imgntn](https://github.com/imgntn)) + - [#3924](https://github.com/facebook/create-react-app/pull/3924) Updates to reflect service worker registration being opt-in. ([@jeffposnick](https://github.com/jeffposnick)) + - [#4881](https://github.com/facebook/create-react-app/pull/4881) flowtype.org -> flow.org ([@web2033](https://github.com/web2033)) + - [#4825](https://github.com/facebook/create-react-app/pull/4825) Update support info for service workers ([@j-f1](https://github.com/j-f1)) + - [#4738](https://github.com/facebook/create-react-app/pull/4738) Fix typo ([@mjw56](https://github.com/mjw56)) + - [#4741](https://github.com/facebook/create-react-app/pull/4741) remove extra dot on devtool link comment ([@shelldandy](https://github.com/shelldandy)) + - [#4703](https://github.com/facebook/create-react-app/pull/4703) Suggest `reactstrap` instead of `react-bootstrap` ([@zx6658](https://github.com/zx6658)) + - [#4566](https://github.com/facebook/create-react-app/pull/4566) Move whitespace comment closer to where it applies ([@mgedmin](https://github.com/mgedmin)) + - [#4497](https://github.com/facebook/create-react-app/pull/4497) [Read Me template patch] Warn about #871 until it's actually fixed. ([@saimonmoore](https://github.com/saimonmoore)) + - [#4205](https://github.com/facebook/create-react-app/pull/4205) Chokidar Updates ([@originell](https://github.com/originell)) + - [#4286](https://github.com/facebook/create-react-app/pull/4286) Fix some typos in README.md ([@apaatsio](https://github.com/apaatsio)) + - [#4298](https://github.com/facebook/create-react-app/pull/4298) Added learnstorybook.com to Storybook links ([@tmeasday](https://github.com/tmeasday)) + - [#4117](https://github.com/facebook/create-react-app/pull/4117) Document multiple build environments via `env-cmd` #4071 ([@jMuzsik](https://github.com/jMuzsik)) + - [#4197](https://github.com/facebook/create-react-app/pull/4197) Add troubleshooting for Github Pages ([@xnt](https://github.com/xnt)) + - [#4236](https://github.com/facebook/create-react-app/pull/4236) use the lastest url of gitignore file ([@Plortinus](https://github.com/Plortinus)) + - [#4239](https://github.com/facebook/create-react-app/pull/4239) Fix typo in comment and be clearer about `ecma` settings in uglifyjs options ([@danielberndt](https://github.com/danielberndt)) + - [#4164](https://github.com/facebook/create-react-app/pull/4164) Fix typos in example monorepo documentation. ([@bradfordlemley](https://github.com/bradfordlemley)) + - [#4089](https://github.com/facebook/create-react-app/pull/4089) Fix a typo in packages/react-scripts/template/README.md ([@nott](https://github.com/nott)) + - [#4101](https://github.com/facebook/create-react-app/pull/4101) Docs: Update status of Object Rest/Spread proposal ([@jpaquim](https://github.com/jpaquim)) + - [#4107](https://github.com/facebook/create-react-app/pull/4107) docs: use node_js 8 in example travis.yml ([@nikolas2](https://github.com/nikolas2)) + - [#3821](https://github.com/facebook/create-react-app/pull/3821) Updated react-scripts Readme.md to better document GitHub Pages ([@EdwaRen](https://github.com/EdwaRen)) +- Other + - [#5102](https://github.com/facebook/create-react-app/pull/5102) Fix Troubleshooting link ([@gdi2290](https://github.com/gdi2290)) + - [#4551](https://github.com/facebook/create-react-app/pull/4551) Update targeted IE version in documentation ([@antzshrek](https://github.com/antzshrek)) + - [#4814](https://github.com/facebook/create-react-app/pull/4814) Update CODE_OF_CONDUCT.md ([@Ashleyotero](https://github.com/Ashleyotero)) + - [#4638](https://github.com/facebook/create-react-app/pull/4638) Add instructions on alternative methods of app creation ([@RusinovAnton](https://github.com/RusinovAnton)) + - [#4546](https://github.com/facebook/create-react-app/pull/4546) Update file tree view ([@antzshrek](https://github.com/antzshrek)) + - [#4449](https://github.com/facebook/create-react-app/pull/4449) add create-react-app-parcel to Alternatives section in README ([@sw-yx](https://github.com/sw-yx)) + - [#4294](https://github.com/facebook/create-react-app/pull/4294) documentation: added License to the README.md ([@thiagopaiva99](https://github.com/thiagopaiva99)) + - [#4323](https://github.com/facebook/create-react-app/pull/4323) Fix typo in e2e-simple.sh comment ([@bmuenzenmeyer](https://github.com/bmuenzenmeyer)) + - [#4134](https://github.com/facebook/create-react-app/pull/4134) fix: Minor typos ([@fejes713](https://github.com/fejes713)) + - [#4114](https://github.com/facebook/create-react-app/pull/4114) Update CONTRIBUTING.md ([@jkzing](https://github.com/jkzing)) + - [#3825](https://github.com/facebook/create-react-app/pull/3825) Add svg rendering for error example ([@marionebl](https://github.com/marionebl)) + - [#3810](https://github.com/facebook/create-react-app/pull/3810) Update screencast to use npx ([@marionebl](https://github.com/marionebl)) +- `create-react-app` + - [#4309](https://github.com/facebook/create-react-app/pull/4309) Fix typo to word bootstrapped in condition to check for old version o… ([@jamesvsshark](https://github.com/jamesvsshark)) + - [#4015](https://github.com/facebook/create-react-app/pull/4015) add `create-react-app --help` info for local file path `--scripts-version` support ([@albertstill](https://github.com/albertstill)) +- `react-dev-utils`, `react-scripts` + - [#3836](https://github.com/facebook/create-react-app/pull/3836) Use custom bit.ly links ([@bondz](https://github.com/bondz)) + +#### :house: Internal + +- `eslint-config-react-app` + - [#5205](https://github.com/facebook/create-react-app/pull/5205) Disable react/no-deprecated rule ([@Timer](https://github.com/Timer)) + - [#5051](https://github.com/facebook/create-react-app/pull/5051) Adjust ESLint configuration for v5 ([@Timer](https://github.com/Timer)) + - [#4187](https://github.com/facebook/create-react-app/pull/4187) Change no-unused-vars 'args' from none to all to show warning on dest… ([@goncy](https://github.com/goncy)) +- `babel-plugin-named-asset-import`, `babel-preset-react-app`, `confusing-browser-globals`, `create-react-app`, `eslint-config-react-app`, `react-app-polyfill`, `react-dev-utils`, `react-error-overlay`, `react-scripts` + - [#5192](https://github.com/facebook/create-react-app/pull/5192) Add license file to all packages ([@Timer](https://github.com/Timer)) +- Other + - [#5183](https://github.com/facebook/create-react-app/pull/5183) Test class properties ([@Timer](https://github.com/Timer)) + - [#5146](https://github.com/facebook/create-react-app/pull/5146) Add behavior e2e tests ([@Timer](https://github.com/Timer)) + - [#4774](https://github.com/facebook/create-react-app/pull/4774) [internal] Use Yarn cache for travis ([@bugzpodder](https://github.com/bugzpodder)) + - [#4626](https://github.com/facebook/create-react-app/pull/4626) [internal] Fix node 10 test issue ([@bugzpodder](https://github.com/bugzpodder)) + - [#3816](https://github.com/facebook/create-react-app/pull/3816) Automate screencast recordings ([@marionebl](https://github.com/marionebl)) +- `react-scripts` + - [#5180](https://github.com/facebook/create-react-app/pull/5180) Fetch Workbox from CDN ([@Timer](https://github.com/Timer)) + - [#5170](https://github.com/facebook/create-react-app/pull/5170) Remove thread-loader ([@Timer](https://github.com/Timer)) + - [#5157](https://github.com/facebook/create-react-app/pull/5157) Forwards args through thread-loader ([@arcanis](https://github.com/arcanis)) + - [#5085](https://github.com/facebook/create-react-app/pull/5085) Remove highlightCode:true because it's now the default ([@marcofugaro](https://github.com/marcofugaro)) + - [#5098](https://github.com/facebook/create-react-app/pull/5098) [internal] remove babelrc dependency for kitchensink test ([@bugzpodder](https://github.com/bugzpodder)) + - [#5076](https://github.com/facebook/create-react-app/pull/5076) Revert "Add loader for .graphql files (#3909)" ([@Timer](https://github.com/Timer)) + - [#5062](https://github.com/facebook/create-react-app/pull/5062) Upgrade svgr to v2 and disable Prettier & SVGO ([@Timer](https://github.com/Timer)) + - [#5059](https://github.com/facebook/create-react-app/pull/5059) Switch back to cheap-module-source-map ([@jasonLaster](https://github.com/jasonLaster)) + - [#4891](https://github.com/facebook/create-react-app/pull/4891) Move favicon.ico to accommodate Chrome ([@thejohnfreeman](https://github.com/thejohnfreeman)) + - [#5053](https://github.com/facebook/create-react-app/pull/5053) Normalize babel caching across the board ([@Timer](https://github.com/Timer)) + - [#4550](https://github.com/facebook/create-react-app/pull/4550) Jest 23 and tests ([@bugzpodder](https://github.com/bugzpodder)) + - [#5043](https://github.com/facebook/create-react-app/pull/5043) Always lint with latest React version ([@Timer](https://github.com/Timer)) + - [#4955](https://github.com/facebook/create-react-app/pull/4955) Update webpack-dev-server 3.1.5 → 3.1.7 ([@addaleax](https://github.com/addaleax)) + - [#4776](https://github.com/facebook/create-react-app/pull/4776) Bump babel-loader to fix npm warning ([@frenzzy](https://github.com/frenzzy)) + - [#4767](https://github.com/facebook/create-react-app/pull/4767) [internal] Separate out kitchensink test into two ([@bugzpodder](https://github.com/bugzpodder)) + - [#4014](https://github.com/facebook/create-react-app/pull/4014) enable manifest plugin on dev ([@viankakrisna](https://github.com/viankakrisna)) + - [#4435](https://github.com/facebook/create-react-app/pull/4435) Update paths.js, rename shadow path variable ([@graemecode](https://github.com/graemecode)) + - [#4331](https://github.com/facebook/create-react-app/pull/4331) Bump `fsevents`. ([@wtgtybhertgeghgtwtg](https://github.com/wtgtybhertgeghgtwtg)) + - [#4174](https://github.com/facebook/create-react-app/pull/4174) Yarn workspace transpilation verification. ([@bradfordlemley](https://github.com/bradfordlemley)) + - [#3842](https://github.com/facebook/create-react-app/pull/3842) fix small grammatical typo in webpack config documentation ([@andrewerrico](https://github.com/andrewerrico)) +- `react-dev-utils` + - [#5150](https://github.com/facebook/create-react-app/pull/5150) Run behavioral smoke tests with Jest, add output tests ([@Timer](https://github.com/Timer)) + - [#4514](https://github.com/facebook/create-react-app/pull/4514) Make Sass missing message friendlier ([@Timer](https://github.com/Timer)) + - [#4138](https://github.com/facebook/create-react-app/pull/4138) Allow ModuleScopePlugin accecpts an array as its appSrc ([@froyog](https://github.com/froyog)) + - [#4016](https://github.com/facebook/create-react-app/pull/4016) (chore): Alphabetize and clean files-array in react-dev-utils package.json ([@petetnt](https://github.com/petetnt)) +- `babel-preset-react-app`, `react-error-overlay`, `react-scripts` + - [#5143](https://github.com/facebook/create-react-app/pull/5143) Switch back to babel-loader ([@iansu](https://github.com/iansu)) +- `babel-preset-react-app` + - [#5119](https://github.com/facebook/create-react-app/pull/5119) Clean up @babel/plugin-transform-regenerator ([@lixiaoyan](https://github.com/lixiaoyan)) + - [#5033](https://github.com/facebook/create-react-app/pull/5033) Lock babel configuration back to IE 9 support (ES5) ([@Timer](https://github.com/Timer)) +- `react-dev-utils`, `react-scripts` + - [#5091](https://github.com/facebook/create-react-app/pull/5091) Allow stage 3 css transforms ([@Timer](https://github.com/Timer)) + - [#5054](https://github.com/facebook/create-react-app/pull/5054) Ensure Babel files get purged on upgrades ([@Timer](https://github.com/Timer)) + - [#5031](https://github.com/facebook/create-react-app/pull/5031) Upgrade `html-webpack-plugin` to fix tests ([@Timer](https://github.com/Timer)) +- `babel-preset-react-app`, `create-react-app`, `react-dev-utils`, `react-error-overlay`, `react-scripts` + - [#5080](https://github.com/facebook/create-react-app/pull/5080) Update tons of packages ([@Timer](https://github.com/Timer)) +- `react-error-overlay`, `react-scripts` + - [#5050](https://github.com/facebook/create-react-app/pull/5050) Eslint 5.6 ([@bugzpodder](https://github.com/bugzpodder)) +- `babel-plugin-named-asset-import`, `babel-preset-react-app`, `react-dev-utils`, `react-error-overlay`, `react-scripts` + - [#5042](https://github.com/facebook/create-react-app/pull/5042) Upgrade to Babel 7 stable ([@Timer](https://github.com/Timer)) + - [#4253](https://github.com/facebook/create-react-app/pull/4253) Upgrade Babel to `beta.44` ([@andriijas](https://github.com/andriijas)) +- `confusing-browser-globals`, `react-dev-utils`, `react-error-overlay`, `react-scripts` + - [#5032](https://github.com/facebook/create-react-app/pull/5032) Upgrade `react-scripts` dependencies ([@Timer](https://github.com/Timer)) +- `react-dev-utils`, `react-error-overlay`, `react-scripts` + - [#5026](https://github.com/facebook/create-react-app/pull/5026) Switch from uglifyjs to terser ([@Timer](https://github.com/Timer)) +- `create-react-app` + - [#4383](https://github.com/facebook/create-react-app/pull/4383) Add Node 10 to Travis config and remove Node 6 ([@iansu](https://github.com/iansu)) + - [#3853](https://github.com/facebook/create-react-app/pull/3853) pin envinfo version to 3.4.2 ([@bondz](https://github.com/bondz)) +- `react-error-overlay` + - [#4211](https://github.com/facebook/create-react-app/pull/4211) Revert lint-related changes made in #4193 ([@NMinhNguyen](https://github.com/NMinhNguyen)) + - [#4193](https://github.com/facebook/create-react-app/pull/4193) Minor fixes to CI ([@ro-savage](https://github.com/ro-savage)) +- `confusing-browser-globals`, `eslint-config-react-app` + - [#2286](https://github.com/facebook/create-react-app/pull/2286) Add restricted globals package ([@sidoshi](https://github.com/sidoshi)) +- `eslint-config-react-app`, `react-scripts` + - [#3723](https://github.com/facebook/create-react-app/pull/3723) Updating ESlint to ^4.15.0 and adding new rules to config ([@chrislaughlin](https://github.com/chrislaughlin)) + +#### Committers: 116 + +- A.J. Roberts ([@detrohutt](https://github.com/detrohutt)) +- Aaron Reisman ([@lifeiscontent](https://github.com/lifeiscontent)) +- Ade Viankakrisna Fadlil ([@viankakrisna](https://github.com/viankakrisna)) +- Albert Still ([@albertstill](https://github.com/albertstill)) +- Alex Brazier ([@alexbrazier](https://github.com/alexbrazier)) +- Andreas Cederström ([@andriijas](https://github.com/andriijas)) +- Andrew ([@andrewerrico](https://github.com/andrewerrico)) +- Andrew Clark ([@acdlite](https://github.com/acdlite)) +- Andrew Ho ([@andrwh](https://github.com/andrwh)) +- Andrey Sitnik ([@ai](https://github.com/ai)) +- Anna Henningsen ([@addaleax](https://github.com/addaleax)) +- Anton Rusinov ([@RusinovAnton](https://github.com/RusinovAnton)) +- Antti Ahti ([@apaatsio](https://github.com/apaatsio)) +- Ashley Otero ([@Ashleyotero](https://github.com/Ashleyotero)) +- Bond ([@bondz](https://github.com/bondz)) +- Bradford Lemley ([@bradfordlemley](https://github.com/bradfordlemley)) +- Brian Muenzenmeyer ([@bmuenzenmeyer](https://github.com/bmuenzenmeyer)) +- Brian Ng ([@existentialism](https://github.com/existentialism)) +- Chad Greenburg ([@CGreenburg](https://github.com/CGreenburg)) +- Chris Laughlin ([@chrislaughlin](https://github.com/chrislaughlin)) +- Clement Hoang ([@clemmy](https://github.com/clemmy)) +- Conrad Buck ([@conartist6](https://github.com/conartist6)) +- Craig Mulligan ([@hobochild](https://github.com/hobochild)) +- Dan Abramov ([@gaearon](https://github.com/gaearon)) +- Daniel ([@danielberndt](https://github.com/danielberndt)) +- Daniel Wang ([@dwang](https://github.com/dwang)) +- David Moodie ([@davejm](https://github.com/davejm)) +- Dmitriy Sadkovoy ([@sadkovoy](https://github.com/sadkovoy)) +- Eduardo Rabelo ([@oieduardorabelo](https://github.com/oieduardorabelo)) +- Edward Ren (Eddie) ([@EdwaRen](https://github.com/EdwaRen)) +- Ernesto García ([@gnapse](https://github.com/gnapse)) +- Eugene Kopich ([@web2033](https://github.com/web2033)) +- Fabiano Brito ([@Fabianopb](https://github.com/Fabianopb)) +- Fabrizio Cucci ([@fabriziocucci](https://github.com/fabriziocucci)) +- Fredrik Palmquist ([@fiddep](https://github.com/fiddep)) +- Futa Ogawa ([@ogawa0071](https://github.com/ogawa0071)) +- Gary Meehan ([@garmeeh](https://github.com/garmeeh)) +- Gonzalo Pozzo ([@goncy](https://github.com/goncy)) +- Grady Kuhnline ([@heygrady](https://github.com/heygrady)) +- Graeme ([@graemecode](https://github.com/graemecode)) +- Harry Moreno ([@morenoh149](https://github.com/morenoh149)) +- Ian Sutherland ([@iansu](https://github.com/iansu)) +- Ideveloper ([@zx6658](https://github.com/zx6658)) +- Igor Fedyukin ([@ifedyukin](https://github.com/ifedyukin)) +- Irvin Denzel Torcuato ([@identor](https://github.com/identor)) +- JK ([@jkzing](https://github.com/jkzing)) +- Jack Franklin ([@jackfranklin](https://github.com/jackfranklin)) +- Jack Zhao ([@bugzpodder](https://github.com/bugzpodder)) +- James B. Pollack ([@imgntn](https://github.com/imgntn)) +- James Simoes ([@jamesvsshark](https://github.com/jamesvsshark)) +- Jason Laster ([@jasonLaster](https://github.com/jasonLaster)) +- Jed Fox ([@j-f1](https://github.com/j-f1)) +- Jeffrey Posnick ([@jeffposnick](https://github.com/jeffposnick)) +- Jerry ([@jMuzsik](https://github.com/jMuzsik)) +- Jih-Chi Lee ([@jihchi](https://github.com/jihchi)) +- Joe Haddad ([@Timer](https://github.com/Timer)) +- Joel George V ([@joelgeorgev](https://github.com/joelgeorgev)) +- John Freeman ([@thejohnfreeman](https://github.com/thejohnfreeman)) +- Joshua Comeau ([@joshwcomeau](https://github.com/joshwcomeau)) +- João Paquim ([@jpaquim](https://github.com/jpaquim)) +- Kent C. Dodds ([@kentcdodds](https://github.com/kentcdodds)) +- Kévin Dunglas ([@dunglas](https://github.com/dunglas)) +- Levin Rickert ([@levrik](https://github.com/levrik)) +- Luis Nell ([@originell](https://github.com/originell)) +- Luke Jackson ([@lukejacksonn](https://github.com/lukejacksonn)) +- Maciej Kasprzyk ([@maciej-ka](https://github.com/maciej-ka)) +- Magnús Örn Gylfason ([@mg](https://github.com/mg)) +- Marco Fugaro ([@marcofugaro](https://github.com/marcofugaro)) +- Marco Slooten ([@mslooten](https://github.com/mslooten)) +- Marek Suscak ([@mareksuscak](https://github.com/mareksuscak)) +- Mario Nebl ([@marionebl](https://github.com/marionebl)) +- Marius Gedminas ([@mgedmin](https://github.com/mgedmin)) +- Marko Kaznovac ([@kaznovac](https://github.com/kaznovac)) +- Martin Lechner ([@martinlechner1](https://github.com/martinlechner1)) +- Maurice de Beijer ([@mauricedb](https://github.com/mauricedb)) +- Maël Nison ([@arcanis](https://github.com/arcanis)) +- Michaël De Boey ([@MichaelDeBoey](https://github.com/MichaelDeBoey)) +- Miguel Palau ([@shelldandy](https://github.com/shelldandy)) +- Mike Kusold ([@kusold](https://github.com/kusold)) +- Mike Wilcox ([@mjw56](https://github.com/mjw56)) +- Mikhail Osher ([@miraage](https://github.com/miraage)) +- Minh Nguyen ([@NMinhNguyen](https://github.com/NMinhNguyen)) +- Nick Bartlett ([@tteltrab](https://github.com/tteltrab)) +- PatrickJS ([@gdi2290](https://github.com/gdi2290)) +- Pete Nykänen ([@petetnt](https://github.com/petetnt)) +- Piotr ([@piotr-cz](https://github.com/piotr-cz)) +- Rami ([@evilchuck](https://github.com/evilchuck)) +- Reuben Antz ([@antzshrek](https://github.com/antzshrek)) +- Ro Savage ([@ro-savage](https://github.com/ro-savage)) +- Rob Grochowicz ([@rgrochowicz](https://github.com/rgrochowicz)) +- Robin van der Vleuten ([@robinvdvleuten](https://github.com/robinvdvleuten)) +- Sagiv ben giat ([@sag1v](https://github.com/sag1v)) +- Saimon Moore ([@saimonmoore](https://github.com/saimonmoore)) +- Sendil Kumar N ([@sendilkumarn](https://github.com/sendilkumarn)) +- Siddharth Doshi ([@sidoshi](https://github.com/sidoshi)) +- Stas Rudakou ([@nott](https://github.com/nott)) +- Stefan Feješ ([@fejes713](https://github.com/fejes713)) +- Thiago Galvani ([@thiagopaiva99](https://github.com/thiagopaiva99)) +- Tom Coleman ([@tmeasday](https://github.com/tmeasday)) +- Tore Hammervoll ([@skoging](https://github.com/skoging)) +- Trevor Brindle ([@tabrindle](https://github.com/tabrindle)) +- Vicente Plata ([@xnt](https://github.com/xnt)) +- Victor Amupitan ([@amupitan](https://github.com/amupitan)) +- Viktor Havrylin ([@Fer0x](https://github.com/Fer0x)) +- Vladimir Kutepov ([@frenzzy](https://github.com/frenzzy)) +- William Chargin ([@wchargin](https://github.com/wchargin)) +- XiaoYan Li ([@lixiaoyan](https://github.com/lixiaoyan)) +- [@Plortinus](https://github.com/Plortinus) +- [@arianon](https://github.com/arianon) +- [@everdimension](https://github.com/everdimension) +- [@nikolas2](https://github.com/nikolas2) +- [@stereobooster](https://github.com/stereobooster) +- [@wtgtybhertgeghgtwtg](https://github.com/wtgtybhertgeghgtwtg) +- aisensiy ([@aisensiy](https://github.com/aisensiy)) +- froyog ([@froyog](https://github.com/froyog)) +- shawn wang ([@sw-yx](https://github.com/sw-yx)) + +## Releases Before 2.x + +Please refer to [CHANGELOG-1.x.md](./CHANGELOG-1.x.md) for earlier versions. diff --git a/CHANGELOG.md b/CHANGELOG.md index 3fb016f2137..8d33a7bc6a1 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,949 +1,344 @@ -## 2.1.1 (October 31, 2018) +## 3.0.1 (2019-05-08) -Happy Halloween 🎃 👻! This spooky release brings a treat: decorator support in TypeScript files! +v3.0.1 is a maintenance release that adjusts some ESLint rules for TypeScript along with other minor bug fixes and documentation updates. -#### :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 +#### :boom: Breaking Change - `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: - -```bash -npm install --save --save-exact react-scripts@2.1.1 -``` - -or - -``` -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 -$ npx create-react-app my-app --typescript -``` - -#### :rocket: New Feature - -- `create-react-app`, `react-scripts` - - [#5550](https://github.com/facebook/create-react-app/pull/5550) Add TypeScript app creation ([@Timer](https://github.com/Timer)) -- `babel-preset-react-app`, `react-scripts` - - [#4837](https://github.com/facebook/create-react-app/pull/4837) TypeScript support using Babel 7 ([@brunolemos](https://github.com/brunolemos)) + - [#6887](https://github.com/facebook/create-react-app/pull/6887) Update dependencies of Babel preset with recent changes ([@skoging](https://github.com/skoging)) #### :bug: Bug Fix -- `react-scripts` - - [#5611](https://github.com/facebook/create-react-app/pull/5611) Remove react-scripts type reference on eject. ([@Timer](https://github.com/Timer)) - - [#5614](https://github.com/facebook/create-react-app/pull/5614) Ignore json files from TypeScript type checking. ([@brunolemos](https://github.com/brunolemos)) - - [#5609](https://github.com/facebook/create-react-app/pull/5609) Remove unsupported options. ([@Timer](https://github.com/Timer)) - - [#5608](https://github.com/facebook/create-react-app/pull/5608) Ignore test files from reported type errors. ([@Timer](https://github.com/Timer)) - - [#5589](https://github.com/facebook/create-react-app/pull/5589) Update react-app.d.ts. ([@brunolemos](https://github.com/brunolemos)) - - [#5557](https://github.com/facebook/create-react-app/pull/5557) Add typings for process.env. ([@brunolemos](https://github.com/brunolemos)) - - [#5532](https://github.com/facebook/create-react-app/pull/5532) Use TypeScript parser to read tsconfig.json. ([@brunolemos](https://github.com/brunolemos)) - - [#5527](https://github.com/facebook/create-react-app/pull/5527) Update Workbox dependency. ([@jeffposnick](https://github.com/jeffposnick)) -- `react-dev-utils`, `react-scripts` - - [#5549](https://github.com/facebook/create-react-app/pull/5549) Automatically setup TypeScript when detected. ([@Timer](https://github.com/Timer)) - - [#5537](https://github.com/facebook/create-react-app/pull/5537) Respect tsconfig.json extends when validating config. ([@ianschmitz](https://github.com/ianschmitz)) - -#### :nail_care: Enhancement - -- `create-react-app`, `react-scripts` - - [#5593](https://github.com/facebook/create-react-app/pull/5593) Refine how TypeScript types are handled. ([@Timer](https://github.com/Timer)) -- `react-scripts` - - [#5531](https://github.com/facebook/create-react-app/pull/5531) Enable TypeScript json module resolver. ([@brunolemos](https://github.com/brunolemos)) - - [#5524](https://github.com/facebook/create-react-app/pull/5524) Validate tsconfig when using TypeScript. ([@Timer](https://github.com/Timer)) - - [#5516](https://github.com/facebook/create-react-app/pull/5516) Check for TypeScript install in preflight. ([@Timer](https://github.com/Timer)) - - [#5515](https://github.com/facebook/create-react-app/pull/5515) Always type check TypeScript when being used. ([@Timer](https://github.com/Timer)) -- `react-dev-utils`, `react-scripts` - - [#5529](https://github.com/facebook/create-react-app/pull/5529) Add TypeScript error formatting. ([@Timer](https://github.com/Timer)) - -#### :memo: Documentation - -- Other - - [#5552](https://github.com/facebook/create-react-app/pull/5552) Fixing Internal Links. ([@ehfeng](https://github.com/ehfeng)) - - [#5551](https://github.com/facebook/create-react-app/pull/5551) Add Algolia search bar to Docusaurus. ([@amyrlam](https://github.com/amyrlam)) - - [#5533](https://github.com/facebook/create-react-app/pull/5533) Simplified TypeScript steps. ([@brunolemos](https://github.com/brunolemos)) - - [#5492](https://github.com/facebook/create-react-app/pull/5492) Add "edit" feature to Docusaurus pages. ([@amyrlam](https://github.com/amyrlam)) - - [#5499](https://github.com/facebook/create-react-app/pull/5499) Fix title on Safari. ([@yuyokk](https://github.com/yuyokk)) - - [#5494](https://github.com/facebook/create-react-app/pull/5494) Fix typo. ([@noelyoo](https://github.com/noelyoo)) - - [#5493](https://github.com/facebook/create-react-app/pull/5493) Fixed typo in getting-started. ([@jessepeterman](https://github.com/jessepeterman)) - - [#5344](https://github.com/facebook/create-react-app/pull/5344) Add some headings to the getting started section. ([@selbekk](https://github.com/selbekk)) - - [#5251](https://github.com/facebook/create-react-app/pull/5251) Add SoMe links to documentation. ([@selbekk](https://github.com/selbekk)) -- `react-scripts` - - [#5512](https://github.com/facebook/create-react-app/pull/5512) Update doc links in template README. ([@iansu](https://github.com/iansu)) - - [#5475](https://github.com/facebook/create-react-app/pull/5475) Fix typo. ([@thompk2](https://github.com/thompk2)) - - [#5449](https://github.com/facebook/create-react-app/pull/5449) Remove dot from the end of the link to fix it when using from GitHub. ([@ranyitz](https://github.com/ranyitz)) - -#### :house: Internal - -- `react-scripts` - - [#5607](https://github.com/facebook/create-react-app/pull/5607) Turn on certain TypeScript options. ([@Timer](https://github.com/Timer)) - - [#5559](https://github.com/facebook/create-react-app/pull/5559) Change import syntax from typescript declaration. ([@brunolemos](https://github.com/brunolemos)) - - [#5469](https://github.com/facebook/create-react-app/pull/5469) Avoid pushing .pnp folder to git. ([@NShahri](https://github.com/NShahri)) - - [#5527](https://github.com/facebook/create-react-app/pull/5527) Update Workbox dependency. ([@jeffposnick](https://github.com/jeffposnick)) +- `react-error-overlay`, `react-scripts` + - [#7007](https://github.com/facebook/create-react-app/pull/7007) Unpin `babel-jest` ([@ianschmitz](https://github.com/ianschmitz)) + - [#7002](https://github.com/facebook/create-react-app/pull/7002) Temporary fix for `babel-jest` preflight error ([@ianschmitz](https://github.com/ianschmitz)) - `eslint-config-react-app` - - [#5586](https://github.com/facebook/create-react-app/pull/5586) Fixing the code splitting links in the ESLint output. ([@jheijmans](https://github.com/jheijmans)) - -#### Committers: 15 - -- Amy Lam ([amyrlam](https://github.com/amyrlam)) -- Bruno Lemos ([brunolemos](https://github.com/brunolemos)) -- Eric Feng ([ehfeng](https://github.com/ehfeng)) -- Ian Schmitz ([ianschmitz](https://github.com/ianschmitz)) -- Ian Sutherland ([iansu](https://github.com/iansu)) -- Iurii Kucherov ([yuyokk](https://github.com/yuyokk)) -- Jeffrey Posnick ([jeffposnick](https://github.com/jeffposnick)) -- Jeroen Heijmans ([jheijmans](https://github.com/jheijmans)) -- Jesse Peterman ([jessepeterman](https://github.com/jessepeterman)) -- Joe Haddad ([Timer](https://github.com/Timer)) -- Kit Thompson ([thompk2](https://github.com/thompk2)) -- Kristofer Selbekk ([selbekk](https://github.com/selbekk)) -- Nima Shahri ([NShahri](https://github.com/NShahri)) -- Noel Yoo ([noelyoo](https://github.com/noelyoo)) -- Ran Yitzhaki ([ranyitz](https://github.com/ranyitz)) - -### Migrating from 2.0.5 to 2.1.0 - -Inside any created project that has not been ejected, run: - -```bash -npm install --save --save-exact react-scripts@2.1.0 -``` - -or - -``` -yarn add --exact react-scripts@2.1.0 -``` - -## 2.0.5 (October 14, 2018) - -#### :bug: Bug Fix - + - [#6987](https://github.com/facebook/create-react-app/pull/6987) Disable `no-dupe-class-members` rule for TypeScript ([@ianschmitz](https://github.com/ianschmitz)) + - [#6862](https://github.com/facebook/create-react-app/pull/6862) Fix `no-useless-constructor` rule in TypeScript ([@ianschmitz](https://github.com/ianschmitz)) +- `eslint-config-react-app`, `react-scripts` + - [#6937](https://github.com/facebook/create-react-app/pull/6937) Disable `default-case` lint rule for TypeScript ([@ianschmitz](https://github.com/ianschmitz)) - `react-dev-utils` - - - [#5431](https://github.com/facebook/create-react-app/pull/5431) Fix click-to-open on Windows. ([@gaearon](https://github.com/gaearon)) - - [#5335](https://github.com/facebook/create-react-app/pull/5335) Fix file size report after build. ([@OskarPersson](https://github.com/OskarPersson)) - -- `create-react-app` - - - [#5362](https://github.com/facebook/create-react-app/pull/5362) Fix CI: non-semver compliant Yarn versions. ([@Timer](https://github.com/Timer)) - -- `react-scripts` - - [#5301](https://github.com/facebook/create-react-app/pull/5301) Fix TypeError when registering service workers without config. ([@peterbe](https://github.com/peterbe)) + - [#6876](https://github.com/facebook/create-react-app/pull/6876) Change cssmodule classname hash to use relative paths ([@vg-stan](https://github.com/vg-stan)) #### :nail_care: Enhancement +- `react-dev-utils`, `react-scripts` + - [#6856](https://github.com/facebook/create-react-app/pull/6856) Adds the configuration for PnP/Typescript ([@arcanis](https://github.com/arcanis)) - `babel-preset-react-app` - - - [#4984](https://github.com/facebook/create-react-app/pull/4984) Use the correct dependency for `babel-plugin-dynamic-import-node`. ([@vikr01](https://github.com/vikr01)) - + - [#6887](https://github.com/facebook/create-react-app/pull/6887) Update dependencies of Babel preset with recent changes ([@skoging](https://github.com/skoging)) - `react-scripts` - - [#5354](https://github.com/facebook/create-react-app/pull/5354) Add environment variable to optionaly disable inlining of chunks. ([@0xdeafcafe](https://github.com/0xdeafcafe)) - - [#5330](https://github.com/facebook/create-react-app/pull/5330) Update `eslint-plugin-jsx-a11y` version. ([@AlmeroSteyn](https://github.com/AlmeroSteyn)) + - [#6706](https://github.com/facebook/create-react-app/pull/6706) Generate SVG component name in Jest fileTransform ([@dallonf](https://github.com/dallonf)) + - [#6300](https://github.com/facebook/create-react-app/pull/6300) Remove body padding reset from templates ([@Hurtak](https://github.com/Hurtak)) #### :memo: Documentation -- `react-scripts` - - [#5321](https://github.com/facebook/create-react-app/pull/5321) Added note on update to `.flowconfig` for .scss imports. ([@rlueder](https://github.com/rlueder)) - - [#5394](https://github.com/facebook/create-react-app/pull/5394) Correct instructions for HTTPS and PowerShell. ([@gavinbarron](https://github.com/gavinbarron)) - - [#5410](https://github.com/facebook/create-react-app/pull/5410) Updates to clarify the "waiting" SW behavior. ([@jeffposnick](https://github.com/jeffposnick)) - - [#5302](https://github.com/facebook/create-react-app/pull/5302) Update README.md. ([@simonCordovaByte9](https://github.com/simonCordovaByte9)) - - [#5334](https://github.com/facebook/create-react-app/pull/5334) Update README due to deprecation of react-testing-library's toBeInTheDOM. ([@rrebase](https://github.com/rrebase)) - - [#5326](https://github.com/facebook/create-react-app/pull/5326) README link fixes. ([@davidgilbertson](https://github.com/davidgilbertson)) - - [#5327](https://github.com/facebook/create-react-app/pull/5327) Updated the URL in index.html. ([@behzod](https://github.com/behzod)) - - [#5296](https://github.com/facebook/create-react-app/pull/5296) Adding documentation about git init. ([@ryancogswell](https://github.com/ryancogswell)) - - [#5290](https://github.com/facebook/create-react-app/pull/5290) Add react-testing-library documentation/examples (#4679). ([@gnapse](https://github.com/gnapse)) - - [#5286](https://github.com/facebook/create-react-app/pull/5286) Fix broken links to src/serviceWorker.js. ([@adambowles](https://github.com/adambowles)) - Other - - - [#5374](https://github.com/facebook/create-react-app/pull/5374) Add the new SVGs feature from the template README to the root README. ([@neo](https://github.com/neo)) - - [#5371](https://github.com/facebook/create-react-app/pull/5371) Update path to serviceWorker.js in graphical folder structure. ([@jonscottclark](https://github.com/jonscottclark)) - - [#5337](https://github.com/facebook/create-react-app/pull/5337) Fix typo. ([@mvasin](https://github.com/mvasin)) - -- `eslint-config-react-app` - - [#5416](https://github.com/facebook/create-react-app/pull/5416) Fix eslint config docs. ([@ludovicofischer](https://github.com/ludovicofischer)) + - [#6979](https://github.com/facebook/create-react-app/pull/6979) Add note to restart the dev server after changing .env file ([@MostafaNawara](https://github.com/MostafaNawara)) + - [#6945](https://github.com/facebook/create-react-app/pull/6945) Add clarifying note to TypeScript docs warning about global install of CRA ([@methodbox](https://github.com/methodbox)) + - [#6898](https://github.com/facebook/create-react-app/pull/6898) Update GraphQL docs ([@nagman](https://github.com/nagman)) + - [#6810](https://github.com/facebook/create-react-app/pull/6810) Call to action button now reacts to being hovered ([@joerez](https://github.com/joerez)) + - [#6881](https://github.com/facebook/create-react-app/pull/6881) Fix typo in deployment docs ([@david-cho-lerat-HL2](https://github.com/david-cho-lerat-HL2)) +- `react-app-polyfill` + - [#6879](https://github.com/facebook/create-react-app/pull/6879) Update README.md ([@david-cho-lerat-HL2](https://github.com/david-cho-lerat-HL2)) #### :house: Internal -- Other - - - [#5365](https://github.com/facebook/create-react-app/pull/5365) Clean up the behavior tests. ([@Timer](https://github.com/Timer)) - -- `create-react-app` - - [#5362](https://github.com/facebook/create-react-app/pull/5362) Fix CI: non-semver compliant Yarn versions. ([@Timer](https://github.com/Timer)) -- `react-scripts` - - [#5317](https://github.com/facebook/create-react-app/pull/5317) Remove unused require for getCacheIdentifier after ejecting. ([@benbrandt](https://github.com/benbrandt)) - -#### Committers: 23 - -- Adam Bowles ([adambowles](https://github.com/adambowles)) -- Alex Forbes-Reed ([0xdeafcafe](https://github.com/0xdeafcafe)) -- Almero Steyn ([AlmeroSteyn](https://github.com/AlmeroSteyn)) -- Behzod Saidov ([behzod](https://github.com/behzod)) -- Ben Brandt ([benbrandt](https://github.com/benbrandt)) -- Dan Abramov ([gaearon](https://github.com/gaearon)) -- David Gilbertson ([davidgilbertson](https://github.com/davidgilbertson)) -- Ernesto García ([gnapse](https://github.com/gnapse)) -- Gavin Barron ([gavinbarron](https://github.com/gavinbarron)) -- Jeffrey Posnick ([jeffposnick](https://github.com/jeffposnick)) -- Joe Haddad ([Timer](https://github.com/Timer)) -- Jon Clark ([jonscottclark](https://github.com/jonscottclark)) -- Kristofer Selbekk ([selbekk](https://github.com/selbekk)) -- Ludovico Fischer ([ludovicofischer](https://github.com/ludovicofischer)) -- Mikhail Vasin ([mvasin](https://github.com/mvasin)) -- Oskar Persson ([OskarPersson](https://github.com/OskarPersson)) -- Peter Bengtsson ([peterbe](https://github.com/peterbe)) -- Rafael Lüder ([rlueder](https://github.com/rlueder)) -- Ragnar Rebase ([rrebase](https://github.com/rrebase)) -- Ryan Cogswell ([ryancogswell](https://github.com/ryancogswell)) -- Vikram Rangaraj ([vikr01](https://github.com/vikr01)) -- Wenchen Li ([neo](https://github.com/neo)) -- [simonCordovaByte9](https://github.com/simonCordovaByte9) - -### Migrating from 2.0.4 to 2.0.5 - -Inside any created project that has not been ejected, run: - -```bash -npm install --save --save-exact react-scripts@2.0.5 -``` - -or - -``` -yarn add --exact react-scripts@2.0.5 -``` - -## 2.0.4 (October 3, 2018) - -#### :bug: Bug Fix - -- `react-scripts` - - [#5281](https://github.com/facebook/create-react-app/pull/5281) Fix code minifying ([@Timer](https://github.com/Timer)) - - [#5246](https://github.com/facebook/create-react-app/pull/5246) Fix `GENERATE_SOURCEMAP` env not working for css sourcemap ([@crux153](https://github.com/crux153)) -- `babel-preset-react-app` - - [#5278](https://github.com/facebook/create-react-app/pull/5278) Disable Symbol typeof transform ([@gaearon](https://github.com/gaearon)) - -#### :nail_care: Enhancement - -- `create-react-app` - - [#5270](https://github.com/facebook/create-react-app/pull/5270) Caches the Yarn resolution for faster installs ([@arcanis](https://github.com/arcanis)) - - [#5269](https://github.com/facebook/create-react-app/pull/5269) Adds a version check when using --use-pnp ([@arcanis](https://github.com/arcanis)) -- `react-scripts` - - [#5258](https://github.com/facebook/create-react-app/pull/5258) Add `.mjs` support back to webpack ([@Timer](https://github.com/Timer)) - -#### :memo: Documentation - -- Other - - [#5228](https://github.com/facebook/create-react-app/pull/5228) removed create-react-app-parcel link ([@lockround](https://github.com/lockround)) - - [#5254](https://github.com/facebook/create-react-app/pull/5254) Update README links for CSS modules and SASS ([@yuyokk](https://github.com/yuyokk)) - - [#5249](https://github.com/facebook/create-react-app/pull/5249) Set the color palette to something a bit more React-y ([@selbekk](https://github.com/selbekk)) - - [#5244](https://github.com/facebook/create-react-app/pull/5244) Update favicon and OpenGraph images ([@selbekk](https://github.com/selbekk)) - - [#5242](https://github.com/facebook/create-react-app/pull/5242) 5238 Removing sample pages ([@selbekk](https://github.com/selbekk)) - - [#5243](https://github.com/facebook/create-react-app/pull/5243) Set the project name and owner correctly ([@selbekk](https://github.com/selbekk)) - - [#5239](https://github.com/facebook/create-react-app/pull/5239) 5238 removing blog from Docusaurus ([@selbekk](https://github.com/selbekk)) - - [#5227](https://github.com/facebook/create-react-app/pull/5227) Initial setup of Docusaurus ([@amyrlam](https://github.com/amyrlam)) - `react-scripts` - - [#5252](https://github.com/facebook/create-react-app/pull/5252) Revert change to http-proxy-middleware docs ([@iansu](https://github.com/iansu)) - - [#5226](https://github.com/facebook/create-react-app/pull/5226) Fix usage of http-proxy-middleware ([@banyan](https://github.com/banyan)) - - [#5233](https://github.com/facebook/create-react-app/pull/5233) DOCS: Add Relay example ([@zachasme](https://github.com/zachasme)) + - [#6854](https://github.com/facebook/create-react-app/pull/6854) Remove `Object.assign` from `MiniCssExtractPlugin` options ([@swashcap](https://github.com/swashcap)) -#### :house: Internal - -- [#5263](https://github.com/facebook/create-react-app/pull/5263) Add browser test for graphql ([@Timer](https://github.com/Timer)) +#### Committers: 12 -#### Committers: 11 - -- Amy Lam ([@amyrlam](https://github.com/amyrlam)) -- Crux ([@crux153](https://github.com/crux153)) -- Dan Abramov ([@gaearon](https://github.com/gaearon)) -- Ian Sutherland ([@iansu](https://github.com/iansu)) -- Iurii Kucherov ([@yuyokk](https://github.com/yuyokk)) -- Joe Haddad ([@Timer](https://github.com/Timer)) -- Kohei Hasegawa ([@banyan](https://github.com/banyan)) -- Kristofer Selbekk ([@selbekk](https://github.com/selbekk)) +- Chris Shaffer ([@methodbox](https://github.com/methodbox)) +- Cory Reed ([@swashcap](https://github.com/swashcap)) +- Dallon Feldner ([@dallonf](https://github.com/dallonf)) +- David Cho-Lerat ([@david-cho-lerat-HL2](https://github.com/david-cho-lerat-HL2)) +- Ian Schmitz ([@ianschmitz](https://github.com/ianschmitz)) +- Joe Rezendes ([@joerez](https://github.com/joerez)) - Maël Nison ([@arcanis](https://github.com/arcanis)) -- Shubham Tiwari ([@lockround](https://github.com/lockround)) -- Zacharias Knudsen ([@zachasme](https://github.com/zachasme)) +- Mostafa Nawara ([@MostafaNawara](https://github.com/MostafaNawara)) +- Petr Huřťák ([@Hurtak](https://github.com/Hurtak)) +- Tore Hammervoll ([@skoging](https://github.com/skoging)) +- [@nagman](https://github.com/nagman) +- [@vg-stan](https://github.com/vg-stan) -### Migrating from 2.0.3 to 2.0.4 +### Migrating from 3.0.0 to 3.0.1 Inside any created project that has not been ejected, run: -```bash -npm install --save --save-exact react-scripts@2.0.4 +```sh +npm install --save --save-exact react-scripts@3.0.1 ``` or -``` -yarn add --exact react-scripts@2.0.4 +```sh +yarn add --exact react-scripts@3.0.1 ``` -## 2.0.3 (October 1, 2018) +## 3.0.0 (April 22, 2019) -Create React App 2.0 brings a year’s worth of improvements in a single dependency update. -We summarized all of the changes in a blog post! +Create React App 3.0 brings some exciting new features including support for [Hooks](https://reactjs.org/docs/hooks-intro.html)! -Check it out: **[Create React App 2.0: Babel 7, Sass, and More](https://reactjs.org/blog/2018/10/01/create-react-app-v2.html)**. +Thanks to all the maintainers and contributors who worked so hard on this release! :tada: -It provides a high-level overview of new features and improvements. Now let's see how to update your app to the latest version in detail. +# Highlights -# Migrating from 1.x to 2.0.3 +- Jest 24: #6278 +- Hooks support: #5997 +- TypeScript linting: #6513 +- `browserslist` support in @babel/preset-env: #6608 +- Absolute imports using `jsconfig.json`/`tsconfig.json`: #6656 + +# Migrating from 2.1.x to 3.0.0 Inside any created project that has not been ejected, run: ```bash -npm install --save --save-exact react-scripts@2.0.3 +npm install --save --save-exact react-scripts@3.0.0 ``` or ``` -yarn add --exact react-scripts@2.0.3 +yarn add --exact react-scripts@3.0.0 ``` -If you previously ejected but now want to upgrade, one common solution is to find the commits where you ejected (and any subsequent commits changing the configuration), revert them, upgrade, and later optionally eject again. It’s also possible that the feature you ejected for (maybe Sass or CSS Modules?) is now supported out of the box. You can find a list of notable new features in the **[Create React App 2.0 blog post](https://reactjs.org/blog/2018/10/01/create-react-app-v2.html)**. +If you previously ejected but now want to upgrade, one common solution is to find the commits where you ejected (and any subsequent commits changing the configuration), revert them, upgrade, and later optionally eject again. It’s also possible that the feature you ejected for is now supported out of the box. ## Breaking Changes -Like any major release, `react-scripts@2.0` contains a few breaking changes. We expect that they won't affect every user, but we recommend to scan over these sections to see if something is relevant to you. If we missed something, please file a new issue. +Like any major release, `react-scripts@3.0.0` contains a few breaking changes. We expect that they won't affect every user, but we recommend you look over this section to see if something is relevant to you. If we missed something, please file a new issue. -### Node 6 is no longer supported +### Jest 24 -Please upgrade to Node 8 (LTS) or later. +We've updated from Jest 23 to get the latest improvements in Jest 24. We've noticed some differences in snapshot serialization in Jest 24, so you may need to adjust your tests slightly once you update. You can read more about what's changed in the [Jest 24 blog post](https://jestjs.io/blog/2019/01/25/jest-24-refreshing-polished-typescript-friendly). -### Polyfills for IE 9, IE 10, and IE 11 are no longer included by default (but you can opt in!) +### Hooks support -We have dropped default support for Internet Explorer 9, 10, and 11. If you still need to support these browsers, follow the instructions below. +We now enforce [Rules of Hooks](https://reactjs.org/docs/hooks-rules.html) with `eslint-plugin-react-hooks`. If you are breaking any of the rules of Hooks this will cause your build to fail. -First, install `react-app-polyfill`: +### TypeScript linting -```bash -npm install react-app-polyfill -``` +We now lint TypeScript files. You can see the list of [rules we enforce](https://github.com/facebook/create-react-app/blob/eee8491d57d67dd76f0806a7512eaba2ce9c36f0/packages/eslint-config-react-app/index.js#L89:L98) to check if your project is compatible. If you're using Visual Studio Code you can follow our guide to [setup up your editor to display lint warnings](https://facebook.github.io/create-react-app/docs/setting-up-your-editor#displaying-lint-output-in-the-editor). -or +### `browserslist` support in @babel/preset-env -``` -yarn add react-app-polyfill -``` +The `browserslist` config in your `package.json` is now used to control the output of your JavaScript files. You can use separate configuration for `development` and `production`. See [here](https://github.com/facebook/create-react-app/blob/b0cbf2caa18ee8267855b14578ebc3dee826f552/packages/react-scripts/package.json#L83-L94) for a good starting point which gives a good development experience, especially when using language features such as async/await, but still provides high compatibility with many browsers in production -Next, place one of the following lines at the very top of `src/index.js`: +### Remove --no-watch flag -```js -import 'react-app-polyfill/ie9'; // For IE 9-11 support -import 'react-app-polyfill/ie11'; // For IE 11 support -``` - -You can read more about [these polyfills here](https://github.com/facebook/create-react-app/tree/master/packages/react-app-polyfill). - -### Dynamic `import()` of a CommonJS module now has a `.default` property - -[Webpack 4 changed the behavior of `import()`](https://medium.com/webpack/webpack-4-import-and-commonjs-d619d626b655) to be closer in line with the specification. - -Previously, importing a CommonJS module did not require you specify the default export. In most cases, this is now required. -If you see errors in your application about `... is not a function`, you likely need to update your dynamic import, e.g.: - -```js -const throttle = await import('lodash/throttle'); -// replace with -const throttle = await import('lodash/throttle').then(m => m.default); -``` +We've removed the `--no-watch` flag from the `start` script in favor of Jest's own `--watchAll=false`. -### `require.ensure()` is superseded by dynamic `import()` - -We previously allowed code splitting with a webpack-specific directive, `require.ensure()`. It is now disabled in favor of `import()`. To switch to `import()`, follow the examples below: - -**Single Module** - -```js -require.ensure(['module-a'], function() { - var a = require('module-a'); - // ... -}); - -// Replace with: -import('module-a').then(a => { - // ... -}); -``` - -**Multiple Module** - -```js -require.ensure(['module-a', 'module-b'], function() { - var a = require('module-a'); - var b = require('module-b'); - // ... -}); - -// Replace with: -Promise.all([import('module-a'), import('module-b')]).then(([a, b]) => { - // ... -}); -``` - -### The default Jest environment was changed to `jsdom` - -Look at the `test` entry in the `scripts` section of your `package.json`. -Here's a table how to change it from "before" and "after", depending on what you have there: - -| 1.x (if you have this...) | 2.x (...change it to this!) | -| -------------------------------- | ------------------------------- | -| `react-scripts test --env=jsdom` | `react-scripts test` | -| `react-scripts test` | `react-scripts test --env=node` | - -### Object `proxy` configuration is superseded by `src/setupProxy.js` - -To check if action is required, look for the `proxy` key in `package.json` and follow this table: - -1. I couldn't find a `proxy` key in `package.json` - - No action is required! -2. The value of `proxy` is a string (e.g. `http://localhost:5000`) - - No action is required! -3. The value of `proxy` is an object - - Follow the migration instructions below. - -**It's worth highlighting: if your `proxy` field is a `string`, e.g. `http://localhost:5000`, or you don't have it, skip this section. This feature is still supported and has the same behavior.** - -If your `proxy` is an object, that means you are using the advanced proxy configuration. It has become fully customizable so we removed the limited support for the object-style configuration. Here's how to recreate it. - -First, install `http-proxy-middleware` using npm or Yarn: - -```bash -npm install http-proxy-middleware -``` - -or - -``` -yarn add http-proxy-middleware -``` +## New Features -Next, create `src/setupProxy.js` and place the following contents in it: +### using `jsconfig.json`/`tsconfig.json` -```js -const proxy = require('http-proxy-middleware'); - -module.exports = function(app) { - // ... -}; -``` - -Now, migrate each entry in your `proxy` object one by one, e.g.: +We now support setting `baseUrl` in `jsconfig.json` and `tsconfig.json`. To configure `baseUrl` to point to the `src` directory in your JavaScript project, create a `jsconfig.json` file in your project root: ```json -"proxy": { - "/api": { - "target": "http://localhost:5000/" - }, - "/*.svg": { - "target": "http://localhost:5000/" - } +{ + "compilerOptions": { + "baseUrl": "src" + }, + "include": ["src"] } ``` -Place entries into `src/setupProxy.js` like so: - -```js -const proxy = require('http-proxy-middleware'); - -module.exports = function(app) { - app.use(proxy('/api', { target: 'http://localhost:5000/' })); - app.use(proxy('/*.svg', { target: 'http://localhost:5000/' })); -}; -``` - -You can also use completely custom logic there now! This wasn't possible before. - -### `.mjs` file extension support is removed - -Change the extension of any files in your project using `.mjs` to just `.js`. - -It was removed because of inconsistent support from underlying tools. We will add it back after it stops being experimental, and Jest gets built-in support for it. - -### `PropTypes` definitions are now removed in production - -Normally, this shouldn't affect your logic and should make the resulting bundle smaller. However, you may be relying on PropTypes definition for production logic. This is not recommended, and will break now. If a library does it, one possible solution is to file an issue in it with a proposal to use a different field (not `propTypes`) to signal that the declaration needs to be retained. - -### Anything missing? +If you have a TypeScript project you can configure `baseUrl` the same way in your `tsconfig.json`. -This was a large release, and we might have missed something. +Currently the only supported options for `baseUrl` are `node_modules` (the default) and `src`. -Please [file an issue](https://github.com/facebook/create-react-app/issues/new) and we will try to help. +### PostCSS Normalize -# Migrating from 2.0.0-next.xyz - -If you used 2.x alphas, please [follow these instructions](https://gist.github.com/gaearon/8650d1c70e436e5eff01f396dffc4114). +You can now include a version of Normalize.css in your project that will use your `browserslist` setting to generate the appropriate styles for your target browsers. To include it simply add `@import-normalize` at the top of one of your CSS files. # Detailed Changelog -**For a readable summary of the changes, [check out our blog post](https://reactjs.org/blog/2018/10/01/create-react-app-v2.html).** - #### :rocket: New Feature - `react-scripts` - - [#5218](https://github.com/facebook/create-react-app/pull/5218) Support globalSetup and globalTeardown Jest options ([@gaearon](https://github.com/gaearon)) - - [#5073](https://github.com/facebook/create-react-app/pull/5073) Add user defined proxy via middleware ([@Timer](https://github.com/Timer)) - - [#3945](https://github.com/facebook/create-react-app/pull/3945) Allow bundles to be analyzed with Webpack-specific tools ([@joshwcomeau](https://github.com/joshwcomeau)) - - [#4195](https://github.com/facebook/create-react-app/pull/4195) Sass loader ([@Fabianopb](https://github.com/Fabianopb)) - - [#3909](https://github.com/facebook/create-react-app/pull/3909) Add loader for .graphql files ([@petetnt](https://github.com/petetnt)) - - [#1288](https://github.com/facebook/create-react-app/pull/1288) Create git repository with initial commit ([@mauricedb](https://github.com/mauricedb)) - - [#3718](https://github.com/facebook/create-react-app/pull/3718) Import SVGs as React components (#1388) ([@iansu](https://github.com/iansu)) - - [#2285](https://github.com/facebook/create-react-app/pull/2285) Add support for CSS Modules with explicit filename - [name].module.css ([@ro-savage](https://github.com/ro-savage)) - - [#3804](https://github.com/facebook/create-react-app/pull/3804) Support Jest --watchAll flag ([@gaearon](https://github.com/gaearon)) - - [#3802](https://github.com/facebook/create-react-app/pull/3802) Add feature #3116 extended Jest config ([@garmeeh](https://github.com/garmeeh)) -- `react-dev-utils`, `react-scripts` - - [#5058](https://github.com/facebook/create-react-app/pull/5058) Inline the webpack runtime chunk ([@Timer](https://github.com/Timer)) -- `babel-preset-react-app` - - [#5047](https://github.com/facebook/create-react-app/pull/5047) Allow dynamic import proposal in node_modules ([@Timer](https://github.com/Timer)) - - [#3865](https://github.com/facebook/create-react-app/pull/3865) Add opt-out for preset-flow to work with @babel/preset-typescript ([@oieduardorabelo](https://github.com/oieduardorabelo)) - - [#3675](https://github.com/facebook/create-react-app/pull/3675) add experimental babel-plugin-macros support ([@kentcdodds](https://github.com/kentcdodds)) -- `babel-preset-react-app`, `confusing-browser-globals`, `eslint-config-react-app`, `react-dev-utils`, `react-error-overlay`, `react-scripts` - - [#4077](https://github.com/facebook/create-react-app/pull/4077) Webpack 4 ([@andriijas](https://github.com/andriijas)) -- `create-react-app` - - [#4350](https://github.com/facebook/create-react-app/pull/4350) Support package distribution tags ([@miraage](https://github.com/miraage)) -- `babel-preset-react-app`, `react-scripts` - - [#3776](https://github.com/facebook/create-react-app/pull/3776) Compile dependencies with babel-preset-env ([@gaearon](https://github.com/gaearon)) + - [#6656](https://github.com/facebook/create-react-app/pull/6656) Set baseUrl from jsconfig.json/tsconfig.json ([@rovansteen](https://github.com/rovansteen)) + - [#5810](https://github.com/facebook/create-react-app/pull/5810) Adds PostCSS Normalize ([@mrchief](https://github.com/mrchief)) +- `babel-plugin-named-asset-import`, `confusing-browser-globals`, `react-dev-utils`, `react-error-overlay`, `react-scripts` + - [#6278](https://github.com/facebook/create-react-app/pull/6278) Update to Jest 24 ([@loryman](https://github.com/loryman)) +- `eslint-config-react-app`, `react-scripts` + - [#6513](https://github.com/facebook/create-react-app/pull/6513) Add TypeScript linting support ([@ianschmitz](https://github.com/ianschmitz)) +- `babel-preset-react-app`, `eslint-config-react-app`, `react-scripts` + - [#5997](https://github.com/facebook/create-react-app/pull/5997) Support React Hooks (#5602) ([@eivind88](https://github.com/eivind88)) +- `babel-preset-react-app`, `react-dev-utils`, `react-scripts` + - [#6608](https://github.com/facebook/create-react-app/pull/6608) Support browserslist in @babel/preset-env ([@ianschmitz](https://github.com/ianschmitz)) #### :boom: Breaking Change -- `react-app-polyfill`, `react-scripts` - - [#5090](https://github.com/facebook/create-react-app/pull/5090) Drop IE 11 support by default ([@Timer](https://github.com/Timer)) - `react-scripts` - - [#5074](https://github.com/facebook/create-react-app/pull/5074) Change default test environment to jsdom ([@Timer](https://github.com/Timer)) - - [#5027](https://github.com/facebook/create-react-app/pull/5027) Remove `mjs` support ([@Timer](https://github.com/Timer)) - - [#4009](https://github.com/facebook/create-react-app/pull/4009) Update dotenv to 5.0.0 ([@iansu](https://github.com/iansu)) - - [#2544](https://github.com/facebook/create-react-app/pull/2544) Set the public path to the asset manifest entries ([@robinvdvleuten](https://github.com/robinvdvleuten)) - - [#3884](https://github.com/facebook/create-react-app/pull/3884) Don't use app node_modules folder as a resolve fallback ([@gaearon](https://github.com/gaearon)) - - [#3817](https://github.com/facebook/create-react-app/pull/3817) Disable service worker by default ([@iansu](https://github.com/iansu)) - - [#2285](https://github.com/facebook/create-react-app/pull/2285) Add support for CSS Modules with explicit filename - [name].module.css ([@ro-savage](https://github.com/ro-savage)) - - [#3771](https://github.com/facebook/create-react-app/pull/3771) Add preflight check to guard against wrong versions of webpack/eslint/jest higher up the tree ([@gaearon](https://github.com/gaearon)) - - [#3346](https://github.com/facebook/create-react-app/pull/3346) Change the default `start_url` to `.` ([@evilchuck](https://github.com/evilchuck)) - - [#3419](https://github.com/facebook/create-react-app/pull/3419) Remove the navigateFallback behavior from the generated service worker ([@jeffposnick](https://github.com/jeffposnick)) - - [#3644](https://github.com/facebook/create-react-app/pull/3644) Move browsers to cross-tool config ([@ai](https://github.com/ai)) -- `react-dev-utils` - - [#5072](https://github.com/facebook/create-react-app/pull/5072) Drop support for advanced proxy ([@Timer](https://github.com/Timer)) -- `babel-preset-react-app` - - [#3818](https://github.com/facebook/create-react-app/pull/3818) Remove PropTypes from production build (#209) ([@iansu](https://github.com/iansu)) -- `eslint-config-react-app` - - [#2319](https://github.com/facebook/create-react-app/pull/2319) Changes no-unused-expressions lint from warning to error ([@amupitan](https://github.com/amupitan)) -- `eslint-config-react-app`, `react-error-overlay`, `react-scripts` - - [#2690](https://github.com/facebook/create-react-app/pull/2690) Bump eslint-plugin-jsx-a11y version ([@gaearon](https://github.com/gaearon)) + - [#6848](https://github.com/facebook/create-react-app/pull/6848) Remove no-watch flag in favor of watchAll=false ([@bugzpodder](https://github.com/bugzpodder)) + - [#6821](https://github.com/facebook/create-react-app/pull/6821) Add custom function to generate asset manifest ([@iansu](https://github.com/iansu)) + - [#6750](https://github.com/facebook/create-react-app/pull/6750) change NODE_ENV and PUBLIC_URL into readonly ([@xiaoxiangmoe](https://github.com/xiaoxiangmoe)) + - [#4176](https://github.com/facebook/create-react-app/pull/4176) Remove --coverage + --watch workaround for the test command ([@stipsan](https://github.com/stipsan)) + - [#6615](https://github.com/facebook/create-react-app/pull/6615) Allow .json type checking ([@ianschmitz](https://github.com/ianschmitz)) +- `babel-preset-react-app`, `react-app-polyfill` + - [#6769](https://github.com/facebook/create-react-app/pull/6769) Update to core-js@3 ([@ianschmitz](https://github.com/ianschmitz)) +- `babel-plugin-named-asset-import`, `confusing-browser-globals`, `react-dev-utils`, `react-error-overlay`, `react-scripts` + - [#6278](https://github.com/facebook/create-react-app/pull/6278) Update to Jest 24 ([@loryman](https://github.com/loryman)) - `eslint-config-react-app`, `react-scripts` - - [#3121](https://github.com/facebook/create-react-app/pull/3121) Redisable require.ensure() ([@everdimension](https://github.com/everdimension)) + - [#6513](https://github.com/facebook/create-react-app/pull/6513) Add TypeScript linting support ([@ianschmitz](https://github.com/ianschmitz)) +- `babel-preset-react-app`, `eslint-config-react-app`, `react-scripts` + - [#5997](https://github.com/facebook/create-react-app/pull/5997) Support React Hooks (#5602) ([@eivind88](https://github.com/eivind88)) +- `babel-preset-react-app`, `react-dev-utils`, `react-scripts` + - [#6608](https://github.com/facebook/create-react-app/pull/6608) Support browserslist in @babel/preset-env ([@ianschmitz](https://github.com/ianschmitz)) #### :bug: Bug Fix -- `react-scripts` - - [#5217](https://github.com/facebook/create-react-app/pull/5217) Verify more package versions ([@Timer](https://github.com/Timer)) - - [#5214](https://github.com/facebook/create-react-app/pull/5214) Fix absolute paths on eject ([@gaearon](https://github.com/gaearon)) - - [#5212](https://github.com/facebook/create-react-app/pull/5212) Don't crash npm test when hg/git are missing ([@gaearon](https://github.com/gaearon)) - - [#5197](https://github.com/facebook/create-react-app/pull/5197) Treat .css and .sass/.scss as side effectful ([@gaearon](https://github.com/gaearon)) - - [#5196](https://github.com/facebook/create-react-app/pull/5196) Format SVG React snapshots as tag with props ([@gaearon](https://github.com/gaearon)) - - [#5163](https://github.com/facebook/create-react-app/pull/5163) Correctly lookup assets when using a relative build directory ([@Timer](https://github.com/Timer)) - - [#5151](https://github.com/facebook/create-react-app/pull/5151) Toggle `mjs` files to `javascript/auto` type ([@Timer](https://github.com/Timer)) - - [#5131](https://github.com/facebook/create-react-app/pull/5131) Output CSS sourcemaps in separate file ([@Timer](https://github.com/Timer)) - - [#5043](https://github.com/facebook/create-react-app/pull/5043) Always lint with latest React version ([@Timer](https://github.com/Timer)) - - [#5030](https://github.com/facebook/create-react-app/pull/5030) Disable webpack chunk coalescing ([@Timer](https://github.com/Timer)) - - [#5027](https://github.com/facebook/create-react-app/pull/5027) Remove `mjs` support ([@Timer](https://github.com/Timer)) - - [#4706](https://github.com/facebook/create-react-app/pull/4706) Only use safe options when packing CSS assets ([@bugzpodder](https://github.com/bugzpodder)) - - [#4562](https://github.com/facebook/create-react-app/pull/4562) Configured the thread-loader to keeping workers alive in development mode ([@sadkovoy](https://github.com/sadkovoy)) - - [#4318](https://github.com/facebook/create-react-app/pull/4318) `.mjs` should not resolve before .js files (#4085) (#4317) ([@hobochild](https://github.com/hobochild)) - - [#4419](https://github.com/facebook/create-react-app/pull/4419) Map (s?css|sass) modules to identity-obj-proxy in jest ([@kusold](https://github.com/kusold)) - - [#4424](https://github.com/facebook/create-react-app/pull/4424) ensureSlash: Fix accidental string-to-NaN coercion ([@wchargin](https://github.com/wchargin)) - - [#4376](https://github.com/facebook/create-react-app/pull/4376) Update sass-loader (#4363) ([@miraage](https://github.com/miraage)) - - [#4247](https://github.com/facebook/create-react-app/pull/4247) Work around Jest environment resolving bug ([@gaearon](https://github.com/gaearon)) - - [#4234](https://github.com/facebook/create-react-app/pull/4234) [next] Revert to use ecma 5 in uglifyOptions ([@danielberndt](https://github.com/danielberndt)) - - [#2544](https://github.com/facebook/create-react-app/pull/2544) Set the public path to the asset manifest entries ([@robinvdvleuten](https://github.com/robinvdvleuten)) - - [#3992](https://github.com/facebook/create-react-app/pull/3992) Upgrade dotenv-expand to 4.2.0 (#3961) ([@iansu](https://github.com/iansu)) - - [#3989](https://github.com/facebook/create-react-app/pull/3989) add default value for globPatterns ([@viankakrisna](https://github.com/viankakrisna)) -- `react-error-overlay` - - [#5203](https://github.com/facebook/create-react-app/pull/5203) Fix IE 11 compatibility ([@Timer](https://github.com/Timer)) - - [#5198](https://github.com/facebook/create-react-app/pull/5198) Polyfill error overlay for IE9 support ([@Timer](https://github.com/Timer)) - - [#4024](https://github.com/facebook/create-react-app/pull/4024) Fix floating caret position incorrect while scrolling overlay ([@jihchi](https://github.com/jihchi)) - `react-dev-utils` - - [#5184](https://github.com/facebook/create-react-app/pull/5184) Still emit runtime chunk ([@Timer](https://github.com/Timer)) - - [#5137](https://github.com/facebook/create-react-app/pull/5137) Fix displaying third party webpack plugins errors ([@Fer0x](https://github.com/Fer0x)) - - [#5134](https://github.com/facebook/create-react-app/pull/5134) Lists loader-utils in the dependencies ([@arcanis](https://github.com/arcanis)) - - [#5025](https://github.com/facebook/create-react-app/pull/5025) Fix/file size reporter ([@fiddep](https://github.com/fiddep)) - - [#4420](https://github.com/facebook/create-react-app/pull/4420) Update the thread loader test in formatWebpackMessages ([@marcofugaro](https://github.com/marcofugaro)) -- `babel-preset-react-app` - - [#5182](https://github.com/facebook/create-react-app/pull/5182) Strip flow syntax before any other transform ([@Timer](https://github.com/Timer)) - - [#4630](https://github.com/facebook/create-react-app/pull/4630) Eliminate regenerator from preset-react-app plugins ([@conartist6](https://github.com/conartist6)) - - [#5110](https://github.com/facebook/create-react-app/pull/5110) Add dynamic import transformer for dependencies in test env ([@lixiaoyan](https://github.com/lixiaoyan)) - - [#5052](https://github.com/facebook/create-react-app/pull/5052) Add Babel config sourceType: 'unambiguous' for dependencies ([@lixiaoyan](https://github.com/lixiaoyan)) - - [#5046](https://github.com/facebook/create-react-app/pull/5046) Correct Babel dependency behavior ([@Timer](https://github.com/Timer)) - - [#4248](https://github.com/facebook/create-react-app/pull/4248) Enable loose mode for `class-properties` ([@rgrochowicz](https://github.com/rgrochowicz)) -- `babel-preset-react-app`, `react-error-overlay`, `react-scripts` - - [#5142](https://github.com/facebook/create-react-app/pull/5142) Remove runtime alias hack ([@Timer](https://github.com/Timer)) -- `react-app-polyfill` - - [#5132](https://github.com/facebook/create-react-app/pull/5132) Don't polyfill fetch for Node ([@Timer](https://github.com/Timer)) -- `react-error-overlay`, `react-scripts` - - [#5109](https://github.com/facebook/create-react-app/pull/5109) Prevent Babel config overridden ([@lixiaoyan](https://github.com/lixiaoyan)) -- `babel-preset-react-app`, `react-scripts` - - [#5078](https://github.com/facebook/create-react-app/pull/5078) Prevent the cache of files using Babel Macros ([@Timer](https://github.com/Timer)) -- `react-dev-utils`, `react-error-overlay`, `react-scripts` - - [#5026](https://github.com/facebook/create-react-app/pull/5026) Switch from uglifyjs to terser ([@Timer](https://github.com/Timer)) + - [#6735](https://github.com/facebook/create-react-app/pull/6735) InlineChunkHtmlPlugin works with empty publicPath ([@ItalyPaleAle](https://github.com/ItalyPaleAle)) +- `react-scripts` + - [#6732](https://github.com/facebook/create-react-app/pull/6732) fix: terser-webpack-plugin hanging on WSL ([@endiliey](https://github.com/endiliey)) + - [#6610](https://github.com/facebook/create-react-app/pull/6610) Convert JSON.stringify \n to os.EOL ([@MikeBeaton](https://github.com/MikeBeaton)) - `create-react-app` - - [#4677](https://github.com/facebook/create-react-app/pull/4677) Support scoped package names for scripts-version option in create-react-app cli ([@bugzpodder](https://github.com/bugzpodder)) - - [#2705](https://github.com/facebook/create-react-app/pull/2705) Don't delete error logs when install fails ([@mg](https://github.com/mg)) -- `react-dev-utils`, `react-scripts` - - [#4391](https://github.com/facebook/create-react-app/pull/4391) Update getCSSModuleLocalIdent to support Sass ([@arianon](https://github.com/arianon)) -- `babel-plugin-named-asset-import`, `babel-preset-react-app`, `eslint-config-react-app`, `react-dev-utils`, `react-error-overlay`, `react-scripts` - - [#4159](https://github.com/facebook/create-react-app/pull/4159) Bump babel-related deps ([@existentialism](https://github.com/existentialism)) -- `create-react-app`, `react-dev-utils`, `react-scripts` - - [#3997](https://github.com/facebook/create-react-app/pull/3997) Use yarn when running inside yarn workspace. ([@bradfordlemley](https://github.com/bradfordlemley)) + - [#6759](https://github.com/facebook/create-react-app/pull/6759) Fix unlogged yarn pnp message ([@heyimalex](https://github.com/heyimalex)) #### :nail_care: Enhancement -- `create-react-app`, `react-scripts` - - [#5136](https://github.com/facebook/create-react-app/pull/5136) Plug'n'Play support ([@arcanis](https://github.com/arcanis)) -- `react-dev-utils`, `react-scripts` - - [#5174](https://github.com/facebook/create-react-app/pull/5174) 💅 Polish webpack message output ([@Timer](https://github.com/Timer)) - - [#5065](https://github.com/facebook/create-react-app/pull/5065) (Micro) Optimize webpack rebuild speed ([@Timer](https://github.com/Timer)) - - [#5058](https://github.com/facebook/create-react-app/pull/5058) Inline the webpack runtime chunk ([@Timer](https://github.com/Timer)) - - [#4192](https://github.com/facebook/create-react-app/pull/4192) Update CSS Modules localIndetName ([@ro-savage](https://github.com/ro-savage)) - - [#3782](https://github.com/facebook/create-react-app/pull/3782) Tell user what browser support their application was built with ([@Timer](https://github.com/Timer)) -- `react-dev-utils` - - [#5150](https://github.com/facebook/create-react-app/pull/5150) Run behavioral smoke tests with Jest, add output tests ([@Timer](https://github.com/Timer)) - - [#4623](https://github.com/facebook/create-react-app/pull/4623) Use yarn build command in predeploy script if using yarn ([@alexbrazier](https://github.com/alexbrazier)) - - [#4470](https://github.com/facebook/create-react-app/pull/4470) Adjust browser defaults ([@Timer](https://github.com/Timer)) - - [#4001](https://github.com/facebook/create-react-app/pull/4001) Add support for new yarn workspaces config format ([@detrohutt](https://github.com/detrohutt)) - - [#3980](https://github.com/facebook/create-react-app/pull/3980) Autodetect GoLand editor ([@ifedyukin](https://github.com/ifedyukin)) - - [#3808](https://github.com/facebook/create-react-app/pull/3808) Use wmic to get process list on Windows ([@levrik](https://github.com/levrik)) - `react-scripts` - - [#4169](https://github.com/facebook/create-react-app/pull/4169) Workbox service worker ([@davejm](https://github.com/davejm)) - - [#5096](https://github.com/facebook/create-react-app/pull/5096) Disable source maps for node_modules ([@Timer](https://github.com/Timer)) - - [#4716](https://github.com/facebook/create-react-app/pull/4716) add postcss-preset-env, remove autoprefixer ([@heygrady](https://github.com/heygrady)) - - [#1457](https://github.com/facebook/create-react-app/pull/1457) Add eslintConfig to new projects automatically ([@lifeiscontent](https://github.com/lifeiscontent)) - - [#5030](https://github.com/facebook/create-react-app/pull/5030) Disable webpack chunk coalescing ([@Timer](https://github.com/Timer)) - - [#4582](https://github.com/facebook/create-react-app/pull/4582) Added thread-loader tweak for application code entry-point ([@sadkovoy](https://github.com/sadkovoy)) - - [#4562](https://github.com/facebook/create-react-app/pull/4562) Configured the thread-loader to keeping workers alive in development mode ([@sadkovoy](https://github.com/sadkovoy)) - - [#4504](https://github.com/facebook/create-react-app/pull/4504) webpack 4 scope hoisting ([@bugzpodder](https://github.com/bugzpodder)) - - [#4461](https://github.com/facebook/create-react-app/pull/4461) Update svgr ([@iansu](https://github.com/iansu)) - - [#3867](https://github.com/facebook/create-react-app/pull/3867) Provide callbacks in serviceWorker (next) ([@piotr-cz](https://github.com/piotr-cz)) - - [#3235](https://github.com/facebook/create-react-app/pull/3235) Applies new theme and adds docs link to template ([@lukejacksonn](https://github.com/lukejacksonn)) - - [#3512](https://github.com/facebook/create-react-app/pull/3512) Enhance Jest config error for `setupTestFrameworkScriptFile` ([@jackfranklin](https://github.com/jackfranklin)) - - [#3778](https://github.com/facebook/create-react-app/pull/3778) Compile code in parallel ([@Timer](https://github.com/Timer)) - - [#3771](https://github.com/facebook/create-react-app/pull/3771) Add preflight check to guard against wrong versions of webpack/eslint/jest higher up the tree ([@gaearon](https://github.com/gaearon)) - - [#3618](https://github.com/facebook/create-react-app/pull/3618) use uglifyjs-webpack-plugin v1 ([@viankakrisna](https://github.com/viankakrisna)) -- `babel-preset-react-app`, `react-error-overlay`, `react-scripts` - - [#5093](https://github.com/facebook/create-react-app/pull/5093) Turn on Babel `helpers` ([@Timer](https://github.com/Timer)) -- `react-dev-utils`, `react-error-overlay`, `react-scripts` - - [#4930](https://github.com/facebook/create-react-app/pull/4930) Switch from cheap-module-source-map eval-source-map ([@jasonLaster](https://github.com/jasonLaster)) - - [#3124](https://github.com/facebook/create-react-app/pull/3124) update jest to 22 and support watchPathIgnorePatterns configuration ([@aisensiy](https://github.com/aisensiy)) -- `confusing-browser-globals`, `react-dev-utils`, `react-error-overlay`, `react-scripts` - - [#4846](https://github.com/facebook/create-react-app/pull/4846) Update jest version ([@skoging](https://github.com/skoging)) - - [#4362](https://github.com/facebook/create-react-app/pull/4362) Bumped jest version to 22.4.1 ([@CGreenburg](https://github.com/CGreenburg)) -- `babel-preset-react-app`, `confusing-browser-globals`, `eslint-config-react-app`, `react-dev-utils`, `react-error-overlay`, `react-scripts` - - [#4077](https://github.com/facebook/create-react-app/pull/4077) Webpack 4 ([@andriijas](https://github.com/andriijas)) -- `babel-preset-react-app` - - [#4432](https://github.com/facebook/create-react-app/pull/4432) Update babel-plugin-macros to fix a bug ([@stereobooster](https://github.com/stereobooster)) - - [#3818](https://github.com/facebook/create-react-app/pull/3818) Remove PropTypes from production build (#209) ([@iansu](https://github.com/iansu)) + - [#6845](https://github.com/facebook/create-react-app/pull/6845) Change CRA version in `react-scripts` eject warning. ([@lffg](https://github.com/lffg)) + - [#6821](https://github.com/facebook/create-react-app/pull/6821) Add custom function to generate asset manifest ([@iansu](https://github.com/iansu)) + - [#6580](https://github.com/facebook/create-react-app/pull/6580) Fix react-scripts peer-deps link local issue ([@transitive-bullshit](https://github.com/transitive-bullshit)) + - [#6746](https://github.com/facebook/create-react-app/pull/6746) Replace deprecated SFC with FunctionComponent in react-app.d.ts ([@iamandrewluca](https://github.com/iamandrewluca)) + - [#6160](https://github.com/facebook/create-react-app/pull/6160) Suggests that tsconfig.json is incorrect only when SyntaxError is caught ([@Andarist](https://github.com/Andarist)) + - [#6696](https://github.com/facebook/create-react-app/pull/6696) Enable futureEmitAssets in webpack config ([@iansu](https://github.com/iansu)) + - [#6669](https://github.com/facebook/create-react-app/pull/6669) Remove unnecessary shrink-to-fit=no meta data ([@abdelrahmanrifai](https://github.com/abdelrahmanrifai)) + - [#5686](https://github.com/facebook/create-react-app/pull/5686) Add empty mock for http2 ([@kjin](https://github.com/kjin)) + - [#5960](https://github.com/facebook/create-react-app/pull/5960) add command to add files to staging after eject ([@clickclickonsal](https://github.com/clickclickonsal)) + - [#6615](https://github.com/facebook/create-react-app/pull/6615) Allow .json type checking ([@ianschmitz](https://github.com/ianschmitz)) + - [#6451](https://github.com/facebook/create-react-app/pull/6451) change class component to function component ([@xiaoxiangmoe](https://github.com/xiaoxiangmoe)) +- `babel-plugin-named-asset-import`, `babel-preset-react-app`, `confusing-browser-globals`, `create-react-app`, `eslint-config-react-app`, `react-app-polyfill`, `react-dev-utils`, `react-error-overlay`, `react-scripts` + - [#6826](https://github.com/facebook/create-react-app/pull/6826) Add directory details to packages/\* package.json ([@feelepxyz](https://github.com/feelepxyz)) +- `babel-preset-react-app`, `react-app-polyfill` + - [#6769](https://github.com/facebook/create-react-app/pull/6769) Update to core-js@3 ([@ianschmitz](https://github.com/ianschmitz)) - `create-react-app` - - [#4375](https://github.com/facebook/create-react-app/pull/4375) fix: update envinfo + implementation, update issue_template ([@tabrindle](https://github.com/tabrindle)) -- `eslint-config-react-app`, `react-error-overlay`, `react-scripts` - - [#4048](https://github.com/facebook/create-react-app/pull/4048) Add ESLint check for incorrect propTypes usage (#3840) ([@iansu](https://github.com/iansu)) - - [#2690](https://github.com/facebook/create-react-app/pull/2690) Bump eslint-plugin-jsx-a11y version ([@gaearon](https://github.com/gaearon)) -- `eslint-config-react-app` - - [#3844](https://github.com/facebook/create-react-app/pull/3844) remove radix eslint rule ([@sendilkumarn](https://github.com/sendilkumarn)) -- `create-react-app`, `react-dev-utils`, `react-scripts` - - [#3792](https://github.com/facebook/create-react-app/pull/3792) Offer to set default browsers ([@Timer](https://github.com/Timer)) -- `babel-preset-react-app`, `create-react-app`, `react-dev-utils`, `react-error-overlay`, `react-scripts` - - [#3785](https://github.com/facebook/create-react-app/pull/3785) Bump dependencies ([@gaearon](https://github.com/gaearon)) -- `babel-preset-react-app`, `react-scripts` - - [#3770](https://github.com/facebook/create-react-app/pull/3770) Loosen Babel preset to use browserslist ([@Timer](https://github.com/Timer)) -- `babel-preset-react-app`, `eslint-config-react-app`, `react-dev-utils`, `react-error-overlay`, `react-scripts` - - [#3522](https://github.com/facebook/create-react-app/pull/3522) Switch to Babel 7 ([@clemmy](https://github.com/clemmy)) + - [#6770](https://github.com/facebook/create-react-app/pull/6770) Warn when using react-scripts-ts ([@ianschmitz](https://github.com/ianschmitz)) +- `react-dev-utils` + - [#5821](https://github.com/facebook/create-react-app/pull/5821) Add wait: false to options object for opn ([@evalexpr](https://github.com/evalexpr)) + - [#6502](https://github.com/facebook/create-react-app/pull/6502) Enable click to go to error in console part 2! ([@johnnyreilly](https://github.com/johnnyreilly)) #### :memo: Documentation -- `react-scripts` - - [#5211](https://github.com/facebook/create-react-app/pull/5211) Adds instructions to README on how to customize Bootstrap with Sass ([@mslooten](https://github.com/mslooten)) - - [#5147](https://github.com/facebook/create-react-app/pull/5147) Document adding SVGs as React components ([@mareksuscak](https://github.com/mareksuscak)) - - [#5193](https://github.com/facebook/create-react-app/pull/5193) Fix typo in 'Configuring the Proxy Manually' ([@fabriziocucci](https://github.com/fabriziocucci)) - - [#5111](https://github.com/facebook/create-react-app/pull/5111) Updates to README to reflect Workbox usage. ([@jeffposnick](https://github.com/jeffposnick)) - - [#5169](https://github.com/facebook/create-react-app/pull/5169) Add additional troubleshooting for Github Pages ([@dwang](https://github.com/dwang)) - - [#5145](https://github.com/facebook/create-react-app/pull/5145) Mention .module.scss/sass convention ([@mareksuscak](https://github.com/mareksuscak)) - - [#5105](https://github.com/facebook/create-react-app/pull/5105) as per #5104 ([@sag1v](https://github.com/sag1v)) - - [#5071](https://github.com/facebook/create-react-app/pull/5071) Update usage advice of husky to 1.0 ([@martinlechner1](https://github.com/martinlechner1)) - - [#5077](https://github.com/facebook/create-react-app/pull/5077) small typo fix ([@tteltrab](https://github.com/tteltrab)) - - [#5070](https://github.com/facebook/create-react-app/pull/5070) Integrating with an API Backend: add API Platform ([@dunglas](https://github.com/dunglas)) - - [#5064](https://github.com/facebook/create-react-app/pull/5064) fix minor typo in troubleshooting github pages ([@kaznovac](https://github.com/kaznovac)) - - [#5035](https://github.com/facebook/create-react-app/pull/5035) Remove paywalled tutorial link for Storybook ([@imgntn](https://github.com/imgntn)) - - [#3924](https://github.com/facebook/create-react-app/pull/3924) Updates to reflect service worker registration being opt-in. ([@jeffposnick](https://github.com/jeffposnick)) - - [#4881](https://github.com/facebook/create-react-app/pull/4881) flowtype.org -> flow.org ([@web2033](https://github.com/web2033)) - - [#4825](https://github.com/facebook/create-react-app/pull/4825) Update support info for service workers ([@j-f1](https://github.com/j-f1)) - - [#4738](https://github.com/facebook/create-react-app/pull/4738) Fix typo ([@mjw56](https://github.com/mjw56)) - - [#4741](https://github.com/facebook/create-react-app/pull/4741) remove extra dot on devtool link comment ([@shelldandy](https://github.com/shelldandy)) - - [#4703](https://github.com/facebook/create-react-app/pull/4703) Suggest `reactstrap` instead of `react-bootstrap` ([@zx6658](https://github.com/zx6658)) - - [#4566](https://github.com/facebook/create-react-app/pull/4566) Move whitespace comment closer to where it applies ([@mgedmin](https://github.com/mgedmin)) - - [#4497](https://github.com/facebook/create-react-app/pull/4497) [Read Me template patch] Warn about #871 until it's actually fixed. ([@saimonmoore](https://github.com/saimonmoore)) - - [#4205](https://github.com/facebook/create-react-app/pull/4205) Chokidar Updates ([@originell](https://github.com/originell)) - - [#4286](https://github.com/facebook/create-react-app/pull/4286) Fix some typos in README.md ([@apaatsio](https://github.com/apaatsio)) - - [#4298](https://github.com/facebook/create-react-app/pull/4298) Added learnstorybook.com to Storybook links ([@tmeasday](https://github.com/tmeasday)) - - [#4117](https://github.com/facebook/create-react-app/pull/4117) Document multiple build environments via `env-cmd` #4071 ([@jMuzsik](https://github.com/jMuzsik)) - - [#4197](https://github.com/facebook/create-react-app/pull/4197) Add troubleshooting for Github Pages ([@xnt](https://github.com/xnt)) - - [#4236](https://github.com/facebook/create-react-app/pull/4236) use the lastest url of gitignore file ([@Plortinus](https://github.com/Plortinus)) - - [#4239](https://github.com/facebook/create-react-app/pull/4239) Fix typo in comment and be clearer about `ecma` settings in uglifyjs options ([@danielberndt](https://github.com/danielberndt)) - - [#4164](https://github.com/facebook/create-react-app/pull/4164) Fix typos in example monorepo documentation. ([@bradfordlemley](https://github.com/bradfordlemley)) - - [#4089](https://github.com/facebook/create-react-app/pull/4089) Fix a typo in packages/react-scripts/template/README.md ([@nott](https://github.com/nott)) - - [#4101](https://github.com/facebook/create-react-app/pull/4101) Docs: Update status of Object Rest/Spread proposal ([@jpaquim](https://github.com/jpaquim)) - - [#4107](https://github.com/facebook/create-react-app/pull/4107) docs: use node_js 8 in example travis.yml ([@nikolas2](https://github.com/nikolas2)) - - [#3821](https://github.com/facebook/create-react-app/pull/3821) Updated react-scripts Readme.md to better document GitHub Pages ([@EdwaRen](https://github.com/EdwaRen)) - Other - - [#5102](https://github.com/facebook/create-react-app/pull/5102) Fix Troubleshooting link ([@gdi2290](https://github.com/gdi2290)) - - [#4551](https://github.com/facebook/create-react-app/pull/4551) Update targeted IE version in documentation ([@antzshrek](https://github.com/antzshrek)) - - [#4814](https://github.com/facebook/create-react-app/pull/4814) Update CODE_OF_CONDUCT.md ([@Ashleyotero](https://github.com/Ashleyotero)) - - [#4638](https://github.com/facebook/create-react-app/pull/4638) Add instructions on alternative methods of app creation ([@RusinovAnton](https://github.com/RusinovAnton)) - - [#4546](https://github.com/facebook/create-react-app/pull/4546) Update file tree view ([@antzshrek](https://github.com/antzshrek)) - - [#4449](https://github.com/facebook/create-react-app/pull/4449) add create-react-app-parcel to Alternatives section in README ([@sw-yx](https://github.com/sw-yx)) - - [#4294](https://github.com/facebook/create-react-app/pull/4294) documentation: added License to the README.md ([@thiagopaiva99](https://github.com/thiagopaiva99)) - - [#4323](https://github.com/facebook/create-react-app/pull/4323) Fix typo in e2e-simple.sh comment ([@bmuenzenmeyer](https://github.com/bmuenzenmeyer)) - - [#4134](https://github.com/facebook/create-react-app/pull/4134) fix: Minor typos ([@fejes713](https://github.com/fejes713)) - - [#4114](https://github.com/facebook/create-react-app/pull/4114) Update CONTRIBUTING.md ([@jkzing](https://github.com/jkzing)) - - [#3825](https://github.com/facebook/create-react-app/pull/3825) Add svg rendering for error example ([@marionebl](https://github.com/marionebl)) - - [#3810](https://github.com/facebook/create-react-app/pull/3810) Update screencast to use npx ([@marionebl](https://github.com/marionebl)) -- `create-react-app` - - [#4309](https://github.com/facebook/create-react-app/pull/4309) Fix typo to word bootstrapped in condition to check for old version o… ([@jamesvsshark](https://github.com/jamesvsshark)) - - [#4015](https://github.com/facebook/create-react-app/pull/4015) add `create-react-app --help` info for local file path `--scripts-version` support ([@albertstill](https://github.com/albertstill)) -- `react-dev-utils`, `react-scripts` - - [#3836](https://github.com/facebook/create-react-app/pull/3836) Use custom bit.ly links ([@bondz](https://github.com/bondz)) + - [#6847](https://github.com/facebook/create-react-app/pull/6847) Add baseUrl documentation ([@ianschmitz](https://github.com/ianschmitz)) + - [#6801](https://github.com/facebook/create-react-app/pull/6801) Copy fixes in adding Bootstrap docs ([@panckreous](https://github.com/panckreous)) + - [#6820](https://github.com/facebook/create-react-app/pull/6820) Fix docs about minimum React version for SVG component support ([@iansu](https://github.com/iansu)) + - [#6817](https://github.com/facebook/create-react-app/pull/6817) Add link to TypeScript page in Getting Started ([@ianschmitz](https://github.com/ianschmitz)) + - [#6786](https://github.com/facebook/create-react-app/pull/6786) Clarify production build output files documentation ([@bakuzan](https://github.com/bakuzan)) + - [#6783](https://github.com/facebook/create-react-app/pull/6783) Add SVG support dependency note ([@pnarielwala](https://github.com/pnarielwala)) + - [#6772](https://github.com/facebook/create-react-app/pull/6772) Update link to React Testing Library docs ([@fjoshuajr](https://github.com/fjoshuajr)) + - [#6695](https://github.com/facebook/create-react-app/pull/6695) Add Render deployment section ([@anurag](https://github.com/anurag)) + - [#6082](https://github.com/facebook/create-react-app/pull/6082) Add explanation for adding everything as dependencies to docs ([@mikeattara](https://github.com/mikeattara)) + - [#5481](https://github.com/facebook/create-react-app/pull/5481) Document .graphql and .gql file loading with graphql.macro ([@petetnt](https://github.com/petetnt)) + - [#6491](https://github.com/facebook/create-react-app/pull/6491) Update advanced-configuration.md ([@stephengodderidge](https://github.com/stephengodderidge)) + - [#6208](https://github.com/facebook/create-react-app/pull/6208) Add deployment instructions with AWS Amplify ([@swaminator](https://github.com/swaminator)) + - [#6374](https://github.com/facebook/create-react-app/pull/6374) Add note about npx caching and link to #6119 ([@TaylorBriggs](https://github.com/TaylorBriggs)) + - [#6386](https://github.com/facebook/create-react-app/pull/6386) Revert removal of newlines from html in docs ([@JBallin](https://github.com/JBallin)) +- `react-scripts` + - [#6848](https://github.com/facebook/create-react-app/pull/6848) Remove no-watch flag in favor of watchAll=false ([@bugzpodder](https://github.com/bugzpodder)) + - [#6775](https://github.com/facebook/create-react-app/pull/6775) Fix code comment typo ([@bestseob93](https://github.com/bestseob93)) #### :house: Internal -- `eslint-config-react-app` - - [#5205](https://github.com/facebook/create-react-app/pull/5205) Disable react/no-deprecated rule ([@Timer](https://github.com/Timer)) - - [#5051](https://github.com/facebook/create-react-app/pull/5051) Adjust ESLint configuration for v5 ([@Timer](https://github.com/Timer)) - - [#4187](https://github.com/facebook/create-react-app/pull/4187) Change no-unused-vars 'args' from none to all to show warning on dest… ([@goncy](https://github.com/goncy)) -- `babel-plugin-named-asset-import`, `babel-preset-react-app`, `confusing-browser-globals`, `create-react-app`, `eslint-config-react-app`, `react-app-polyfill`, `react-dev-utils`, `react-error-overlay`, `react-scripts` - - [#5192](https://github.com/facebook/create-react-app/pull/5192) Add license file to all packages ([@Timer](https://github.com/Timer)) - Other - - [#5183](https://github.com/facebook/create-react-app/pull/5183) Test class properties ([@Timer](https://github.com/Timer)) - - [#5146](https://github.com/facebook/create-react-app/pull/5146) Add behavior e2e tests ([@Timer](https://github.com/Timer)) - - [#4774](https://github.com/facebook/create-react-app/pull/4774) [internal] Use Yarn cache for travis ([@bugzpodder](https://github.com/bugzpodder)) - - [#4626](https://github.com/facebook/create-react-app/pull/4626) [internal] Fix node 10 test issue ([@bugzpodder](https://github.com/bugzpodder)) - - [#3816](https://github.com/facebook/create-react-app/pull/3816) Automate screencast recordings ([@marionebl](https://github.com/marionebl)) + - [#6829](https://github.com/facebook/create-react-app/pull/6829) Upgrade to Lerna v3 ([@iansu](https://github.com/iansu)) + - [#6762](https://github.com/facebook/create-react-app/pull/6762) Add temporary workaround for Babel dependency issues in kitchensink-eject test suite ([@iansu](https://github.com/iansu)) + - [#6757](https://github.com/facebook/create-react-app/pull/6757) Add temporary workaround for Babel dependency issues in installs test suite ([@iansu](https://github.com/iansu)) + - [#6700](https://github.com/facebook/create-react-app/pull/6700) Kill verdaccio in CI tasks cleanup ([@santoshyadav198613](https://github.com/santoshyadav198613)) + - [#6690](https://github.com/facebook/create-react-app/pull/6690) Remove duplicate url key in siteConfig ([@charpeni](https://github.com/charpeni)) - `react-scripts` - - [#5180](https://github.com/facebook/create-react-app/pull/5180) Fetch Workbox from CDN ([@Timer](https://github.com/Timer)) - - [#5170](https://github.com/facebook/create-react-app/pull/5170) Remove thread-loader ([@Timer](https://github.com/Timer)) - - [#5157](https://github.com/facebook/create-react-app/pull/5157) Forwards args through thread-loader ([@arcanis](https://github.com/arcanis)) - - [#5085](https://github.com/facebook/create-react-app/pull/5085) Remove highlightCode:true because it's now the default ([@marcofugaro](https://github.com/marcofugaro)) - - [#5098](https://github.com/facebook/create-react-app/pull/5098) [internal] remove babelrc dependency for kitchensink test ([@bugzpodder](https://github.com/bugzpodder)) - - [#5076](https://github.com/facebook/create-react-app/pull/5076) Revert "Add loader for .graphql files (#3909)" ([@Timer](https://github.com/Timer)) - - [#5062](https://github.com/facebook/create-react-app/pull/5062) Upgrade svgr to v2 and disable Prettier & SVGO ([@Timer](https://github.com/Timer)) - - [#5059](https://github.com/facebook/create-react-app/pull/5059) Switch back to cheap-module-source-map ([@jasonLaster](https://github.com/jasonLaster)) - - [#4891](https://github.com/facebook/create-react-app/pull/4891) Move favicon.ico to accommodate Chrome ([@thejohnfreeman](https://github.com/thejohnfreeman)) - - [#5053](https://github.com/facebook/create-react-app/pull/5053) Normalize babel caching across the board ([@Timer](https://github.com/Timer)) - - [#4550](https://github.com/facebook/create-react-app/pull/4550) Jest 23 and tests ([@bugzpodder](https://github.com/bugzpodder)) - - [#5043](https://github.com/facebook/create-react-app/pull/5043) Always lint with latest React version ([@Timer](https://github.com/Timer)) - - [#4955](https://github.com/facebook/create-react-app/pull/4955) Update webpack-dev-server 3.1.5 → 3.1.7 ([@addaleax](https://github.com/addaleax)) - - [#4776](https://github.com/facebook/create-react-app/pull/4776) Bump babel-loader to fix npm warning ([@frenzzy](https://github.com/frenzzy)) - - [#4767](https://github.com/facebook/create-react-app/pull/4767) [internal] Separate out kitchensink test into two ([@bugzpodder](https://github.com/bugzpodder)) - - [#4014](https://github.com/facebook/create-react-app/pull/4014) enable manifest plugin on dev ([@viankakrisna](https://github.com/viankakrisna)) - - [#4435](https://github.com/facebook/create-react-app/pull/4435) Update paths.js, rename shadow path variable ([@graemecode](https://github.com/graemecode)) - - [#4331](https://github.com/facebook/create-react-app/pull/4331) Bump `fsevents`. ([@wtgtybhertgeghgtwtg](https://github.com/wtgtybhertgeghgtwtg)) - - [#4174](https://github.com/facebook/create-react-app/pull/4174) Yarn workspace transpilation verification. ([@bradfordlemley](https://github.com/bradfordlemley)) - - [#3842](https://github.com/facebook/create-react-app/pull/3842) fix small grammatical typo in webpack config documentation ([@andrewerrico](https://github.com/andrewerrico)) + - [#6313](https://github.com/facebook/create-react-app/pull/6313) Update testMatch to also be compatible with Jest 24 ([@ngbrown](https://github.com/ngbrown)) + - [#4176](https://github.com/facebook/create-react-app/pull/4176) Remove --coverage + --watch workaround for the test command ([@stipsan](https://github.com/stipsan)) + - [#6655](https://github.com/facebook/create-react-app/pull/6655) Change app component declaration from arrow function to regular function ([@iansu](https://github.com/iansu)) + - [#6625](https://github.com/facebook/create-react-app/pull/6625) change named import into default import ([@xiaoxiangmoe](https://github.com/xiaoxiangmoe)) + - [#6621](https://github.com/facebook/create-react-app/pull/6621) make compiler a const not a let ([@Primajin](https://github.com/Primajin)) +- `babel-plugin-named-asset-import`, `confusing-browser-globals`, `react-dev-utils`, `react-error-overlay`, `react-scripts` + - [#6654](https://github.com/facebook/create-react-app/pull/6654) Cleanup Jest config ([@ianschmitz](https://github.com/ianschmitz)) - `react-dev-utils` - - [#5150](https://github.com/facebook/create-react-app/pull/5150) Run behavioral smoke tests with Jest, add output tests ([@Timer](https://github.com/Timer)) - - [#4514](https://github.com/facebook/create-react-app/pull/4514) Make Sass missing message friendlier ([@Timer](https://github.com/Timer)) - - [#4138](https://github.com/facebook/create-react-app/pull/4138) Allow ModuleScopePlugin accecpts an array as its appSrc ([@froyog](https://github.com/froyog)) - - [#4016](https://github.com/facebook/create-react-app/pull/4016) (chore): Alphabetize and clean files-array in react-dev-utils package.json ([@petetnt](https://github.com/petetnt)) -- `babel-preset-react-app`, `react-error-overlay`, `react-scripts` - - [#5143](https://github.com/facebook/create-react-app/pull/5143) Switch back to babel-loader ([@iansu](https://github.com/iansu)) + - [#6674](https://github.com/facebook/create-react-app/pull/6674) Remove unused eslint comment ([@mohitsinghs](https://github.com/mohitsinghs)) +- `eslint-config-react-app` + - [#6662](https://github.com/facebook/create-react-app/pull/6662) Sync version of babel-eslint in eslint-config-react-app for react-scripts V3 ([@dalcib](https://github.com/dalcib)) + +#### :hammer: Underlying Tools + +- `react-scripts` + - [#6843](https://github.com/facebook/create-react-app/pull/6843) Update fsevents dependency version ([@FrancoisRmn](https://github.com/FrancoisRmn)) + - [#6725](https://github.com/facebook/create-react-app/pull/6725) Update to workbox-webpack-plugin v4 ([@r0ughnex](https://github.com/r0ughnex)) + - [#6361](https://github.com/facebook/create-react-app/pull/6361) Updating html-webpack-plugin dep ([@Aftabnack](https://github.com/Aftabnack)) + - [#6483](https://github.com/facebook/create-react-app/pull/6483) Update webpack-dev-server to 3.2.1 ([@ThePrez](https://github.com/ThePrez)) +- `babel-plugin-named-asset-import`, `babel-preset-react-app`, `confusing-browser-globals`, `create-react-app`, `eslint-config-react-app`, `react-app-polyfill`, `react-dev-utils`, `react-error-overlay`, `react-scripts` + - [#6840](https://github.com/facebook/create-react-app/pull/6840) Relax ESLint version range ([@ianschmitz](https://github.com/ianschmitz)) - `babel-preset-react-app` - - [#5119](https://github.com/facebook/create-react-app/pull/5119) Clean up @babel/plugin-transform-regenerator ([@lixiaoyan](https://github.com/lixiaoyan)) - - [#5033](https://github.com/facebook/create-react-app/pull/5033) Lock babel configuration back to IE 9 support (ES5) ([@Timer](https://github.com/Timer)) -- `react-dev-utils`, `react-scripts` - - [#5091](https://github.com/facebook/create-react-app/pull/5091) Allow stage 3 css transforms ([@Timer](https://github.com/Timer)) - - [#5054](https://github.com/facebook/create-react-app/pull/5054) Ensure Babel files get purged on upgrades ([@Timer](https://github.com/Timer)) - - [#5031](https://github.com/facebook/create-react-app/pull/5031) Upgrade `html-webpack-plugin` to fix tests ([@Timer](https://github.com/Timer)) -- `babel-preset-react-app`, `create-react-app`, `react-dev-utils`, `react-error-overlay`, `react-scripts` - - [#5080](https://github.com/facebook/create-react-app/pull/5080) Update tons of packages ([@Timer](https://github.com/Timer)) -- `react-error-overlay`, `react-scripts` - - [#5050](https://github.com/facebook/create-react-app/pull/5050) Eslint 5.6 ([@bugzpodder](https://github.com/bugzpodder)) -- `babel-plugin-named-asset-import`, `babel-preset-react-app`, `react-dev-utils`, `react-error-overlay`, `react-scripts` - - [#5042](https://github.com/facebook/create-react-app/pull/5042) Upgrade to Babel 7 stable ([@Timer](https://github.com/Timer)) - - [#4253](https://github.com/facebook/create-react-app/pull/4253) Upgrade Babel to `beta.44` ([@andriijas](https://github.com/andriijas)) -- `confusing-browser-globals`, `react-dev-utils`, `react-error-overlay`, `react-scripts` - - [#5032](https://github.com/facebook/create-react-app/pull/5032) Upgrade `react-scripts` dependencies ([@Timer](https://github.com/Timer)) -- `react-dev-utils`, `react-error-overlay`, `react-scripts` - - [#5026](https://github.com/facebook/create-react-app/pull/5026) Switch from uglifyjs to terser ([@Timer](https://github.com/Timer)) -- `create-react-app` - - [#4383](https://github.com/facebook/create-react-app/pull/4383) Add Node 10 to Travis config and remove Node 6 ([@iansu](https://github.com/iansu)) - - [#3853](https://github.com/facebook/create-react-app/pull/3853) pin envinfo version to 3.4.2 ([@bondz](https://github.com/bondz)) -- `react-error-overlay` - - [#4211](https://github.com/facebook/create-react-app/pull/4211) Revert lint-related changes made in #4193 ([@NMinhNguyen](https://github.com/NMinhNguyen)) - - [#4193](https://github.com/facebook/create-react-app/pull/4193) Minor fixes to CI ([@ro-savage](https://github.com/ro-savage)) -- `confusing-browser-globals`, `eslint-config-react-app` - - [#2286](https://github.com/facebook/create-react-app/pull/2286) Add restricted globals package ([@sidoshi](https://github.com/sidoshi)) + - [#6780](https://github.com/facebook/create-react-app/pull/6780) Remove unused babel-loader from babel-preset-react-app ([@tlrobinson](https://github.com/tlrobinson)) +- `babel-preset-react-app`, `react-dev-utils`, `react-error-overlay`, `react-scripts` + - [#6767](https://github.com/facebook/create-react-app/pull/6767) Update dependency versions ([@ianschmitz](https://github.com/ianschmitz)) +- `react-dev-utils` + - [#6739](https://github.com/facebook/create-react-app/pull/6739) Update fork-ts-checker-webpack-plugin out of alpha ([@pelotom](https://github.com/pelotom)) +- `eslint-config-react-app` + - [#6701](https://github.com/facebook/create-react-app/pull/6701) Remove project property from @typescript-eslint/parser options ([@jackwilsdon](https://github.com/jackwilsdon)) - `eslint-config-react-app`, `react-scripts` - - [#3723](https://github.com/facebook/create-react-app/pull/3723) Updating ESlint to ^4.15.0 and adding new rules to config ([@chrislaughlin](https://github.com/chrislaughlin)) - -#### Committers: 116 - -- A.J. Roberts ([@detrohutt](https://github.com/detrohutt)) -- Aaron Reisman ([@lifeiscontent](https://github.com/lifeiscontent)) -- Ade Viankakrisna Fadlil ([@viankakrisna](https://github.com/viankakrisna)) -- Albert Still ([@albertstill](https://github.com/albertstill)) -- Alex Brazier ([@alexbrazier](https://github.com/alexbrazier)) -- Andreas Cederström ([@andriijas](https://github.com/andriijas)) -- Andrew ([@andrewerrico](https://github.com/andrewerrico)) -- Andrew Clark ([@acdlite](https://github.com/acdlite)) -- Andrew Ho ([@andrwh](https://github.com/andrwh)) -- Andrey Sitnik ([@ai](https://github.com/ai)) -- Anna Henningsen ([@addaleax](https://github.com/addaleax)) -- Anton Rusinov ([@RusinovAnton](https://github.com/RusinovAnton)) -- Antti Ahti ([@apaatsio](https://github.com/apaatsio)) -- Ashley Otero ([@Ashleyotero](https://github.com/Ashleyotero)) -- Bond ([@bondz](https://github.com/bondz)) -- Bradford Lemley ([@bradfordlemley](https://github.com/bradfordlemley)) -- Brian Muenzenmeyer ([@bmuenzenmeyer](https://github.com/bmuenzenmeyer)) -- Brian Ng ([@existentialism](https://github.com/existentialism)) -- Chad Greenburg ([@CGreenburg](https://github.com/CGreenburg)) -- Chris Laughlin ([@chrislaughlin](https://github.com/chrislaughlin)) -- Clement Hoang ([@clemmy](https://github.com/clemmy)) -- Conrad Buck ([@conartist6](https://github.com/conartist6)) -- Craig Mulligan ([@hobochild](https://github.com/hobochild)) -- Dan Abramov ([@gaearon](https://github.com/gaearon)) -- Daniel ([@danielberndt](https://github.com/danielberndt)) -- Daniel Wang ([@dwang](https://github.com/dwang)) -- David Moodie ([@davejm](https://github.com/davejm)) -- Dmitriy Sadkovoy ([@sadkovoy](https://github.com/sadkovoy)) -- Eduardo Rabelo ([@oieduardorabelo](https://github.com/oieduardorabelo)) -- Edward Ren (Eddie) ([@EdwaRen](https://github.com/EdwaRen)) -- Ernesto García ([@gnapse](https://github.com/gnapse)) -- Eugene Kopich ([@web2033](https://github.com/web2033)) -- Fabiano Brito ([@Fabianopb](https://github.com/Fabianopb)) -- Fabrizio Cucci ([@fabriziocucci](https://github.com/fabriziocucci)) -- Fredrik Palmquist ([@fiddep](https://github.com/fiddep)) -- Futa Ogawa ([@ogawa0071](https://github.com/ogawa0071)) -- Gary Meehan ([@garmeeh](https://github.com/garmeeh)) -- Gonzalo Pozzo ([@goncy](https://github.com/goncy)) -- Grady Kuhnline ([@heygrady](https://github.com/heygrady)) -- Graeme ([@graemecode](https://github.com/graemecode)) -- Harry Moreno ([@morenoh149](https://github.com/morenoh149)) + - [#6653](https://github.com/facebook/create-react-app/pull/6653) Unpin eslint-config-react-hooks dependency ([@iansu](https://github.com/iansu)) +- `babel-preset-react-app`, `eslint-config-react-app`, `react-scripts` + - [#5997](https://github.com/facebook/create-react-app/pull/5997) Support React Hooks (#5602) ([@eivind88](https://github.com/eivind88)) +- `babel-preset-react-app`, `create-react-app`, `react-app-polyfill`, `react-dev-utils`, `react-error-overlay`, `react-scripts` + - [#6614](https://github.com/facebook/create-react-app/pull/6614) Upgrade dependencies ([@ianschmitz](https://github.com/ianschmitz)) + +#### Committers: 49 + +- Abdelrahman Rifai ([@abdelrahmanrifai](https://github.com/abdelrahmanrifai)) +- Aftab Khan ([@Aftabnack](https://github.com/Aftabnack)) +- Alessandro (Ale) Segala ([@ItalyPaleAle](https://github.com/ItalyPaleAle)) +- Alex Guerra ([@heyimalex](https://github.com/heyimalex)) +- Andrew Luca ([@iamandrewluca](https://github.com/iamandrewluca)) +- Anurag Goel ([@anurag](https://github.com/anurag)) +- Cody Olsen ([@stipsan](https://github.com/stipsan)) +- Dalci de Jesus Bagolin ([@dalcib](https://github.com/dalcib)) +- Dan ([@panckreous](https://github.com/panckreous)) +- Eivind Arvesen ([@eivind88](https://github.com/eivind88)) +- Endilie Yacop Sucipto ([@endiliey](https://github.com/endiliey)) +- Francisco Joshua ([@fjoshuajr](https://github.com/fjoshuajr)) +- Hrusikesh Panda ([@mrchief](https://github.com/mrchief)) +- Ian Schmitz ([@ianschmitz](https://github.com/ianschmitz)) - Ian Sutherland ([@iansu](https://github.com/iansu)) -- Ideveloper ([@zx6658](https://github.com/zx6658)) -- Igor Fedyukin ([@ifedyukin](https://github.com/ifedyukin)) -- Irvin Denzel Torcuato ([@identor](https://github.com/identor)) -- JK ([@jkzing](https://github.com/jkzing)) -- Jack Franklin ([@jackfranklin](https://github.com/jackfranklin)) +- JBallin ([@JBallin](https://github.com/JBallin)) +- Jack Wilsdon ([@jackwilsdon](https://github.com/jackwilsdon)) - Jack Zhao ([@bugzpodder](https://github.com/bugzpodder)) -- James B. Pollack ([@imgntn](https://github.com/imgntn)) -- James Simoes ([@jamesvsshark](https://github.com/jamesvsshark)) -- Jason Laster ([@jasonLaster](https://github.com/jasonLaster)) -- Jed Fox ([@j-f1](https://github.com/j-f1)) -- Jeffrey Posnick ([@jeffposnick](https://github.com/jeffposnick)) -- Jerry ([@jMuzsik](https://github.com/jMuzsik)) -- Jih-Chi Lee ([@jihchi](https://github.com/jihchi)) -- Joe Haddad ([@Timer](https://github.com/Timer)) -- Joel George V ([@joelgeorgev](https://github.com/joelgeorgev)) -- John Freeman ([@thejohnfreeman](https://github.com/thejohnfreeman)) -- Joshua Comeau ([@joshwcomeau](https://github.com/joshwcomeau)) -- João Paquim ([@jpaquim](https://github.com/jpaquim)) -- Kent C. Dodds ([@kentcdodds](https://github.com/kentcdodds)) -- Kévin Dunglas ([@dunglas](https://github.com/dunglas)) -- Levin Rickert ([@levrik](https://github.com/levrik)) -- Luis Nell ([@originell](https://github.com/originell)) -- Luke Jackson ([@lukejacksonn](https://github.com/lukejacksonn)) -- Maciej Kasprzyk ([@maciej-ka](https://github.com/maciej-ka)) -- Magnús Örn Gylfason ([@mg](https://github.com/mg)) -- Marco Fugaro ([@marcofugaro](https://github.com/marcofugaro)) -- Marco Slooten ([@mslooten](https://github.com/mslooten)) -- Marek Suscak ([@mareksuscak](https://github.com/mareksuscak)) -- Mario Nebl ([@marionebl](https://github.com/marionebl)) -- Marius Gedminas ([@mgedmin](https://github.com/mgedmin)) -- Marko Kaznovac ([@kaznovac](https://github.com/kaznovac)) -- Martin Lechner ([@martinlechner1](https://github.com/martinlechner1)) -- Maurice de Beijer ([@mauricedb](https://github.com/mauricedb)) -- Maël Nison ([@arcanis](https://github.com/arcanis)) -- Michaël De Boey ([@MichaelDeBoey](https://github.com/MichaelDeBoey)) -- Miguel Palau ([@shelldandy](https://github.com/shelldandy)) -- Mike Kusold ([@kusold](https://github.com/kusold)) -- Mike Wilcox ([@mjw56](https://github.com/mjw56)) -- Mikhail Osher ([@miraage](https://github.com/miraage)) -- Minh Nguyen ([@NMinhNguyen](https://github.com/NMinhNguyen)) -- Nick Bartlett ([@tteltrab](https://github.com/tteltrab)) -- PatrickJS ([@gdi2290](https://github.com/gdi2290)) +- Jannis Hell ([@Primajin](https://github.com/Primajin)) +- John Reilly ([@johnnyreilly](https://github.com/johnnyreilly)) +- Kelvin Jin ([@kjin](https://github.com/kjin)) +- Lorenzo Rapetti ([@loryman](https://github.com/loryman)) +- Luiz Felipe Gonçalves ([@lffg](https://github.com/lffg)) +- Mateusz Burzyński ([@Andarist](https://github.com/Andarist)) +- Mike Beaton ([@MikeBeaton](https://github.com/MikeBeaton)) +- Mike Perry Y Attara ([@mikeattara](https://github.com/mikeattara)) +- Mohit Singh ([@mohitsinghs](https://github.com/mohitsinghs)) +- Nathan Brown ([@ngbrown](https://github.com/ngbrown)) +- Nicolas Charpentier ([@charpeni](https://github.com/charpeni)) +- Nikhil Swaminathan ([@swaminator](https://github.com/swaminator)) +- Parth Narielwala ([@pnarielwala](https://github.com/pnarielwala)) - Pete Nykänen ([@petetnt](https://github.com/petetnt)) -- Piotr ([@piotr-cz](https://github.com/piotr-cz)) -- Rami ([@evilchuck](https://github.com/evilchuck)) -- Reuben Antz ([@antzshrek](https://github.com/antzshrek)) -- Ro Savage ([@ro-savage](https://github.com/ro-savage)) -- Rob Grochowicz ([@rgrochowicz](https://github.com/rgrochowicz)) -- Robin van der Vleuten ([@robinvdvleuten](https://github.com/robinvdvleuten)) -- Sagiv ben giat ([@sag1v](https://github.com/sag1v)) -- Saimon Moore ([@saimonmoore](https://github.com/saimonmoore)) -- Sendil Kumar N ([@sendilkumarn](https://github.com/sendilkumarn)) -- Siddharth Doshi ([@sidoshi](https://github.com/sidoshi)) -- Stas Rudakou ([@nott](https://github.com/nott)) -- Stefan Feješ ([@fejes713](https://github.com/fejes713)) -- Thiago Galvani ([@thiagopaiva99](https://github.com/thiagopaiva99)) -- Tom Coleman ([@tmeasday](https://github.com/tmeasday)) -- Tore Hammervoll ([@skoging](https://github.com/skoging)) -- Trevor Brindle ([@tabrindle](https://github.com/tabrindle)) -- Vicente Plata ([@xnt](https://github.com/xnt)) -- Victor Amupitan ([@amupitan](https://github.com/amupitan)) -- Viktor Havrylin ([@Fer0x](https://github.com/Fer0x)) -- Vladimir Kutepov ([@frenzzy](https://github.com/frenzzy)) -- William Chargin ([@wchargin](https://github.com/wchargin)) -- XiaoYan Li ([@lixiaoyan](https://github.com/lixiaoyan)) -- [@Plortinus](https://github.com/Plortinus) -- [@arianon](https://github.com/arianon) -- [@everdimension](https://github.com/everdimension) -- [@nikolas2](https://github.com/nikolas2) -- [@stereobooster](https://github.com/stereobooster) -- [@wtgtybhertgeghgtwtg](https://github.com/wtgtybhertgeghgtwtg) -- aisensiy ([@aisensiy](https://github.com/aisensiy)) -- froyog ([@froyog](https://github.com/froyog)) -- shawn wang ([@sw-yx](https://github.com/sw-yx)) - -## Releases Before 2.x - -Please refer to [CHANGELOG-1.x.md](./CHANGELOG-1.x.md) for earlier versions. +- Philip Harrison ([@feelepxyz](https://github.com/feelepxyz)) +- Pradeep Sekar ([@r0ughnex](https://github.com/r0ughnex)) +- Raphael.dev ([@bestseob93](https://github.com/bestseob93)) +- Robert van Steen ([@rovansteen](https://github.com/rovansteen)) +- Romain François ([@FrancoisRmn](https://github.com/FrancoisRmn)) +- Salvador Hernandez ([@clickclickonsal](https://github.com/clickclickonsal)) +- Santosh Yadav ([@santoshyadav198613](https://github.com/santoshyadav198613)) +- Stephen Godderidge ([@stephengodderidge](https://github.com/stephengodderidge)) +- Taylor Briggs ([@TaylorBriggs](https://github.com/TaylorBriggs)) +- Tom Crockett ([@pelotom](https://github.com/pelotom)) +- Tom Robinson ([@tlrobinson](https://github.com/tlrobinson)) +- Travis Fischer ([@transitive-bullshit](https://github.com/transitive-bullshit)) +- Wilkins ([@evalexpr](https://github.com/evalexpr)) +- ZHAO Jinxiang ([@xiaoxiangmoe](https://github.com/xiaoxiangmoe)) +- [@ThePrez](https://github.com/ThePrez) +- [@bakuzan](https://github.com/bakuzan) +- [@frederikhors](https://github.com/frederikhors) + +## Releases Before 3.x + +Please refer to [CHANGELOG-2.x.md](./CHANGELOG-2.x.md) for earlier versions. diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 531befe574b..76e704dacb1 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 -- prepatch --canary --preid next --dist-tag next --npm-client npm --force-publish` instead of `npm run publish`. --- diff --git a/README.md b/README.md index 8e33b113b62..75aed91b989 100644 --- a/README.md +++ b/README.md @@ -1,9 +1,9 @@ -# Create React App [](https://travis-ci.org/facebook/create-react-app) +# Create React App [](https://travis-ci.org/facebook/create-react-app) [](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). @@ -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 - +Error Button ``` **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-a-sass-stylesheet.md b/docusaurus/docs/adding-a-sass-stylesheet.md index dc3f77392be..1697de27541 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 @@ -30,14 +30,35 @@ This will allow you to do imports like @import '~nprogress/nprogress'; // importing a css file from the nprogress node module ``` -> **Tip:** You can opt into using this feature with [CSS modules](adding-a-css-modules-stylesheet.md) too! - > **Note:** You must prefix imports from `node_modules` with `~` as displayed above. -> **Note:** If you're using Flow, add the following to your `.flowconfig` so it'll recognize the `.sass` or `.scss` imports. +`node-sass` also supports the `SASS_PATH` variable. + +To use imports relative to a path you specify, and from `node_modules` without adding the `~` prefix, you can add a [`.env` file](https://github.com/facebook/create-react-app/blob/master/docusaurus/docs/adding-custom-environment-variables.md#adding-development-environment-variables-in-env) at the project root with the variable `SASS_PATH=node_modules:src`. To specify more directories you can add them to `SASS_PATH` separated by a `:` like `path1:path2:path3`. + +If you set `SASS_PATH=node_modules:src`, this will allow you to do imports like + +```scss +@import 'styles/colors'; // assuming a styles directory under src/, where _colors.scss partial file exists. +@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. > > ``` > [options] +> module.file_ext=.js +> module.file_ext=.jsx +> module.file_ext=.mjs +> module.file_ext=.json > module.file_ext=.sass > module.file_ext=.scss > ``` diff --git a/docusaurus/docs/adding-bootstrap.md b/docusaurus/docs/adding-bootstrap.md index dc97b6cab94..7a8167050aa 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-css-reset.md b/docusaurus/docs/adding-css-reset.md new file mode 100644 index 00000000000..23821829c3e --- /dev/null +++ b/docusaurus/docs/adding-css-reset.md @@ -0,0 +1,71 @@ +--- +id: adding-css-reset +title: Adding a CSS Reset +sidebar_label: Adding CSS Reset +--- + +This project setup uses [PostCSS Normalize] for adding a [CSS Reset]. + +To start using it, add `@import-normalize;` anywhere in your CSS file(s). You only need to include it once and duplicate imports are automatically removed. Since you only need to include it once, a good place to add it is `index.css` or `App.css`. + +## `index.css` + +```css +@import-normalize; /* bring in normalize.css styles */ + +/* rest of app styles */ +``` + +You can control which parts of [normalize.css] to use via your project's [browserslist]. + +Results when [browserslist] is `last 3 versions`: + +```css +/** + * Add the correct display in IE 9-. + */ + +audio, +video { + display: inline-block; +} + +/** + * Remove the border on images inside links in IE 10-. + */ + +img { + border-style: none; +} +``` + +Results when [browserslist] is `last 2 versions`: + +```css +/** + * Remove the border on images inside links in IE 10-. + */ + +img { + border-style: none; +} +``` + +## Browser support + +Browser support is dictated by what normalize.css [supports]. As of this writing, it includes: + +- Chrome (last 3) +- Edge (last 3) +- Firefox (last 3) +- Firefox ESR +- Opera (last 3) +- Safari (last 3) +- iOS Safari (last 2) +- Internet Explorer 9+ + +[browserslist]: http://browserl.ist/ +[css reset]: https://cssreset.com/what-is-a-css-reset/ +[normalize.css]: https://github.com/csstools/normalize.css +[supports]: https://github.com/csstools/normalize.css#browser-support +[postcss normalize]: https://github.com/csstools/postcss-normalize diff --git a/docusaurus/docs/adding-custom-environment-variables.md b/docusaurus/docs/adding-custom-environment-variables.md index 15d5527106b..97fc21fd11d 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,11 +112,13 @@ 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. +> Note: You need to restart the development server after changing `.env` files. + `.env` files **should be** checked into source control (with the exclusion of `.env*.local`). ### What other `.env` files can be used? diff --git a/docusaurus/docs/adding-images-fonts-and-files.md b/docusaurus/docs/adding-images-fonts-and-files.md index c481d96c75d..ef1d4d8697e 100644 --- a/docusaurus/docs/adding-images-fonts-and-files.md +++ b/docusaurus/docs/adding-images-fonts-and-files.md @@ -44,7 +44,7 @@ An alternative way of handling static assets is described in the next section. ## Adding SVGs -> Note: this feature is available with `react-scripts@2.0.0` and higher. +> Note: this feature is available with `react-scripts@2.0.0` and higher, and `react@16.3.0` and higher. One way to add SVG files was described in the section above. You can also import SVGs directly as React components. You can use either of the two approaches. In your code it would look like this: diff --git a/docusaurus/docs/adding-typescript.md b/docusaurus/docs/adding-typescript.md index 68b79165f4a..1fb14a82ba1 100644 --- a/docusaurus/docs/adding-typescript.md +++ b/docusaurus/docs/adding-typescript.md @@ -7,12 +7,26 @@ 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 +``` + +> 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. + 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**! @@ -21,6 +35,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 c991fd72edb..55ad8a8f77d 100644 --- a/docusaurus/docs/advanced-configuration.md +++ b/docusaurus/docs/advanced-configuration.md @@ -5,16 +5,18 @@ 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). +> Note: You do not need to declare `REACT_APP_` before the below variables as you would with custom environment variables. + | Variable | Development | Production | Usage | | :------------------- | :---------: | :--------: | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | BROWSER | ✅ Used | 🚫 Ignored | By default, Create React App will open the default system browser, favoring Chrome on macOS. Specify a [browser](https://github.com/sindresorhus/opn#app) to override this behavior, or set it to `none` to disable it completely. If you need to customize the way the browser is launched, you can specify a node script instead. Any arguments passed to `npm start` will also be passed to this script, and the url where your app is served will be the last argument. Your script's file name must have the `.js` extension. | | HOST | ✅ Used | 🚫 Ignored | By default, the development web server binds to `localhost`. You may use this variable to specify a different host. | | PORT | ✅ Used | 🚫 Ignored | By default, the development web server will attempt to listen on port 3000 or prompt you to attempt the next available port. You may use this variable to specify a different port. | | HTTPS | ✅ Used | 🚫 Ignored | When set to `true`, Create React App will run the development server in `https` mode. | -| PUBLIC_URL | 🚫 Ignored | ✅ Used | Create React App assumes your application is hosted at the serving web server's root or a subpath as specified in [`package.json` (`homepage`)](deployment#building-for-relative-paths). Normally, Create React App ignores the hostname. You may use this variable to force assets to be referenced verbatim to the url you provide (hostname included.md). This may be particularly useful when using a CDN to host your application. | +| PUBLIC_URL | 🚫 Ignored | ✅ Used | Create React App assumes your application is hosted at the serving web server's root or a subpath as specified in [`package.json` (`homepage`)](deployment#building-for-relative-paths). Normally, Create React App ignores the hostname. You may use this variable to force assets to be referenced verbatim to the url you provide (hostname included). This may be particularly useful when using a CDN to host your application. | | CI | ✅ Used | ✅ Used | When set to `true`, Create React App treats warnings as failures in the build. It also makes the test runner non-watching. Most CIs set this flag by default. | | REACT_EDITOR | ✅ Used | 🚫 Ignored | When an app crashes in development, you will see an error overlay with clickable stack trace. When you click on it, Create React App will try to determine the editor you are using based on currently running processes, and open the relevant source file. You can [send a pull request to detect your editor of choice](https://github.com/facebook/create-react-app/issues/2636). Setting this environment variable overrides the automatic detection. If you do it, make sure your systems [PATH]() environment variable points to your editor’s bin folder. You can also set it to `none` to disable it completely. | | CHOKIDAR_USEPOLLING | ✅ Used | 🚫 Ignored | When set to `true`, the watcher runs in polling mode, as necessary inside a VM. Use this option if `npm start` isn't detecting changes. | | GENERATE_SOURCEMAP | 🚫 Ignored | ✅ Used | When set to `false`, source maps are not generated for a production build. This solves OOM issues on some smaller machines. | | NODE_PATH | ✅ Used | ✅ Used | Same as [`NODE_PATH` in Node.js](https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders), but only relative folders are allowed. Can be handy for emulating a monorepo setup by setting `NODE_PATH=src`. | -| INLINE_RUNTIME_CHUNK | 🚫 Ignored | ✅ Used | By default, Create React App will embed the runtime script into `index.html` during the production build. When set to `false`, the script will not be embedded and will be imported as usual. This is normally required when dealing with CSP. | | +| INLINE_RUNTIME_CHUNK | 🚫 Ignored | ✅ Used | By default, Create React App will embed the runtime script into `index.html` during the production build. When set to `false`, the script will not be embedded and will be imported as usual. This is normally required when dealing with CSP. | 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..b171147528d 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` @@ -30,6 +30,10 @@ See the section about [deployment](deployment.md) for more information. If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. -Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own. +Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc.) into your project as dependencies in `package.json`. Technically, the distinction between dependencies and development dependencies is pretty arbitrary for front-end apps that produce static bundles. + +In addition, it used to cause problems with some hosting platforms that didn't install development dependencies (and thus weren't able to build the project on the server or test it right before deployment). You are free to rearrange your dependencies in `package.json` as you see fit. + +All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own. You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it. 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/debugging-tests.md b/docusaurus/docs/debugging-tests.md index 93da201a9f6..612c4a2409d 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": [ @@ -51,11 +51,7 @@ Use the following [`launch.json`](https://code.visualstudio.com/docs/editor/debu "type": "node", "request": "launch", "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/react-scripts", - "args": [ - "test", - "--runInBand", - "--no-cache" - ], + "args": ["test", "--runInBand", "--no-cache", "--watchAll=false"], "cwd": "${workspaceRoot}", "protocol": "inspector", "console": "integratedTerminal", diff --git a/docusaurus/docs/deployment.md b/docusaurus/docs/deployment.md index b3da65048d4..78e4ee254a3 100644 --- a/docusaurus/docs/deployment.md +++ b/docusaurus/docs/deployment.md @@ -1,461 +1,487 @@ ---- -id: deployment -title: Deployment -sidebar_label: Deployment ---- - -`npm run build` creates a `build` directory with a production build of your app. Set up your favorite HTTP server so that a visitor to your site is served `index.html`, and requests to static paths like `/static/js/main..js` are served with the contents of the `/static/js/main..js` file. - -## Static Server - -For environments using [Node](https://nodejs.org/), the easiest way to handle this would be to install [serve](https://github.com/zeit/serve) and let it handle the rest: - -```sh -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. - -Run this command to get a full list of the options available: - -```sh -serve -h -``` - -## Other Solutions - -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/): - -```javascript -const express = require('express'); -const path = require('path'); -const app = express(); - -app.use(express.static(path.join(__dirname, 'build'))); - -app.get('/', function(req, res) { - res.sendFile(path.join(__dirname, 'build', 'index.html')); -}); - -app.listen(9000); -``` - -The choice of your server software isn’t important either. Since Create React App is completely platform-agnostic, there’s no need to explicitly use Node. - -The `build` folder with static assets is the only output produced by Create React App. - -However this is not quite enough if you use client-side routing. Read the next section if you want to support URLs like `/todos/42` in your single-page app. - -## Serving Apps with Client-Side Routing - -If you use routers that use the HTML5 [`pushState` history API](https://developer.mozilla.org/en-US/docs/Web/API/History_API#Adding_and_modifying_history_entries) under the hood (for example, [React Router](https://github.com/ReactTraining/react-router) with `browserHistory`), many static file servers will fail. For example, if you used React Router with a route for `/todos/42`, the development server will respond to `localhost:3000/todos/42` properly, but an Express serving a production build as above will not. - -This is because when there is a fresh page load for a `/todos/42`, the server looks for the file `build/todos/42` and does not find it. The server needs to be configured to respond to a request to `/todos/42` by serving `index.html`. For example, we can amend our Express example above to serve `index.html` for any unknown paths: - -```diff - app.use(express.static(path.join(__dirname, 'build'))); - --app.get('/', function (req, res) { -+app.get('/*', function (req, res) { - res.sendFile(path.join(__dirname, 'build', 'index.html')); - }); -``` - -If you’re using [Apache HTTP Server](https://httpd.apache.org/), you need to create a `.htaccess` file in the `public` folder that looks like this: - -``` - Options -MultiViews - RewriteEngine On - RewriteCond %{REQUEST_FILENAME} !-f - RewriteRule ^ index.html [QSA,L] -``` - -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). - -Now requests to `/todos/42` will be handled correctly both in development and in production. - -On a production build, and when you've [opted-in](making-a-progressive-web-app.md#why-opt-in), -a [service worker](https://developers.google.com/web/fundamentals/primers/service-workers/) will automatically handle all navigation requests, like for -`/todos/42`, by serving the cached copy of your `index.html`. This -service worker navigation routing can be configured or disabled by -[`eject`ing](available-scripts.md#npm-run-eject) and then modifying the -[`navigateFallback`](https://github.com/GoogleChrome/sw-precache#navigatefallback-string) -and [`navigateFallbackWhitelist`](https://github.com/GoogleChrome/sw-precache#navigatefallbackwhitelist-arrayregexp) -options of the `SWPreachePlugin` [configuration](../config/webpack.config.prod.js). - -When users install your app to the homescreen of their device the default configuration will make a shortcut to `/index.html`. This may not work for client-side routers which expect the app to be served from `/`. Edit the web app manifest at [`public/manifest.json`](public/manifest.json) and change `start_url` to match the required URL scheme, for example: - -```js - "start_url": ".", -``` - -## Building for Relative Paths - -By default, Create React App produces a build assuming your app is hosted at the server root. -To override this, specify the `homepage` in your `package.json`, for example: - -```js - "homepage": "http://mywebsite.com/relativepath", -``` - -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). - -For example: - -```js - - // renders -``` - -### Serving the Same Build from Different Paths - -> Note: this feature is available with `react-scripts@0.9.0` and higher. - -If you are not using the HTML5 `pushState` history API or not using client-side routing at all, it is unnecessary to specify the URL from which your app will be served. Instead, you can put this in your `package.json`: - -```js - "homepage": ".", -``` - -This will make sure that all the asset paths are relative to `index.html`. You will then be able to move your app from `http://mywebsite.com` to `http://mywebsite.com/relativepath` or even `http://mywebsite.com/relative/path` without having to rebuild it. - -## Customizing Environment Variables for Arbitrary Build Environments - -You can create an arbitrary build environment by creating a custom `.env` file and loading it using [env-cmd](https://www.npmjs.com/package/env-cmd). - -For example, to create a build environment for a staging environment: - -1. Create a file called `.env.staging` -1. Set environment variables as you would any other `.env` file (e.g. `REACT_APP_API_URL=http://api-staging.example.com`) -1. Install [env-cmd](https://www.npmjs.com/package/env-cmd) - ```sh - $ npm install env-cmd --save - $ # or - $ yarn add env-cmd - ``` -1. Add a new script to your `package.json`, building with your new environment: - ```json - { - "scripts": { - "build:staging": "env-cmd .env.staging npm run build" - } - } - ``` - -Now you can run `npm run build:staging` to build with the staging environment config. -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. - -## [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. - -See [this](https://medium.com/@strid/host-create-react-app-on-azure-986bc40d5bf2#.pycfnafbg) blog post or [this](https://github.com/ulrikaugustsson/azure-appservice-static) repo for a way to use automatic deployment to Azure App Service. - -## [Firebase](https://firebase.google.com/) - -Install the Firebase CLI if you haven’t already by running `npm install -g firebase-tools`. Sign up for a [Firebase account](https://console.firebase.google.com/) and create a new project. Run `firebase login` and login with your previous created Firebase account. - -Then run the `firebase init` command from your project’s root. You need to choose the **Hosting: Configure and deploy Firebase Hosting sites** and choose the Firebase project you created in the previous step. You will need to agree with `database.rules.json` being created, choose `build` as the public directory, and also agree to **Configure as a single-page app** by replying with `y`. - -```sh - === Project Setup - - First, let's associate this project directory with a Firebase project. - You can create multiple project aliases by running firebase use --add, - but for now we'll just set up a default project. - - ? What Firebase project do you want to associate as default? Example app (example-app-fd690) - - === Database Setup - - Firebase Realtime Database Rules allow you to define how your data should be - structured and when your data can be read from and written to. - - ? What file should be used for Database Rules? database.rules.json - ✔ Database Rules for example-app-fd690 have been downloaded to database.rules.json. - Future modifications to database.rules.json will update Database Rules when you run - firebase deploy. - - === Hosting Setup - - Your public directory is the folder (relative to your project directory) that - will contain Hosting assets to uploaded with firebase deploy. If you - have a build process for your assets, use your build's output directory. - - ? What do you want to use as your public directory? build - ? Configure as a single-page app (rewrite all urls to /index.html)? Yes - ✔ Wrote build/index.html - - i Writing configuration info to firebase.json... - i Writing project information to .firebaserc... - - ✔ Firebase initialization complete! -``` - -IMPORTANT: you need to set proper HTTP caching headers for `service-worker.js` file in `firebase.json` file or you will not be able to see changes after first deployment ([issue #2440](https://github.com/facebook/create-react-app/issues/2440)). It should be added inside `"hosting"` key like next: - -``` -{ - "hosting": { - ... - "headers": [ - {"source": "/service-worker.js", "headers": [{"key": "Cache-Control", "value": "no-cache"}]} - ] - ... -``` - -Now, after you create a production build with `npm run build`, you can deploy it by running `firebase deploy`. - -```sh - === Deploying to 'example-app-fd690'... - - i deploying database, hosting - ✔ database: rules ready to deploy. - i hosting: preparing build directory for upload... - Uploading: [============================== ] 75%✔ hosting: build folder uploaded successfully - ✔ hosting: 8 files uploaded successfully - i starting release process (may take several minutes)... - - ✔ Deploy complete! - - Project Console: https://console.firebase.google.com/project/example-app-fd690/overview - Hosting URL: https://example-app-fd690.firebaseapp.com -``` - -For more information see [Add Firebase to your JavaScript Project](https://firebase.google.com/docs/web/setup). - -## [GitHub Pages](https://pages.github.com/) - -> Note: this feature is available with `react-scripts@0.2.0` and higher. - -### Step 1: Add `homepage` to `package.json` - -**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: - -```json - "homepage": "https://myusername.github.io/my-app", -``` - -or for a GitHub user page: - -```json - "homepage": "https://myusername.github.io", -``` - -or for a custom domain page: - -```json - "homepage": "https://mywebsite.com", -``` - -Create React App uses the `homepage` field to determine the root URL in the built HTML file. - -### Step 2: Install `gh-pages` and add `deploy` to `scripts` in `package.json` - -Now, whenever you run `npm run build`, you will see a cheat sheet with instructions on how to deploy to GitHub Pages. - -To publish it at [https://myusername.github.io/my-app](https://myusername.github.io/my-app), run: - -```sh -npm install --save gh-pages -``` - -Alternatively you may use `yarn`: - -```sh -yarn add gh-pages -``` - -Add the following scripts in your `package.json`: - -```diff - "scripts": { -+ "predeploy": "npm run build", -+ "deploy": "gh-pages -d build", - "start": "react-scripts start", - "build": "react-scripts build", -``` - -The `predeploy` script will run automatically before `deploy` is run. - -If you are deploying to a GitHub user page instead of a project page you'll need to make two -additional modifications: - -1. First, change your repository's source branch to be any branch other than **master**. -1. Additionally, tweak your `package.json` scripts to push deployments to **master**: - -```diff - "scripts": { - "predeploy": "npm run build", -- "deploy": "gh-pages -d build", -+ "deploy": "gh-pages -b master -d build", -``` - -### Step 3: Deploy the site by running `npm run deploy` - -Then run: - -```sh -npm run deploy -``` - -### Step 4: 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: - - - -### Step 5: Optionally, configure the domain - -You can configure a custom domain with GitHub Pages by adding a `CNAME` file to the `public/` folder. - -Your CNAME file should look like this: - -``` -mywebsite.com -``` - -### Notes on client-side routing - -GitHub Pages doesn’t support routers that use the HTML5 `pushState` history API under the hood (for example, React Router using `browserHistory`). This is because when there is a fresh page load for a url like `http://user.github.io/todomvc/todos/42`, where `/todos/42` is a frontend route, the GitHub Pages server returns 404 because it knows nothing of `/todos/42`. If you want to add a router to a project hosted on GitHub Pages, here are a couple of solutions: - -- You could switch from using HTML5 history API to routing with hashes. If you use React Router, you can switch to `hashHistory` for this effect, but the URL will be longer and more verbose (for example, `http://user.github.io/todomvc/#/todos/42?_k=yknaj`). [Read more](https://reacttraining.com/react-router/web/api/Router) about different history implementations in React Router. -- Alternatively, you can use a trick to teach GitHub Pages to handle 404 by redirecting to your `index.html` page with a special redirect parameter. You would need to add a `404.html` file with the redirection code to the `build` folder before deploying your project, and you’ll need to add code handling the redirect parameter to `index.html`. You can find a detailed explanation of this technique [in this guide](https://github.com/rafrex/spa-github-pages). - -### Troubleshooting - -#### "/dev/tty: No such a device or address" - -If, when deploying, you get `/dev/tty: No such a device or address` or a similar error, try the following: - -1. Create a new [Personal Access Token](https://github.com/settings/tokens) -2. `git remote set-url origin https://:@github.com//` . -3. Try `npm run deploy` again - -#### "Cannot read property 'email' of null" - -If, when deploying, you get `Cannot read property 'email' of null`, try the following: - -1. `git config --global user.name ''` -2. `git config --global user.email ''` -3. Try `npm run deploy` again - -## [Heroku](https://www.heroku.com/) - -Use the [Heroku Buildpack for Create React App](https://github.com/mars/create-react-app-buildpack). -You can find instructions in [Deploying React with Zero Configuration](https://blog.heroku.com/deploying-react-with-zero-configuration). - -### Resolving Heroku Deployment Errors - -Sometimes `npm run build` works locally but fails during deploy via Heroku. Following are the most common cases. - -#### "Module not found: Error: Cannot resolve 'file' or 'directory'" - -If you get something like this: - -``` -remote: Failed to create a production build. Reason: -remote: Module not found: Error: Cannot resolve 'file' or 'directory' -MyDirectory in /tmp/build_1234/src -``` - -It means you need to ensure that the lettercase of the file or directory you `import` matches the one you see on your filesystem or on GitHub. - -This is important because Linux (the operating system used by Heroku) is case sensitive. So `MyDirectory` and `mydirectory` are two distinct directories and thus, even though the project builds locally, the difference in case breaks the `import` statements on Heroku remotes. - -#### "Could not find a required file." - -If you exclude or ignore necessary files from the package you will see a error similar this one: - -``` -remote: Could not find a required file. -remote: Name: `index.html` -remote: Searched in: /tmp/build_a2875fc163b209225122d68916f1d4df/public -remote: -remote: npm ERR! Linux 3.13.0-105-generic -remote: npm ERR! argv "/tmp/build_a2875fc163b209225122d68916f1d4df/.heroku/node/bin/node" "/tmp/build_a2875fc163b209225122d68916f1d4df/.heroku/node/bin/npm" "run" "build" -``` - -In this case, ensure that the file is there with the proper lettercase and that’s not ignored on your local `.gitignore` or `~/.gitignore_global`. - -## [Netlify](https://www.netlify.com/) - -**To do a manual deploy to Netlify’s CDN:** - -```sh -npm install netlify-cli -g -netlify deploy -``` - -Choose `build` as the path to deploy. - -**To setup continuous delivery:** - -With this setup Netlify will build and deploy when you push to git or open a pull request: - -1. [Start a new netlify project](https://app.netlify.com/signup) -2. Pick your Git hosting service and select your repository -3. Click `Build your site` - -**Support for client-side routing:** - -To support `pushState`, make sure to create a `public/_redirects` file with the following rewrite rules: - -``` -/* /index.html 200 -``` - -When you build the project, Create React App will place the `public` folder contents into the build output. - -## [Now](https://zeit.co/now) - -Now offers a zero-configuration 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`. - -2. Build your app by running `npm run build`. - -3. Move into the build directory by running `cd build`. - -4. Run `now --name your-project-name` from within the build directory. You will see a **now.sh** URL in your output like this: - - ``` - > Ready! https://your-project-name-tpspyhtdtk.now.sh (copied to clipboard) - ``` - - Paste that 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) - -## [S3](https://aws.amazon.com/s3) and [CloudFront](https://aws.amazon.com/cloudfront/) - -See this [blog post](https://medium.com/@omgwtfmarc/deploying-create-react-app-to-s3-or-cloudfront-48dae4ce0af) on how to deploy your React app to Amazon Web Services S3 and CloudFront. - -## [Surge](https://surge.sh/) - -Install the Surge CLI if you haven’t already by running `npm install -g surge`. Run the `surge` command and log in you or create a new account. - -When asked about the project path, make sure to specify the `build` folder, for example: - -```sh - project path: /path/to/project/build -``` - -Note that in order to support routers that use HTML5 `pushState` API, you may want to rename the `index.html` in your build folder to `200.html` before deploying to Surge. This [ensures that every URL falls back to that file](https://surge.sh/help/adding-a-200-page-for-client-side-routing). - -## Publishing Components To npm - -Create React App doesn't provide any built-in functionality to publish a component to npm. If you're ready to extract a component from your project so other people can use it, we recommend moving it to a separate directory outside of your project and then using a tool like [nwb](https://github.com/insin/nwb#react-components-and-libraries) to prepare it for publishing. +--- +id: deployment +title: Deployment +sidebar_label: Deployment +--- + +`npm run build` creates a `build` directory with a production build of your app. Set up your favorite HTTP server so that a visitor to your site is served `index.html`, and requests to static paths like `/static/js/main..js` are served with the contents of the `/static/js/main..js` file. For more information see the [production build](production-build.md) section. + +## Static Server + +For environments using [Node](https://nodejs.org/), the easiest way to handle this would be to install [serve](https://github.com/zeit/serve) and let it handle the rest: + +```sh +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 `-l` or `--listen` flags: + +```sh +serve -s build -l 4000 +``` + +Run this command to get a full list of the options available: + +```sh +serve -h +``` + +## Other Solutions + +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](https://expressjs.com/): + +```javascript +const express = require('express'); +const path = require('path'); +const app = express(); + +app.use(express.static(path.join(__dirname, 'build'))); + +app.get('/', function(req, res) { + res.sendFile(path.join(__dirname, 'build', 'index.html')); +}); + +app.listen(9000); +``` + +The choice of your server software isn’t important either. Since Create React App is completely platform-agnostic, there’s no need to explicitly use Node. + +The `build` folder with static assets is the only output produced by Create React App. + +However this is not quite enough if you use client-side routing. Read the next section if you want to support URLs like `/todos/42` in your single-page app. + +## Serving Apps with Client-Side Routing + +If you use routers that use the HTML5 [`pushState` history API](https://developer.mozilla.org/en-US/docs/Web/API/History_API#Adding_and_modifying_history_entries) under the hood (for example, [React Router](https://github.com/ReactTraining/react-router) with `browserHistory`), many static file servers will fail. For example, if you used React Router with a route for `/todos/42`, the development server will respond to `localhost:3000/todos/42` properly, but an Express serving a production build as above will not. + +This is because when there is a fresh page load for a `/todos/42`, the server looks for the file `build/todos/42` and does not find it. The server needs to be configured to respond to a request to `/todos/42` by serving `index.html`. For example, we can amend our Express example above to serve `index.html` for any unknown paths: + +```diff + app.use(express.static(path.join(__dirname, 'build'))); + +-app.get('/', function (req, res) { ++app.get('/*', function (req, res) { + res.sendFile(path.join(__dirname, 'build', 'index.html')); + }); +``` + +If you’re using [Apache HTTP Server](https://httpd.apache.org/), you need to create a `.htaccess` file in the `public` folder that looks like this: + +``` + Options -MultiViews + RewriteEngine On + RewriteCond %{REQUEST_FILENAME} !-f + RewriteRule ^ index.html [QSA,L] +``` + +It will get copied to the `build` folder when you run `npm run build`. + +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. + +On a production build, and when you've [opted-in](making-a-progressive-web-app.md#why-opt-in), +a [service worker](https://developers.google.com/web/fundamentals/primers/service-workers/) will automatically handle all navigation requests, like for +`/todos/42`, by serving the cached copy of your `index.html`. This +service worker navigation routing can be configured or disabled by +[`eject`ing](available-scripts.md#npm-run-eject) and then modifying the +[`navigateFallback`](https://github.com/GoogleChrome/sw-precache#navigatefallback-string) +and [`navigateFallbackWhitelist`](https://github.com/GoogleChrome/sw-precache#navigatefallbackwhitelist-arrayregexp) +options of the `SWPrecachePlugin` [configuration](../config/webpack.config.prod.js). + +When users install your app to the homescreen of their device the default configuration will make a shortcut to `/index.html`. This may not work for client-side routers which expect the app to be served from `/`. Edit the web app manifest at [`public/manifest.json`](public/manifest.json) and change `start_url` to match the required URL scheme, for example: + +```js + "start_url": ".", +``` + +## Building for Relative Paths + +By default, Create React App produces a build assuming your app is hosted at the server root. +To override this, specify the `homepage` in your `package.json`, for example: + +```js + "homepage": "http://mywebsite.com/relativepath", +``` + +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). + + +For example: + +```js + + // renders +``` + +### Serving the Same Build from Different Paths + +> Note: this feature is available with `react-scripts@0.9.0` and higher. + +If you are not using the HTML5 `pushState` history API or not using client-side routing at all, it is unnecessary to specify the URL from which your app will be served. Instead, you can put this in your `package.json`: + +```js + "homepage": ".", +``` + +This will make sure that all the asset paths are relative to `index.html`. You will then be able to move your app from `http://mywebsite.com` to `http://mywebsite.com/relativepath` or even `http://mywebsite.com/relative/path` without having to rebuild it. + +## Customizing Environment Variables for Arbitrary Build Environments + +You can create an arbitrary build environment by creating a custom `.env` file and loading it using [env-cmd](https://www.npmjs.com/package/env-cmd). + +For example, to create a build environment for a staging environment: + +1. Create a file called `.env.staging` +1. Set environment variables as you would any other `.env` file (e.g. `REACT_APP_API_URL=http://api-staging.example.com`) +1. Install [env-cmd](https://www.npmjs.com/package/env-cmd) + ```sh + $ npm install env-cmd --save + $ # or + $ yarn add env-cmd + ``` +1. Add a new script to your `package.json`, building with your new environment: + ```json + { + "scripts": { + "build:staging": "env-cmd .env.staging npm run build" + } + } + ``` + +Now you can run `npm run build:staging` to build with the staging environment config. +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. + +See [this](https://medium.com/@strid/host-create-react-app-on-azure-986bc40d5bf2#.pycfnafbg) blog post or [this](https://github.com/ulrikaugustsson/azure-appservice-static) repo for a way to use automatic deployment to Azure App Service. + +## [Firebase](https://firebase.google.com/) + +Install the Firebase CLI if you haven’t already by running `npm install -g firebase-tools`. Sign up for a [Firebase account](https://console.firebase.google.com/) and create a new project. Run `firebase login` and login with your previous created Firebase account. + +Then run the `firebase init` command from your project’s root. You need to choose the **Hosting: Configure and deploy Firebase Hosting sites** and choose the Firebase project you created in the previous step. You will need to agree with `database.rules.json` being created, choose `build` as the public directory, and also agree to **Configure as a single-page app** by replying with `y`. + +```sh + === Project Setup + + First, let's associate this project directory with a Firebase project. + You can create multiple project aliases by running firebase use --add, + but for now we'll just set up a default project. + + ? What Firebase project do you want to associate as default? Example app (example-app-fd690) + + === Database Setup + + Firebase Realtime Database Rules allow you to define how your data should be + structured and when your data can be read from and written to. + + ? What file should be used for Database Rules? database.rules.json + ✔ Database Rules for example-app-fd690 have been downloaded to database.rules.json. + Future modifications to database.rules.json will update Database Rules when you run + firebase deploy. + + === Hosting Setup + + Your public directory is the folder (relative to your project directory) that + will contain Hosting assets to uploaded with firebase deploy. If you + have a build process for your assets, use your build's output directory. + + ? What do you want to use as your public directory? build + ? Configure as a single-page app (rewrite all urls to /index.html)? Yes + ✔ Wrote build/index.html + + i Writing configuration info to firebase.json... + i Writing project information to .firebaserc... + + ✔ Firebase initialization complete! +``` + +IMPORTANT: you need to set proper HTTP caching headers for `service-worker.js` file in `firebase.json` file or you will not be able to see changes after first deployment ([issue #2440](https://github.com/facebook/create-react-app/issues/2440)). It should be added inside `"hosting"` key like next: + +```json +{ + "hosting": { + ... + "headers": [ + {"source": "/service-worker.js", "headers": [{"key": "Cache-Control", "value": "no-cache"}]} + ] + ... +``` + +Now, after you create a production build with `npm run build`, you can deploy it by running `firebase deploy`. + +```sh + === Deploying to 'example-app-fd690'... + + i deploying database, hosting + ✔ database: rules ready to deploy. + i hosting: preparing build directory for upload... + Uploading: [============================== ] 75%✔ hosting: build folder uploaded successfully + ✔ hosting: 8 files uploaded successfully + i starting release process (may take several minutes)... + + ✔ Deploy complete! + + Project Console: https://console.firebase.google.com/project/example-app-fd690/overview + Hosting URL: https://example-app-fd690.firebaseapp.com +``` + +For more information see [Firebase Hosting](https://firebase.google.com/docs/hosting). + +## [GitHub Pages](https://pages.github.com/) + +> Note: this feature is available with `react-scripts@0.2.0` and higher. + +### Step 1: Add `homepage` to `package.json` + +**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: + +```json + "homepage": "https://myusername.github.io/my-app", +``` + +or for a GitHub user page: + +```json + "homepage": "https://myusername.github.io", +``` + +or for a custom domain page: + +```json + "homepage": "https://mywebsite.com", +``` + +Create React App uses the `homepage` field to determine the root URL in the built HTML file. + +### Step 2: Install `gh-pages` and add `deploy` to `scripts` in `package.json` + +Now, whenever you run `npm run build`, you will see a cheat sheet with instructions on how to deploy to GitHub Pages. + +To publish it at [https://myusername.github.io/my-app](https://myusername.github.io/my-app), run: + +```sh +npm install --save gh-pages +``` + +Alternatively you may use `yarn`: + +```sh +yarn add gh-pages +``` + +Add the following scripts in your `package.json`: + +```diff + "scripts": { ++ "predeploy": "npm run build", ++ "deploy": "gh-pages -d build", + "start": "react-scripts start", + "build": "react-scripts build", +``` + +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 one +additional modification: + +1. Tweak your `package.json` scripts to push deployments to **master**: + +```diff + "scripts": { + "predeploy": "npm run build", +- "deploy": "gh-pages -d build", ++ "deploy": "gh-pages -b master -d build", +``` + +### Step 3: Deploy the site by running `npm run deploy` + +Then run: + +```sh +npm run deploy +``` + +### 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: + + + +### Step 5: Optionally, configure the domain + +You can configure a custom domain with GitHub Pages by adding a `CNAME` file to the `public/` folder. + +Your CNAME file should look like this: + +``` +mywebsite.com +``` + +### Notes on client-side routing + +GitHub Pages doesn’t support routers that use the HTML5 `pushState` history API under the hood (for example, React Router using `browserHistory`). This is because when there is a fresh page load for a url like `http://user.github.io/todomvc/todos/42`, where `/todos/42` is a frontend route, the GitHub Pages server returns 404 because it knows nothing of `/todos/42`. If you want to add a router to a project hosted on GitHub Pages, here are a couple of solutions: + +- You could switch from using HTML5 history API to routing with hashes. If you use React Router, you can switch to `hashHistory` for this effect, but the URL will be longer and more verbose (for example, `http://user.github.io/todomvc/#/todos/42?_k=yknaj`). [Read more](https://reacttraining.com/react-router/web/api/Router) about different history implementations in React Router. +- Alternatively, you can use a trick to teach GitHub Pages to handle 404 by redirecting to your `index.html` page with a special redirect parameter. You would need to add a `404.html` file with the redirection code to the `build` folder before deploying your project, and you’ll need to add code handling the redirect parameter to `index.html`. You can find a detailed explanation of this technique [in this guide](https://github.com/rafrex/spa-github-pages). + +### Troubleshooting + +#### "/dev/tty: No such a device or address" + +If, when deploying, you get `/dev/tty: No such a device or address` or a similar error, try the following: + +1. Create a new [Personal Access Token](https://github.com/settings/tokens) +2. `git remote set-url origin https://:@github.com//` . +3. Try `npm run deploy` again + +#### "Cannot read property 'email' of null" + +If, when deploying, you get `Cannot read property 'email' of null`, try the following: + +1. `git config --global user.name ''` +2. `git config --global user.email ''` +3. Try `npm run deploy` again + +## [Heroku](https://www.heroku.com/) + +Use the [Heroku Buildpack for Create React App](https://github.com/mars/create-react-app-buildpack). +You can find instructions in [Deploying React with Zero Configuration](https://blog.heroku.com/deploying-react-with-zero-configuration). + +### Resolving Heroku Deployment Errors + +Sometimes `npm run build` works locally but fails during deploy via Heroku. Following are the most common cases. + +#### "Module not found: Error: Cannot resolve 'file' or 'directory'" + +If you get something like this: + +``` +remote: Failed to create a production build. Reason: +remote: Module not found: Error: Cannot resolve 'file' or 'directory' +MyDirectory in /tmp/build_1234/src +``` + +It means you need to ensure that the lettercase of the file or directory you `import` matches the one you see on your filesystem or on GitHub. + +This is important because Linux (the operating system used by Heroku) is case sensitive. So `MyDirectory` and `mydirectory` are two distinct directories and thus, even though the project builds locally, the difference in case breaks the `import` statements on Heroku remotes. + +#### "Could not find a required file." + +If you exclude or ignore necessary files from the package you will see a error similar this one: + +``` +remote: Could not find a required file. +remote: Name: `index.html` +remote: Searched in: /tmp/build_a2875fc163b209225122d68916f1d4df/public +remote: +remote: npm ERR! Linux 3.13.0-105-generic +remote: npm ERR! argv "/tmp/build_a2875fc163b209225122d68916f1d4df/.heroku/node/bin/node" "/tmp/build_a2875fc163b209225122d68916f1d4df/.heroku/node/bin/npm" "run" "build" +``` + +In this case, ensure that the file is there with the proper lettercase and that’s not ignored on your local `.gitignore` or `~/.gitignore_global`. + +## [Netlify](https://www.netlify.com/) + +**To do a manual deploy to Netlify’s CDN:** + +```sh +npm install netlify-cli -g +netlify deploy +``` + +Choose `build` as the path to deploy. + +**To setup continuous delivery:** + +With this setup Netlify will build and deploy when you push to git or open a pull request: + +1. [Start a new netlify project](https://app.netlify.com/signup) +2. Pick your Git hosting service and select your repository +3. Click `Build your site` + +**Support for client-side routing:** + +To support `pushState`, make sure to create a `public/_redirects` file with the following rewrite rules: + +``` +/* /index.html 200 +``` + +When you build the project, Create React App will place the `public` folder contents into the build output. + +## [Now](https://zeit.co/now) + +[Now](https://zeit.co/docs) offers a simple, single-command deployment. You can use `now` to deploy your app for free. + +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: + +```shell +npm i -g now +``` + +To deploy your built project directly with Now CLI in your terminal, without any configuration: + +1. Build your app by running `npm run build`. + +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/ + +Click or paste the deployment URL into your browser when the build is complete and you will see your deployed app. + +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/). + +## [Render](https://render.com) + +Render offers free [static site](https://render.com/docs/static-sites) hosting with fully managed SSL, a global CDN and continuous auto deploys from GitHub. + +Deploy your app in just a few minutes by following the [Create React App deployment guide](https://render.com/docs/deploy-create-react-app). + +Use invite code `cra` to sign up or use [this link](https://render.com/i/cra). + +## [S3](https://aws.amazon.com/s3) and [CloudFront](https://aws.amazon.com/cloudfront/) + +See this [blog post](https://medium.com/@omgwtfmarc/deploying-create-react-app-to-s3-or-cloudfront-48dae4ce0af) on how to deploy your React app to Amazon Web Services S3 and CloudFront. + +## [Surge](https://surge.sh/) + +Install the Surge CLI if you haven’t already by running `npm install -g surge`. Run the `surge` command and log in you or create a new account. + +When asked about the project path, make sure to specify the `build` folder, for example: + +```sh + project path: /path/to/project/build +``` + +Note that in order to support routers that use HTML5 `pushState` API, you may want to rename the `index.html` in your build folder to `200.html` before deploying to Surge. This [ensures that every URL falls back to that file](https://surge.sh/help/adding-a-200-page-for-client-side-routing). + +## Publishing Components To npm + +Create React App doesn't provide any built-in functionality to publish a component to npm. If you're ready to extract a component from your project so other people can use it, we recommend moving it to a separate directory outside of your project and then using a tool like [nwb](https://github.com/insin/nwb#react-components-and-libraries) to prepare it for publishing. 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**. - + 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..ab52bc6c7b5 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`. @@ -32,7 +34,7 @@ Just create a project, and you’re good to go. ## Creating an App -**You’ll need to have Node >= 6 on your local development machine** (but it’s not required on the server). You can use [nvm](https://github.com/creationix/nvm#installation) (macOS/Linux) or [nvm-windows](https://github.com/coreybutler/nvm-windows#node-version-manager-nvm-for-windows) to easily switch Node versions between different projects. +**You’ll need to have Node >= 8.10 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: @@ -60,6 +62,10 @@ yarn create react-app my-app _`yarn create` is available in Yarn 0.25+_ +### Creating a TypeScript app + +Follow our [Adding TypeScript](adding-typescript.md) documentation to create a TypeScript app. + ## Output Running any of these commands will create a directory called `my-app` inside the current folder. Inside that directory, it will generate the initial project structure and install the transitive dependencies: @@ -108,7 +114,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..a04670a9a0a 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,31 @@ 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) + +## Absolute Imports + +You can configure your application to support importing modules using absolute paths. This can be done by configuring a `jsconfig.json` or `tsconfig.json` file in the root of your project. If you're using TypeScript in your project, you will already have a `tsconfig.json` file. + +Below is an example `jsconfig.json` file for a JavaScript project. You can create the file if it doesn't already exist: + +```json +{ + "compilerOptions": { + "baseUrl": "src" + }, + "include": ["src"] +} +``` + +If you're using TypeScript, you can configure the `baseUrl` setting inside the `compilerOptions` of your project's `tsconfig.json` file. + +Now that you've configured your project to support absolute imports, if you want to import a module located at `src/components/Button.js`, you can import the module like so: + +```js +import Button from 'components/Button'; +``` + +For more information on these configuration files, see the [jsconfig.json reference](https://code.visualstudio.com/docs/languages/jsconfig) and [tsconfig.json reference](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html) documentation. diff --git a/docusaurus/docs/loading-graphql-files.md b/docusaurus/docs/loading-graphql-files.md new file mode 100644 index 00000000000..aa72e5af475 --- /dev/null +++ b/docusaurus/docs/loading-graphql-files.md @@ -0,0 +1,69 @@ +--- +id: loading-graphql-files +title: Loading .graphql Files +sidebar_label: Loading .graphql Files +--- + +To load `.gql` and `.graphql` files, first install the [`graphql`](https://www.npmjs.com/package/graphql) and [`graphql.macro`](https://www.npmjs.com/package/graphql.macro) packages by running: + +```sh +npm install --save graphql graphql.macro +``` + +Alternatively you may use `yarn`: + +```sh +yarn add graphql graphql.macro +``` + +Then, whenever you want to load `.gql` or `.graphql` files, import the `loader` from the macro package: + +```js +import { loader } from 'graphql.macro'; + +const query = loader('./foo.graphql'); +``` + +And your results get automatically inlined! This means that if the file above, `foo.graphql`, contains the following: + +```graphql +query { + hello { + world + } +} +``` + +The previous example turns into: + +```javascript +const query = { + 'kind': 'Document', + 'definitions': [{ + ... + }], + 'loc': { + ... + 'source': { + 'body': '\\\\n query {\\\\n hello {\\\\n world\\\\n }\\\\n }\\\\n', + 'name': 'GraphQL request', + ... + } + } +}; +``` + +You can also use the `gql` template tag the same way you would use the non-macro version from `graphql-tag` package with the added benefit of inlined parsing results. + +```js +import { gql } from 'graphql.macro'; + +const query = gql` + query User { + user(id: 5) { + lastName + ...UserEntry1 + } + } +`; +``` diff --git a/docusaurus/docs/making-a-progressive-web-app.md b/docusaurus/docs/making-a-progressive-web-app.md index c5923033b92..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. @@ -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..7bafc5bf743 --- /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 a number of `.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. + +`[number].[hash].chunk.js` + +- These files can either be _vendor_ code, or [code splitting chunks](code-splitting.md). _Vendor_ code includes modules that 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..f43dd43b1a7 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: - + + +> \*Although we recommend running your tests in watch mode during development, you can disable this behavior by passing in the `--watchAll=false` 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 `` that throws, this test will pass. Shallow rendering is great for isolated unit tests, but you may still want to create some full rendering tests to ensure the components integrate correctly. Enzyme supports [full rendering with `mount()`](http://airbnb.io/enzyme/docs/api/mount.html), and you can also use it for testing state changes and component lifecycle. +Unlike the previous smoke test using `ReactDOM.render()`, this test only renders `` and doesn’t go deeper. For example, even if `` itself renders a `` that throws, this test will pass. Shallow rendering is great for isolated unit tests, but you may still want to create some full rendering tests to ensure the components integrate correctly. Enzyme supports [full rendering with `mount()`](https://airbnb.io/enzyme/docs/api/mount.html), and you can also use it for testing state changes and component lifecycle. -You can read the [Enzyme documentation](http://airbnb.io/enzyme/) for more testing techniques. Enzyme documentation uses Chai and Sinon for assertions but you don’t have to use them because Jest provides built-in `expect()` and `jest.fn()` for spies. +You can read the [Enzyme documentation](https://airbnb.io/enzyme/) for more testing techniques. Enzyme documentation uses Chai and Sinon for assertions but you don’t have to use them because Jest provides built-in `expect()` and `jest.fn()` for spies. Here is an example from Enzyme documentation that asserts specific output, rewritten to use Jest matchers: @@ -144,8 +146,8 @@ it('renders welcome message', () => { }); ``` -All Jest matchers are [extensively documented here](http://facebook.github.io/jest/docs/en/expect.html). -Nevertheless you can use a third-party assertion library like [Chai](http://chaijs.com/) if you want to, as described below. +All Jest matchers are [extensively documented here](https://jestjs.io/docs/en/expect.html). +Nevertheless you can use a third-party assertion library like [Chai](https://chaijs.com/) if you want to, as described below. Additionally, you might find [jest-enzyme](https://github.com/blainekasten/enzyme-matchers) helpful to simplify your tests with readable matchers. The above `contains` code can be written more simply with jest-enzyme. @@ -210,13 +212,13 @@ it('renders welcome message', () => { }); ``` -Learn more about the utilities provided by `react-testing-library` to facilitate testing asynchronous interactions as well as selecting form elements from [the `react-testing-library` documentation](https://github.com/kentcdodds/react-testing-library) and [examples](https://codesandbox.io/s/github/kentcdodds/react-testing-library-examples). +Learn more about the utilities provided by `react-testing-library` to facilitate testing asynchronous interactions as well as selecting form elements from [the `react-testing-library` documentation](https://testing-library.com/react) and [examples](https://codesandbox.io/s/github/kentcdodds/react-testing-library-examples). ## Using Third Party Assertion Libraries We recommend that you use `expect()` for assertions and `jest.fn()` for spies. If you are having issues with them please [file those against Jest](https://github.com/facebook/jest/issues/new), and we’ll fix them. We intend to keep making them better for React, supporting, for example, [pretty-printing React elements as JSX](https://github.com/facebook/jest/pull/1566). -However, if you are used to other libraries, such as [Chai](http://chaijs.com/) and [Sinon](http://sinonjs.org/), or if you have existing code using them that you’d like to port over, you can import them normally like this: +However, if you are used to other libraries, such as [Chai](https://chaijs.com/) and [Sinon](https://sinonjs.org/), or if you have existing code using them that you’d like to port over, you can import them normally like this: ```js import sinon from 'sinon'; @@ -239,6 +241,7 @@ For example: const localStorageMock = { getItem: jest.fn(), setItem: jest.fn(), + removeItem: jest.fn(), clear: jest.fn(), }; global.localStorage = localStorageMock; @@ -263,7 +266,7 @@ Similarly, `fit()` lets you focus on a specific test without running any other t Jest has an integrated coverage reporter that works well with ES6 and requires no configuration. Run `npm test -- --coverage` (note extra `--` in the middle) to include a coverage report like this: - + Note that tests run much slower with coverage so it is recommended to run it separately from your normal workflow. @@ -273,10 +276,10 @@ The default Jest coverage configuration can be overridden by adding any of the f Supported overrides: -- [`collectCoverageFrom`](https://facebook.github.io/jest/docs/en/configuration.html#collectcoveragefrom-array) -- [`coverageReporters`](https://facebook.github.io/jest/docs/en/configuration.html#coveragereporters-array-string) -- [`coverageThreshold`](https://facebook.github.io/jest/docs/en/configuration.html#coveragethreshold-object) -- [`snapshotSerializers`](https://facebook.github.io/jest/docs/en/configuration.html#snapshotserializers-array-string) +- [`collectCoverageFrom`](https://jestjs.io/docs/en/configuration.html#collectcoveragefrom-array) +- [`coverageReporters`](https://jestjs.io/docs/en/configuration.html#coveragereporters-array-string) +- [`coverageThreshold`](https://jestjs.io/docs/en/configuration.html#coveragethreshold-object) +- [`snapshotSerializers`](https://jestjs.io/docs/en/configuration.html#snapshotserializers-array-string) Example package.json: @@ -318,7 +321,7 @@ Popular CI servers already set the environment variable `CI` by default but you 1. Following the [Travis Getting started](https://docs.travis-ci.com/user/getting-started/) guide for syncing your GitHub repository with Travis. You may need to initialize some settings manually in your [profile](https://travis-ci.org/profile) page. 1. Add a `.travis.yml` file to your git repository. -``` +```yaml language: node_js node_js: - 8 @@ -363,17 +366,17 @@ set CI=true&&npm run build #### Linux, macOS (Bash) -```bash +```sh CI=true npm test ``` -```bash +```sh CI=true npm run build ``` -The test command will force Jest to run tests once instead of launching the watcher. +The test command will force Jest to run in CI-mode, and tests will only run once instead of launching the watcher. -> If you find yourself doing this often in development, please [file an issue](https://github.com/facebook/create-react-app/issues/new) to tell us about your use case because we want to make watcher the best experience and are open to changing how it works to accommodate more workflows. +For non-CI environments, you can simply pass the `--watchAll=false` flag to disable test-watching. The build command will check for linter warnings and fail if any are found. @@ -394,18 +397,18 @@ To help you make up your mind, here is a list of APIs that **need jsdom**: - Any browser globals like `window` and `document` - [`ReactDOM.render()`](https://facebook.github.io/react/docs/top-level-api.html#reactdom.render) - [`TestUtils.renderIntoDocument()`](https://facebook.github.io/react/docs/test-utils.html#renderintodocument) ([a shortcut](https://github.com/facebook/react/blob/34761cf9a252964abfaab6faf74d473ad95d1f21/src/test/ReactTestUtils.js#L83-L91) for the above) -- [`mount()`](http://airbnb.io/enzyme/docs/api/mount.html) in [Enzyme](http://airbnb.io/enzyme/index.html) +- [`mount()`](https://airbnb.io/enzyme/docs/api/mount.html) in [Enzyme](https://airbnb.io/enzyme/index.html) In contrast, **jsdom is not needed** for the following APIs: - [`TestUtils.createRenderer()`](https://facebook.github.io/react/docs/test-utils.html#shallow-rendering) (shallow rendering) -- [`shallow()`](http://airbnb.io/enzyme/docs/api/shallow.html) in [Enzyme](http://airbnb.io/enzyme/index.html) +- [`shallow()`](https://airbnb.io/enzyme/docs/api/shallow.html) in [Enzyme](https://airbnb.io/enzyme/index.html) -Finally, jsdom is also not needed for [snapshot testing](http://facebook.github.io/jest/blog/2016/07/27/jest-14.html). +Finally, jsdom is also not needed for [snapshot testing](https://jestjs.io/blog/2016/07/27/jest-14.html). ## Snapshot Testing -Snapshot testing is a feature of Jest that automatically generates text snapshots of your components and saves them on the disk so if the UI output changes, you get notified without manually writing any assertions on the component output. [Read more about snapshot testing.](http://facebook.github.io/jest/blog/2016/07/27/jest-14.html) +Snapshot testing is a feature of Jest that automatically generates text snapshots of your components and saves them on the disk so if the UI output changes, you get notified without manually writing any assertions on the component output. [Read more about snapshot testing.](https://jestjs.io/blog/2016/07/27/jest-14.html) ## Editor Integration diff --git a/docusaurus/docs/setting-up-your-editor.md b/docusaurus/docs/setting-up-your-editor.md index 2f3aee04d7e..869592d2915 100644 --- a/docusaurus/docs/setting-up-your-editor.md +++ b/docusaurus/docs/setting-up-your-editor.md @@ -13,23 +13,37 @@ To configure the syntax highlighting in your favorite text editor, head to the [ ## Displaying Lint Output in the Editor > Note: this feature is available with `react-scripts@0.2.0` and higher. +> It works out of the box for newly created projects with `react-scripts@2.0.3` and higher. > It also only works with npm 3 or higher. Some editors, including Sublime Text, Atom, and Visual Studio Code, provide plugins for ESLint. They are not required for linting. You should see the linter output right in your terminal as well as the browser console. However, if you prefer the lint results to appear right in your editor, there are some extra steps you can do. -You would need to install an ESLint plugin for your editor first. Then, add a file called `.eslintrc` to the project root: +You would need to install an ESLint plugin for your editor first. Then, add a file called `.eslintrc.json` to the project root: -```js +```json { "extends": "react-app" } ``` +If you're using TypeScript and Visual Studio Code, the [ESLint Visual Studio Code extension](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint#overview) currently [doesn't have TypeScript support enabled by default](https://github.com/Microsoft/vscode-eslint/issues/609). To enable TypeScript support in the ESLint extension, add the following to your project's Visual Studio Code settings file, located at `.vscode/settings.json` (you can create this file if it doesn't already exist): + +```json +{ + "eslint.validate": [ + "javascript", + "javascriptreact", + { "language": "typescript", "autoFix": true }, + { "language": "typescriptreact", "autoFix": true } + ] +} +``` + Now your editor should report the linting warnings. -Note that even if you edit your `.eslintrc` file further, these changes will **only affect the editor integration**. They won’t affect the terminal and in-browser lint output. This is because Create React App intentionally provides a minimal set of rules that find common mistakes. +Note that even if you edit your `.eslintrc.json` file further, these changes will **only affect the editor integration**. They won’t affect the terminal and in-browser lint output. This is because Create React App intentionally provides a minimal set of rules that find common mistakes. If you want to enforce a coding style for your project, consider using [Prettier](https://github.com/jlongster/prettier) instead of ESLint style rules. @@ -54,7 +68,7 @@ Then add the block below to your `launch.json` file and put it inside the `.vsco "type": "chrome", "request": "launch", "url": "http://localhost:3000", - "webRoot": "${workspaceRoot}/src", + "webRoot": "${workspaceFolder}/src", "sourceMapPathOverrides": { "webpack:///src/*": "${webRoot}/*" } diff --git a/docusaurus/docs/supported-browsers-features.md b/docusaurus/docs/supported-browsers-features.md index f38042f2515..2826b123afa 100644 --- a/docusaurus/docs/supported-browsers-features.md +++ b/docusaurus/docs/supported-browsers-features.md @@ -6,7 +6,7 @@ sidebar_label: Supported Browsers and Features ## Supported Browsers -By default, the generated project supports all modern browsers. Support for Internet Explorer 9, 10, and 11 requires [polyfills](https://github.com/facebook/create-react-app/blob/master/packages/react-app-polyfill/README.md). +By default, the generated project supports all modern browsers. Support for Internet Explorer 9, 10, and 11 requires polyfills. For a set of polyfills to support older browsers, use [react-app-polyfill](https://github.com/facebook/create-react-app/blob/master/packages/react-app-polyfill/README.md). ## Supported Language Features @@ -19,10 +19,37 @@ This project supports a superset of the latest JavaScript standard. In addition - [Class Fields and Static Properties](https://github.com/tc39/proposal-class-public-fields) (part of stage 3 proposal). - [JSX](https://facebook.github.io/react/docs/introducing-jsx.html), [Flow](./adding-flow) and [TypeScript](./adding-typescript). -Learn more about [different proposal stages](https://babeljs.io/docs/plugins/#presets-stage-x-experimental-presets-). +Learn more about [different proposal stages](https://tc39.github.io/process-document/). While we recommend using experimental proposals with some caution, Facebook heavily uses these features in the product code, so we intend to provide [codemods](https://medium.com/@cpojer/effective-javascript-codemods-5a6686bb46fb) if any of these proposals change in the future. Note that **this project includes no [polyfills](https://github.com/facebook/create-react-app/blob/master/packages/react-app-polyfill/README.md)** by default. If you use any other ES6+ features that need **runtime support** (such as `Array.from()` or `Symbol`), make sure you are [including the appropriate polyfills manually](https://github.com/facebook/create-react-app/blob/master/packages/react-app-polyfill/README.md), or that the browsers you are targeting already support them. + +## Configuring Supported Browsers + +By default, the generated project includes a [`browerslist`](https://github.com/browserslist/browserslist) configuration in your `package.json` file to target a broad range of browsers based on global usage (`> 0.2%`) for production builds, and modern browsers for development. This gives a good development experience, especially when using language features such as async/await, but still provides high compatibility with many browsers in production. + +The `browserslist` configuration controls the outputted JavaScript so that the emitted code will be compatible with the browsers specified. The `production` list will be used when creating a production build by running the `build` script, and the `development` list will be used when running the `start` script. You can use [https://browserl.ist](https://browserl.ist/?q=%3E+0.2%25%2C+not+dead%2C+not+op_mini+all) to see the browsers supported by your configured `browserslist`. + +Here is an example `browserslist` that is specified in `package.json`: + +```json +"browserslist": { + "production": [ + ">0.2%", + "not dead", + "not op_mini all" + ], + "development": [ + "last 1 chrome version", + "last 1 firefox version", + "last 1 safari version" + ] +} +``` + +> Note that this does not include polyfills automatically for you. You will still need to polyfill language features (see above) as needed based on the browsers your are supporting. + +> When editing the `browerslist` config, you may notice that your changes don't get picked up right away. This is due to an [issue in babel-loader](https://github.com/babel/babel-loader/issues/690) not detecting the change in your `package.json`. An easy solution is to delete the `node_modules/.cache` folder and try again. diff --git a/docusaurus/docs/troubleshooting.md b/docusaurus/docs/troubleshooting.md index 06056a933f9..10ca720c6af 100644 --- a/docusaurus/docs/troubleshooting.md +++ b/docusaurus/docs/troubleshooting.md @@ -28,7 +28,7 @@ We recommend deleting `node_modules` in your project and running `npm install` ( - [facebook/watchman#358](https://github.com/facebook/watchman/issues/358) - [ember-cli/ember-cli#6259](https://github.com/ember-cli/ember-cli/issues/6259) -It is reported that installing Watchman 4.7.0 or newer fixes the issue. If you use [Homebrew](http://brew.sh/), you can run these commands to update it: +It is reported that installing Watchman 4.7.0 or newer fixes the issue. If you use [Homebrew](https://brew.sh/), you can run these commands to update it: ``` watchman shutdown-server diff --git a/docusaurus/docs/updating-to-new-releases.md b/docusaurus/docs/updating-to-new-releases.md index 825832464c8..6db46722300 100644 --- a/docusaurus/docs/updating-to-new-releases.md +++ b/docusaurus/docs/updating-to-new-releases.md @@ -8,9 +8,11 @@ Create React App is divided into two packages: - `create-react-app` is a global command-line utility that you use to create new projects. - `react-scripts` is a development dependency in the generated projects (including this one). -You almost never need to update `create-react-app` itself: it delegates all the setup to `react-scripts`. +When you run `npx create-react-app my-app` it automatically installs the latest version of Create React App. -When you run `create-react-app`, it always creates the project with the latest version of `react-scripts` so you’ll get all the new features and improvements in newly created apps automatically. +> If you've previously installed `create-react-app` globally via `npm install -g create-react-app`, please visit [Getting Started](getting-started.md) to learn about current installation steps. + +Create React App creates the project with the latest version of `react-scripts` so you’ll get all the new features and improvements in newly created apps automatically. To update an existing project to a new version of `react-scripts`, [open the changelog](https://github.com/facebook/create-react-app/blob/master/CHANGELOG.md), find the version you’re currently on (check `package.json` in this folder if you’re not sure), and apply the migration instructions for the newer versions. diff --git a/docusaurus/docs/using-https-in-development.md b/docusaurus/docs/using-https-in-development.md index 207087153d8..4dbb2536d70 100644 --- a/docusaurus/docs/using-https-in-development.md +++ b/docusaurus/docs/using-https-in-development.md @@ -26,7 +26,7 @@ set HTTPS=true&&npm start ### Linux, macOS (Bash) -```bash +```sh HTTPS=true npm start ``` diff --git a/docusaurus/docs/using-the-public-folder.md b/docusaurus/docs/using-the-public-folder.md index 89a43fbca3b..0dae7234e57 100644 --- a/docusaurus/docs/using-the-public-folder.md +++ b/docusaurus/docs/using-the-public-folder.md @@ -7,7 +7,7 @@ title: Using the Public Folder ## Changing the HTML -The `public` folder contains the HTML file so you can tweak it, for example, to [set the page title](changing-the-page-title.md). +The `public` folder contains the HTML file so you can tweak it, for example, to [set the page title](title-and-meta-tags.md). The `