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..082eeabd9ed 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.md b/CHANGELOG.md index 83b7e660df6..48bcaf53274 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,10 +1,387 @@ +## 2.1.5 (February 11, 2019) + +v2.1.5 is a maintenance release that reverts the TypeScript speed improvements ([#5903](https://github.com/facebook/create-react-app/pull/5903)) to fix a dependency issue in `react-dev-utils`. + +### Migrating from 2.1.4 to 2.1.5 + +Inside any created project that has not been ejected, run: + +```sh +npm install --save --save-exact react-scripts@2.1.5 +``` + +or + +```sh +yarn add --exact react-scripts@2.1.5 +``` + +## 2.1.4 (February 10, 2019) + +v2.1.4 is a maintenance release that brings a number of awesome improvements. A few notable ones include: + +- :rocket: Reduced TypeScript rebuild times while running the development server. TypeScript is now blazing fast! Special thanks to [@deftomat](https://github.com/deftomat) and [@johnnyreilly](https://github.com/johnnyreilly) and the other contributors for their hard work on this. ([#5903](https://github.com/facebook/create-react-app/pull/5903)) +- Jest [type ahead support](https://github.com/jest-community/jest-watch-typeahead) which provides a much nicer experience when filtering your tests using the Jest CLI ([#5213](https://github.com/facebook/create-react-app/pull/5213)) +- And many more improvements! + +#### :bug: Bug Fix + +- `react-scripts` + - [#6364](https://github.com/facebook/create-react-app/pull/6364) Use semicolons in the ProcessEnv interface. ([@DominikPalo](https://github.com/DominikPalo)) + - [#6276](https://github.com/facebook/create-react-app/pull/6276) Prevent cursor events on app-logo svg. ([@kostadriano](https://github.com/kostadriano)) + +#### :nail_care: Enhancement + +- `react-scripts` + - [#5213](https://github.com/facebook/create-react-app/pull/5213) Add Jest typeahead plugin. ([@gaearon](https://github.com/gaearon)) + - [#5713](https://github.com/facebook/create-react-app/pull/5713) Sass source map for dev. ([@zhuoli99](https://github.com/zhuoli99)) + - [#6285](https://github.com/facebook/create-react-app/pull/6285) Allow react-scripts test --no-watch. ([@ricokahler](https://github.com/ricokahler)) + - [#5060](https://github.com/facebook/create-react-app/pull/5060) Enable eval-source-map for firefox. ([@jasonLaster](https://github.com/jasonLaster)) +- `react-dev-utils`, `react-scripts` + - [#5903](https://github.com/facebook/create-react-app/pull/5903) Speed up TypeScript projects. ([@deftomat](https://github.com/deftomat)) + +#### :memo: Documentation + +- Other + - [#6383](https://github.com/facebook/create-react-app/pull/6383) Update docs links to prefer HTTPS for supported domains. ([@ianschmitz](https://github.com/ianschmitz)) + - [#6062](https://github.com/facebook/create-react-app/pull/6062) [docs] Warn/clarify that env vars are NOT "SECRET". ([@JBallin](https://github.com/JBallin)) + - [#6359](https://github.com/facebook/create-react-app/pull/6359) Update ZEIT Now deployment instructions. ([@timothyis](https://github.com/timothyis)) + - [#6346](https://github.com/facebook/create-react-app/pull/6346) Minor issue in README.md. ([@nathanlschneider](https://github.com/nathanlschneider)) + - [#6331](https://github.com/facebook/create-react-app/pull/6331) Update docs to document `--no-watch`. ([@ricokahler](https://github.com/ricokahler)) + - [#6229](https://github.com/facebook/create-react-app/pull/6229) Update `serve` port flag and add example. ([@lyzhovnik](https://github.com/lyzhovnik)) + - [#6190](https://github.com/facebook/create-react-app/pull/6190) Updating updating-to-new-releases.md for users who installed CRA globally. ([@carpben](https://github.com/carpben)) + - [#6095](https://github.com/facebook/create-react-app/pull/6095) Changes to steps for publishing GitHub User Page. ([@StevenTan](https://github.com/StevenTan)) + - [#6157](https://github.com/facebook/create-react-app/pull/6157) Add note for global install of CLI. ([@ianschmitz](https://github.com/ianschmitz)) + - [#6149](https://github.com/facebook/create-react-app/pull/6149) update link for difference between proposal stages. ([@loveky](https://github.com/loveky)) + - [#6141](https://github.com/facebook/create-react-app/pull/6141) Remove extra table cell. ([@yangshun](https://github.com/yangshun)) +- `react-scripts` + - [#6355](https://github.com/facebook/create-react-app/pull/6355) Make manifest.json description more generic. ([@chrisself](https://github.com/chrisself)) + +#### :house: Internal + +- Other + - [#6050](https://github.com/facebook/create-react-app/pull/6050) Fix e2e:docker failure with "access denied". ([@jamesknelson](https://github.com/jamesknelson)) + - [#6179](https://github.com/facebook/create-react-app/pull/6179) Update local-test.sh to return test exit code. ([@dallonf](https://github.com/dallonf)) + - [#6165](https://github.com/facebook/create-react-app/pull/6165) Fix CI builds. ([@ianschmitz](https://github.com/ianschmitz)) +- `react-scripts` + - [#5798](https://github.com/facebook/create-react-app/pull/5798) Added `module` to ignored node modules list. ([@dotansimha](https://github.com/dotansimha)) + - [#6022](https://github.com/facebook/create-react-app/pull/6022) TypeScript detection filtering 'node_modules'.. ([@holloway](https://github.com/holloway)) +- `react-dev-utils`, `react-scripts` + - [#6150](https://github.com/facebook/create-react-app/pull/6150) dependencies: move chalk to react-dev-utils. ([@otaviopace](https://github.com/otaviopace)) +- `babel-plugin-named-asset-import`, `react-scripts` + - [#5816](https://github.com/facebook/create-react-app/pull/5816) Upgrade @svgr/webpack to 4.1.0. ([@alaycock](https://github.com/alaycock)) +- `react-dev-utils` + - [#6162](https://github.com/facebook/create-react-app/pull/6162) Update react-dev-util globby dependency to v8.0.2. ([@davidlukerice](https://github.com/davidlukerice)) +- `babel-preset-react-app`, `react-app-polyfill`, `react-dev-utils`, `react-error-overlay`, `react-scripts` + - [#6137](https://github.com/facebook/create-react-app/pull/6137) Fix CI and upgrade dependencies. ([@Timer](https://github.com/Timer)) + +#### :hammer: Underlying Tools + +- `babel-preset-react-app`, `react-app-polyfill`, `react-dev-utils`, `react-scripts` + - [#6393](https://github.com/facebook/create-react-app/pull/6393) Upgrade dependencies. ([@ianschmitz](https://github.com/ianschmitz)) +- `babel-preset-react-app` + - [#6307](https://github.com/facebook/create-react-app/pull/6307) Update babel-plugin-macros 2.4.4 -> 2.4.5. ([@maniax89](https://github.com/maniax89)) +- `eslint-config-react-app`, `react-scripts` + - [#6132](https://github.com/facebook/create-react-app/pull/6132) Bump eslint-plugin-react version and update webpack config. ([@ianschmitz](https://github.com/ianschmitz)) + +#### Committers: 29 + +- Adam Laycock ([alaycock](https://github.com/alaycock)) +- Adriano Costa ([kostadriano](https://github.com/kostadriano)) +- Andrew Turgeon ([maniax89](https://github.com/maniax89)) +- Ben Carp ([carpben](https://github.com/carpben)) +- Charles Pritchard ([Downchuck](https://github.com/Downchuck)) +- Chris Self ([chrisself](https://github.com/chrisself)) +- Dallon Feldner ([dallonf](https://github.com/dallonf)) +- Dan Abramov ([gaearon](https://github.com/gaearon)) +- David Rice ([davidlukerice](https://github.com/davidlukerice)) +- Dominik Palo ([DominikPalo](https://github.com/DominikPalo)) +- Dotan Simha ([dotansimha](https://github.com/dotansimha)) +- Ian Schmitz ([ianschmitz](https://github.com/ianschmitz)) +- JBallin ([JBallin](https://github.com/JBallin)) +- James George ([jamesgeorge007](https://github.com/jamesgeorge007)) +- James K Nelson ([jamesknelson](https://github.com/jamesknelson)) +- Jason Laster ([jasonLaster](https://github.com/jasonLaster)) +- Joe Haddad ([Timer](https://github.com/Timer)) +- Matthew Holloway ([holloway](https://github.com/holloway)) +- Nathan Schneider ([nathanlschneider](https://github.com/nathanlschneider)) +- Nikita Lyzhov ([lyzhovnik](https://github.com/lyzhovnik)) +- Otávio Pace ([otaviopace](https://github.com/otaviopace)) +- Rico Kahler ([ricokahler](https://github.com/ricokahler)) +- Steven Tan ([StevenTan](https://github.com/StevenTan)) +- Timothy ([timothyis](https://github.com/timothyis)) +- Tomáš Szabo ([deftomat](https://github.com/deftomat)) +- Yangshun Tay ([yangshun](https://github.com/yangshun)) +- [gottfired](https://github.com/gottfired) +- [zhuoli99](https://github.com/zhuoli99) +- loveky ([loveky](https://github.com/loveky)) + +### Migrating from 2.1.3 to 2.1.4 + +Inside any created project that has not been ejected, run: + +```sh +npm install --save --save-exact react-scripts@2.1.4 +``` + +or + +```sh +yarn add --exact react-scripts@2.1.4 +``` + +## 2.1.3 (January 4, 2019) + +v2.1.3 is a maintenance release to fix a [vulnerability in webpack-dev-server](https://www.npmjs.com/advisories/725). + +#### :memo: Documentation + +- Other + - [#6067](https://github.com/facebook/create-react-app/pull/6067) Correct an error for documentation. ([@hardo](https://github.com/hardo)) + - [#6110](https://github.com/facebook/create-react-app/pull/6110) Replace deprecated VSCode launch.json variable. ([@raiskila](https://github.com/raiskila)) + - [#5631](https://github.com/facebook/create-react-app/pull/5631) Generalize the adding bootstrap documentation. ([@jquense](https://github.com/jquense)) + - [#6084](https://github.com/facebook/create-react-app/pull/6084) Remove outdated docs for setting up eslint in editor. ([@LukasWerfel](https://github.com/LukasWerfel)) + - [#6061](https://github.com/facebook/create-react-app/pull/6061) Fix control comment of CSS Grid prefixing. ([@denexapp](https://github.com/denexapp)) +- `react-scripts` + - [#6036](https://github.com/facebook/create-react-app/pull/6036) Fix comment typo. ([@shawtung](https://github.com/shawtung)) + +#### :house: Internal + +- `create-react-app`, `react-error-overlay` + - [#6104](https://github.com/facebook/create-react-app/pull/6104) Typo fixes. ([@prashant-andani](https://github.com/prashant-andani)) + +#### :hammer: Underlying Tools + +- `react-scripts` + - [#6064](https://github.com/facebook/create-react-app/pull/6064) Update webpack-dev-server 3.1.9 -> 3.1.14. ([@Friss](https://github.com/Friss)) + +#### Committers: 8 + +- Denis Mukhametov ([denexapp](https://github.com/denexapp)) +- Hardo ([hardo](https://github.com/hardo)) +- Janne Raiskila ([raiskila](https://github.com/raiskila)) +- Jason Quense ([jquense](https://github.com/jquense)) +- Lukas Werfel ([LukasWerfel](https://github.com/LukasWerfel)) +- Prashant Andani ([prashant-andani](https://github.com/prashant-andani)) +- Zachary Friss ([Friss](https://github.com/Friss)) +- [shawtung](https://github.com/shawtung) + +### Migrating from 2.1.2 to 2.1.3 + +Inside any created project that has not been ejected, run: + +```sh +npm install --save --save-exact react-scripts@2.1.3 +``` + +or + +```sh +yarn add --exact react-scripts@2.1.3 +``` + +## 2.1.2 (December 23, 2018) + +v2.1.2 is a maintenance release including various bug fixes. + +#### :rocket: New Feature + +- `babel-preset-react-app` + - [#5487](https://github.com/facebook/create-react-app/pull/5487) Add `allowESModules` option to `babel-preset-react-app` ([@Pajn](https://github.com/Pajn)) + +#### :bug: Bug Fix + +- `create-react-app` + - [#5905](https://github.com/facebook/create-react-app/pull/5905) Disable copy to clipboard in `create-react-app --info` ([@heyimalex](https://github.com/heyimalex)) + - [#5685](https://github.com/facebook/create-react-app/pull/5685) Update envinfo to `5.11.1` ([@tabrindle](https://github.com/tabrindle)) +- `babel-preset-react-app` + - [#5783](https://github.com/facebook/create-react-app/pull/5783) Fix TypeScript decorator support ([@ianschmitz](https://github.com/ianschmitz)) +- `babel-plugin-named-asset-import` + - [#5573](https://github.com/facebook/create-react-app/pull/5573) Fix named-asset-import plugin to work with export-as syntax ([@NShahri](https://github.com/NShahri)) +- `react-app-polyfill` + - [#5789](https://github.com/facebook/create-react-app/pull/5789) Don't polyfill fetch for Node ([@gshilin](https://github.com/gshilin)) +- `react-scripts` + - [#5721](https://github.com/facebook/create-react-app/pull/5721) Version bump `postcss-preset-env` to latest ([@BPScott](https://github.com/BPScott)) + - [#5701](https://github.com/facebook/create-react-app/pull/5701) Fix `tsconfig.json` lib suggested value ([@ianschmitz](https://github.com/ianschmitz)) + +#### :nail_care: Enhancement + +- `react-scripts` + - [#5698](https://github.com/facebook/create-react-app/pull/5698) Add support for `setupTests.ts` ([@ianschmitz](https://github.com/ianschmitz)) + +#### :memo: Documentation + +- Other + - [#6009](https://github.com/facebook/create-react-app/pull/6009) Correct markdown to avoid comment. ([@souzasmatheus](https://github.com/souzasmatheus)) + - [#6015](https://github.com/facebook/create-react-app/pull/6015) Add example command to create typed project. ([@mbelsky](https://github.com/mbelsky)) + - [#6000](https://github.com/facebook/create-react-app/pull/6000) Make links to docs consistent in README. ([@iansu](https://github.com/iansu)) + - [#5900](https://github.com/facebook/create-react-app/pull/5900) Add production build section to docs. ([@ianschmitz](https://github.com/ianschmitz)) + - [#5985](https://github.com/facebook/create-react-app/pull/5985) Use https for linked images to fix mixed content warnings. ([@iansu](https://github.com/iansu)) + - [#5919](https://github.com/facebook/create-react-app/pull/5919) Docs: update localStorage mock in “Running Tests”. ([@phacks](https://github.com/phacks)) + - [#5917](https://github.com/facebook/create-react-app/pull/5917) Add SASS_PATH instructions to Sass stylesheet docs. ([@jayantbh](https://github.com/jayantbh)) + - [#5823](https://github.com/facebook/create-react-app/pull/5823) Add default values to `file_ext` note. ([@alaycock](https://github.com/alaycock)) + - [#5907](https://github.com/facebook/create-react-app/pull/5907) Update README.md with updated link about PWAs. ([@wuweiweiwu](https://github.com/wuweiweiwu)) + - [#5858](https://github.com/facebook/create-react-app/pull/5858) Some Grammar fixes. ([@nikhilknoldus](https://github.com/nikhilknoldus)) + - [#5883](https://github.com/facebook/create-react-app/pull/5883) Fix link to page about running tests. ([@wsmoak](https://github.com/wsmoak)) + - [#5849](https://github.com/facebook/create-react-app/pull/5849) React native repository updated in `README.md`. ([@pavinthan](https://github.com/pavinthan)) + - [#5806](https://github.com/facebook/create-react-app/pull/5806) Rename 'getting started' link to 'docs'. ([@kulek1](https://github.com/kulek1)) + - [#5788](https://github.com/facebook/create-react-app/pull/5788) docs: Simplify installing Storybook with `npx` ([@sagirk](https://github.com/sagirk)) + - [#5779](https://github.com/facebook/create-react-app/pull/5779) docs: Change story book command to `sb init` ([@andys8](https://github.com/andys8)) + - [#5759](https://github.com/facebook/create-react-app/pull/5759) Add PR welcoming badge ([@open-source-explorer](https://github.com/open-source-explorer)) + - [#5730](https://github.com/facebook/create-react-app/pull/5730) Suggest Encore when not building a SPA with Symfony ([@dunglas](https://github.com/dunglas)) + - [#5710](https://github.com/facebook/create-react-app/pull/5710) Updated the link to firebase hosting ([@githubsaturn](https://github.com/githubsaturn)) + - [#5704](https://github.com/facebook/create-react-app/pull/5704) Fixed link to manifest.json file ([@m4jing](https://github.com/m4jing)) + - [#5670](https://github.com/facebook/create-react-app/pull/5670) Fix public folder documentation link ([@makovkastar](https://github.com/makovkastar)) +- `eslint-config-react-app` + - [#5990](https://github.com/facebook/create-react-app/pull/5990) Updated docs for `.eslintrc` ([@ManoelLobo](https://github.com/ManoelLobo)) +- `babel-preset-react-app`, `create-react-app`, `eslint-config-react-app`, `react-dev-utils`, `react-scripts` + - [#5912](https://github.com/facebook/create-react-app/pull/5912) Update links to docs in all package README files ([@iansu](https://github.com/iansu)) +- `react-scripts` + - [#5974](https://github.com/facebook/create-react-app/pull/5974) Improve advice in `verifyPackageTree.js` ([@sjalgeo](https://github.com/sjalgeo)) + - [#5954](https://github.com/facebook/create-react-app/pull/5954) Add pre-eject message about new features in v2 ([@iansu](https://github.com/iansu)) + - [#5808](https://github.com/facebook/create-react-app/pull/5808) Add placeholders to template README for bit.ly links ([@iansu](https://github.com/iansu)) +- `react-app-polyfill` + - [#5814](https://github.com/facebook/create-react-app/pull/5814) Note that extra polyfills must be included manually ([@ajwann](https://github.com/ajwann)) +- `babel-preset-react-app`, `eslint-config-react-app`, `react-error-overlay`, `react-scripts` + - [#5727](https://github.com/facebook/create-react-app/pull/5727) Fix typo ([@noelyoo](https://github.com/noelyoo)) + +#### :house: Internal + +- `react-scripts` + - [#5978](https://github.com/facebook/create-react-app/pull/5978) Add `webp` support for TypeScript. ([@dugagjin](https://github.com/dugagjin)) + - [#5959](https://github.com/facebook/create-react-app/pull/5959) Suggest a different default for speed reasons. ([@Timer](https://github.com/Timer)) + - [#5839](https://github.com/facebook/create-react-app/pull/5839) Run prettier on HTML files. ([@sibiraj-s](https://github.com/sibiraj-s)) + - [#5722](https://github.com/facebook/create-react-app/pull/5722) Merge webpack configuration. ([@Timer](https://github.com/Timer)) + - [#5694](https://github.com/facebook/create-react-app/pull/5694) Add permissive TS lib defaults. ([@Timer](https://github.com/Timer)) +- Other + - [#5988](https://github.com/facebook/create-react-app/pull/5988) Added extension to `.eslintrc` ([@ManoelLobo](https://github.com/ManoelLobo)) + - [#5546](https://github.com/facebook/create-react-app/pull/5546) Add the latest stable node version. ([@noelyoo](https://github.com/noelyoo)) +- `react-dev-utils` + - [#5927](https://github.com/facebook/create-react-app/pull/5927) Correct some comments. ([@mjackson](https://github.com/mjackson)) + - [#5879](https://github.com/facebook/create-react-app/pull/5879) fix: make typescriptformatter support 0.5 of fork checker. ([@SimenB](https://github.com/SimenB)) +- `react-error-overlay` + - [#5451](https://github.com/facebook/create-react-app/pull/5451) fix: add `sideEffects: false` to react-error-overlay. ([@SimenB](https://github.com/SimenB)) +- `babel-preset-react-app` + - [#5487](https://github.com/facebook/create-react-app/pull/5487) Add allowESModules option to babel-preset-react-app. ([@Pajn](https://github.com/Pajn)) +- `create-react-app` + - [#4605](https://github.com/facebook/create-react-app/pull/4605) ignore intellij module files when generating an app. ([@denofevil](https://github.com/denofevil)) + +#### Committers: 36 + +- \ ([open-source-explorer](https://github.com/open-source-explorer)) +- Adam Laycock ([alaycock](https://github.com/alaycock)) +- Adam Wanninger ([ajwann](https://github.com/ajwann)) +- Alex Guerra ([heyimalex](https://github.com/heyimalex)) +- Andy ([andys8](https://github.com/andys8)) +- Ben Scott ([BPScott](https://github.com/BPScott)) +- Dennis Ushakov ([denofevil](https://github.com/denofevil)) +- Dugagjin Lashi ([dugagjin](https://github.com/dugagjin)) +- Gregory Shilin ([gshilin](https://github.com/gshilin)) +- Ian Schmitz ([ianschmitz](https://github.com/ianschmitz)) +- Ian Sutherland ([iansu](https://github.com/iansu)) +- Jayant Bhawal ([jayantbh](https://github.com/jayantbh)) +- Jing Ma ([m4jing](https://github.com/m4jing)) +- Joe Haddad ([Timer](https://github.com/Timer)) +- Kasra Bigdeli ([githubsaturn](https://github.com/githubsaturn)) +- Kévin Dunglas ([dunglas](https://github.com/dunglas)) +- Manoel ([ManoelLobo](https://github.com/ManoelLobo)) +- Matheus Souza ([souzasmatheus](https://github.com/souzasmatheus)) +- Max Belsky ([mbelsky](https://github.com/mbelsky)) +- Michael Jackson ([mjackson](https://github.com/mjackson)) +- Nicolas Goutay ([phacks](https://github.com/phacks)) +- Nikhil ([nikhilknoldus](https://github.com/nikhilknoldus)) +- Nima Shahri ([NShahri](https://github.com/NShahri)) +- Noel Yoo ([noelyoo](https://github.com/noelyoo)) +- Oleksandr Melnykov ([makovkastar](https://github.com/makovkastar)) +- Pavinthan ([pavinthan](https://github.com/pavinthan)) +- Rasmus Eneman ([Pajn](https://github.com/Pajn)) +- Sagir Khan ([sagirk](https://github.com/sagirk)) +- Sibiraj ([sibiraj-s](https://github.com/sibiraj-s)) +- Simen Bekkhus ([SimenB](https://github.com/SimenB)) +- Stephen Algeo ([sjalgeo](https://github.com/sjalgeo)) +- Trevor Brindle ([tabrindle](https://github.com/tabrindle)) +- Wei-Wei Wu ([wuweiweiwu](https://github.com/wuweiweiwu)) +- Wendy Smoak ([wsmoak](https://github.com/wsmoak)) +- [kulek1](https://github.com/kulek1) +- swyx ([sw-yx](https://github.com/sw-yx)) + +### Migrating from 2.1.1 to 2.1.2 + +Inside any created project that has not been ejected, run: + +```sh +npm install --save --save-exact react-scripts@2.1.2 +``` + +or + +```sh +yarn add --exact react-scripts@2.1.2 +``` + +## 2.1.1 (October 31, 2018) + +Happy Halloween 🎃 👻! This spooky release brings a treat: decorator support in TypeScript files! + +#### :bug: Bug Fix + +- `babel-preset-react-app` + - [#5659](https://github.com/facebook/create-react-app/pull/5659) Add support for decorators. ([@Timer](https://github.com/Timer)) +- `react-scripts` + - [#5621](https://github.com/facebook/create-react-app/pull/5621) fix 'Duplicate string index signature' in ProcessEnv. ([@xiaoxiangmoe](https://github.com/xiaoxiangmoe)) + +#### :nail_care: Enhancement + +- `babel-preset-react-app` + - [#5659](https://github.com/facebook/create-react-app/pull/5659) Add support for decorators. ([@Timer](https://github.com/Timer)) + +#### :memo: Documentation + +- [#5658](https://github.com/facebook/create-react-app/pull/5658) Update making-a-progressive-web-app.md. ([@jakeboone02](https://github.com/jakeboone02)) +- [#5635](https://github.com/facebook/create-react-app/pull/5635) Update minimum node version to 8.10 in README. ([@iansu](https://github.com/iansu)) +- [#5629](https://github.com/facebook/create-react-app/pull/5629) Add link to cra-ts migration guide. ([@Vinnl](https://github.com/Vinnl)) + +#### :house: Internal + +- `react-error-overlay` + - [#4709](https://github.com/facebook/create-react-app/pull/4709) Expose `reportRuntimeError`. ([@hipstersmoothie](https://github.com/hipstersmoothie)) +- `babel-plugin-named-asset-import` + - [#5575](https://github.com/facebook/create-react-app/pull/5575) add tests for named-asset-imports plugin. ([@NShahri](https://github.com/NShahri)) +- `react-scripts` + - [#5651](https://github.com/facebook/create-react-app/pull/5651) Make serviceWorker config argument optional in typescript. ([@eddedd88](https://github.com/eddedd88)) + +#### Committers: 8 + +- Andrew Lisowski ([hipstersmoothie](https://github.com/hipstersmoothie)) +- Eduardo Duran ([eddedd88](https://github.com/eddedd88)) +- Ian Sutherland ([iansu](https://github.com/iansu)) +- Jake Boone ([jakeboone02](https://github.com/jakeboone02)) +- Joe Haddad ([Timer](https://github.com/Timer)) +- Nima Shahri ([NShahri](https://github.com/NShahri)) +- Vincent ([Vinnl](https://github.com/Vinnl)) +- ZHAO Jinxiang ([xiaoxiangmoe](https://github.com/xiaoxiangmoe)) + +### Migrating from 2.1.0 to 2.1.1 + +Inside any created project that has not been ejected, run: + +```sh +npm install --save --save-exact react-scripts@2.1.1 +``` + +or + +```sh +yarn add --exact react-scripts@2.1.1 +``` + ## 2.1.0 (October 29, 2018) Create React App 2.1 adds support for TypeScript! Read [the documentation](https://facebook.github.io/create-react-app/docs/adding-typescript) to get started. New applications can be created using TypeScript by running: -```bash +```sh $ npx create-react-app my-app --typescript ``` @@ -91,13 +468,13 @@ $ npx create-react-app my-app --typescript Inside any created project that has not been ejected, run: -```bash +```sh npm install --save --save-exact react-scripts@2.1.0 ``` or -``` +```sh yarn add --exact react-scripts@2.1.0 ``` @@ -190,13 +567,13 @@ yarn add --exact react-scripts@2.1.0 Inside any created project that has not been ejected, run: -```bash +```sh npm install --save --save-exact react-scripts@2.0.5 ``` or -``` +```sh yarn add --exact react-scripts@2.0.5 ``` @@ -256,13 +633,13 @@ yarn add --exact react-scripts@2.0.5 Inside any created project that has not been ejected, run: -```bash +```sh npm install --save --save-exact react-scripts@2.0.4 ``` or -``` +```sh yarn add --exact react-scripts@2.0.4 ``` @@ -279,13 +656,13 @@ It provides a high-level overview of new features and improvements. Now let's se Inside any created project that has not been ejected, run: -```bash +```sh npm install --save --save-exact react-scripts@2.0.3 ``` or -``` +```sh yarn add --exact react-scripts@2.0.3 ``` @@ -305,13 +682,13 @@ We have dropped default support for Internet Explorer 9, 10, and 11. If you stil First, install `react-app-polyfill`: -```bash +```sh npm install react-app-polyfill ``` or -``` +```sh yarn add react-app-polyfill ``` @@ -397,13 +774,13 @@ If your `proxy` is an object, that means you are using the advanced proxy config First, install `http-proxy-middleware` using npm or Yarn: -```bash +```sh npm install http-proxy-middleware ``` or -``` +```sh yarn add http-proxy-middleware ``` diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 531befe574b..8a8f8f85028 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -94,7 +94,7 @@ Once it is done, you can modify any file locally and run `yarn start`, `yarn tes If you want to try out the end-to-end flow with the global CLI, you can do this too: -``` +```sh yarn create-react-app my-app cd my-app ``` @@ -107,6 +107,16 @@ and then run `yarn start` or `yarn build`. More detailed information are in the dedicated [README](/packages/react-scripts/fixtures/kitchensink/README.md). +### CI testing with private packages + +**create-react-app** relies on main registry to fetch all dependencies, but, if you are in the need to usage of custom private packages that need to be fetch while running E2E test you might need a different configuration. + +#### Customizing E2E registry configuration + +We use [verdaccio](https://github.com/verdaccio/verdaccio) to emulate packages publishing in a registry using a default configuration. You might modify the current behaviour just editing the file `task/verdaccio.yaml`. + +For more information about the configuration check out the [Verdaccio documentation](https://verdaccio.org/docs/en/configuration). + ## Tips for contributors using Windows The scripts in tasks folder and other scripts in `package.json` will not work in Windows out of the box. However, using [Bash on windows](https://msdn.microsoft.com/en-us/commandline/wsl/about) makes it easier to use those scripts without any workarounds. The steps to do so are detailed below: @@ -142,9 +152,7 @@ By default git would use `CRLF` line endings which would cause the scripts to fa 9. Wait for a long time, and it will get published. Don’t worry that it’s stuck. In the end the publish script will prompt for versions before publishing the packages. 10. After publishing, create a GitHub Release with the same text as the changelog entry. See previous Releases for inspiration. -Make sure to test the released version! If you want to be extra careful, you can publish a prerelease by running `npm run publish -- --npm-tag=next` instead of `npm run publish`. - -Optionally, you can cut a prerelease instead by running `npm run publish -- --canary=next --exact --cd-version patch --npm-tag=next`. +Make sure to test the released version! If you want to be extra careful, you can publish a prerelease by running `npm run publish -- --canary=next --exact --cd-version patch --npm-tag=next` instead of `npm run publish`. --- diff --git a/README.md b/README.md index 473e6ab314b..75aed91b989 100644 --- a/README.md +++ b/README.md @@ -1,9 +1,9 @@ -# Create React App [](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). @@ -34,7 +34,7 @@ Just create a project, and you’re good to go. ## Creating an App -**You’ll need to have Node 8.9.0 or later on your local development machine** (but it’s not required on the server). You can use [nvm](https://github.com/creationix/nvm#installation) (macOS/Linux) or [nvm-windows](https://github.com/coreybutler/nvm-windows#node-version-manager-nvm-for-windows) to easily switch Node versions between different projects. +**You’ll need to have Node 8.10.0 or later on your local development machine** (but it’s not required on the server). You can use [nvm](https://github.com/creationix/nvm#installation) (macOS/Linux) or [nvm-windows](https://github.com/coreybutler/nvm-windows#node-version-manager-nvm-for-windows) to easily switch Node versions between different projects. To create a new app, you may choose one of the following methods: @@ -111,7 +111,7 @@ You will see the build errors and lint warnings in the console. Runs the test watcher in an interactive mode. By default, runs tests related to files changed since the last commit. -[Read more about testing.](https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#running-tests) +[Read more about testing.](https://facebook.github.io/create-react-app/docs/running-tests) ### `npm run build` or `yarn build` @@ -134,7 +134,7 @@ Please refer to the [User Guide](https://facebook.github.io/create-react-app/doc - **One Dependency:** There is just one build dependency. It uses Webpack, Babel, ESLint, and other amazing projects, but provides a cohesive curated experience on top of them. -- **No Configuration Required:** You don't need to configure anything. Reasonably good configuration of both development and production builds is handled for you so you can focus on writing code. +- **No Configuration Required:** You don't need to configure anything. A reasonably good configuration of both development and production builds is handled for you so you can focus on writing code. - **No Lock-In:** You can “eject” to a custom setup at any time. Run a single command, and all the configuration and build dependencies will be moved directly into your project, so you can pick up right where you left off. @@ -148,12 +148,12 @@ Your environment will have everything you need to build a modern single-page Rea - A fast interactive unit test runner with built-in support for coverage reporting. - A live development server that warns about common mistakes. - A build script to bundle JS, CSS, and images for production, with hashes and sourcemaps. -- An offline-first [service worker](https://developers.google.com/web/fundamentals/getting-started/primers/service-workers) and a [web app manifest](https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/), meeting all the [Progressive Web App](https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#making-a-progressive-web-app) criteria. (_Note: Using the service worker is opt-in as of `react-scripts@2.0.0` and higher_) +- An offline-first [service worker](https://developers.google.com/web/fundamentals/getting-started/primers/service-workers) and a [web app manifest](https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/), meeting all the [Progressive Web App](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app) criteria. (_Note: Using the service worker is opt-in as of `react-scripts@2.0.0` and higher_) - Hassle-free updates for the above tools with a single dependency. Check out [this guide](https://github.com/nitishdayal/cra_closer_look) for an overview of how these tools fit together. -The tradeoff is that **these tools are preconfigured to work in a specific way**. If your project needs more customization, you can ["eject"](https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#npm-run-eject) and customize it, but then you will need to maintain this configuration. +The tradeoff is that **these tools are preconfigured to work in a specific way**. If your project needs more customization, you can ["eject"](https://facebook.github.io/create-react-app/docs/available-scripts#npm-run-eject) and customize it, but then you will need to maintain this configuration. ## Popular Alternatives @@ -163,11 +163,11 @@ Create React App is a great fit for: - **Starting new single-page React applications.** - **Creating examples** with React for your libraries and components. -Here’s a few common cases where you might want to try something else: +Here are a few common cases where you might want to try something else: - If you want to **try React** without hundreds of transitive build tool dependencies, consider [using a single HTML file or an online sandbox instead](https://reactjs.org/docs/try-react.html). -- If you need to **integrate React code with a server-side template framework** like Rails or Django, or if you’re **not building a single-page app**, consider using [nwb](https://github.com/insin/nwb), or [Neutrino](https://neutrino.js.org/) which are more flexible. For Rails specifically, you can use [Rails Webpacker](https://github.com/rails/webpacker). +- If you need to **integrate React code with a server-side template framework** like Rails, Django or Symfony, or if you’re **not building a single-page app**, consider using [nwb](https://github.com/insin/nwb), or [Neutrino](https://neutrino.js.org/) which are more flexible. For Rails specifically, you can use [Rails Webpacker](https://github.com/rails/webpacker). For Symfony, try [Symfony's Webpack Encore](https://symfony.com/doc/current/frontend/encore/reactjs.html). - If you need to **publish a React component**, [nwb](https://github.com/insin/nwb) can [also do this](https://github.com/insin/nwb#react-components-and-libraries), as well as [Neutrino's react-components preset](https://neutrino.js.org/packages/react-components/). @@ -188,7 +188,7 @@ We'd love to have your helping hand on `create-react-app`! See [CONTRIBUTING.md] ## React Native Looking for something similar, but for React Native? -Check out [Create React Native App](https://github.com/react-community/create-react-native-app/). +Check out [Expo CLI](https://github.com/expo/expo-cli). ## Acknowledgements diff --git a/appveyor.cleanup-cache.txt b/appveyor.cleanup-cache.txt deleted file mode 100644 index d48a91fdf35..00000000000 --- a/appveyor.cleanup-cache.txt +++ /dev/null @@ -1,4 +0,0 @@ -Edit this file to trigger a cache rebuild. -http://help.appveyor.com/discussions/questions/1310-delete-cache - ----- diff --git a/appveyor.yml b/appveyor.yml deleted file mode 100644 index 5f5143167d6..00000000000 --- a/appveyor.yml +++ /dev/null @@ -1,54 +0,0 @@ -image: Visual Studio 2017 - -environment: - APPVEYOR_SAVE_CACHE_ON_ERROR: true - APPVEYOR_BUILD_WORKER_CLOUD: 'GCE' - matrix: - - nodejs_version: 10 - test_suite: 'simple' - - nodejs_version: 10 - test_suite: 'installs' - - nodejs_version: 10 - test_suite: 'kitchensink' - - nodejs_version: 10 - test_suite: 'kitchensink-eject' - - nodejs_version: 8 - test_suite: 'simple' - - nodejs_version: 8 - test_suite: 'installs' - - nodejs_version: 8 - test_suite: 'kitchensink' - - nodejs_version: 8 - test_suite: 'kitchensink-eject' -cache: - - '%APPDATA%\npm-cache -> appveyor.cleanup-cache.txt' - - '%LOCALAPPDATA%\Yarn\Cache -> appveyor.cleanup-cache.txt' - -clone_depth: 50 - -matrix: - fast_finish: true - allow_failures: - - test_suite: 'installs' - -platform: - - x64 - -install: - - ps: Install-Product node $env:nodejs_version $env:platform - - ps: | - (New-Object Net.WebClient).DownloadFile("https://nightly.yarnpkg.com/latest.msi", "$env:temp\yarn.msi") - cmd /c start /wait msiexec.exe /i $env:temp\yarn.msi /quiet /qn /norestart - -build: off - -skip_commits: - files: - - '**/*.md' - -test_script: - - node --version - - npm --version - - yarn --version - - yarn cache dir - - bash tasks/e2e-%test_suite%.sh diff --git a/docusaurus/docs/adding-a-css-modules-stylesheet.md b/docusaurus/docs/adding-a-css-modules-stylesheet.md index 72b58bfe99e..be169182848 100644 --- a/docusaurus/docs/adding-a-css-modules-stylesheet.md +++ b/docusaurus/docs/adding-a-css-modules-stylesheet.md @@ -49,7 +49,7 @@ No clashes from other `.error` class names ```html - +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..660065235a5 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,29 @@ 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 +``` + +> **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..dc103f81a99 100644 --- a/docusaurus/docs/adding-bootstrap.md +++ b/docusaurus/docs/adding-bootstrap.md @@ -3,18 +3,18 @@ id: adding-bootstrap title: Adding Bootstrap --- -You don’t have to use [reactstrap](https://reactstrap.github.io/) together with React but it is a popular library for integrating Bootstrap with React apps. If you need it, you can integrate it with Create React App by following these steps: +While you don’t have to use any specific library to integrate Bootstrap with React apps, it's often easier than trying to wrap the Bootstrap jQuery plugins. [React Bootstrap](https://react-bootstrap.netlify.com/) is the most popular option, that strives for complete parity with bootstrap. [reactstrap](https://reactstrap.github.io/) is also a good choice for projects looking for smaller builds at the expense of some features. -Install reactstrap and Bootstrap from npm. reactstrap does not include Bootstrap CSS so this needs to be installed as well: +Each project's respective documentation site has detailed instructions for installing and using them. Both depend on the Bootstrap css file so install that as well: ```sh -npm install --save reactstrap bootstrap@4 +npm install --save bootstrap ``` Alternatively you may use `yarn`: ```sh -yarn add bootstrap@4 reactstrap +yarn add bootstrap ``` Import Bootstrap CSS and optionally Bootstrap theme CSS in the beginning of your `src/index.js` file: @@ -25,14 +25,6 @@ import 'bootstrap/dist/css/bootstrap.css'; // components takes precedence over default styles. ``` -Import required reactstrap components within `src/App.js` file or your custom component files: - -```js -import { Button } from 'reactstrap'; -``` - -Now you are ready to use the imported reactstrap components within your component hierarchy defined in the render method. Here is an example [`App.js`](https://gist.githubusercontent.com/zx6658/d9f128cd57ca69e583ea2b5fea074238/raw/a56701c142d0c622eb6c20a457fbc01d708cb485/App.js) redone using reactstrap. - ## Using a Custom Theme > Note: this feature is available with `react-scripts@2.0.0` and higher. @@ -40,7 +32,7 @@ Now you are ready to use the imported reactstrap components within your componen Sometimes you might need to tweak the visual styles of Bootstrap (or equivalent package). As of `react-scripts@2.0.0` you can import `.scss` files. This makes it possible to use a package's built-in Sass variables for global style preferences. -To customize Bootstrap, create a file called `src/custom.scss` (or similar) and import the Bootstrap source stylesheet. Add any overrides _before_ the imported file(s). You can reference [Bootstrap's documentation](http://getbootstrap.com/docs/4.1/getting-started/theming/#css-variables) for the names of the available variables. +To customize Bootstrap, create a file called `src/custom.scss` (or similar) and import the Bootstrap source stylesheet. Add any overrides _before_ the imported file(s). You can reference [Bootstrap's documentation](https://getbootstrap.com/docs/4.1/getting-started/theming/#css-variables) for the names of the available variables. ```scss // Override default variables before the import diff --git a/docusaurus/docs/adding-custom-environment-variables.md b/docusaurus/docs/adding-custom-environment-variables.md index 15d5527106b..b4df594ca7f 100644 --- a/docusaurus/docs/adding-custom-environment-variables.md +++ b/docusaurus/docs/adding-custom-environment-variables.md @@ -6,24 +6,23 @@ sidebar_label: Environment Variables > Note: this feature is available with `react-scripts@0.2.3` and higher. -Your project can consume variables declared in your environment as if they were declared locally in your JS files. By -default you will have `NODE_ENV` defined for you, and any other environment variables starting with -`REACT_APP_`. +Your project can consume variables declared in your environment as if they were declared locally in your JS files. By default you will have `NODE_ENV` defined for you, and any other environment variables starting with `REACT_APP_`. + +> WARNING: Do not store any secrets (such as private API keys) in your React app! +> +> Environment variables are embedded into the build, meaning anyone can view them by inspecting your app's files. **The environment variables are embedded during the build time**. Since Create React App produces a static HTML/CSS/JS bundle, it can’t possibly read them at runtime. To read them at runtime, you would need to load HTML into memory on the server and replace placeholders in runtime, just like [described here](title-and-meta-tags.md#injecting-data-from-the-server-into-the-page). Alternatively you can rebuild the app on the server anytime you change them. > Note: You must create custom environment variables beginning with `REACT_APP_`. Any other variables except `NODE_ENV` will be ignored to avoid accidentally [exposing a private key on the machine that could have the same name](https://github.com/facebook/create-react-app/issues/865#issuecomment-252199527). Changing any environment variables will require you to restart the development server if it is running. -These environment variables will be defined for you on `process.env`. For example, having an environment -variable named `REACT_APP_SECRET_CODE` will be exposed in your JS as `process.env.REACT_APP_SECRET_CODE`. +These environment variables will be defined for you on `process.env`. For example, having an environment variable named `REACT_APP_NOT_SECRET_CODE` will be exposed in your JS as `process.env.REACT_APP_NOT_SECRET_CODE`. There is also a special built-in environment variable called `NODE_ENV`. You can read it from `process.env.NODE_ENV`. When you run `npm start`, it is always equal to `'development'`, when you run `npm test` it is always equal to `'test'`, and when you run `npm run build` to make a production bundle, it is always equal to `'production'`. **You cannot override `NODE_ENV` manually.** This prevents developers from accidentally deploying a slow development build to production. -These environment variables can be useful for displaying information conditionally based on where the project is -deployed or consuming sensitive data that lives outside of version control. +These environment variables can be useful for displaying information conditionally based on where the project is deployed or consuming sensitive data that lives outside of version control. -First, you need to have environment variables defined. For example, let’s say you wanted to consume a secret defined -in the environment inside a ``: +First, you need to have environment variables defined. For example, let’s say you wanted to consume an environment variable inside a ``: ```jsx render() { @@ -31,29 +30,25 @@ render() { You are running this application in {process.env.NODE_ENV} mode. - + ); } ``` -During the build, `process.env.REACT_APP_SECRET_CODE` will be replaced with the current value of the `REACT_APP_SECRET_CODE` environment variable. Remember that the `NODE_ENV` variable will be set for you automatically. +During the build, `process.env.REACT_APP_NOT_SECRET_CODE` will be replaced with the current value of the `REACT_APP_NOT_SECRET_CODE` environment variable. Remember that the `NODE_ENV` variable will be set for you automatically. When you load the app in the browser and inspect the ``, you will see its value set to `abcdef`, and the bold text will show the environment provided when using `npm start`: ```html You are running this application in development mode. - - - + ``` -The above form is looking for a variable called `REACT_APP_SECRET_CODE` from the environment. In order to consume this -value, we need to have it defined in the environment. This can be done using two ways: either in your shell or in -a `.env` file. Both of these ways are described in the next few sections. +The above form is looking for a variable called `REACT_APP_NOT_SECRET_CODE` from the environment. In order to consume this value, we need to have it defined in the environment. This can be done using two ways: either in your shell or in a `.env` file. Both of these ways are described in the next few sections. Having access to the `NODE_ENV` is also useful for performing actions conditionally: @@ -82,13 +77,12 @@ Note that the caveats from the above section apply: ## Adding Temporary Environment Variables In Your Shell -Defining environment variables can vary between OSes. It’s also important to know that this manner is temporary for the -life of the shell session. +Defining environment variables can vary between OSes. It’s also important to know that this manner is temporary for the life of the shell session. ### Windows (cmd.exe) ```cmd -set "REACT_APP_SECRET_CODE=abcdef" && npm start +set "REACT_APP_NOT_SECRET_CODE=abcdef" && npm start ``` (Note: Quotes around the variable assignment are required to avoid a trailing whitespace.) @@ -96,13 +90,13 @@ set "REACT_APP_SECRET_CODE=abcdef" && npm start ### Windows (Powershell) ```Powershell -($env:REACT_APP_SECRET_CODE = "abcdef") -and (npm start) +($env:REACT_APP_NOT_SECRET_CODE = "abcdef") -and (npm start) ``` ### Linux, macOS (Bash) -```bash -REACT_APP_SECRET_CODE=abcdef npm start +```sh +REACT_APP_NOT_SECRET_CODE=abcdef npm start ``` ## Adding Development Environment Variables In `.env` @@ -112,7 +106,7 @@ REACT_APP_SECRET_CODE=abcdef npm start To define permanent environment variables, create a file called `.env` in the root of your project: ``` -REACT_APP_SECRET_CODE=abcdef +REACT_APP_NOT_SECRET_CODE=abcdef ``` > Note: You must create custom environment variables beginning with `REACT_APP_`. Any other variables except `NODE_ENV` will be ignored to avoid [accidentally exposing a private key on the machine that could have the same name](https://github.com/facebook/create-react-app/issues/865#issuecomment-252199527). Changing any environment variables will require you to restart the development server if it is running. diff --git a/docusaurus/docs/adding-typescript.md b/docusaurus/docs/adding-typescript.md index efe0d0c0d9e..70bc4d20820 100644 --- a/docusaurus/docs/adding-typescript.md +++ b/docusaurus/docs/adding-typescript.md @@ -7,12 +7,24 @@ title: Adding TypeScript [TypeScript](https://www.typescriptlang.org/) is a typed superset of JavaScript that compiles to plain JavaScript. +To start a new Create React App project with [TypeScript](https://www.typescriptlang.org/), you can run: + +```sh +npx create-react-app my-app --typescript + +# or + +yarn create react-app my-app --typescript +``` + To add [TypeScript](https://www.typescriptlang.org/) to a Create React App project, first install it: -```bash -$ npm install --save typescript @types/node @types/react @types/react-dom @types/jest -$ # or -$ yarn add typescript @types/node @types/react @types/react-dom @types/jest +```sh +npm install --save typescript @types/node @types/react @types/react-dom @types/jest + +# or + +yarn add typescript @types/node @types/react @types/react-dom @types/jest ``` Next, rename any file to be a TypeScript file (e.g. `src/index.js` to `src/index.tsx`) and **restart your development server**! @@ -24,6 +36,8 @@ To learn more about TypeScript, check out [its documentation](https://www.typesc > **Note:** You are not required to make a [`tsconfig.json` file](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html), one will be made for you. > You are allowed to edit the generated TypeScript configuration. +> **Note:** If you are currently using [create-react-app-typescript](https://github.com/wmonk/create-react-app-typescript/), see [this blog post](https://vincenttunru.com/migrate-create-react-app-typescript-to-create-react-app/) for instructions on how to migrate to Create React App. + > **Note:** We recommend using [VSCode](https://code.visualstudio.com/) for a better integrated experience. > **Note:** Constant enums and namespaces are not supported. diff --git a/docusaurus/docs/advanced-configuration.md b/docusaurus/docs/advanced-configuration.md index c991fd72edb..fedbf1de2aa 100644 --- a/docusaurus/docs/advanced-configuration.md +++ b/docusaurus/docs/advanced-configuration.md @@ -11,10 +11,10 @@ You can adjust various development and production settings by setting environmen | 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/advanced-configuration.md.rej b/docusaurus/docs/advanced-configuration.md.rej new file mode 100644 index 00000000000..8aaf0538f8d --- /dev/null +++ b/docusaurus/docs/advanced-configuration.md.rej @@ -0,0 +1,4 @@ +diff a/docusaurus/docs/advanced-configuration.md b/docusaurus/docs/advanced-configuration.md (rejected hunks) +@@ -14 +14 @@ You can adjust various development and production settings by setting environmen +-| 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. | ++| 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. | diff --git a/docusaurus/docs/alternatives-to-ejecting.md b/docusaurus/docs/alternatives-to-ejecting.md index 6686ed93408..7a37673eb0c 100644 --- a/docusaurus/docs/alternatives-to-ejecting.md +++ b/docusaurus/docs/alternatives-to-ejecting.md @@ -3,4 +3,4 @@ id: alternatives-to-ejecting title: Alternatives to Ejecting --- -[Ejecting](available-scripts.md#npm-run-eject) lets you customize anything, but from that point on you have to maintain the configuration and scripts yourself. This can be daunting if you have many similar projects. In such cases instead of ejecting we recommend to _fork_ `react-scripts` and any other packages you need. [This article](https://auth0.com/blog/how-to-configure-create-react-app/) dives into how to do it in depth. You can find more discussion in [this issue](https://github.com/facebook/create-react-app/issues/682.md). +[Ejecting](available-scripts.md#npm-run-eject) lets you customize anything, but from that point on you have to maintain the configuration and scripts yourself. This can be daunting if you have many similar projects. In such cases instead of ejecting we recommend to _fork_ `react-scripts` and any other packages you need. [This article](https://auth0.com/blog/how-to-configure-create-react-app/) dives into how to do it in depth. You can find more discussion in [this issue](https://github.com/facebook/create-react-app/issues/682). diff --git a/docusaurus/docs/analyzing-the-bundle-size.md b/docusaurus/docs/analyzing-the-bundle-size.md index ce175e085d6..36f753c4df2 100644 --- a/docusaurus/docs/analyzing-the-bundle-size.md +++ b/docusaurus/docs/analyzing-the-bundle-size.md @@ -24,7 +24,7 @@ Then in `package.json`, add the following line to `scripts`: ```diff "scripts": { -+ "analyze": "source-map-explorer build/static/js/main.*", ++ "analyze": "source-map-explorer 'build/static/js/*.js'", "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", @@ -33,7 +33,7 @@ Then in `package.json`, add the following line to `scripts`: Then to analyze the bundle run the production build then run the analyze script. -``` +```sh npm run build npm run analyze ``` diff --git a/docusaurus/docs/available-scripts.md b/docusaurus/docs/available-scripts.md index a6a32751926..f7adadb0853 100644 --- a/docusaurus/docs/available-scripts.md +++ b/docusaurus/docs/available-scripts.md @@ -20,9 +20,9 @@ Launches the test runner in the interactive watch mode. See the section about [r Builds the app for production to the `build` folder. It correctly bundles React in production mode and optimizes the build for the best performance. -The build is minified and the filenames include the hashes. Your app is ready to be deployed! +The build is minified and the filenames include the hashes. See the [production build](production-build.md) section for more information. -See the section about [deployment](deployment.md) for more information. +Your app is ready to be deployed! See the section about [deployment](deployment.md) for more information about deploying your application to popular hosting providers. ## `npm run eject` diff --git a/docusaurus/docs/code-splitting.md b/docusaurus/docs/code-splitting.md index b288785b574..ace13fdfcce 100644 --- a/docusaurus/docs/code-splitting.md +++ b/docusaurus/docs/code-splitting.md @@ -45,12 +45,12 @@ class App extends Component { export default App; ``` -This will make `moduleA.js` and all its unique dependencies as a separate chunk that only loads after the user clicks the 'Load' button. +This will make `moduleA.js` and all its unique dependencies as a separate chunk that only loads after the user clicks the 'Load' button. For more information on the chunks that are created, see the [production build](production-build.md) section. You can also use it with `async` / `await` syntax if you prefer it. ## With React Router -If you are using React Router check out [this tutorial](http://serverless-stack.com/chapters/code-splitting-in-create-react-app.html) on how to use code splitting with it. You can find the companion GitHub repository [here](https://github.com/AnomalyInnovations/serverless-stack-demo-client/tree/code-splitting-in-create-react-app). +If you are using React Router check out [this tutorial](https://serverless-stack.com/chapters/code-splitting-in-create-react-app.html) on how to use code splitting with it. You can find the companion GitHub repository [here](https://github.com/AnomalyInnovations/serverless-stack-demo-client/tree/code-splitting-in-create-react-app). Also check out the [Code Splitting](https://reactjs.org/docs/code-splitting.html) section in React documentation. diff --git a/docusaurus/docs/debugging-tests.md b/docusaurus/docs/debugging-tests.md index 93da201a9f6..6546f94bce3 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", "--no-watch"], "cwd": "${workspaceRoot}", "protocol": "inspector", "console": "integratedTerminal", diff --git a/docusaurus/docs/debugging-tests.md.rej b/docusaurus/docs/debugging-tests.md.rej new file mode 100644 index 00000000000..15d1a8477ef --- /dev/null +++ b/docusaurus/docs/debugging-tests.md.rej @@ -0,0 +1,9 @@ +diff a/docusaurus/docs/debugging-tests.md b/docusaurus/docs/debugging-tests.md (rejected hunks) +@@ -54,6 +54 @@ Use the following [`launch.json`](https://code.visualstudio.com/docs/editor/debu +- "args": [ +- "test", +- "--runInBand", +- "--no-cache", +- "--no-watch" +- ], ++ "args": ["test", "--runInBand", "--no-cache", "--no-watch"], diff --git a/docusaurus/docs/deployment.md b/docusaurus/docs/deployment.md index b3da65048d4..ae26b9e8249 100644 --- a/docusaurus/docs/deployment.md +++ b/docusaurus/docs/deployment.md @@ -4,7 +4,7 @@ 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. +`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 @@ -15,7 +15,11 @@ npm install -g serve serve -s build ``` -The last command shown above will serve your static site on the port **5000**. Like many of [serve](https://github.com/zeit/serve)’s internal settings, the port can be adjusted using the `-p` or `--port` flags. +The last command shown above will serve your static site on the port **5000**. Like many of [serve](https://github.com/zeit/serve)’s internal settings, the port can be adjusted using the `-l` or `--listen` flags: + +```sh +serve -s build -l 4000 +``` Run this command to get a full list of the options available: @@ -27,7 +31,7 @@ serve -h You don’t necessarily need a static server in order to run a Create React App project in production. It works just as fine integrated into an existing dynamic one. -Here’s a programmatic example using [Node](https://nodejs.org/) and [Express](http://expressjs.com/): +Here’s a programmatic example using [Node](https://nodejs.org/) and [Express](https://expressjs.com/): ```javascript const express = require('express'); @@ -75,7 +79,7 @@ If you’re using [Apache HTTP Server](https://httpd.apache.org/), you need to c It will get copied to the `build` folder when you run `npm run build`. -If you’re using [Apache Tomcat](http://tomcat.apache.org/), you need to follow [this Stack Overflow answer](https://stackoverflow.com/a/41249464/4878474). +If you’re using [Apache Tomcat](https://tomcat.apache.org/), you need to follow [this Stack Overflow answer](https://stackoverflow.com/a/41249464/4878474). Now requests to `/todos/42` will be handled correctly both in development and in production. @@ -107,6 +111,7 @@ This will let Create React App correctly infer the root path to use in the gener **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: @@ -204,7 +209,7 @@ Then run the `firebase init` command from your project’s root. You need to cho IMPORTANT: you need to set proper HTTP caching headers for `service-worker.js` file in `firebase.json` file or you will not be able to see changes after first deployment ([issue #2440](https://github.com/facebook/create-react-app/issues/2440)). It should be added inside `"hosting"` key like next: -``` +```json { "hosting": { ... @@ -232,7 +237,7 @@ Now, after you create a production build with `npm run build`, you can deploy it 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). +For more information see [Firebase Hosting](https://firebase.google.com/docs/hosting). ## [GitHub Pages](https://pages.github.com/) @@ -241,6 +246,7 @@ For more information see [Add Firebase to your JavaScript Project](https://fireb ### 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: @@ -291,11 +297,10 @@ Add the following scripts in your `package.json`: The `predeploy` script will run automatically before `deploy` is run. -If you are deploying to a GitHub user page instead of a project page you'll need to make two -additional modifications: +If you are deploying to a GitHub user page instead of a project page you'll need to make one +additional modification: -1. First, change your repository's source branch to be any branch other than **master**. -1. Additionally, tweak your `package.json` scripts to push deployments to **master**: +1. Tweak your `package.json` scripts to push deployments to **master**: ```diff "scripts": { @@ -312,11 +317,11 @@ Then run: npm run deploy ``` -### Step 4: Ensure your project’s settings use `gh-pages` +### Step 4: For a project page, ensure your project’s settings use `gh-pages` Finally, make sure **GitHub Pages** option in your GitHub project settings is set to use the `gh-pages` branch: - + ### Step 5: Optionally, configure the domain @@ -422,23 +427,25 @@ When you build the project, Create React App will place the `public` folder cont ## [Now](https://zeit.co/now) -Now offers a zero-configuration single-command deployment. You can use `now` to deploy your app for free. +[Now](https://zeit.co/docs) offers a simple, single-command deployment. You can use `now` to deploy your app for free. -1. Install the `now` command-line tool either via the recommended [desktop tool](https://zeit.co/download) or via node with `npm install -g now`. +The first step is to install Now. You can do this by installing [the Now Desktop app](https://zeit.co/download), which also installs Now CLI and keeps it up-to-date, or by [installing Now CLI](https://zeit.co/download#now-cli) directly with npm: -2. Build your app by running `npm run build`. +```shell +npm i -g now +``` -3. Move into the build directory by running `cd build`. +To deploy your built project directly with Now CLI in your terminal, without any configuration: -4. Run `now --name your-project-name` from within the build directory. You will see a **now.sh** URL in your output like this: +1. Build your app by running `npm run build`. - ``` - > Ready! https://your-project-name-tpspyhtdtk.now.sh (copied to clipboard) - ``` +2. Move into the build directory by running `cd build`. + +3. Run `now --name your-project-name` from within the build directory. You will be given a **now.sh** URL as a response as your build is deployed, similar to the following: https://my-cra-project-4rx7b16z3.now.sh/ - Paste that URL into your browser when the build is complete, and you will see your deployed app. +Click or paste the deployment URL into your browser when the build is complete and you will see your deployed app. -Details are available in [this article.](https://zeit.co/blog/unlimited-static) +For more information on deploying React applications with Now, including automatically building your application fresh in the cloud, setting up routes to rewrite all paths to the index.html file, and setting up caching headers for speed, see [the ZEIT Guide for Deploying a React app with Create React App](https://zeit.co/guides/deploying-react-with-now-cra/). ## [S3](https://aws.amazon.com/s3) and [CloudFront](https://aws.amazon.com/cloudfront/) diff --git a/docusaurus/docs/deployment.md.rej b/docusaurus/docs/deployment.md.rej new file mode 100644 index 00000000000..ef354fb1b98 --- /dev/null +++ b/docusaurus/docs/deployment.md.rej @@ -0,0 +1,4 @@ +diff a/docusaurus/docs/deployment.md b/docusaurus/docs/deployment.md (rejected hunks) +@@ -446 +446 @@ To deploy your built project directly with Now CLI in your terminal, without any +- Click or paste the deployment URL into your browser when the build is complete and you will see your deployed app. ++Click or paste the deployment URL into your browser when the build is complete and you will see your deployed app. 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..6945b4e6f08 100644 --- a/docusaurus/docs/getting-started.md +++ b/docusaurus/docs/getting-started.md @@ -14,9 +14,11 @@ cd my-app npm start ``` +> If you've previously installed `create-react-app` globally via `npm install -g create-react-app`, we recommend you uninstall the package using `npm uninstall -g create-react-app` to ensure that `npx` always uses the latest version. + _([npx](https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b) comes with npm 5.2+ and higher, see [instructions for older npm versions](https://gist.github.com/gaearon/4064d3c23a77c74a3614c498a8bb1c5f))_ -Then open [http://localhost:3000/](http://localhost:3000/) to see your app. +Then open [http://localhost:3000/](http://localhost:3000/) to see your app. When you’re ready to deploy to production, create a minified bundle with `npm run build`. @@ -108,7 +110,7 @@ The page will automatically reload if you make changes to the code. You will see Runs the test watcher in an interactive mode. By default, runs tests related to files changed since the last commit. -[Read more about testing](https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#running-tests). +[Read more about testing](https://facebook.github.io/create-react-app/docs/running-tests). ### `npm run build` or `yarn build` diff --git a/docusaurus/docs/importing-a-component.md b/docusaurus/docs/importing-a-component.md index 52767005c08..82ca5487a9c 100644 --- a/docusaurus/docs/importing-a-component.md +++ b/docusaurus/docs/importing-a-component.md @@ -37,7 +37,7 @@ class DangerButton extends Component { export default DangerButton; ``` -Be aware of the [difference between default and named exports](http://stackoverflow.com/questions/36795819/react-native-es-6-when-should-i-use-curly-braces-for-import/36796281#36796281). It is a common source of mistakes. +Be aware of the [difference between default and named exports](https://stackoverflow.com/questions/36795819/react-native-es-6-when-should-i-use-curly-braces-for-import/36796281#36796281). It is a common source of mistakes. We suggest that you stick to using default imports and exports when a module only exports a single thing (for example, a component). That’s what you get when you use `export default Button` and `import Button from './Button'`. @@ -45,6 +45,6 @@ Named exports are useful for utility modules that export several functions. A mo Learn more about ES6 modules: -- [When to use the curly braces?](http://stackoverflow.com/questions/36795819/react-native-es-6-when-should-i-use-curly-braces-for-import/36796281#36796281) +- [When to use the curly braces?](https://stackoverflow.com/questions/36795819/react-native-es-6-when-should-i-use-curly-braces-for-import/36796281#36796281) - [Exploring ES6: Modules](http://exploringjs.com/es6/ch_modules.html) - [Understanding ES6: Modules](https://leanpub.com/understandinges6/read#leanpub-auto-encapsulating-code-with-modules) diff --git a/docusaurus/docs/making-a-progressive-web-app.md b/docusaurus/docs/making-a-progressive-web-app.md index 2dd73e39f86..0eb7d404edf 100644 --- a/docusaurus/docs/making-a-progressive-web-app.md +++ b/docusaurus/docs/making-a-progressive-web-app.md @@ -15,7 +15,7 @@ following in their [`src/index.js`](https://github.com/facebook/create-react-app ```js // If you want your app to work offline and load faster, you can change // unregister() to register() below. Note this comes with some pitfalls. -// Learn more about service workers: http://bit.ly/CRA-PWA +// Learn more about service workers: https://bit.ly/CRA-PWA serviceWorker.unregister(); ``` @@ -61,7 +61,7 @@ following into account: app works offline!" message) and also let them know when the service worker has fetched the latest updates that will be available the next time they load the page (showing a "New content is available once existing tabs are closed." message). Showing - this messages is currently left as an exercise to the developer, but as a + these messages is currently left as an exercise to the developer, but as a starting point, you can make use of the logic included in [`src/serviceWorker.js`](https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/src/serviceWorker.js), which demonstrates which service worker lifecycle events to listen for to detect each scenario, and which as a default, just logs appropriate messages to the @@ -69,7 +69,7 @@ following into account: 1. Service workers [require HTTPS](https://developers.google.com/web/fundamentals/getting-started/primers/service-workers#you_need_https), although to facilitate local testing, that policy - [does not apply to `localhost`](http://stackoverflow.com/questions/34160509/options-for-testing-service-workers-via-http/34161385#34161385). + [does not apply to `localhost`](https://stackoverflow.com/questions/34160509/options-for-testing-service-workers-via-http/34161385#34161385). If your production web server does not support HTTPS, then the service worker registration will fail, but the rest of your web app will remain functional. @@ -93,11 +93,11 @@ following into account: ## Progressive Web App Metadata The default configuration includes a web app manifest located at -[`public/manifest.json`](public/manifest.json), that you can customize with +[`public/manifest.json`](https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/public/manifest.json), that you can customize with details specific to your web application. When a user adds a web app to their homescreen using Chrome or Firefox on -Android, the metadata in [`manifest.json`](public/manifest.json) determines what +Android, the metadata in [`manifest.json`](https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/public/manifest.json) determines what icons, names, and branding colors to use when the web app is displayed. [The Web App Manifest guide](https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/) provides more context about what each field means, and how your customizations diff --git a/docusaurus/docs/post-processing-css.md b/docusaurus/docs/post-processing-css.md index 3fb4556a836..b7589d2719f 100644 --- a/docusaurus/docs/post-processing-css.md +++ b/docusaurus/docs/post-processing-css.md @@ -40,4 +40,4 @@ If you need to disable autoprefixing for some reason, [follow this section](http [CSS Grid Layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout) prefixing is disabled by default, but it will **not** strip manual prefixing. If you'd like to opt-in to CSS Grid prefixing, [first familiarize yourself about its limitations](https://github.com/postcss/autoprefixer#does-autoprefixer-polyfill-grid-layout-for-ie). -To enable CSS Grid prefixing, add `/* autoprefixer grid: on */` to the top of your CSS file. +To enable CSS Grid prefixing, add `/* autoprefixer grid: autoplace */` to the top of your CSS file. diff --git a/docusaurus/docs/production-build.md b/docusaurus/docs/production-build.md new file mode 100644 index 00000000000..f57e5a9b959 --- /dev/null +++ b/docusaurus/docs/production-build.md @@ -0,0 +1,30 @@ +--- +id: production-build +title: Creating a Production Build +--- + +`npm run build` creates a `build` directory with a production build of your app. Inside the `build/static` directory will be your JavaScript and CSS files. Each filename inside of `build/static` will contain a unique hash of the file contents. This hash in the file name enables [long term caching techniques](#static-file-caching). + +When running a production build of freshly created Create React App application, there are 3 `.js` files (called _chunks_) that are generated and placed in the `build/static/js` directory: + +`main.[hash].chunk.js` + +- This is your _application_ code. `App.js`, etc. + +`1.[hash].chunk.js` + +- This is your _vendor_ code, which includes modules you've imported from within `node_modules`. One of the potential advantages with splitting your _vendor_ and _application_ code is to enable [long term caching techniques](#static-file-caching) to improve application loading performance. Since _vendor_ code tends to change less often than the actual _application_ code, the browser will be able to cache them separately, and won't re-download them each time the app code changes. + +`runtime~main.[hash].js` + +- This is a small chunk of [webpack runtime](https://webpack.js.org/configuration/optimization/#optimization-runtimechunk) logic which is used to load and run your application. The contents of this will be embedded in your `build/index.html` file by default to save an additional network request. You can opt out of this by specifying `INLINE_RUNTIME_CHUNK=false` as documented in our [advanced configuration](advanced-configuration.md), which will load this chunk instead of embedding it in your `index.html`. + +If you're using [code splitting](code-splitting.md) to split up your application, this will create additional chunks in the `build/static` folder as well. + +## Static File Caching + +Each file inside of the `build/static` directory will have a unique hash appended to the filename that is generated based on the contents of the file, which allows you to use [aggressive caching techniques](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching#invalidating_and_updating_cached_responses) to avoid the browser re-downloading your assets if the file contents haven't changed. If the contents of a file changes in a subsequent build, the filename hash that is generated will be different. + +To deliver the best performance to your users, it's best practice to specify a `Cache-Control` header for `index.html`, as well as the files within `build/static`. This header allows you to control the length of time that the browser as well as CDNs will cache your static assets. If you aren't familiar with what `Cache-Control` does, see [this article](https://jakearchibald.com/2016/caching-best-practices/) for a great introduction. + +Using `Cache-Control: max-age=31536000` for your `build/static` assets, and `Cache-Control: no-cache` for everything else is a safe and effective starting point that ensures your user's browser will always check for an updated `index.html` file, and will cache all of the `build/static` files for one year. Note that you can use the one year expiration on `build/static` safely because the file contents hash is embedded into the filename. diff --git a/docusaurus/docs/proxying-api-requests-in-development.md b/docusaurus/docs/proxying-api-requests-in-development.md index 3d27f7d96e6..a113f4d4211 100644 --- a/docusaurus/docs/proxying-api-requests-in-development.md +++ b/docusaurus/docs/proxying-api-requests-in-development.md @@ -9,23 +9,21 @@ sidebar_label: Proxying in Development People often serve the front-end React app from the same host and port as their backend implementation. For example, a production setup might look like this after the app is deployed: -``` -/ - static server returns index.html with React app -/todos - static server returns index.html with React app -/api/todos - server handles any /api/* requests using the backend implementation -``` + / - static server returns index.html with React app + /todos - static server returns index.html with React app + /api/todos - server handles any /api/* requests using the backend implementation Such setup is **not** required. However, if you **do** have a setup like this, it is convenient to write requests like `fetch('/api/todos')` without worrying about redirecting them to another host or port during development. To tell the development server to proxy any unknown requests to your API server in development, add a `proxy` field to your `package.json`, for example: -```js +```json "proxy": "http://localhost:4000", ``` This way, when you `fetch('/api/todos')` in development, the development server will recognize that it’s not a static asset, and will proxy your request to `http://localhost:4000/api/todos` as a fallback. The development server will **only** attempt to send requests without `text/html` in its `Accept` header to the proxy. -Conveniently, this avoids [CORS issues](http://stackoverflow.com/questions/21854516/understanding-ajax-cors-and-security-considerations) and error messages like this in development: +Conveniently, this avoids [CORS issues](https://stackoverflow.com/questions/21854516/understanding-ajax-cors-and-security-considerations) and error messages like this in development: ``` Fetch API cannot load http://localhost:4000/api/todos. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled. @@ -37,7 +35,7 @@ The `proxy` option supports HTTP, HTTPS and WebSocket connections. If the `proxy` option is **not** flexible enough for you, alternatively you can: - [Configure the proxy yourself](#configuring-the-proxy-manually) -- Enable CORS on your server ([here’s how to do it for Express](http://enable-cors.org/server_expressjs.html)). +- Enable CORS on your server ([here’s how to do it for Express](https://enable-cors.org/server_expressjs.html)). - Use [environment variables](adding-custom-environment-variables.md) to inject the right server host and port into your app. ## "Invalid Host Header" Errors After Configuring Proxy @@ -76,7 +74,7 @@ You can use this feature in conjunction with the `proxy` property in `package.js First, install `http-proxy-middleware` using npm or Yarn: -```bash +```sh $ npm install http-proxy-middleware --save $ # or $ yarn add http-proxy-middleware diff --git a/docusaurus/docs/running-tests.md b/docusaurus/docs/running-tests.md index ea1b32579f0..5f93a391771 100644 --- a/docusaurus/docs/running-tests.md +++ b/docusaurus/docs/running-tests.md @@ -5,9 +5,9 @@ title: Running Tests > Note: this feature is available with `react-scripts@0.3.0` and higher. -> [Read the migration guide to learn how to enable it in older projects!](https://github.com/facebook/create-react-app/blob/master/CHANGELOG.md#migrating-from-023-to-030) +> [Read the migration guide to learn how to enable it in older projects!](https://github.com/facebook/create-react-app/blob/master/CHANGELOG-0.x.md#migrating-from-023-to-030) -Create React App uses [Jest](https://facebook.github.io/jest/) as its test runner. To prepare for this integration, we did a [major revamp](https://facebook.github.io/jest/blog/2016/09/01/jest-15.html) of Jest so if you heard bad things about it years ago, give it another try. +Create React App uses [Jest](https://jestjs.io/) as its test runner. To prepare for this integration, we did a [major revamp](https://jestjs.io/blog/2016/09/01/jest-15.html) of Jest so if you heard bad things about it years ago, give it another try. Jest is a Node-based runner. This means that the tests always run in a Node environment and not in a real browser. This lets us enable fast iteration speed and prevent flakiness. @@ -25,15 +25,17 @@ Jest will look for test files with any of the following popular naming conventio The `.test.js` / `.spec.js` files (or the `__tests__` folders) can be located at any depth under the `src` top level folder. -We recommend to put the test files (or `__tests__` folders) next to the code they are testing so that relative imports appear shorter. For example, if `App.test.js` and `App.js` are in the same folder, the test just needs to `import App from './App'` instead of a long relative path. Colocation also helps find tests more quickly in larger projects. +We recommend to put the test files (or `__tests__` folders) next to the code they are testing so that relative imports appear shorter. For example, if `App.test.js` and `App.js` are in the same folder, the test just needs to `import App from './App'` instead of a long relative path. Collocation also helps find tests more quickly in larger projects. ## Command Line Interface -When you run `npm test`, Jest will launch in the watch mode. Every time you save a file, it will re-run the tests, just like `npm start` recompiles the code. +When you run `npm test`, Jest will launch in watch mode\*. Every time you save a file, it will re-run the tests, just like `npm start` recompiles the code. The watcher includes an interactive command-line interface with the ability to run all tests, or focus on a search pattern. It is designed this way so that you can keep it open and enjoy fast re-runs. You can learn the commands from the “Watch Usage” note that the watcher prints after every run: - + + +> \*Although we recommend running your tests in watch mode during development, you can disable this behavior by passing in the `--no-watch` flag. In most CI environments, this is handled for you (see [On CI servers](#on-ci-servers)). ## Version Control Integration @@ -58,8 +60,8 @@ it('sums numbers', () => { }); ``` -All `expect()` matchers supported by Jest are [extensively documented here](https://facebook.github.io/jest/docs/en/expect.html#content). -You can also use [`jest.fn()` and `expect(fn).toBeCalled()`](https://facebook.github.io/jest/docs/en/expect.html#tohavebeencalled) to create “spies” or mock functions. +All `expect()` matchers supported by Jest are [extensively documented here](https://jestjs.io/docs/en/expect.html#content). +You can also use [`jest.fn()` and `expect(fn).toBeCalled()`](https://jestjs.io/docs/en/expect.html#tohavebeencalled) to create “spies” or mock functions. ## Testing Components @@ -84,7 +86,7 @@ When you encounter bugs caused by changing components, you will gain a deeper in ### Option 1: Shallow Rendering -If you’d like to test components in isolation from the child components they render, we recommend using [`shallow()` rendering API](http://airbnb.io/enzyme/docs/api/shallow.html) from [Enzyme](http://airbnb.io/enzyme/). To install it, run: +If you’d like to test components in isolation from the child components they render, we recommend using [`shallow()` rendering API](https://airbnb.io/enzyme/docs/api/shallow.html) from [Enzyme](https://airbnb.io/enzyme/). To install it, run: ```sh npm install --save enzyme enzyme-adapter-react-16 react-test-renderer @@ -125,9 +127,9 @@ it('renders without crashing', () => { }); ``` -Unlike the previous smoke test using `ReactDOM.render()`, this test only renders `` and doesn’t go deeper. For example, even if `` itself renders a `` 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. @@ -216,7 +218,7 @@ Learn more about the utilities provided by `react-testing-library` to facilitate 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 `--no-watch` 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..d99dca818cf 100644 --- a/docusaurus/docs/setting-up-your-editor.md +++ b/docusaurus/docs/setting-up-your-editor.md @@ -13,15 +13,16 @@ 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" } @@ -29,7 +30,7 @@ You would need to install an ESLint plugin for your editor first. Then, add a fi 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 +55,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..a8e0875c355 100644 --- a/docusaurus/docs/supported-browsers-features.md +++ b/docusaurus/docs/supported-browsers-features.md @@ -19,7 +19,7 @@ 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. 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/updating-to-new-releases.md.rej b/docusaurus/docs/updating-to-new-releases.md.rej new file mode 100644 index 00000000000..b1581103964 --- /dev/null +++ b/docusaurus/docs/updating-to-new-releases.md.rej @@ -0,0 +1,7 @@ +diff a/docusaurus/docs/updating-to-new-releases.md b/docusaurus/docs/updating-to-new-releases.md (rejected hunks) +@@ -11,2 +11,3 @@ Create React App is divided into two packages: +-When you run `npx create-react-app my-app` it automatically installs the latest version of Create React App. +-> 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. ++When you run `npx create-react-app my-app` it automatically installs the latest version of Create React App. ++ ++> 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. 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 `