this.node = node}>`. ([@mrscobbler](https://github.com/mrscobbler) in [#529](https://github.com/facebook/create-react-app/pull/529))
+- Temporarily disabled `react-constant-elements` Babel transform because of its bugs. ([@gaearon](https://github.com/gaearon) in [#534](https://github.com/facebook/create-react-app/pull/534))
+- Fixed a permission issue with Docker. ([@gaearon](https://github.com/gaearon) in [73c940](https://github.com/facebook/create-react-app/commit/73c940a73205d761230f8d6bf81ecfd460ba28a9))
+- Fixed an issue with generator syntax in Jest that occurred in an alpha release. ([@gaearon](https://github.com/gaearon) in [#535](https://github.com/facebook/create-react-app/pull/535))
### Global CLI (`create-react-app`)
-* You can now create a project in a folder that already contains an `.idea` folder, which is necessary for future WebStorm integration. ([@denofevil](https://github.com/denofevil) in [#522](https://github.com/facebook/create-react-app/pull/522))
+- You can now create a project in a folder that already contains an `.idea` folder, which is necessary for future WebStorm integration. ([@denofevil](https://github.com/denofevil) in [#522](https://github.com/facebook/create-react-app/pull/522))
### Migrating from 0.2.3 to 0.3.0
@@ -1255,7 +1316,7 @@ Now `favicon.ico` is not treated specially anymore.
If you use it, move it to `src` and add the following line to `` in your HTML: ```html - + ``` #### New Feature @@ -1276,13 +1337,13 @@ Since 0.3.0 added a test runner, we recommend that you add it to the `scripts` s ### Build Dependency (`react-scripts`) -* You can now [proxy requests to an API server](https://github.com/facebook/create-react-app/blob/ef94b0561d5afb9b50b905fa5cd3f94e965c69c0/template/README.md#proxying-api-requests-in-development) without worrying about CORS. ([@gaearon](https://github.com/gaearon) in [#282](https://github.com/facebook/create-react-app/pull/282)) -* You can now [pass custom environment variables](https://github.com/facebook/create-react-app/blob/ef94b0561d5afb9b50b905fa5cd3f94e965c69c0/template/README.md#adding-custom-environment-variables) to your application. ([@eliperelman](https://github.com/eliperelman) in [#342](https://github.com/facebook/create-react-app/pull/342)) -* You can now [use `async` and `await`](https://ponyfoo.com/articles/understanding-javascript-async-await) syntax. ([@gaearon](https://github.com/gaearon) in [#327](https://github.com/facebook/create-react-app/pull/327), [@fson](https://github.com/fson) in [#332](https://github.com/facebook/create-react-app/pull/332)) -* Paths with period in them now load successfully on the development server. ([@mxstbr](https://github.com/mxstbr) in [#422](https://github.com/facebook/create-react-app/pull/422)) -* Images with `.webp` extension are now supported. ([@gafemoyano](https://github.com/gafemoyano) in [#458](https://github.com/facebook/create-react-app/pull/458)) -* The most recent version of React is now added to `package.json`. ([@wdhorton](https://github.com/wdhorton) in [#477](https://github.com/facebook/create-react-app/pull/477)) -* Babel configuration is simplified. ([@kripod](https://github.com/kripod) in [#490](https://github.com/facebook/create-react-app/pull/490)) +- You can now [proxy requests to an API server](https://github.com/facebook/create-react-app/blob/ef94b0561d5afb9b50b905fa5cd3f94e965c69c0/template/README.md#proxying-api-requests-in-development) without worrying about CORS. ([@gaearon](https://github.com/gaearon) in [#282](https://github.com/facebook/create-react-app/pull/282)) +- You can now [pass custom environment variables](https://github.com/facebook/create-react-app/blob/ef94b0561d5afb9b50b905fa5cd3f94e965c69c0/template/README.md#adding-custom-environment-variables) to your application. ([@eliperelman](https://github.com/eliperelman) in [#342](https://github.com/facebook/create-react-app/pull/342)) +- You can now [use `async` and `await`](https://ponyfoo.com/articles/understanding-javascript-async-await) syntax. ([@gaearon](https://github.com/gaearon) in [#327](https://github.com/facebook/create-react-app/pull/327), [@fson](https://github.com/fson) in [#332](https://github.com/facebook/create-react-app/pull/332)) +- Paths with period in them now load successfully on the development server. ([@mxstbr](https://github.com/mxstbr) in [#422](https://github.com/facebook/create-react-app/pull/422)) +- Images with `.webp` extension are now supported. ([@gafemoyano](https://github.com/gafemoyano) in [#458](https://github.com/facebook/create-react-app/pull/458)) +- The most recent version of React is now added to `package.json`. ([@wdhorton](https://github.com/wdhorton) in [#477](https://github.com/facebook/create-react-app/pull/477)) +- Babel configuration is simplified. ([@kripod](https://github.com/kripod) in [#490](https://github.com/facebook/create-react-app/pull/490)) ### Migrating from 0.2.2 to 0.2.3 @@ -1294,15 +1355,15 @@ Newly created projects will use `0.2.3` automatically. You **don’t** need to u ### Build Dependency (`react-scripts`) -* When the bundle size changes, we now display the difference after build. ([@elijahmanor](https://github.com/elijahmanor) in [#340](https://github.com/facebook/create-react-app/pull/340)) -* `npm install`ing a missing dependency now forces a rebuild. ([@gaearon](https://github.com/gaearon) in [#349](https://github.com/facebook/create-react-app/pull/349)) -* Autoprefixer config now includes more commonly supported browsers. ([@kripod](https://github.com/kripod) in [#345](https://github.com/facebook/create-react-app/pull/345)) -* All the configuration is now documented inline so ejecting doesn’t leave you in the dark. ([@gaearon](https://github.com/gaearon) in [#362](https://github.com/facebook/create-react-app/pull/362)) -* `Object.assign()` polyfill is now bundled by default. ([@gaearon](https://github.com/gaearon) in [#399](https://github.com/facebook/create-react-app/pull/399)) -* [React Native Web](https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/) now works out of the box. ([@grigio](https://github.com/grigio) in [#407](https://github.com/facebook/create-react-app/pull/407)) -* Same asset filenames in different folders don’t confuse the server now. ([@arunoda](https://github.com/arunoda) in [#446](https://github.com/facebook/create-react-app/pull/446)) -* The `otf` font format is now supported. ([@A-gambit](https://github.com/A-gambit) in [#434](https://github.com/facebook/create-react-app/pull/434)) -* The `new-cap` linting rule has been disabled thanks to feedback from Immutable.js users. ([@rricard](https://github.com/rricard) in [#470](https://github.com/facebook/create-react-app/pull/470)) +- When the bundle size changes, we now display the difference after build. ([@elijahmanor](https://github.com/elijahmanor) in [#340](https://github.com/facebook/create-react-app/pull/340)) +- `npm install`ing a missing dependency now forces a rebuild. ([@gaearon](https://github.com/gaearon) in [#349](https://github.com/facebook/create-react-app/pull/349)) +- Autoprefixer config now includes more commonly supported browsers. ([@kripod](https://github.com/kripod) in [#345](https://github.com/facebook/create-react-app/pull/345)) +- All the configuration is now documented inline so ejecting doesn’t leave you in the dark. ([@gaearon](https://github.com/gaearon) in [#362](https://github.com/facebook/create-react-app/pull/362)) +- `Object.assign()` polyfill is now bundled by default. ([@gaearon](https://github.com/gaearon) in [#399](https://github.com/facebook/create-react-app/pull/399)) +- [React Native Web](https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/) now works out of the box. ([@grigio](https://github.com/grigio) in [#407](https://github.com/facebook/create-react-app/pull/407)) +- Same asset filenames in different folders don’t confuse the server now. ([@arunoda](https://github.com/arunoda) in [#446](https://github.com/facebook/create-react-app/pull/446)) +- The `otf` font format is now supported. ([@A-gambit](https://github.com/A-gambit) in [#434](https://github.com/facebook/create-react-app/pull/434)) +- The `new-cap` linting rule has been disabled thanks to feedback from Immutable.js users. ([@rricard](https://github.com/rricard) in [#470](https://github.com/facebook/create-react-app/pull/470)) ### Migrating from 0.2.1 to 0.2.2 @@ -1314,12 +1375,12 @@ Newly created projects will use `0.2.2` automatically. You **don’t** need to u ### Build Dependency (`react-scripts`) -* Fixes an issue with `npm start` taking a very long time on OS X with Firewall enabled ([@gaearon](https://github.com/gaearon) in [#319](https://github.com/facebook/create-react-app/pull/319)) -* Fixes an issue with webpack eating a lot of CPU in some cases ([@dceddia](https://github.com/dceddia) in [#294](https://github.com/facebook/create-react-app/pull/294)) -* We now warn if you import a file with mismatched casing because this breaks the watcher ([@alexzherdev](https://github.com/alexzherdev) in [#266](https://github.com/facebook/create-react-app/pull/266)) -* CSS files specifying `?v=` after asset filenames, such as Font Awesome, now works correctly ([@alexzherdev](https://github.com/alexzherdev) in [#298](https://github.com/facebook/create-react-app/pull/298)) -* Issues with `npm link`ing `react-scripts` have been fixed ([@dallonf](https://github.com/dallonf) in [#277](https://github.com/facebook/create-react-app/pull/277)) -* We now use `/static` prefix for assets both in development and production ([@gaearon](https://github.com/gaearon) in [#278](https://github.com/facebook/create-react-app/pull/278)) +- Fixes an issue with `npm start` taking a very long time on OS X with Firewall enabled ([@gaearon](https://github.com/gaearon) in [#319](https://github.com/facebook/create-react-app/pull/319)) +- Fixes an issue with webpack eating a lot of CPU in some cases ([@dceddia](https://github.com/dceddia) in [#294](https://github.com/facebook/create-react-app/pull/294)) +- We now warn if you import a file with mismatched casing because this breaks the watcher ([@alexzherdev](https://github.com/alexzherdev) in [#266](https://github.com/facebook/create-react-app/pull/266)) +- CSS files specifying `?v=` after asset filenames, such as Font Awesome, now works correctly ([@alexzherdev](https://github.com/alexzherdev) in [#298](https://github.com/facebook/create-react-app/pull/298)) +- Issues with `npm link`ing `react-scripts` have been fixed ([@dallonf](https://github.com/dallonf) in [#277](https://github.com/facebook/create-react-app/pull/277)) +- We now use `/static` prefix for assets both in development and production ([@gaearon](https://github.com/gaearon) in [#278](https://github.com/facebook/create-react-app/pull/278)) ### Migrating from 0.2.0 to 0.2.1 @@ -1331,27 +1392,27 @@ Newly created projects will use `0.2.1` automatically. You **don’t** need to u ### Build Dependency (`react-scripts`) -* You can now enable deployment to GitHub Pages by adding `homepage` field to `package.json` ([@dhruska](https://github.com/dhruska) in [#94](https://github.com/facebook/create-react-app/pull/94)) -* Development server now runs on `0.0.0.0` and works with VirtualBox ([@JWo1F](https://github.com/JWo1F) in [#128](https://github.com/facebook/create-react-app/pull/128)) -* Cloud9 and Nitrous online IDEs are now supported ([@gaearon](http://github.com/gaearon) in [2fe84e](https://github.com/facebook/create-react-app/commit/2fe84ecded55f1d5258d91f9c2c07698ae0d2fb4)) -* When `3000` port is taken, we offer to use another port ([@chocnut](https://github.com/chocnut) in [#101](https://github.com/facebook/create-react-app/pull/101), [2edf21](https://github.com/facebook/create-react-app/commit/2edf2180f2aa6bf647807d0b1fcd95f4cfe4a558)) -* You can now `import` CSS files from npm modules ([@glennreyes](https://github.com/glennreyes) in [#105](https://github.com/facebook/create-react-app/pull/105), [@breaddevil](https://github.com/breaddevil) in [#178](https://github.com/facebook/create-react-app/pull/178)) -* `fetch` and `Promise` polyfills are now always included ([@gaearon](https://github.com/gaearon) in [#235](https://github.com/facebook/create-react-app/pull/235)) -* Regenerator runtime is now included if you use ES6 generators ([@gaearon](https://github.com/gaearon) in [#238](https://github.com/facebook/create-react-app/pull/238)) -* Generated project now contains `.gitignore` ([@npverni](https://github.com/npverni) in [#79](https://github.com/facebook/create-react-app/pull/79), [@chibicode](https://github.com/chibicode) in [#112](https://github.com/facebook/create-react-app/pull/112)) -* ESLint config is now more compatible with Flow ([@gaearon](https://github.com/gaearon) in [#261](https://github.com/facebook/create-react-app/pull/261)) -* A stylistic lint rule about method naming has been removed ([@mxstbr](https://github.com/mxstbr) in [#152](https://github.com/facebook/create-react-app/pull/157)) -* A few unobtrusive accessibility lint rules have been added ([@evcohen](https://github.com/evcohen) in [#175](https://github.com/facebook/create-react-app/pull/175)) -* A `.babelrc` in parent directory no longer causes an error ([@alexzherdev](https://github.com/alexzherdev) in [#236](https://github.com/facebook/create-react-app/pull/236)) -* Files with `.json` extension are now discovered ([@gaearon](https://github.com/gaearon) in [a11d6a](https://github.com/facebook/create-react-app/commit/a11d6a398f487f9163880dd34667b1d3e14b147a)) -* Bug fixes from transitive dependencies are included ([#126](https://github.com/facebook/create-react-app/issues/126)) -* Linting now works with IDEs if you follow [these](https://github.com/facebook/create-react-app/blob/master/template/README.md#display-lint-output-in-the-editor) instructions ([@keyanzhang](https://github.com/keyanzhang) in [#149](https://github.com/facebook/create-react-app/pull/149)) -* After building, we now print gzipped bundle size ([@lvwrence](https://github.com/lvwrence) in [#229](https://github.com/facebook/create-react-app/pull/229)) +- You can now enable deployment to GitHub Pages by adding `homepage` field to `package.json` ([@dhruska](https://github.com/dhruska) in [#94](https://github.com/facebook/create-react-app/pull/94)) +- Development server now runs on `0.0.0.0` and works with VirtualBox ([@JWo1F](https://github.com/JWo1F) in [#128](https://github.com/facebook/create-react-app/pull/128)) +- Cloud9 and Nitrous online IDEs are now supported ([@gaearon](http://github.com/gaearon) in [2fe84e](https://github.com/facebook/create-react-app/commit/2fe84ecded55f1d5258d91f9c2c07698ae0d2fb4)) +- When `3000` port is taken, we offer to use another port ([@chocnut](https://github.com/chocnut) in [#101](https://github.com/facebook/create-react-app/pull/101), [2edf21](https://github.com/facebook/create-react-app/commit/2edf2180f2aa6bf647807d0b1fcd95f4cfe4a558)) +- You can now `import` CSS files from npm modules ([@glennreyes](https://github.com/glennreyes) in [#105](https://github.com/facebook/create-react-app/pull/105), [@breaddevil](https://github.com/breaddevil) in [#178](https://github.com/facebook/create-react-app/pull/178)) +- `fetch` and `Promise` polyfills are now always included ([@gaearon](https://github.com/gaearon) in [#235](https://github.com/facebook/create-react-app/pull/235)) +- Regenerator runtime is now included if you use ES6 generators ([@gaearon](https://github.com/gaearon) in [#238](https://github.com/facebook/create-react-app/pull/238)) +- Generated project now contains `.gitignore` ([@npverni](https://github.com/npverni) in [#79](https://github.com/facebook/create-react-app/pull/79), [@chibicode](https://github.com/chibicode) in [#112](https://github.com/facebook/create-react-app/pull/112)) +- ESLint config is now more compatible with Flow ([@gaearon](https://github.com/gaearon) in [#261](https://github.com/facebook/create-react-app/pull/261)) +- A stylistic lint rule about method naming has been removed ([@mxstbr](https://github.com/mxstbr) in [#152](https://github.com/facebook/create-react-app/pull/157)) +- A few unobtrusive accessibility lint rules have been added ([@evcohen](https://github.com/evcohen) in [#175](https://github.com/facebook/create-react-app/pull/175)) +- A `.babelrc` in parent directory no longer causes an error ([@alexzherdev](https://github.com/alexzherdev) in [#236](https://github.com/facebook/create-react-app/pull/236)) +- Files with `.json` extension are now discovered ([@gaearon](https://github.com/gaearon) in [a11d6a](https://github.com/facebook/create-react-app/commit/a11d6a398f487f9163880dd34667b1d3e14b147a)) +- Bug fixes from transitive dependencies are included ([#126](https://github.com/facebook/create-react-app/issues/126)) +- Linting now works with IDEs if you follow [these](https://github.com/facebook/create-react-app/blob/master/template/README.md#display-lint-output-in-the-editor) instructions ([@keyanzhang](https://github.com/keyanzhang) in [#149](https://github.com/facebook/create-react-app/pull/149)) +- After building, we now print gzipped bundle size ([@lvwrence](https://github.com/lvwrence) in [#229](https://github.com/facebook/create-react-app/pull/229)) ### Global CLI (`create-react-app`) -* It enforces that you have Node >= 4 ([@conorhastings](https://github.com/conorhastings) in [#88](https://github.com/facebook/create-react-app/pull/88)) -* It handles `--version` flag correctly ([@mxstbr](https://github.com/mxstbr) in [#152](https://github.com/facebook/create-react-app/pull/152)) +- It enforces that you have Node >= 4 ([@conorhastings](https://github.com/conorhastings) in [#88](https://github.com/facebook/create-react-app/pull/88)) +- It handles `--version` flag correctly ([@mxstbr](https://github.com/mxstbr) in [#152](https://github.com/facebook/create-react-app/pull/152)) ### Migrating from 0.1.0 to 0.2.0 @@ -1371,4 +1432,4 @@ You may need to fix a few lint warnings about missing `![]()
` tag, but every
## 0.1.0 (July 22, 2016)
-* Initial public release
+- Initial public release
diff --git a/CHANGELOG.md b/CHANGELOG.md
index d2fae5dd382..91d4582dd87 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,102 @@
+## 3.4.3 (2020-08-12)
+
+v3.4.2 release bumps `terser-webpack-plugin` to a version for which `npm audit` does not report a vulnerability. Note that **this vulnerability did not affect Create React App projects**, so this change is only necessary to satisfy auditing tools.
+
+### Migrating from 3.4.2 to 3.4.3
+
+Inside any created project that has not been ejected, run:
+
+```sh
+npm install --save --save-exact react-scripts@3.4.3
+```
+
+or
+
+```sh
+yarn add --exact react-scripts@3.4.3
+```
+
+## 3.4.2 (2020-08-11)
+
+v3.4.2 release bumps `webpack-dev-server` to a version for which `npm audit` does not report a vulnerability. Note that **this vulnerability did not affect Create React App projects**, so this change is only necessary to satisfy auditing tools.
+
+### Migrating from 3.4.1 to 3.4.2
+
+Inside any created project that has not been ejected, run:
+
+```sh
+npm install --save --save-exact react-scripts@3.4.2
+```
+
+or
+
+```sh
+yarn add --exact react-scripts@3.4.2
+```
+
+## 3.4.1 (2020-03-20)
+
+v3.4.1 is a maintenance release that includes minor bug fixes and documentation updates including upgrading Babel to fix a bug in the 7.8 release line. This release also brings support for TypeScript 3.8.
+
+#### :bug: Bug Fix
+
+- `react-scripts`
+ - [#8276](https://github.com/facebook/create-react-app/pull/8276) Use native ESLint behaviour when extending ([@mrmckeb](https://github.com/mrmckeb))
+ - [#7203](https://github.com/facebook/create-react-app/pull/7203) Closes webpack dev server and exits process on "end" stdin ([@kelseyleftwich](https://github.com/kelseyleftwich))
+- `babel-preset-react-app`
+ - [#8526](https://github.com/facebook/create-react-app/pull/8526) Fix optional chaining and nullish coalescing support ([@ianschmitz](https://github.com/ianschmitz))
+- `cra-template`, `eslint-config-react-app`, `react-scripts`
+ - [#7790](https://github.com/facebook/create-react-app/pull/7790) Widen eslint-config-react-app peer dependency versions ([@lukyth](https://github.com/lukyth))
+
+#### :nail_care: Enhancement
+
+- `cra-template-typescript`, `cra-template`
+ - [#8558](https://github.com/facebook/create-react-app/pull/8558) Add React.StrictMode to default templates ([@connkat](https://github.com/connkat))
+- `react-scripts`
+ - [#8539](https://github.com/facebook/create-react-app/pull/8539) allow specification of package.main in template.json ([@EvanBoyle](https://github.com/EvanBoyle))
+
+#### :memo: Documentation
+
+- Other
+ - [#8515](https://github.com/facebook/create-react-app/pull/8515) Fix proxying API request docs ([@hjr3](https://github.com/hjr3))
+ - [#8561](https://github.com/facebook/create-react-app/pull/8561) Indicate that the file structure is the template's ([@Vinnl](https://github.com/Vinnl))
+- `react-scripts`
+ - [#8276](https://github.com/facebook/create-react-app/pull/8276) Use native ESLint behaviour when extending ([@mrmckeb](https://github.com/mrmckeb))
+
+#### :hammer: Underlying Tools
+
+- `babel-preset-react-app`, `create-react-app`, `react-dev-utils`, `react-error-overlay`, `react-scripts`
+ - [#8681](https://github.com/facebook/create-react-app/pull/8681) Update to Babel 7.9 ([@ianschmitz](https://github.com/ianschmitz))
+ - [#8620](https://github.com/facebook/create-react-app/pull/8620) Bump dependencies ([@ianschmitz](https://github.com/ianschmitz))
+- `react-scripts`
+ - [#8509](https://github.com/facebook/create-react-app/pull/8509) Bumps pnp-webpack-plugin ([@arcanis](https://github.com/arcanis))
+
+#### Committers: 9
+
+- Brody McKee ([@mrmckeb](https://github.com/mrmckeb))
+- Evan Boyle ([@EvanBoyle](https://github.com/EvanBoyle))
+- Herman J. Radtke III ([@hjr3](https://github.com/hjr3))
+- Ian Schmitz ([@ianschmitz](https://github.com/ianschmitz))
+- Kanitkorn Sujautra ([@lukyth](https://github.com/lukyth))
+- KatCon ([@connkat](https://github.com/connkat))
+- Kelsey Leftwich ([@kelseyleftwich](https://github.com/kelseyleftwich))
+- Maël Nison ([@arcanis](https://github.com/arcanis))
+- Vincent ([@Vinnl](https://github.com/Vinnl))
+
+### Migrating from 3.4.0 to 3.4.1
+
+Inside any created project that has not been ejected, run:
+
+```sh
+npm install --save --save-exact react-scripts@3.4.1
+```
+
+or
+
+```sh
+yarn add --exact react-scripts@3.4.1
+```
+
## 3.4.0 (2020-02-14)
v3.4.0 is a minor release that adds new features, including support for SSL and setting `PUBLIC_URL` in development. It also includes a fix for Hot Module Reloading with CSS Modules as well as other bug fixes.
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index cf94d0dbdac..bb515bb504f 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -94,7 +94,7 @@ All functionality must be retained (and configuration given to the user) if they
2. Run `yarn` in the root `create-react-app` folder.
-Once it is done, you can modify any file locally and run `yarn start`, `yarn test` or `yarn build` like you can in a generated project.
+Once it is done, you can modify any file locally and run `yarn start`, `yarn test` or `yarn build` like you can in a generated project. It will serve the application from the files located in `packages/cra-template/template`.
If you want to try out the end-to-end flow with the global CLI, you can do this too:
diff --git a/README.md b/README.md
index e414a0e79b0..6db44574976 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,7 @@
# Create React App [](https://dev.azure.com/facebook/create-react-app/_build/latest?definitionId=1&branchName=master) [](https://github.com/facebook/create-react-app/blob/master/CONTRIBUTING.md)
+
+
Create React apps with no build configuration.
- [Creating an App](#creating-an-app) – How to create a new app.
@@ -7,7 +9,7 @@ Create React apps with no build configuration.
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).
-If you have questions or need help, please ask in our [Spectrum](https://spectrum.chat/create-react-app) community. +If you have questions or need help, please ask in [GitHub Discussions](https://github.com/facebook/create-react-app/discussions). ## Quick Overview @@ -17,7 +19,7 @@ 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. +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` or `yarn global remove 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))_ @@ -86,6 +88,7 @@ my-app ├── index.js ├── logo.svg └── serviceWorker.js + └── setupTests.js ``` No configuration or complicated folder structures, only the files you need to build your app.
@@ -174,9 +177,9 @@ Here are a few common cases where you might want to try something else: - If you need to **publish a React component**, [nwb](https://github.com/insin/nwb) can [also do this](https://github.com/insin/nwb#react-components-and-libraries), as well as [Neutrino's react-components preset](https://neutrino.js.org/packages/react-components/). -- If you want to do **server rendering** with React and Node.js, check out [Next.js](https://github.com/zeit/next.js/) or [Razzle](https://github.com/jaredpalmer/razzle). Create React App is agnostic of the backend, and only produces static HTML/JS/CSS bundles. +- If you want to do **server rendering** with React and Node.js, check out [Next.js](https://nextjs.org/) or [Razzle](https://github.com/jaredpalmer/razzle). Create React App is agnostic of the backend, and only produces static HTML/JS/CSS bundles. -- If your website is **mostly static** (for example, a portfolio or a blog), consider using [Gatsby](https://www.gatsbyjs.org/) instead. Unlike Create React App, it pre-renders the website into HTML at the build time. +- If your website is **mostly static** (for example, a portfolio or a blog), consider using [Gatsby](https://www.gatsbyjs.org/) or [Next.js](https://nextjs.org/). Unlike Create React App, Gatsby pre-renders the website into HTML at build time. Next.js supports both server rendering and pre-rendering. - Finally, if you need **more customization**, check out [Neutrino](https://neutrino.js.org/) and its [React preset](https://neutrino.js.org/packages/react/). diff --git a/SECURITY.md b/SECURITY.md new file mode 100644 index 00000000000..1c4112b6d4c --- /dev/null +++ b/SECURITY.md @@ -0,0 +1,7 @@ +# Reporting Security Issues + +If you believe you have found a security vulnerability in Create React App, we encourage you to let us know right away. We will investigate all legitimate reports and do our best to quickly fix the problem. + +Please refer to the following page for our responsible disclosure policy, reward guidelines, and those things that should not be reported: + +https://www.facebook.com/whitehat diff --git a/azure-pipelines-test-job.yml b/azure-pipelines-test-job.yml index 7073bf3eab6..116d2f87e23 100644 --- a/azure-pipelines-test-job.yml +++ b/azure-pipelines-test-job.yml @@ -1,40 +1,38 @@ -# -# Azure Pipelines job for building and testing create-react-app on Linux, Windows, and macOS. -# - -parameters: - name: '' - testScript: '' - configurations: - LinuxNode8: { vmImage: 'ubuntu-16.04', nodeVersion: 8.x } - LinuxNode10: { vmImage: 'ubuntu-16.04', nodeVersion: 10.x } - # WindowsNode8: { vmImage: 'vs2017-win2016', nodeVersion: 8.x } - # WindowsNode10: { vmImage: 'vs2017-win2016', nodeVersion: 10.x } - -jobs: - - job: ${{ parameters.name }} - strategy: - matrix: - ${{ insert }}: ${{ parameters.configurations }} - pool: - vmImage: $(vmImage) - steps: - - script: | - git config --global core.autocrlf false - git config --global user.name "Create React App" - git config --global user.email "cra@email.com" - displayName: 'Initialize Git config' - - - checkout: self - path: create-react-app - - - task: NodeTool@0 - inputs: - versionSpec: $(nodeVersion) - displayName: 'Install Node.js' - - - script: yarn --frozen-lockfile - displayName: 'Run yarn' - - - bash: ${{ parameters.testScript }} - displayName: 'Run tests' +# +# Azure Pipelines job for building and testing create-react-app on Linux, Windows, and macOS. +# + +parameters: + name: '' + testScript: '' + configurations: + LinuxNode10: { vmImage: 'ubuntu-16.04', nodeVersion: 10.x } + LinuxNode12: { vmImage: 'ubuntu-16.04', nodeVersion: 12.x } + +jobs: + - job: ${{ parameters.name }} + strategy: + matrix: + ${{ insert }}: ${{ parameters.configurations }} + pool: + vmImage: $(vmImage) + steps: + - script: | + git config --global core.autocrlf false + git config --global user.name "Create React App" + git config --global user.email "cra@email.com" + displayName: 'Initialize Git config' + + - checkout: self + path: create-react-app + + - task: NodeTool@0 + inputs: + versionSpec: $(nodeVersion) + displayName: 'Install Node.js' + + - script: yarn --frozen-lockfile + displayName: 'Run yarn' + + - bash: ${{ parameters.testScript }} + displayName: 'Run tests' diff --git a/azure-pipelines.yml b/azure-pipelines.yml index 0260b309424..3c89363208b 100644 --- a/azure-pipelines.yml +++ b/azure-pipelines.yml @@ -1,92 +1,77 @@ -# -# Azure Pipelines configuration for building and testing create-react-app on Linux, Windows, and macOS. -# - -trigger: - - master - -variables: - CI: true - # Overrides the Yarn and NPM cache directories so they are on the same drive as the source. This helps improve build performance on Windows hosted agents. - YARN_CACHE_FOLDER: $(Build.SourcesDirectory)/../yarn-cache - NPM_CONFIG_CACHE: $(Build.SourcesDirectory)/../npm-cache - # Sets TEMP to be on the same drive as the cloned source on Windows. This avoids test scripts that "cd" into a directory under TEMP from failing because this directory is on a different drive from the current directory. - VSTS_OVERWRITE_TEMP: True - # Override Verdaccio package to use. This is temporary and is needed to avoid socket timeouts on hosted Windows agent (on Azure). This also changes Verdaccio to return a 503 (service unavailable) instead of a 404 (not found) when the connection to the uplink timesout. - VERDACCIO_PACKAGE: https://github.com/willsmythe/verdaccio/releases/download/create-react-app/verdaccio-4.0.0-alpha.8.tgz - CRA_INTERNAL_TEST: true - -# ****************************************************************************** -# Simple test suite -# ****************************************************************************** -jobs: - - template: azure-pipelines-test-job.yml - parameters: - name: Simple - testScript: tasks/e2e-simple.sh - - # ****************************************************************************** - # Installs test suite - # ****************************************************************************** - - template: azure-pipelines-test-job.yml - parameters: - name: Installs - testScript: tasks/e2e-installs.sh - - # ****************************************************************************** - # Kitchensink test suite - # ****************************************************************************** - - template: azure-pipelines-test-job.yml - parameters: - name: Kitchensink - testScript: tasks/e2e-kitchensink.sh - - # ****************************************************************************** - # Kitchensink Eject test suite - # ****************************************************************************** - - template: azure-pipelines-test-job.yml - parameters: - name: KitchensinkEject - testScript: tasks/e2e-kitchensink-eject.sh - - # ****************************************************************************** - # Behavior test suite - # ****************************************************************************** - - template: azure-pipelines-test-job.yml - parameters: - name: Behavior - testScript: tasks/e2e-behavior.sh - configurations: - LinuxNode8: { vmImage: 'ubuntu-16.04', nodeVersion: 8.x } - LinuxNode10: { vmImage: 'ubuntu-16.04', nodeVersion: 10.x } - # WindowsNode8: { vmImage: 'vs2017-win2016', nodeVersion: 8.x } - # WindowsNode10: { vmImage: 'vs2017-win2016', nodeVersion: 10.x } - MacNode8: { vmImage: 'macOS-10.13', nodeVersion: 8.x } - MacNode10: { vmImage: 'macOS-10.13', nodeVersion: 10.x } - - # ****************************************************************************** - # Old Node test suite - # ****************************************************************************** - - job: OldNode - pool: - vmImage: ubuntu-16.04 - steps: - - task: NodeTool@0 - inputs: - versionSpec: 6.x - displayName: 'Install Node.js 6.x' - - bash: tasks/e2e-old-node.sh - displayName: 'Run tests' - # ****************************************************************************** - # Unsupported Node with TypeScript flag - # ****************************************************************************** - - job: UnsupportedNodeWithTypeScript - pool: - vmImage: ubuntu-16.04 - steps: - - task: NodeTool@0 - inputs: - versionSpec: 8.9.x - displayName: 'Install Node.js 8.9.x' - - bash: tasks/e2e-typescript-unsupported-node.sh - displayName: 'Run unsupported TypeScript test' +# +# Azure Pipelines configuration for building and testing create-react-app on Linux, Windows, and macOS. +# + +trigger: + - master + +variables: + CI: true + # Overrides the Yarn and NPM cache directories so they are on the same drive as the source. This helps improve build performance on Windows hosted agents. + YARN_CACHE_FOLDER: $(Build.SourcesDirectory)/../yarn-cache + NPM_CONFIG_CACHE: $(Build.SourcesDirectory)/../npm-cache + # Sets TEMP to be on the same drive as the cloned source on Windows. This avoids test scripts that "cd" into a directory under TEMP from failing because this directory is on a different drive from the current directory. + VSTS_OVERWRITE_TEMP: True + CRA_INTERNAL_TEST: true + +# ****************************************************************************** +# Simple test suite +# ****************************************************************************** +jobs: + - template: azure-pipelines-test-job.yml + parameters: + name: Simple + testScript: tasks/e2e-simple.sh + + # ****************************************************************************** + # Installs test suite + # ****************************************************************************** + - template: azure-pipelines-test-job.yml + parameters: + name: Installs + testScript: tasks/e2e-installs.sh + + # ****************************************************************************** + # Kitchensink test suite + # ****************************************************************************** + - template: azure-pipelines-test-job.yml + parameters: + name: Kitchensink + testScript: tasks/e2e-kitchensink.sh + + # ****************************************************************************** + # Kitchensink Eject test suite + # ****************************************************************************** + - template: azure-pipelines-test-job.yml + parameters: + name: KitchensinkEject + testScript: tasks/e2e-kitchensink-eject.sh + + # ****************************************************************************** + # Behavior test suite + # ****************************************************************************** + - template: azure-pipelines-test-job.yml + parameters: + name: Behavior + testScript: tasks/e2e-behavior.sh + configurations: + LinuxNode10: { vmImage: 'ubuntu-16.04', nodeVersion: 10.x } + LinuxNode12: { vmImage: 'ubuntu-16.04', nodeVersion: 12.x } + WindowsNode10: { vmImage: 'windows-2019', nodeVersion: 10.x } + WindowsNode12: { vmImage: 'windows-2019', nodeVersion: 12.x } + MacNode10: { vmImage: 'macOS-10.15', nodeVersion: 10.x } + MacNode12: { vmImage: 'macOS-10.15', nodeVersion: 12.x } + + # ****************************************************************************** + # Old Node test suite + # ****************************************************************************** + - job: OldNode + pool: + vmImage: ubuntu-latest + steps: + - task: NodeTool@0 + inputs: + versionSpec: 8.x + displayName: 'Install Node.js 8.x' + - bash: tasks/e2e-old-node.sh + displayName: 'Run tests' diff --git a/docusaurus/docs/adding-css-reset.md b/docusaurus/docs/adding-css-reset.md index 23821829c3e..c08567124af 100644 --- a/docusaurus/docs/adding-css-reset.md +++ b/docusaurus/docs/adding-css-reset.md @@ -16,6 +16,8 @@ To start using it, add `@import-normalize;` anywhere in your CSS file(s). You on /* rest of app styles */ ``` +> **Tip**: If you see an "_Unknown at rule @import-normalize css(unknownAtRules)_" warning in VSCode, change the `css.lint.unknownAtRules` setting to `ignore`. + You can control which parts of [normalize.css] to use via your project's [browserslist]. Results when [browserslist] is `last 3 versions`: diff --git a/docusaurus/docs/adding-custom-environment-variables.md b/docusaurus/docs/adding-custom-environment-variables.md index b604a10c810..48bfea2cf64 100644 --- a/docusaurus/docs/adding-custom-environment-variables.md +++ b/docusaurus/docs/adding-custom-environment-variables.md @@ -132,8 +132,8 @@ REACT_APP_NOT_SECRET_CODE=abcdef Files on the left have more priority than files on the right: -- `npm start`: `.env.development.local`, `.env.development`, `.env.local`, `.env` -- `npm run build`: `.env.production.local`, `.env.production`, `.env.local`, `.env` +- `npm start`: `.env.development.local`, `.env.local`, `.env.development`, `.env` +- `npm run build`: `.env.production.local`, `.env.local`, `.env.production`, `.env` - `npm test`: `.env.test.local`, `.env.test`, `.env` (note `.env.local` is missing) These variables will act as the defaults if the machine does not explicitly set them. diff --git a/docusaurus/docs/adding-typescript.md b/docusaurus/docs/adding-typescript.md index 40c9c2242a8..6f4c86c6cc7 100644 --- a/docusaurus/docs/adding-typescript.md +++ b/docusaurus/docs/adding-typescript.md @@ -19,11 +19,11 @@ npx create-react-app my-app --template typescript yarn create react-app my-app --template typescript ``` -> If you've previously installed `create-react-app` globally via `npm install -g create-react-app`, we recommend you uninstall the package using `npm uninstall -g create-react-app` to ensure that `npx` always uses the latest version. +> 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` or `yarn global remove create-react-app` to ensure that `npx` always uses the latest version. > > Global installs of `create-react-app` are no longer supported. -To add [TypeScript](https://www.typescriptlang.org/) to a Create React App project, first install it: +To add [TypeScript](https://www.typescriptlang.org/) to an existing Create React App project, first install it: ```sh npm install --save typescript @types/node @types/react @types/react-dom @types/jest @@ -47,7 +47,7 @@ You are not required to make a [`tsconfig.json` file](https://www.typescriptlang ## Troubleshooting -If your project is not created with TypeScript enabled, npx may be using a cached version of `create-react-app`. Remove previously installed versions with `npm uninstall -g create-react-app` (see [#6119](https://github.com/facebook/create-react-app/issues/6119#issuecomment-451614035)). +If your project is not created with TypeScript enabled, npx may be using a cached version of `create-react-app`. Remove previously installed versions with `npm uninstall -g create-react-app` or `yarn global remove create-react-app` (see [#6119](https://github.com/facebook/create-react-app/issues/6119#issuecomment-451614035)). 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. diff --git a/docusaurus/docs/advanced-configuration.md b/docusaurus/docs/advanced-configuration.md index bf7777a413b..6da2ad174e0 100644 --- a/docusaurus/docs/advanced-configuration.md +++ b/docusaurus/docs/advanced-configuration.md @@ -22,8 +22,7 @@ You can adjust various development and production settings by setting environmen | 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 out of memory (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. |
| IMAGE_INLINE_SIZE_LIMIT | 🚫 Ignored | ✅ Used | By default, images smaller than 10,000 bytes are encoded as a data URI in base64 and inlined in the CSS or JS build artifact. Set this to control the size limit in bytes. Setting it to 0 will disable the inlining of images. |
-| EXTEND_ESLINT | ✅ Used | ✅ Used | When set to `true`, ESLint configs that extend `eslint-config-react-app` will be used by `eslint-loader`. Any rules that are set to `"error"` will stop the application from building. |
+| FAST_REFRESH | ✅ Used | 🚫 Ignored | When set to `false`, disables experimental support for Fast Refresh to allow you to tweak your components in real time without reloading the page. |
| TSC_COMPILE_ON_ERROR | ✅ Used | ✅ Used | When set to `true`, you can run and properly build TypeScript projects even if there are TypeScript type check errors. These errors are printed as warnings in the terminal and/or browser console. |
diff --git a/docusaurus/docs/custom-templates.md b/docusaurus/docs/custom-templates.md
index 4cf863e984e..9ae4ae69741 100644
--- a/docusaurus/docs/custom-templates.md
+++ b/docusaurus/docs/custom-templates.md
@@ -31,7 +31,7 @@ If you're interested in building a custom template, first take a look at how we'
A template must have the following structure:
```
-my-app/
+cra-template-[template-name]/
README.md (for npm)
template.json
package.json
@@ -62,7 +62,7 @@ You can add whatever files you want in here, but you must have at least the file
This is the configuration file for your template. As this is a new feature, more options will be added over time. For now, only a `package` key is supported.
-The `package` key lets you provide any keys/values that you want added to the new project's `package.json`, such as dependencies (only dependencies are supported for now) and any custom scripts that your template relies on.
+The `package` key lets you provide any keys/values that you want added to the new project's `package.json`, such as dependencies and any custom scripts that your template relies on.
Below is an example `template.json` file:
diff --git a/docusaurus/docs/deployment.md b/docusaurus/docs/deployment.md
index dfb2e13d6aa..f5af4e224ce 100644
--- a/docusaurus/docs/deployment.md
+++ b/docusaurus/docs/deployment.md
@@ -1,497 +1,508 @@
----
-id: deployment
-title: Deployment
-sidebar_label: Deployment
----
-
-`npm run build` creates a `build` directory with a production build of your app. Set up your favorite HTTP server so that a visitor to your site is served `index.html`, and requests to static paths like `/static/js/main..js` are served with the contents of the `/static/js/main..js` file. For more information see the [production build](production-build.md) section.
-
-## Static Server
-
-For environments using [Node](https://nodejs.org/), the easiest way to handle this would be to install [serve](https://github.com/zeit/serve) and let it handle the rest:
-
-```sh
-npm install -g serve
-serve -s build
-```
-
-The last command shown above will serve your static site on the port **5000**. Like many of [serve](https://github.com/zeit/serve)’s internal settings, the port can be adjusted using the `-l` or `--listen` flags:
-
-```sh
-serve -s build -l 4000
-```
-
-Run this command to get a full list of the options available:
-
-```sh
-serve -h
-```
-
-## Other Solutions
-
-You don’t necessarily need a static server in order to run a Create React App project in production. It also works well when integrated into an existing server side app.
-
-Here’s a programmatic example using [Node](https://nodejs.org/) and [Express](https://expressjs.com/):
-
-```javascript
-const express = require('express');
-const path = require('path');
-const app = express();
-
-app.use(express.static(path.join(__dirname, 'build')));
-
-app.get('/', function(req, res) {
- res.sendFile(path.join(__dirname, 'build', 'index.html'));
-});
-
-app.listen(9000);
-```
-
-The choice of your server software isn’t important either. Since Create React App is completely platform-agnostic, there’s no need to explicitly use Node.
-
-The `build` folder with static assets is the only output produced by Create React App.
-
-However this is not quite enough if you use client-side routing. Read the next section if you want to support URLs like `/todos/42` in your single-page app.
-
-## Serving Apps with Client-Side Routing
-
-If you use routers that use the HTML5 [`pushState` history API](https://developer.mozilla.org/en-US/docs/Web/API/History_API#Adding_and_modifying_history_entries) under the hood (for example, [React Router](https://github.com/ReactTraining/react-router) with `browserHistory`), many static file servers will fail. For example, if you used React Router with a route for `/todos/42`, the development server will respond to `localhost:3000/todos/42` properly, but an Express serving a production build as above will not.
-
-This is because when there is a fresh page load for a `/todos/42`, the server looks for the file `build/todos/42` and does not find it. The server needs to be configured to respond to a request to `/todos/42` by serving `index.html`. For example, we can amend our Express example above to serve `index.html` for any unknown paths:
-
-```diff
- app.use(express.static(path.join(__dirname, 'build')));
-
--app.get('/', function (req, res) {
-+app.get('/*', function (req, res) {
- res.sendFile(path.join(__dirname, 'build', 'index.html'));
- });
-```
-
-If you’re using [Apache HTTP Server](https://httpd.apache.org/), you need to create a `.htaccess` file in the `public` folder that looks like this:
-
-```
- Options -MultiViews
- RewriteEngine On
- RewriteCond %{REQUEST_FILENAME} !-f
- RewriteRule ^ index.html [QSA,L]
-```
-
-It will get copied to the `build` folder when you run `npm run build`.
-
-If you’re using [Apache Tomcat](https://tomcat.apache.org/), you need to follow [this Stack Overflow answer](https://stackoverflow.com/a/41249464/4878474).
-
-Now requests to `/todos/42` will be handled correctly both in development and in production.
-
-On a production build, and when you've [opted-in](making-a-progressive-web-app.md#why-opt-in),
-a [service worker](https://developers.google.com/web/fundamentals/primers/service-workers/) will automatically handle all navigation requests, like for
-`/todos/42`, by serving the cached copy of your `index.html`. This
-service worker navigation routing can be configured or disabled by
-[`eject`ing](available-scripts.md#npm-run-eject) and then modifying the
-[`navigateFallback`](https://github.com/GoogleChrome/sw-precache#navigatefallback-string)
-and [`navigateFallbackWhitelist`](https://github.com/GoogleChrome/sw-precache#navigatefallbackwhitelist-arrayregexp)
-options of the `SWPrecachePlugin` [configuration](../config/webpack.config.prod.js).
-
-When users install your app to the homescreen of their device the default configuration will make a shortcut to `/index.html`. This may not work for client-side routers which expect the app to be served from `/`. Edit the web app manifest at [`public/manifest.json`](public/manifest.json) and change `start_url` to match the required URL scheme, for example:
-
-```js
- "start_url": ".",
-```
-
-## Building for Relative Paths
-
-By default, Create React App produces a build assuming your app is hosted at the server root.
-
-To override this, specify the `homepage` in your `package.json`, for example:
-
-```js
- "homepage": "http://mywebsite.com/relativepath",
-```
-
-This will let Create React App correctly infer the root path to use in the generated HTML file.
-
-**Note**: If you are using `react-router@^4`, you can root ``s using the `basename` prop on any ``.
-
-More information [here](https://reacttraining.com/react-router/web/api/BrowserRouter/basename-string).
-
-For example:
-
-```js
-
- -**If you skip it, your app will not deploy correctly.** - -Open your `package.json` and add a `homepage` field for your project: - -```json - "homepage": "https://myusername.github.io/my-app", -``` - -or for a GitHub user page: - -```json - "homepage": "https://myusername.github.io", -``` - -or for a custom domain page: - -```json - "homepage": "https://mywebsite.com", -``` - -Create React App uses the `homepage` field to determine the root URL in the built HTML file. - -### Step 2: Install `gh-pages` and add `deploy` to `scripts` in `package.json` - -Now, whenever you run `npm run build`, you will see a cheat sheet with instructions on how to deploy to GitHub Pages. - -To publish it at [https://myusername.github.io/my-app](https://myusername.github.io/my-app), run: - -```sh -npm install --save gh-pages -``` - -Alternatively you may use `yarn`: - -```sh -yarn add gh-pages -``` - -Add the following scripts in your `package.json`: - -```diff - "scripts": { -+ "predeploy": "npm run build", -+ "deploy": "gh-pages -d build", - "start": "react-scripts start", - "build": "react-scripts build", -``` - -The `predeploy` script will run automatically before `deploy` is run. - -If you are deploying to a GitHub user page instead of a project page you'll need to make one -additional modification: - -1. Tweak your `package.json` scripts to push deployments to **master**: - -```diff - "scripts": { - "predeploy": "npm run build", -- "deploy": "gh-pages -d build", -+ "deploy": "gh-pages -b master -d build", -``` - -### Step 3: Deploy the site by running `npm run deploy` - -Then run: - -```sh -npm run deploy -``` - -### Step 4: For a project page, ensure your project’s settings use `gh-pages` - -Finally, make sure **GitHub Pages** option in your GitHub project settings is set to use the `gh-pages` branch: - -
-
-### Step 5: Optionally, configure the domain
-
-You can configure a custom domain with GitHub Pages by adding a `CNAME` file to the `public/` folder.
-
-Your CNAME file should look like this:
-
-```
-mywebsite.com
-```
-
-### Notes on client-side routing
-
-GitHub Pages doesn’t support routers that use the HTML5 `pushState` history API under the hood (for example, React Router using `browserHistory`). This is because when there is a fresh page load for a url like `http://user.github.io/todomvc/todos/42`, where `/todos/42` is a frontend route, the GitHub Pages server returns 404 because it knows nothing of `/todos/42`. If you want to add a router to a project hosted on GitHub Pages, here are a couple of solutions:
-
-- You could switch from using HTML5 history API to routing with hashes. If you use React Router, you can switch to `hashHistory` for this effect, but the URL will be longer and more verbose (for example, `http://user.github.io/todomvc/#/todos/42?_k=yknaj`). [Read more](https://reacttraining.com/react-router/web/api/Router) about different history implementations in React Router.
-- Alternatively, you can use a trick to teach GitHub Pages to handle 404s by redirecting to your `index.html` page with a custom redirect parameter. You would need to add a `404.html` file with the redirection code to the `build` folder before deploying your project, and you’ll need to add code handling the redirect parameter to `index.html`. You can find a detailed explanation of this technique [in this guide](https://github.com/rafrex/spa-github-pages).
-
-### Troubleshooting
-
-#### "/dev/tty: No such a device or address"
-
-If, when deploying, you get `/dev/tty: No such a device or address` or a similar error, try the following:
-
-1. Create a new [Personal Access Token](https://github.com/settings/tokens)
-2. `git remote set-url origin https://:@github.com//` .
-3. Try `npm run deploy` again
-
-#### "Cannot read property 'email' of null"
-
-If, when deploying, you get `Cannot read property 'email' of null`, try the following:
-
-1. `git config --global user.name ''`
-2. `git config --global user.email ''`
-3. Try `npm run deploy` again
-
-## [Heroku](https://www.heroku.com/)
-
-Use the [Heroku Buildpack for Create React App](https://github.com/mars/create-react-app-buildpack).
-
-You can find instructions in [Deploying React with Zero Configuration](https://blog.heroku.com/deploying-react-with-zero-configuration).
-
-### Resolving Heroku Deployment Errors
-
-Sometimes `npm run build` works locally but fails during deploy via Heroku. Following are the most common cases.
-
-#### "Module not found: Error: Cannot resolve 'file' or 'directory'"
-
-If you get something like this:
-
-```
-remote: Failed to create a production build. Reason:
-remote: Module not found: Error: Cannot resolve 'file' or 'directory'
-MyDirectory in /tmp/build_1234/src
-```
-
-It means you need to ensure that the lettercase of the file or directory you `import` matches the one you see on your filesystem or on GitHub.
-
-This is important because Linux (the operating system used by Heroku) is case sensitive. So `MyDirectory` and `mydirectory` are two distinct directories and thus, even though the project builds locally, the difference in case breaks the `import` statements on Heroku remotes.
-
-#### "Could not find a required file."
-
-If you exclude or ignore necessary files from the package you will see a error similar this one:
-
-```
-remote: Could not find a required file.
-remote: Name: `index.html`
-remote: Searched in: /tmp/build_a2875fc163b209225122d68916f1d4df/public
-remote:
-remote: npm ERR! Linux 3.13.0-105-generic
-remote: npm ERR! argv "/tmp/build_a2875fc163b209225122d68916f1d4df/.heroku/node/bin/node" "/tmp/build_a2875fc163b209225122d68916f1d4df/.heroku/node/bin/npm" "run" "build"
-```
-
-In this case, ensure that the file is there with the proper lettercase and that’s not ignored on your local `.gitignore` or `~/.gitignore_global`.
-
-## [Netlify](https://www.netlify.com/)
-
-**To do a manual deploy to Netlify’s CDN:**
-
-```sh
-npm install netlify-cli -g
-netlify deploy
-```
-
-Choose `build` as the path to deploy.
-
-**To setup continuous delivery:**
-
-With this setup Netlify will build and deploy when you push to git or open a pull request:
-
-1. [Start a new netlify project](https://app.netlify.com/signup)
-2. Pick your Git hosting service and select your repository
-3. Click `Build your site`
-
-**Support for client-side routing:**
-
-To support `pushState`, make sure to create a `public/_redirects` file with the following rewrite rules:
-
-```
-/* /index.html 200
-```
-
-When you build the project, Create React App will place the `public` folder contents into the build output.
-
-## [ZEIT Now](https://zeit.co)
-
-[ZEIT Now](https://zeit.co) is a cloud platform for websites and serverless APIs, that you can use to deploy your Create React App projects to your personal domain (or a free `.now.sh` suffixed URL).
-
-This guide will show you how to get started in a few quick steps:
-
-### Step 1: Installing Now CLI
-
-To install their command-line interface with [npm](https://www.npmjs.com/package/now), run the following command:
-
-```shell
-npm i -g now
-```
-
-### Step 2: Deploying
-
-You can deploy your application by running the following command in the root of the project directory:
-
-```shell
-now
-```
-
-**Alternatively**, you can also use their integration for [GitHub](https://zeit.co/github) or [GitLab](https://zeit.co/gitlab).
-
-That’s all!
-
-Your site will now deploy, and you will receive a link similar to the following: https://react.now-examples.now.sh
-
-Out of the box, you are preconfigured for client-side routing compatibility and appropriate default caching headers. This behaviour can be overwritten [like this](https://zeit.co/docs/v2/advanced/routes/).
-
-## [Render](https://render.com)
-
-Render offers free [static site](https://render.com/docs/static-sites) hosting with fully managed SSL, a global CDN and continuous auto deploys from GitHub.
-
-Deploy your app in only a few minutes by following the [Create React App deployment guide](https://render.com/docs/deploy-create-react-app).
-
-Use invite code `cra` to sign up or use [this link](https://render.com/i/cra).
-
-## [S3](https://aws.amazon.com/s3) and [CloudFront](https://aws.amazon.com/cloudfront/)
-
-See this [blog post](https://medium.com/@omgwtfmarc/deploying-create-react-app-to-s3-or-cloudfront-48dae4ce0af) on how to deploy your React app to Amazon Web Services S3 and CloudFront. If you are looking to add a custom domain, HTTPS and continuous deployment see this [blog post](https://medium.com/dailyjs/a-guide-to-deploying-your-react-app-with-aws-s3-including-https-a-custom-domain-a-cdn-and-58245251f081).
-
-## [Surge](https://surge.sh/)
-
-Install the Surge CLI if you haven’t already by running `npm install -g surge`. Run the `surge` command and log in you or create a new account.
-
-When asked about the project path, make sure to specify the `build` folder, for example:
-
-```sh
- project path: /path/to/project/build
-```
-
-Note that in order to support routers that use HTML5 `pushState` API, you may want to rename the `index.html` in your build folder to `200.html` before deploying to Surge. This [ensures that every URL falls back to that file](https://surge.sh/help/adding-a-200-page-for-client-side-routing).
-
-## Publishing Components To npm
-
-Create React App doesn't provide any built-in functionality to publish a component to npm. If you're ready to extract a component from your project so other people can use it, we recommend moving it to a separate directory outside of your project and then using a tool like [nwb](https://github.com/insin/nwb#react-components-and-libraries) to prepare it for publishing.
+---
+id: deployment
+title: Deployment
+sidebar_label: Deployment
+---
+
+`npm run build` creates a `build` directory with a production build of your app. Set up your favorite HTTP server so that a visitor to your site is served `index.html`, and requests to static paths like `/static/js/main..js` are served with the contents of the `/static/js/main..js` file. For more information see the [production build](production-build.md) section.
+
+## Static Server
+
+For environments using [Node](https://nodejs.org/), the easiest way to handle this would be to install [serve](https://github.com/zeit/serve) and let it handle the rest:
+
+```sh
+npm install -g serve
+serve -s build
+```
+
+The last command shown above will serve your static site on the port **5000**. Like many of [serve](https://github.com/zeit/serve)’s internal settings, the port can be adjusted using the `-l` or `--listen` flags:
+
+```sh
+serve -s build -l 4000
+```
+
+Run this command to get a full list of the options available:
+
+```sh
+serve -h
+```
+
+## Other Solutions
+
+You don’t necessarily need a static server in order to run a Create React App project in production. It also works well when integrated into an existing server side app.
+
+Here’s a programmatic example using [Node](https://nodejs.org/) and [Express](https://expressjs.com/):
+
+```javascript
+const express = require('express');
+const path = require('path');
+const app = express();
+
+app.use(express.static(path.join(__dirname, 'build')));
+
+app.get('/', function (req, res) {
+ res.sendFile(path.join(__dirname, 'build', 'index.html'));
+});
+
+app.listen(9000);
+```
+
+The choice of your server software isn’t important either. Since Create React App is completely platform-agnostic, there’s no need to explicitly use Node.
+
+The `build` folder with static assets is the only output produced by Create React App.
+
+However this is not quite enough if you use client-side routing. Read the next section if you want to support URLs like `/todos/42` in your single-page app.
+
+## Serving Apps with Client-Side Routing
+
+If you use routers that use the HTML5 [`pushState` history API](https://developer.mozilla.org/en-US/docs/Web/API/History_API#Adding_and_modifying_history_entries) under the hood (for example, [React Router](https://github.com/ReactTraining/react-router) with `browserHistory`), many static file servers will fail. For example, if you used React Router with a route for `/todos/42`, the development server will respond to `localhost:3000/todos/42` properly, but an Express serving a production build as above will not.
+
+This is because when there is a fresh page load for a `/todos/42`, the server looks for the file `build/todos/42` and does not find it. The server needs to be configured to respond to a request to `/todos/42` by serving `index.html`. For example, we can amend our Express example above to serve `index.html` for any unknown paths:
+
+```diff
+ app.use(express.static(path.join(__dirname, 'build')));
+
+-app.get('/', function (req, res) {
++app.get('/*', function (req, res) {
+ res.sendFile(path.join(__dirname, 'build', 'index.html'));
+ });
+```
+
+If you’re using [Apache HTTP Server](https://httpd.apache.org/), you need to create a `.htaccess` file in the `public` folder that looks like this:
+
+```
+ Options -MultiViews
+ RewriteEngine On
+ RewriteCond %{REQUEST_FILENAME} !-f
+ RewriteRule ^ index.html [QSA,L]
+```
+
+It will get copied to the `build` folder when you run `npm run build`.
+
+If you’re using [Apache Tomcat](https://tomcat.apache.org/), you need to follow [this Stack Overflow answer](https://stackoverflow.com/a/41249464/4878474).
+
+Now requests to `/todos/42` will be handled correctly both in development and in production.
+
+On a production build, and when you've [opted-in](making-a-progressive-web-app.md#why-opt-in),
+a [service worker](https://developers.google.com/web/fundamentals/primers/service-workers/) will automatically handle all navigation requests, like for
+`/todos/42`, by serving the cached copy of your `index.html`. This
+service worker navigation routing can be configured or disabled by
+[`eject`ing](available-scripts.md#npm-run-eject) and then modifying the
+[`navigateFallback`](https://github.com/GoogleChrome/sw-precache#navigatefallback-string)
+and [`navigateFallbackWhitelist`](https://github.com/GoogleChrome/sw-precache#navigatefallbackwhitelist-arrayregexp)
+options of the `SWPrecachePlugin` [configuration](../config/webpack.config.prod.js).
+
+When users install your app to the homescreen of their device the default configuration will make a shortcut to `/index.html`. This may not work for client-side routers which expect the app to be served from `/`. Edit the web app manifest at [`public/manifest.json`](public/manifest.json) and change `start_url` to match the required URL scheme, for example:
+
+```js
+ "start_url": ".",
+```
+
+## Building for Relative Paths
+
+By default, Create React App produces a build assuming your app is hosted at the server root.
+
+To override this, specify the `homepage` in your `package.json`, for example:
+
+```js
+ "homepage": "http://mywebsite.com/relativepath",
+```
+
+This will let Create React App correctly infer the root path to use in the generated HTML file.
+
+**Note**: If you are using `react-router@^4`, you can root ``s using the `basename` prop on any ``.
+
+More information [here](https://reacttraining.com/react-router/web/api/BrowserRouter/basename-string).
+
+For example:
+
+```js
+
+ +**If you skip it, your app will not deploy correctly.** + +Open your `package.json` and add a `homepage` field for your project: + +```json + "homepage": "https://myusername.github.io/my-app", +``` + +or for a GitHub user page: + +```json + "homepage": "https://myusername.github.io", +``` + +or for a custom domain page: + +```json + "homepage": "https://mywebsite.com", +``` + +Create React App uses the `homepage` field to determine the root URL in the built HTML file. + +### Step 2: Install `gh-pages` and add `deploy` to `scripts` in `package.json` + +Now, whenever you run `npm run build`, you will see a cheat sheet with instructions on how to deploy to GitHub Pages. + +To publish it at [https://myusername.github.io/my-app](https://myusername.github.io/my-app), run: + +```sh +npm install --save gh-pages +``` + +Alternatively you may use `yarn`: + +```sh +yarn add gh-pages +``` + +Add the following scripts in your `package.json`: + +```diff + "scripts": { ++ "predeploy": "npm run build", ++ "deploy": "gh-pages -d build", + "start": "react-scripts start", + "build": "react-scripts build", +``` + +The `predeploy` script will run automatically before `deploy` is run. + +If you are deploying to a GitHub user page instead of a project page you'll need to make one +additional modification: + +1. Tweak your `package.json` scripts to push deployments to **master**: + +```diff + "scripts": { + "predeploy": "npm run build", +- "deploy": "gh-pages -d build", ++ "deploy": "gh-pages -b master -d build", +``` + +### Step 3: Deploy the site by running `npm run deploy` + +Then run: + +```sh +npm run deploy +``` + +### Step 4: For a project page, ensure your project’s settings use `gh-pages` + +Finally, make sure **GitHub Pages** option in your GitHub project settings is set to use the `gh-pages` branch: + +
+
+### Step 5: Optionally, configure the domain
+
+You can configure a custom domain with GitHub Pages by adding a `CNAME` file to the `public/` folder.
+
+Your CNAME file should look like this:
+
+```
+mywebsite.com
+```
+
+### Notes on client-side routing
+
+GitHub Pages doesn’t support routers that use the HTML5 `pushState` history API under the hood (for example, React Router using `browserHistory`). This is because when there is a fresh page load for a url like `http://user.github.io/todomvc/todos/42`, where `/todos/42` is a frontend route, the GitHub Pages server returns 404 because it knows nothing of `/todos/42`. If you want to add a router to a project hosted on GitHub Pages, here are a couple of solutions:
+
+- You could switch from using HTML5 history API to routing with hashes. If you use React Router, you can switch to `hashHistory` for this effect, but the URL will be longer and more verbose (for example, `http://user.github.io/todomvc/#/todos/42?_k=yknaj`). [Read more](https://reacttraining.com/react-router/web/api/Router) about different history implementations in React Router.
+- Alternatively, you can use a trick to teach GitHub Pages to handle 404s by redirecting to your `index.html` page with a custom redirect parameter. You would need to add a `404.html` file with the redirection code to the `build` folder before deploying your project, and you’ll need to add code handling the redirect parameter to `index.html`. You can find a detailed explanation of this technique [in this guide](https://github.com/rafrex/spa-github-pages).
+
+### Troubleshooting
+
+#### "/dev/tty: No such a device or address"
+
+If, when deploying, you get `/dev/tty: No such a device or address` or a similar error, try the following:
+
+1. Create a new [Personal Access Token](https://github.com/settings/tokens)
+2. `git remote set-url origin https://:@github.com//` .
+3. Try `npm run deploy` again
+
+#### "Cannot read property 'email' of null"
+
+If, when deploying, you get `Cannot read property 'email' of null`, try the following:
+
+1. `git config --global user.name ''`
+2. `git config --global user.email ''`
+3. Try `npm run deploy` again
+
+## [Heroku](https://www.heroku.com/)
+
+Use the [Heroku Buildpack for Create React App](https://github.com/mars/create-react-app-buildpack).
+
+You can find instructions in [Deploying React with Zero Configuration](https://blog.heroku.com/deploying-react-with-zero-configuration).
+
+### Resolving Heroku Deployment Errors
+
+Sometimes `npm run build` works locally but fails during deploy via Heroku. Following are the most common cases.
+
+#### "Module not found: Error: Cannot resolve 'file' or 'directory'"
+
+If you get something like this:
+
+```
+remote: Failed to create a production build. Reason:
+remote: Module not found: Error: Cannot resolve 'file' or 'directory'
+MyDirectory in /tmp/build_1234/src
+```
+
+It means you need to ensure that the lettercase of the file or directory you `import` matches the one you see on your filesystem or on GitHub.
+
+This is important because Linux (the operating system used by Heroku) is case sensitive. So `MyDirectory` and `mydirectory` are two distinct directories and thus, even though the project builds locally, the difference in case breaks the `import` statements on Heroku remotes.
+
+#### "Could not find a required file."
+
+If you exclude or ignore necessary files from the package you will see a error similar this one:
+
+```
+remote: Could not find a required file.
+remote: Name: `index.html`
+remote: Searched in: /tmp/build_a2875fc163b209225122d68916f1d4df/public
+remote:
+remote: npm ERR! Linux 3.13.0-105-generic
+remote: npm ERR! argv "/tmp/build_a2875fc163b209225122d68916f1d4df/.heroku/node/bin/node" "/tmp/build_a2875fc163b209225122d68916f1d4df/.heroku/node/bin/npm" "run" "build"
+```
+
+In this case, ensure that the file is there with the proper lettercase and that’s not ignored on your local `.gitignore` or `~/.gitignore_global`.
+
+## [Netlify](https://www.netlify.com/)
+
+**To do a manual deploy to Netlify’s CDN:**
+
+```sh
+npm install netlify-cli -g
+netlify deploy
+```
+
+Choose `build` as the path to deploy.
+
+**To setup continuous delivery:**
+
+With this setup Netlify will build and deploy when you push to git or open a pull request:
+
+1. [Start a new netlify project](https://app.netlify.com/signup)
+2. Pick your Git hosting service and select your repository
+3. Click `Build your site`
+
+**Support for client-side routing:**
+
+To support `pushState`, make sure to create a `public/_redirects` file with the following rewrite rules:
+
+```
+/* /index.html 200
+```
+
+When you build the project, Create React App will place the `public` folder contents into the build output.
+
+## [Vercel](https://vercel.com)
+
+[Vercel](https://vercel.com/home) is a cloud platform that enables developers to host Jamstack websites and web services that deploy instantly, scale automatically, and requires no supervision, all with zero configuration. They provide a global edge network, SSL encryption, asset compression, cache invalidation, and more.
+
+### Step 1: Deploying your React project to Vercel
+
+To deploy your React project with a [Vercel for Git Integration](https://vercel.com/docs/git-integrations), make sure it has been pushed to a Git repository.
+
+Import the project into Vercel using the [Import Flow](https://vercel.com/import/git). During the import, you will find all relevant [options](https://vercel.com/docs/build-step#build-&-development-settings) preconfigured for you with the ability to change as needed.
+
+After your project has been imported, all subsequent pushes to branches will generate [Preview Deployments](https://vercel.com/docs/platform/deployments#preview), and all changes made to the [Production Branch](https://vercel.com/docs/git-integrations#production-branch) (commonly "master" or "main") will result in a [Production Deployment](https://vercel.com/docs/platform/deployments#production).
+
+Once deployed, you will get a URL to see your app live, such as the following: https://create-react-app-example.vercel.app/.
+
+### Step 2 (optional): Using a Custom Domain
+
+If you want to use a Custom Domain with your Vercel deployment, you can **Add** or **Transfer in** your domain via your Vercel [account Domain settings.](https://vercel.com/dashboard/domains)
+
+To add your domain to your project, navigate to your [Project](https://vercel.com/docs/platform/projects) from the Vercel Dashboard. Once you have selected your project, click on the "Settings" tab, then select the **Domains** menu item. From your projects **Domain** page, enter the domain you wish to add to your project.
+
+Once the domain as been added, you will be presented with different methods for configuring it.
+
+### Deploying a fresh React project
+
+You can deploy a fresh React project, with a Git repository set up for you, with the following Deploy Button:
+
+[](https://vercel.com/import/git?s=https%3A%2F%2Fgithub.com%2Fvercel%2Fvercel%2Ftree%2Fmaster%2Fexamples%2Fcreate-react-app)
+
+### Vercel References:
+
+- [Example Source](https://github.com/vercel/vercel/tree/master/examples/create-react-app)
+- [Official Vercel Guide](https://vercel.com/guides/deploying-react-with-vercel-cra)
+- [Vercel Deployment Docs](https://vercel.com/docs)
+- [Vercel Custom Domain Docs](https://vercel.com/docs/custom-domains)
+
+## [Render](https://render.com)
+
+Render offers free [static site](https://render.com/docs/static-sites) hosting with fully managed SSL, a global CDN and continuous auto deploys from GitHub.
+
+Deploy your app in only a few minutes by following the [Create React App deployment guide](https://render.com/docs/deploy-create-react-app).
+
+Use invite code `cra` to sign up or use [this link](https://render.com/i/cra).
+
+## [S3](https://aws.amazon.com/s3) and [CloudFront](https://aws.amazon.com/cloudfront/)
+
+See this [blog post](https://medium.com/@omgwtfmarc/deploying-create-react-app-to-s3-or-cloudfront-48dae4ce0af) on how to deploy your React app to Amazon Web Services S3 and CloudFront. If you are looking to add a custom domain, HTTPS and continuous deployment see this [blog post](https://medium.com/dailyjs/a-guide-to-deploying-your-react-app-with-aws-s3-including-https-a-custom-domain-a-cdn-and-58245251f081).
+
+## [Surge](https://surge.sh/)
+
+Install the Surge CLI if you haven’t already by running `npm install -g surge`. Run the `surge` command and log in you or create a new account.
+
+When asked about the project path, make sure to specify the `build` folder, for example:
+
+```sh
+ project path: /path/to/project/build
+```
+
+Note that in order to support routers that use HTML5 `pushState` API, you may want to rename the `index.html` in your build folder to `200.html` before deploying to Surge. This [ensures that every URL falls back to that file](https://surge.sh/help/adding-a-200-page-for-client-side-routing).
+
+## Publishing Components To npm
+
+Create React App doesn't provide any built-in functionality to publish a component to npm. If you're ready to extract a component from your project so other people can use it, we recommend moving it to a separate directory outside of your project and then using a tool like [nwb](https://github.com/insin/nwb#react-components-and-libraries) to prepare it for publishing.
diff --git a/docusaurus/docs/getting-started.md b/docusaurus/docs/getting-started.md
index f23236110b3..b95bc100470 100644
--- a/docusaurus/docs/getting-started.md
+++ b/docusaurus/docs/getting-started.md
@@ -14,7 +14,7 @@ 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.
+> 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` or `yarn global remove 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))_
@@ -34,7 +34,7 @@ Create a project, and you’re good to go.
## Creating an App
-**You’ll need to have Node >= 8.10 on your local development machine** (but it’s not required on the server). You can use [nvm](https://github.com/creationix/nvm#installation) (macOS/Linux) or [nvm-windows](https://github.com/coreybutler/nvm-windows#node-version-manager-nvm-for-windows) to switch Node versions between different projects.
+**You’ll need to have Node >= 10 on your local development machine** (but it’s not required on the server). You can use [nvm](https://github.com/creationix/nvm#installation) (macOS/Linux) or [nvm-windows](https://github.com/coreybutler/nvm-windows#node-version-manager-nvm-for-windows) to switch Node versions between different projects.
To create a new app, you may choose one of the following methods:
@@ -120,7 +120,8 @@ my-app
├── index.css
├── index.js
├── logo.svg
- └── serviceWorker.js
+ ├── serviceWorker.js
+ └── setupTests.js
```
No configuration or complicated folder structures, only the files you need to build your app. Once the installation is done, you can open your project folder:
diff --git a/docusaurus/docs/making-a-progressive-web-app.md b/docusaurus/docs/making-a-progressive-web-app.md
index 227b21eb4e6..649fb9cb320 100644
--- a/docusaurus/docs/making-a-progressive-web-app.md
+++ b/docusaurus/docs/making-a-progressive-web-app.md
@@ -5,17 +5,47 @@ title: Making a Progressive Web App
The production build has all the tools necessary to generate a first-class
[Progressive Web App](https://developers.google.com/web/progressive-web-apps/),
-but **the offline/cache-first behavior is opt-in only**. By default,
-the build process will generate a service worker file, but it will not be
-registered, so it will not take control of your production web app.
+but **the offline/cache-first behavior is opt-in only**.
+
+Starting with Create React App 4, you can add a `src/service-worker.js` file to
+your project to use the built-in support for
+[Workbox](https://developers.google.com/web/tools/workbox/)'s
+[`InjectManifest`](https://developers.google.com/web/tools/workbox/reference-docs/latest/module-workbox-webpack-plugin.InjectManifest)
+plugin, which will
+[compile](https://developers.google.com/web/tools/workbox/guides/using-bundlers)
+your service worker and inject into it a list of URLs to
+[precache](https://developers.google.com/web/tools/workbox/guides/precache-files).
+
+If you start a new project using one of the PWA [custom
+templates](https://create-react-app.dev/docs/custom-templates/), you'll get a
+`src/service-worker.js` file that serves as a good starting point for an
+offline-first service worker:
+
+```sh
+npx create-react-app my-app --template cra-template-pwa
+```
+
+The TypeScript equivalent is:
+
+```sh
+npx create-react-app my-app --template cra-template-pwa-typescript
+```
+
+If you know that you won't be using service workers, or if you'd prefer to use a
+different approach to creating your service worker, don't create a
+`src/service-worker.js` file. The `InjectManifest` plugin won't be run in that
+case.
-In order to opt-in to the offline-first behavior, developers should look for the
-following in their [`src/index.js`](https://github.com/facebook/create-react-app/blob/master/packages/cra-template/template/src/index.js) file:
+In addition to creating your local `src/service-worker.js` file, it needs to be
+registered before it will be used. In order to opt-in to the offline-first
+behavior, developers should look for the following in their
+[`src/index.js`](https://github.com/facebook/create-react-app/blob/master/packages/cra-template/template/src/index.js)
+file:
```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: https://bit.ly/CRA-PWA
+// Learn more about service workers: https://cra.link/PWA
serviceWorker.unregister();
```
@@ -24,23 +54,59 @@ As the comment states, switching `serviceWorker.unregister()` to
## Why Opt-in?
-Offline-first Progressive Web Apps are faster and more reliable than traditional web pages, and provide an engaging mobile experience:
+Offline-first Progressive Web Apps are faster and more reliable than traditional
+web pages, and provide an engaging mobile experience:
+
+- All static site assets that are a part of your `webpack` build are cached so
+ that your page loads fast on subsequent visits, regardless of network
+ connectivity (such as 2G or 3G). Updates are downloaded in the background.
+- Your app will work regardless of network state, even if offline. This means
+ your users will be able to use your app at 10,000 feet and on the subway.
+- On mobile devices, your app can be added directly to the user's home screen,
+ app icon and all. This eliminates the need for the app store.
+
+However, they [can make debugging deployments more
+challenging](https://github.com/facebook/create-react-app/issues/2398).
+
+The
+[`workbox-webpack-plugin`](https://developers.google.com/web/tools/workbox/modules/workbox-webpack-plugin)
+is integrated into production configuration, and it will take care of compiling
+a service worker file that will automatically precache all of your
+`webpack`-generated assets and keep them up to date as you deploy updates. The
+service worker will use a [cache-first
+strategy](https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/#cache-falling-back-to-network)
+for handling all requests for `webpack`-generated assets, including [navigation
+requests](https://developers.google.com/web/fundamentals/primers/service-workers/high-performance-loading#first_what_are_navigation_requests)
+for your HTML, ensuring that your web app is consistently fast, even on a slow
+or unreliable network.
-- All static site assets are cached so that your page loads fast on subsequent visits, regardless of network connectivity (such as 2G or 3G). Updates are downloaded in the background.
-- Your app will work regardless of network state, even if offline. This means your users will be able to use your app at 10,000 feet and on the subway.
-- On mobile devices, your app can be added directly to the user's home screen, app icon and all. This eliminates the need for the app store.
+Note: Resources that are not generated by `webpack`, such as static files that are
+copied over from your local
+[`public/` directory](https://github.com/facebook/create-react-app/blob/master/packages/cra-template/template/public/)
+or third-party resources, will not be precached. You can optionally set up Workbox
+[routes](https://developers.google.com/web/tools/workbox/guides/route-requests)
+to apply the runtime caching strategy of your choice to those resources.
+
+## Customization
+
+Starting with Create React App 4, you have full control over customizing the
+logic in this service worker, by creating your own `src/service-worker.js` file,
+or customizing the one added by the `cra-template-pwa` (or
+`cra-template-pwa-typescript`) template. You can use [additional
+modules](https://developers.google.com/web/tools/workbox/modules) from the
+Workbox project, add in a push notification library, or remove some of the
+default caching logic. The one requirement is that you keep `self.__WB_MANIFEST`
+somewhere in your file, as the Workbox compilation plugin checks for this value
+when generating a manifest of URLs to precache. If you would prefer not to use
+precaching, you can assign `self.__WB_MANIFEST` to a variable that will be
+ignored, like:
-However, they [can make debugging deployments more challenging](https://github.com/facebook/create-react-app/issues/2398) so, starting with Create React App 2, service workers are opt-in.
+```js
+// eslint-disable-next-line no-restricted-globals
+const ignored = self.__WB_MANIFEST;
-The [`workbox-webpack-plugin`](https://developers.google.com/web/tools/workbox/modules/workbox-webpack-plugin)
-is integrated into production configuration,
-and it will take care of generating a service worker file that will automatically
-precache all of your local assets and keep them up to date as you deploy updates.
-The service worker will use a [cache-first strategy](https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/#cache-falling-back-to-network)
-for handling all requests for local assets, including
-[navigation requests](https://developers.google.com/web/fundamentals/primers/service-workers/high-performance-loading#first_what_are_navigation_requests)
-for your HTML, ensuring that your web app is consistently fast, even on a slow
-or unreliable network.
+// Your custom service worker code goes here.
+```
## Offline-First Considerations
@@ -88,7 +154,8 @@ following into account:
1. By default, the generated service worker file will not intercept or cache any
cross-origin traffic, like HTTP [API requests](integrating-with-an-api-backend.md),
- images, or embeds loaded from a different domain.
+ images, or embeds loaded from a different domain. Starting with Create
+ React App 4, this can be customized, as explained above.
## Progressive Web App Metadata
diff --git a/docusaurus/docs/measuring-performance.md b/docusaurus/docs/measuring-performance.md
new file mode 100644
index 00000000000..a41635cbe40
--- /dev/null
+++ b/docusaurus/docs/measuring-performance.md
@@ -0,0 +1,65 @@
+---
+id: measuring-performance
+title: Measuring Performance
+---
+
+By default, Create React App includes a performance relayer that allows you to measure and analyze
+the performance of your application using different metrics.
+
+To measure any of the supported metrics, you only need to pass a function into the `reportWebVitals`
+function in `index.js`:
+
+```js
+reportWebVitals(console.log);
+```
+
+This function is fired when the final values for any of the metrics have finished calculating on the
+page. You can use it to log any of the results to the console or send to a particular endpoint.
+
+## Web Vitals
+
+[Web Vitals](https://web.dev/vitals/) are a set of useful metrics that aim to capture the user
+experience of a web page. In Create React App, a third-party library is used to measure these
+metrics ([web-vitals](https://github.com/GoogleChrome/web-vitals)).
+
+To understand more about the object returned to the function when a metric value is calculated,
+refer to the [documentation](https://github.com/GoogleChrome/web-vitals/#types). The [Browser
+Support](https://github.com/GoogleChrome/web-vitals/#browser-support) section also explains which browsers are supported.
+
+## Sending results to analytics
+
+With the `reportWebVitals` function, you can send any of results to an analytics endpoint to measure and track real user performance on your site. For example:
+
+```js
+function sendToAnalytics(metric) {
+ const body = JSON.stringify(metric);
+ const url = 'https://example.com/analytics';
+
+ // Use `navigator.sendBeacon()` if available, falling back to `fetch()`
+ if (navigator.sendBeacon) {
+ navigator.sendBeacon(url, body);
+ } else {
+ fetch(url, { body, method: 'POST', keepalive: true });
+ }
+}
+
+reportWebVitals(sendToAnalytics);
+```
+
+> **Note:** If you use Google Analytics, use the `id` value to make it easier to construct metric distributions manually (to calculate percentiles, etc…).
+>
+> ```js
+> function sendToAnalytics({ id, name, value }) {
+> ga('send', 'event', {
+> eventCategory: 'Web Vitals',
+> eventAction: name,
+> eventValue: Math.round(name === 'CLS' ? value * 1000 : value), // values must be integers
+> eventLabel: id, // id unique to current page load
+> nonInteraction: true, // avoids affecting bounce rate
+> });
+> }
+>
+> reportWebVitals(sendToAnalytics);
+> ```
+>
+> Read more about sending results to Google Analytics [here](https://github.com/GoogleChrome/web-vitals#send-the-results-to-google-analytics).
diff --git a/docusaurus/docs/proxying-api-requests-in-development.md b/docusaurus/docs/proxying-api-requests-in-development.md
index 3fdfb778069..66563e25e45 100644
--- a/docusaurus/docs/proxying-api-requests-in-development.md
+++ b/docusaurus/docs/proxying-api-requests-in-development.md
@@ -85,7 +85,7 @@ $ yarn add http-proxy-middleware
Next, create `src/setupProxy.js` and place the following contents in it:
```js
-const proxy = require('http-proxy-middleware');
+const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function(app) {
// ...
@@ -95,12 +95,12 @@ module.exports = function(app) {
You can now register proxies as you wish! Here's an example using the above `http-proxy-middleware`:
```js
-const proxy = require('http-proxy-middleware');
+const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function(app) {
app.use(
'/api',
- proxy({
+ createProxyMiddleware({
target: 'http://localhost:5000',
changeOrigin: true,
})
diff --git a/docusaurus/docs/running-tests.md b/docusaurus/docs/running-tests.md
index 7b81c1d2340..ccc3fecd9a1 100644
--- a/docusaurus/docs/running-tests.md
+++ b/docusaurus/docs/running-tests.md
@@ -85,97 +85,9 @@ This test mounts a component and makes sure that it didn’t throw during render
When you encounter bugs caused by changing components, you will gain a deeper insight into which parts of them are worth testing in your application. This might be a good time to introduce more specific tests asserting specific expected output or behavior.
-### Option 1: Shallow Rendering
+### React Testing Library
-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
-```
-
-Alternatively you may use `yarn`:
-
-```sh
-yarn add enzyme enzyme-adapter-react-16 react-test-renderer
-```
-
-As of Enzyme 3, you will need to install Enzyme along with an Adapter corresponding to the version of React you are using. (The examples above use the adapter for React 16.)
-
-The adapter will also need to be configured in your [global setup file](#initializing-test-environment):
-
-### `src/setupTests.js`
-
-```js
-import { configure } from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
-
-configure({ adapter: new Adapter() });
-```
-
-> Note: Keep in mind that if you decide to "eject" before creating `src/setupTests.js`, the resulting `package.json` file won't contain any reference to it. [Read here](#initializing-test-environment) to learn how to add this after ejecting.
-
-Now you can write a smoke test with it:
-
-```js
-import React from 'react';
-import { shallow } from 'enzyme';
-import App from './App';
-
-it('renders without crashing', () => {
- shallow(` and doesn’t go deeper. For example, even if `` itself renders a `
If you use it, move it to `src` and add the following line to `` in your HTML: ```html - + ``` #### New Feature @@ -1276,13 +1337,13 @@ Since 0.3.0 added a test runner, we recommend that you add it to the `scripts` s ### Build Dependency (`react-scripts`) -* You can now [proxy requests to an API server](https://github.com/facebook/create-react-app/blob/ef94b0561d5afb9b50b905fa5cd3f94e965c69c0/template/README.md#proxying-api-requests-in-development) without worrying about CORS. ([@gaearon](https://github.com/gaearon) in [#282](https://github.com/facebook/create-react-app/pull/282)) -* You can now [pass custom environment variables](https://github.com/facebook/create-react-app/blob/ef94b0561d5afb9b50b905fa5cd3f94e965c69c0/template/README.md#adding-custom-environment-variables) to your application. ([@eliperelman](https://github.com/eliperelman) in [#342](https://github.com/facebook/create-react-app/pull/342)) -* You can now [use `async` and `await`](https://ponyfoo.com/articles/understanding-javascript-async-await) syntax. ([@gaearon](https://github.com/gaearon) in [#327](https://github.com/facebook/create-react-app/pull/327), [@fson](https://github.com/fson) in [#332](https://github.com/facebook/create-react-app/pull/332)) -* Paths with period in them now load successfully on the development server. ([@mxstbr](https://github.com/mxstbr) in [#422](https://github.com/facebook/create-react-app/pull/422)) -* Images with `.webp` extension are now supported. ([@gafemoyano](https://github.com/gafemoyano) in [#458](https://github.com/facebook/create-react-app/pull/458)) -* The most recent version of React is now added to `package.json`. ([@wdhorton](https://github.com/wdhorton) in [#477](https://github.com/facebook/create-react-app/pull/477)) -* Babel configuration is simplified. ([@kripod](https://github.com/kripod) in [#490](https://github.com/facebook/create-react-app/pull/490)) +- You can now [proxy requests to an API server](https://github.com/facebook/create-react-app/blob/ef94b0561d5afb9b50b905fa5cd3f94e965c69c0/template/README.md#proxying-api-requests-in-development) without worrying about CORS. ([@gaearon](https://github.com/gaearon) in [#282](https://github.com/facebook/create-react-app/pull/282)) +- You can now [pass custom environment variables](https://github.com/facebook/create-react-app/blob/ef94b0561d5afb9b50b905fa5cd3f94e965c69c0/template/README.md#adding-custom-environment-variables) to your application. ([@eliperelman](https://github.com/eliperelman) in [#342](https://github.com/facebook/create-react-app/pull/342)) +- You can now [use `async` and `await`](https://ponyfoo.com/articles/understanding-javascript-async-await) syntax. ([@gaearon](https://github.com/gaearon) in [#327](https://github.com/facebook/create-react-app/pull/327), [@fson](https://github.com/fson) in [#332](https://github.com/facebook/create-react-app/pull/332)) +- Paths with period in them now load successfully on the development server. ([@mxstbr](https://github.com/mxstbr) in [#422](https://github.com/facebook/create-react-app/pull/422)) +- Images with `.webp` extension are now supported. ([@gafemoyano](https://github.com/gafemoyano) in [#458](https://github.com/facebook/create-react-app/pull/458)) +- The most recent version of React is now added to `package.json`. ([@wdhorton](https://github.com/wdhorton) in [#477](https://github.com/facebook/create-react-app/pull/477)) +- Babel configuration is simplified. ([@kripod](https://github.com/kripod) in [#490](https://github.com/facebook/create-react-app/pull/490)) ### Migrating from 0.2.2 to 0.2.3 @@ -1294,15 +1355,15 @@ Newly created projects will use `0.2.3` automatically. You **don’t** need to u ### Build Dependency (`react-scripts`) -* When the bundle size changes, we now display the difference after build. ([@elijahmanor](https://github.com/elijahmanor) in [#340](https://github.com/facebook/create-react-app/pull/340)) -* `npm install`ing a missing dependency now forces a rebuild. ([@gaearon](https://github.com/gaearon) in [#349](https://github.com/facebook/create-react-app/pull/349)) -* Autoprefixer config now includes more commonly supported browsers. ([@kripod](https://github.com/kripod) in [#345](https://github.com/facebook/create-react-app/pull/345)) -* All the configuration is now documented inline so ejecting doesn’t leave you in the dark. ([@gaearon](https://github.com/gaearon) in [#362](https://github.com/facebook/create-react-app/pull/362)) -* `Object.assign()` polyfill is now bundled by default. ([@gaearon](https://github.com/gaearon) in [#399](https://github.com/facebook/create-react-app/pull/399)) -* [React Native Web](https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/) now works out of the box. ([@grigio](https://github.com/grigio) in [#407](https://github.com/facebook/create-react-app/pull/407)) -* Same asset filenames in different folders don’t confuse the server now. ([@arunoda](https://github.com/arunoda) in [#446](https://github.com/facebook/create-react-app/pull/446)) -* The `otf` font format is now supported. ([@A-gambit](https://github.com/A-gambit) in [#434](https://github.com/facebook/create-react-app/pull/434)) -* The `new-cap` linting rule has been disabled thanks to feedback from Immutable.js users. ([@rricard](https://github.com/rricard) in [#470](https://github.com/facebook/create-react-app/pull/470)) +- When the bundle size changes, we now display the difference after build. ([@elijahmanor](https://github.com/elijahmanor) in [#340](https://github.com/facebook/create-react-app/pull/340)) +- `npm install`ing a missing dependency now forces a rebuild. ([@gaearon](https://github.com/gaearon) in [#349](https://github.com/facebook/create-react-app/pull/349)) +- Autoprefixer config now includes more commonly supported browsers. ([@kripod](https://github.com/kripod) in [#345](https://github.com/facebook/create-react-app/pull/345)) +- All the configuration is now documented inline so ejecting doesn’t leave you in the dark. ([@gaearon](https://github.com/gaearon) in [#362](https://github.com/facebook/create-react-app/pull/362)) +- `Object.assign()` polyfill is now bundled by default. ([@gaearon](https://github.com/gaearon) in [#399](https://github.com/facebook/create-react-app/pull/399)) +- [React Native Web](https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/) now works out of the box. ([@grigio](https://github.com/grigio) in [#407](https://github.com/facebook/create-react-app/pull/407)) +- Same asset filenames in different folders don’t confuse the server now. ([@arunoda](https://github.com/arunoda) in [#446](https://github.com/facebook/create-react-app/pull/446)) +- The `otf` font format is now supported. ([@A-gambit](https://github.com/A-gambit) in [#434](https://github.com/facebook/create-react-app/pull/434)) +- The `new-cap` linting rule has been disabled thanks to feedback from Immutable.js users. ([@rricard](https://github.com/rricard) in [#470](https://github.com/facebook/create-react-app/pull/470)) ### Migrating from 0.2.1 to 0.2.2 @@ -1314,12 +1375,12 @@ Newly created projects will use `0.2.2` automatically. You **don’t** need to u ### Build Dependency (`react-scripts`) -* Fixes an issue with `npm start` taking a very long time on OS X with Firewall enabled ([@gaearon](https://github.com/gaearon) in [#319](https://github.com/facebook/create-react-app/pull/319)) -* Fixes an issue with webpack eating a lot of CPU in some cases ([@dceddia](https://github.com/dceddia) in [#294](https://github.com/facebook/create-react-app/pull/294)) -* We now warn if you import a file with mismatched casing because this breaks the watcher ([@alexzherdev](https://github.com/alexzherdev) in [#266](https://github.com/facebook/create-react-app/pull/266)) -* CSS files specifying `?v=` after asset filenames, such as Font Awesome, now works correctly ([@alexzherdev](https://github.com/alexzherdev) in [#298](https://github.com/facebook/create-react-app/pull/298)) -* Issues with `npm link`ing `react-scripts` have been fixed ([@dallonf](https://github.com/dallonf) in [#277](https://github.com/facebook/create-react-app/pull/277)) -* We now use `/static` prefix for assets both in development and production ([@gaearon](https://github.com/gaearon) in [#278](https://github.com/facebook/create-react-app/pull/278)) +- Fixes an issue with `npm start` taking a very long time on OS X with Firewall enabled ([@gaearon](https://github.com/gaearon) in [#319](https://github.com/facebook/create-react-app/pull/319)) +- Fixes an issue with webpack eating a lot of CPU in some cases ([@dceddia](https://github.com/dceddia) in [#294](https://github.com/facebook/create-react-app/pull/294)) +- We now warn if you import a file with mismatched casing because this breaks the watcher ([@alexzherdev](https://github.com/alexzherdev) in [#266](https://github.com/facebook/create-react-app/pull/266)) +- CSS files specifying `?v=` after asset filenames, such as Font Awesome, now works correctly ([@alexzherdev](https://github.com/alexzherdev) in [#298](https://github.com/facebook/create-react-app/pull/298)) +- Issues with `npm link`ing `react-scripts` have been fixed ([@dallonf](https://github.com/dallonf) in [#277](https://github.com/facebook/create-react-app/pull/277)) +- We now use `/static` prefix for assets both in development and production ([@gaearon](https://github.com/gaearon) in [#278](https://github.com/facebook/create-react-app/pull/278)) ### Migrating from 0.2.0 to 0.2.1 @@ -1331,27 +1392,27 @@ Newly created projects will use `0.2.1` automatically. You **don’t** need to u ### Build Dependency (`react-scripts`) -* You can now enable deployment to GitHub Pages by adding `homepage` field to `package.json` ([@dhruska](https://github.com/dhruska) in [#94](https://github.com/facebook/create-react-app/pull/94)) -* Development server now runs on `0.0.0.0` and works with VirtualBox ([@JWo1F](https://github.com/JWo1F) in [#128](https://github.com/facebook/create-react-app/pull/128)) -* Cloud9 and Nitrous online IDEs are now supported ([@gaearon](http://github.com/gaearon) in [2fe84e](https://github.com/facebook/create-react-app/commit/2fe84ecded55f1d5258d91f9c2c07698ae0d2fb4)) -* When `3000` port is taken, we offer to use another port ([@chocnut](https://github.com/chocnut) in [#101](https://github.com/facebook/create-react-app/pull/101), [2edf21](https://github.com/facebook/create-react-app/commit/2edf2180f2aa6bf647807d0b1fcd95f4cfe4a558)) -* You can now `import` CSS files from npm modules ([@glennreyes](https://github.com/glennreyes) in [#105](https://github.com/facebook/create-react-app/pull/105), [@breaddevil](https://github.com/breaddevil) in [#178](https://github.com/facebook/create-react-app/pull/178)) -* `fetch` and `Promise` polyfills are now always included ([@gaearon](https://github.com/gaearon) in [#235](https://github.com/facebook/create-react-app/pull/235)) -* Regenerator runtime is now included if you use ES6 generators ([@gaearon](https://github.com/gaearon) in [#238](https://github.com/facebook/create-react-app/pull/238)) -* Generated project now contains `.gitignore` ([@npverni](https://github.com/npverni) in [#79](https://github.com/facebook/create-react-app/pull/79), [@chibicode](https://github.com/chibicode) in [#112](https://github.com/facebook/create-react-app/pull/112)) -* ESLint config is now more compatible with Flow ([@gaearon](https://github.com/gaearon) in [#261](https://github.com/facebook/create-react-app/pull/261)) -* A stylistic lint rule about method naming has been removed ([@mxstbr](https://github.com/mxstbr) in [#152](https://github.com/facebook/create-react-app/pull/157)) -* A few unobtrusive accessibility lint rules have been added ([@evcohen](https://github.com/evcohen) in [#175](https://github.com/facebook/create-react-app/pull/175)) -* A `.babelrc` in parent directory no longer causes an error ([@alexzherdev](https://github.com/alexzherdev) in [#236](https://github.com/facebook/create-react-app/pull/236)) -* Files with `.json` extension are now discovered ([@gaearon](https://github.com/gaearon) in [a11d6a](https://github.com/facebook/create-react-app/commit/a11d6a398f487f9163880dd34667b1d3e14b147a)) -* Bug fixes from transitive dependencies are included ([#126](https://github.com/facebook/create-react-app/issues/126)) -* Linting now works with IDEs if you follow [these](https://github.com/facebook/create-react-app/blob/master/template/README.md#display-lint-output-in-the-editor) instructions ([@keyanzhang](https://github.com/keyanzhang) in [#149](https://github.com/facebook/create-react-app/pull/149)) -* After building, we now print gzipped bundle size ([@lvwrence](https://github.com/lvwrence) in [#229](https://github.com/facebook/create-react-app/pull/229)) +- You can now enable deployment to GitHub Pages by adding `homepage` field to `package.json` ([@dhruska](https://github.com/dhruska) in [#94](https://github.com/facebook/create-react-app/pull/94)) +- Development server now runs on `0.0.0.0` and works with VirtualBox ([@JWo1F](https://github.com/JWo1F) in [#128](https://github.com/facebook/create-react-app/pull/128)) +- Cloud9 and Nitrous online IDEs are now supported ([@gaearon](http://github.com/gaearon) in [2fe84e](https://github.com/facebook/create-react-app/commit/2fe84ecded55f1d5258d91f9c2c07698ae0d2fb4)) +- When `3000` port is taken, we offer to use another port ([@chocnut](https://github.com/chocnut) in [#101](https://github.com/facebook/create-react-app/pull/101), [2edf21](https://github.com/facebook/create-react-app/commit/2edf2180f2aa6bf647807d0b1fcd95f4cfe4a558)) +- You can now `import` CSS files from npm modules ([@glennreyes](https://github.com/glennreyes) in [#105](https://github.com/facebook/create-react-app/pull/105), [@breaddevil](https://github.com/breaddevil) in [#178](https://github.com/facebook/create-react-app/pull/178)) +- `fetch` and `Promise` polyfills are now always included ([@gaearon](https://github.com/gaearon) in [#235](https://github.com/facebook/create-react-app/pull/235)) +- Regenerator runtime is now included if you use ES6 generators ([@gaearon](https://github.com/gaearon) in [#238](https://github.com/facebook/create-react-app/pull/238)) +- Generated project now contains `.gitignore` ([@npverni](https://github.com/npverni) in [#79](https://github.com/facebook/create-react-app/pull/79), [@chibicode](https://github.com/chibicode) in [#112](https://github.com/facebook/create-react-app/pull/112)) +- ESLint config is now more compatible with Flow ([@gaearon](https://github.com/gaearon) in [#261](https://github.com/facebook/create-react-app/pull/261)) +- A stylistic lint rule about method naming has been removed ([@mxstbr](https://github.com/mxstbr) in [#152](https://github.com/facebook/create-react-app/pull/157)) +- A few unobtrusive accessibility lint rules have been added ([@evcohen](https://github.com/evcohen) in [#175](https://github.com/facebook/create-react-app/pull/175)) +- A `.babelrc` in parent directory no longer causes an error ([@alexzherdev](https://github.com/alexzherdev) in [#236](https://github.com/facebook/create-react-app/pull/236)) +- Files with `.json` extension are now discovered ([@gaearon](https://github.com/gaearon) in [a11d6a](https://github.com/facebook/create-react-app/commit/a11d6a398f487f9163880dd34667b1d3e14b147a)) +- Bug fixes from transitive dependencies are included ([#126](https://github.com/facebook/create-react-app/issues/126)) +- Linting now works with IDEs if you follow [these](https://github.com/facebook/create-react-app/blob/master/template/README.md#display-lint-output-in-the-editor) instructions ([@keyanzhang](https://github.com/keyanzhang) in [#149](https://github.com/facebook/create-react-app/pull/149)) +- After building, we now print gzipped bundle size ([@lvwrence](https://github.com/lvwrence) in [#229](https://github.com/facebook/create-react-app/pull/229)) ### Global CLI (`create-react-app`) -* It enforces that you have Node >= 4 ([@conorhastings](https://github.com/conorhastings) in [#88](https://github.com/facebook/create-react-app/pull/88)) -* It handles `--version` flag correctly ([@mxstbr](https://github.com/mxstbr) in [#152](https://github.com/facebook/create-react-app/pull/152)) +- It enforces that you have Node >= 4 ([@conorhastings](https://github.com/conorhastings) in [#88](https://github.com/facebook/create-react-app/pull/88)) +- It handles `--version` flag correctly ([@mxstbr](https://github.com/mxstbr) in [#152](https://github.com/facebook/create-react-app/pull/152)) ### Migrating from 0.1.0 to 0.2.0 @@ -1371,4 +1432,4 @@ You may need to fix a few lint warnings about missing `
+
Create React apps with no build configuration.
- [Creating an App](#creating-an-app) – How to create a new app.
@@ -7,7 +9,7 @@ Create React apps with no build configuration.
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).
-If you have questions or need help, please ask in our [Spectrum](https://spectrum.chat/create-react-app) community. +If you have questions or need help, please ask in [GitHub Discussions](https://github.com/facebook/create-react-app/discussions). ## Quick Overview @@ -17,7 +19,7 @@ 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. +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` or `yarn global remove 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))_ @@ -86,6 +88,7 @@ my-app ├── index.js ├── logo.svg └── serviceWorker.js + └── setupTests.js ``` No configuration or complicated folder structures, only the files you need to build your app.
@@ -174,9 +177,9 @@ Here are a few common cases where you might want to try something else: - If you need to **publish a React component**, [nwb](https://github.com/insin/nwb) can [also do this](https://github.com/insin/nwb#react-components-and-libraries), as well as [Neutrino's react-components preset](https://neutrino.js.org/packages/react-components/). -- If you want to do **server rendering** with React and Node.js, check out [Next.js](https://github.com/zeit/next.js/) or [Razzle](https://github.com/jaredpalmer/razzle). Create React App is agnostic of the backend, and only produces static HTML/JS/CSS bundles. +- If you want to do **server rendering** with React and Node.js, check out [Next.js](https://nextjs.org/) or [Razzle](https://github.com/jaredpalmer/razzle). Create React App is agnostic of the backend, and only produces static HTML/JS/CSS bundles. -- If your website is **mostly static** (for example, a portfolio or a blog), consider using [Gatsby](https://www.gatsbyjs.org/) instead. Unlike Create React App, it pre-renders the website into HTML at the build time. +- If your website is **mostly static** (for example, a portfolio or a blog), consider using [Gatsby](https://www.gatsbyjs.org/) or [Next.js](https://nextjs.org/). Unlike Create React App, Gatsby pre-renders the website into HTML at build time. Next.js supports both server rendering and pre-rendering. - Finally, if you need **more customization**, check out [Neutrino](https://neutrino.js.org/) and its [React preset](https://neutrino.js.org/packages/react/). diff --git a/SECURITY.md b/SECURITY.md new file mode 100644 index 00000000000..1c4112b6d4c --- /dev/null +++ b/SECURITY.md @@ -0,0 +1,7 @@ +# Reporting Security Issues + +If you believe you have found a security vulnerability in Create React App, we encourage you to let us know right away. We will investigate all legitimate reports and do our best to quickly fix the problem. + +Please refer to the following page for our responsible disclosure policy, reward guidelines, and those things that should not be reported: + +https://www.facebook.com/whitehat diff --git a/azure-pipelines-test-job.yml b/azure-pipelines-test-job.yml index 7073bf3eab6..116d2f87e23 100644 --- a/azure-pipelines-test-job.yml +++ b/azure-pipelines-test-job.yml @@ -1,40 +1,38 @@ -# -# Azure Pipelines job for building and testing create-react-app on Linux, Windows, and macOS. -# - -parameters: - name: '' - testScript: '' - configurations: - LinuxNode8: { vmImage: 'ubuntu-16.04', nodeVersion: 8.x } - LinuxNode10: { vmImage: 'ubuntu-16.04', nodeVersion: 10.x } - # WindowsNode8: { vmImage: 'vs2017-win2016', nodeVersion: 8.x } - # WindowsNode10: { vmImage: 'vs2017-win2016', nodeVersion: 10.x } - -jobs: - - job: ${{ parameters.name }} - strategy: - matrix: - ${{ insert }}: ${{ parameters.configurations }} - pool: - vmImage: $(vmImage) - steps: - - script: | - git config --global core.autocrlf false - git config --global user.name "Create React App" - git config --global user.email "cra@email.com" - displayName: 'Initialize Git config' - - - checkout: self - path: create-react-app - - - task: NodeTool@0 - inputs: - versionSpec: $(nodeVersion) - displayName: 'Install Node.js' - - - script: yarn --frozen-lockfile - displayName: 'Run yarn' - - - bash: ${{ parameters.testScript }} - displayName: 'Run tests' +# +# Azure Pipelines job for building and testing create-react-app on Linux, Windows, and macOS. +# + +parameters: + name: '' + testScript: '' + configurations: + LinuxNode10: { vmImage: 'ubuntu-16.04', nodeVersion: 10.x } + LinuxNode12: { vmImage: 'ubuntu-16.04', nodeVersion: 12.x } + +jobs: + - job: ${{ parameters.name }} + strategy: + matrix: + ${{ insert }}: ${{ parameters.configurations }} + pool: + vmImage: $(vmImage) + steps: + - script: | + git config --global core.autocrlf false + git config --global user.name "Create React App" + git config --global user.email "cra@email.com" + displayName: 'Initialize Git config' + + - checkout: self + path: create-react-app + + - task: NodeTool@0 + inputs: + versionSpec: $(nodeVersion) + displayName: 'Install Node.js' + + - script: yarn --frozen-lockfile + displayName: 'Run yarn' + + - bash: ${{ parameters.testScript }} + displayName: 'Run tests' diff --git a/azure-pipelines.yml b/azure-pipelines.yml index 0260b309424..3c89363208b 100644 --- a/azure-pipelines.yml +++ b/azure-pipelines.yml @@ -1,92 +1,77 @@ -# -# Azure Pipelines configuration for building and testing create-react-app on Linux, Windows, and macOS. -# - -trigger: - - master - -variables: - CI: true - # Overrides the Yarn and NPM cache directories so they are on the same drive as the source. This helps improve build performance on Windows hosted agents. - YARN_CACHE_FOLDER: $(Build.SourcesDirectory)/../yarn-cache - NPM_CONFIG_CACHE: $(Build.SourcesDirectory)/../npm-cache - # Sets TEMP to be on the same drive as the cloned source on Windows. This avoids test scripts that "cd" into a directory under TEMP from failing because this directory is on a different drive from the current directory. - VSTS_OVERWRITE_TEMP: True - # Override Verdaccio package to use. This is temporary and is needed to avoid socket timeouts on hosted Windows agent (on Azure). This also changes Verdaccio to return a 503 (service unavailable) instead of a 404 (not found) when the connection to the uplink timesout. - VERDACCIO_PACKAGE: https://github.com/willsmythe/verdaccio/releases/download/create-react-app/verdaccio-4.0.0-alpha.8.tgz - CRA_INTERNAL_TEST: true - -# ****************************************************************************** -# Simple test suite -# ****************************************************************************** -jobs: - - template: azure-pipelines-test-job.yml - parameters: - name: Simple - testScript: tasks/e2e-simple.sh - - # ****************************************************************************** - # Installs test suite - # ****************************************************************************** - - template: azure-pipelines-test-job.yml - parameters: - name: Installs - testScript: tasks/e2e-installs.sh - - # ****************************************************************************** - # Kitchensink test suite - # ****************************************************************************** - - template: azure-pipelines-test-job.yml - parameters: - name: Kitchensink - testScript: tasks/e2e-kitchensink.sh - - # ****************************************************************************** - # Kitchensink Eject test suite - # ****************************************************************************** - - template: azure-pipelines-test-job.yml - parameters: - name: KitchensinkEject - testScript: tasks/e2e-kitchensink-eject.sh - - # ****************************************************************************** - # Behavior test suite - # ****************************************************************************** - - template: azure-pipelines-test-job.yml - parameters: - name: Behavior - testScript: tasks/e2e-behavior.sh - configurations: - LinuxNode8: { vmImage: 'ubuntu-16.04', nodeVersion: 8.x } - LinuxNode10: { vmImage: 'ubuntu-16.04', nodeVersion: 10.x } - # WindowsNode8: { vmImage: 'vs2017-win2016', nodeVersion: 8.x } - # WindowsNode10: { vmImage: 'vs2017-win2016', nodeVersion: 10.x } - MacNode8: { vmImage: 'macOS-10.13', nodeVersion: 8.x } - MacNode10: { vmImage: 'macOS-10.13', nodeVersion: 10.x } - - # ****************************************************************************** - # Old Node test suite - # ****************************************************************************** - - job: OldNode - pool: - vmImage: ubuntu-16.04 - steps: - - task: NodeTool@0 - inputs: - versionSpec: 6.x - displayName: 'Install Node.js 6.x' - - bash: tasks/e2e-old-node.sh - displayName: 'Run tests' - # ****************************************************************************** - # Unsupported Node with TypeScript flag - # ****************************************************************************** - - job: UnsupportedNodeWithTypeScript - pool: - vmImage: ubuntu-16.04 - steps: - - task: NodeTool@0 - inputs: - versionSpec: 8.9.x - displayName: 'Install Node.js 8.9.x' - - bash: tasks/e2e-typescript-unsupported-node.sh - displayName: 'Run unsupported TypeScript test' +# +# Azure Pipelines configuration for building and testing create-react-app on Linux, Windows, and macOS. +# + +trigger: + - master + +variables: + CI: true + # Overrides the Yarn and NPM cache directories so they are on the same drive as the source. This helps improve build performance on Windows hosted agents. + YARN_CACHE_FOLDER: $(Build.SourcesDirectory)/../yarn-cache + NPM_CONFIG_CACHE: $(Build.SourcesDirectory)/../npm-cache + # Sets TEMP to be on the same drive as the cloned source on Windows. This avoids test scripts that "cd" into a directory under TEMP from failing because this directory is on a different drive from the current directory. + VSTS_OVERWRITE_TEMP: True + CRA_INTERNAL_TEST: true + +# ****************************************************************************** +# Simple test suite +# ****************************************************************************** +jobs: + - template: azure-pipelines-test-job.yml + parameters: + name: Simple + testScript: tasks/e2e-simple.sh + + # ****************************************************************************** + # Installs test suite + # ****************************************************************************** + - template: azure-pipelines-test-job.yml + parameters: + name: Installs + testScript: tasks/e2e-installs.sh + + # ****************************************************************************** + # Kitchensink test suite + # ****************************************************************************** + - template: azure-pipelines-test-job.yml + parameters: + name: Kitchensink + testScript: tasks/e2e-kitchensink.sh + + # ****************************************************************************** + # Kitchensink Eject test suite + # ****************************************************************************** + - template: azure-pipelines-test-job.yml + parameters: + name: KitchensinkEject + testScript: tasks/e2e-kitchensink-eject.sh + + # ****************************************************************************** + # Behavior test suite + # ****************************************************************************** + - template: azure-pipelines-test-job.yml + parameters: + name: Behavior + testScript: tasks/e2e-behavior.sh + configurations: + LinuxNode10: { vmImage: 'ubuntu-16.04', nodeVersion: 10.x } + LinuxNode12: { vmImage: 'ubuntu-16.04', nodeVersion: 12.x } + WindowsNode10: { vmImage: 'windows-2019', nodeVersion: 10.x } + WindowsNode12: { vmImage: 'windows-2019', nodeVersion: 12.x } + MacNode10: { vmImage: 'macOS-10.15', nodeVersion: 10.x } + MacNode12: { vmImage: 'macOS-10.15', nodeVersion: 12.x } + + # ****************************************************************************** + # Old Node test suite + # ****************************************************************************** + - job: OldNode + pool: + vmImage: ubuntu-latest + steps: + - task: NodeTool@0 + inputs: + versionSpec: 8.x + displayName: 'Install Node.js 8.x' + - bash: tasks/e2e-old-node.sh + displayName: 'Run tests' diff --git a/docusaurus/docs/adding-css-reset.md b/docusaurus/docs/adding-css-reset.md index 23821829c3e..c08567124af 100644 --- a/docusaurus/docs/adding-css-reset.md +++ b/docusaurus/docs/adding-css-reset.md @@ -16,6 +16,8 @@ To start using it, add `@import-normalize;` anywhere in your CSS file(s). You on /* rest of app styles */ ``` +> **Tip**: If you see an "_Unknown at rule @import-normalize css(unknownAtRules)_" warning in VSCode, change the `css.lint.unknownAtRules` setting to `ignore`. + You can control which parts of [normalize.css] to use via your project's [browserslist]. Results when [browserslist] is `last 3 versions`: diff --git a/docusaurus/docs/adding-custom-environment-variables.md b/docusaurus/docs/adding-custom-environment-variables.md index b604a10c810..48bfea2cf64 100644 --- a/docusaurus/docs/adding-custom-environment-variables.md +++ b/docusaurus/docs/adding-custom-environment-variables.md @@ -132,8 +132,8 @@ REACT_APP_NOT_SECRET_CODE=abcdef Files on the left have more priority than files on the right: -- `npm start`: `.env.development.local`, `.env.development`, `.env.local`, `.env` -- `npm run build`: `.env.production.local`, `.env.production`, `.env.local`, `.env` +- `npm start`: `.env.development.local`, `.env.local`, `.env.development`, `.env` +- `npm run build`: `.env.production.local`, `.env.local`, `.env.production`, `.env` - `npm test`: `.env.test.local`, `.env.test`, `.env` (note `.env.local` is missing) These variables will act as the defaults if the machine does not explicitly set them. diff --git a/docusaurus/docs/adding-typescript.md b/docusaurus/docs/adding-typescript.md index 40c9c2242a8..6f4c86c6cc7 100644 --- a/docusaurus/docs/adding-typescript.md +++ b/docusaurus/docs/adding-typescript.md @@ -19,11 +19,11 @@ npx create-react-app my-app --template typescript yarn create react-app my-app --template typescript ``` -> If you've previously installed `create-react-app` globally via `npm install -g create-react-app`, we recommend you uninstall the package using `npm uninstall -g create-react-app` to ensure that `npx` always uses the latest version. +> 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` or `yarn global remove create-react-app` to ensure that `npx` always uses the latest version. > > Global installs of `create-react-app` are no longer supported. -To add [TypeScript](https://www.typescriptlang.org/) to a Create React App project, first install it: +To add [TypeScript](https://www.typescriptlang.org/) to an existing Create React App project, first install it: ```sh npm install --save typescript @types/node @types/react @types/react-dom @types/jest @@ -47,7 +47,7 @@ You are not required to make a [`tsconfig.json` file](https://www.typescriptlang ## Troubleshooting -If your project is not created with TypeScript enabled, npx may be using a cached version of `create-react-app`. Remove previously installed versions with `npm uninstall -g create-react-app` (see [#6119](https://github.com/facebook/create-react-app/issues/6119#issuecomment-451614035)). +If your project is not created with TypeScript enabled, npx may be using a cached version of `create-react-app`. Remove previously installed versions with `npm uninstall -g create-react-app` or `yarn global remove create-react-app` (see [#6119](https://github.com/facebook/create-react-app/issues/6119#issuecomment-451614035)). 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. diff --git a/docusaurus/docs/advanced-configuration.md b/docusaurus/docs/advanced-configuration.md index bf7777a413b..6da2ad174e0 100644 --- a/docusaurus/docs/advanced-configuration.md +++ b/docusaurus/docs/advanced-configuration.md @@ -22,8 +22,7 @@ You can adjust various development and production settings by setting environmen | 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](
- -**If you skip it, your app will not deploy correctly.** - -Open your `package.json` and add a `homepage` field for your project: - -```json - "homepage": "https://myusername.github.io/my-app", -``` - -or for a GitHub user page: - -```json - "homepage": "https://myusername.github.io", -``` - -or for a custom domain page: - -```json - "homepage": "https://mywebsite.com", -``` - -Create React App uses the `homepage` field to determine the root URL in the built HTML file. - -### Step 2: Install `gh-pages` and add `deploy` to `scripts` in `package.json` - -Now, whenever you run `npm run build`, you will see a cheat sheet with instructions on how to deploy to GitHub Pages. - -To publish it at [https://myusername.github.io/my-app](https://myusername.github.io/my-app), run: - -```sh -npm install --save gh-pages -``` - -Alternatively you may use `yarn`: - -```sh -yarn add gh-pages -``` - -Add the following scripts in your `package.json`: - -```diff - "scripts": { -+ "predeploy": "npm run build", -+ "deploy": "gh-pages -d build", - "start": "react-scripts start", - "build": "react-scripts build", -``` - -The `predeploy` script will run automatically before `deploy` is run. - -If you are deploying to a GitHub user page instead of a project page you'll need to make one -additional modification: - -1. Tweak your `package.json` scripts to push deployments to **master**: - -```diff - "scripts": { - "predeploy": "npm run build", -- "deploy": "gh-pages -d build", -+ "deploy": "gh-pages -b master -d build", -``` - -### Step 3: Deploy the site by running `npm run deploy` - -Then run: - -```sh -npm run deploy -``` - -### Step 4: For a project page, ensure your project’s settings use `gh-pages` - -Finally, make sure **GitHub Pages** option in your GitHub project settings is set to use the `gh-pages` branch: - -
-
-### Step 5: Optionally, configure the domain
-
-You can configure a custom domain with GitHub Pages by adding a `CNAME` file to the `public/` folder.
-
-Your CNAME file should look like this:
-
-```
-mywebsite.com
-```
-
-### Notes on client-side routing
-
-GitHub Pages doesn’t support routers that use the HTML5 `pushState` history API under the hood (for example, React Router using `browserHistory`). This is because when there is a fresh page load for a url like `http://user.github.io/todomvc/todos/42`, where `/todos/42` is a frontend route, the GitHub Pages server returns 404 because it knows nothing of `/todos/42`. If you want to add a router to a project hosted on GitHub Pages, here are a couple of solutions:
-
-- You could switch from using HTML5 history API to routing with hashes. If you use React Router, you can switch to `hashHistory` for this effect, but the URL will be longer and more verbose (for example, `http://user.github.io/todomvc/#/todos/42?_k=yknaj`). [Read more](https://reacttraining.com/react-router/web/api/Router) about different history implementations in React Router.
-- Alternatively, you can use a trick to teach GitHub Pages to handle 404s by redirecting to your `index.html` page with a custom redirect parameter. You would need to add a `404.html` file with the redirection code to the `build` folder before deploying your project, and you’ll need to add code handling the redirect parameter to `index.html`. You can find a detailed explanation of this technique [in this guide](https://github.com/rafrex/spa-github-pages).
-
-### Troubleshooting
-
-#### "/dev/tty: No such a device or address"
-
-If, when deploying, you get `/dev/tty: No such a device or address` or a similar error, try the following:
-
-1. Create a new [Personal Access Token](https://github.com/settings/tokens)
-2. `git remote set-url origin https://+ +**If you skip it, your app will not deploy correctly.** + +Open your `package.json` and add a `homepage` field for your project: + +```json + "homepage": "https://myusername.github.io/my-app", +``` + +or for a GitHub user page: + +```json + "homepage": "https://myusername.github.io", +``` + +or for a custom domain page: + +```json + "homepage": "https://mywebsite.com", +``` + +Create React App uses the `homepage` field to determine the root URL in the built HTML file. + +### Step 2: Install `gh-pages` and add `deploy` to `scripts` in `package.json` + +Now, whenever you run `npm run build`, you will see a cheat sheet with instructions on how to deploy to GitHub Pages. + +To publish it at [https://myusername.github.io/my-app](https://myusername.github.io/my-app), run: + +```sh +npm install --save gh-pages +``` + +Alternatively you may use `yarn`: + +```sh +yarn add gh-pages +``` + +Add the following scripts in your `package.json`: + +```diff + "scripts": { ++ "predeploy": "npm run build", ++ "deploy": "gh-pages -d build", + "start": "react-scripts start", + "build": "react-scripts build", +``` + +The `predeploy` script will run automatically before `deploy` is run. + +If you are deploying to a GitHub user page instead of a project page you'll need to make one +additional modification: + +1. Tweak your `package.json` scripts to push deployments to **master**: + +```diff + "scripts": { + "predeploy": "npm run build", +- "deploy": "gh-pages -d build", ++ "deploy": "gh-pages -b master -d build", +``` + +### Step 3: Deploy the site by running `npm run deploy` + +Then run: + +```sh +npm run deploy +``` + +### Step 4: For a project page, ensure your project’s settings use `gh-pages` + +Finally, make sure **GitHub Pages** option in your GitHub project settings is set to use the `gh-pages` branch: + +
+
+### Step 5: Optionally, configure the domain
+
+You can configure a custom domain with GitHub Pages by adding a `CNAME` file to the `public/` folder.
+
+Your CNAME file should look like this:
+
+```
+mywebsite.com
+```
+
+### Notes on client-side routing
+
+GitHub Pages doesn’t support routers that use the HTML5 `pushState` history API under the hood (for example, React Router using `browserHistory`). This is because when there is a fresh page load for a url like `http://user.github.io/todomvc/todos/42`, where `/todos/42` is a frontend route, the GitHub Pages server returns 404 because it knows nothing of `/todos/42`. If you want to add a router to a project hosted on GitHub Pages, here are a couple of solutions:
+
+- You could switch from using HTML5 history API to routing with hashes. If you use React Router, you can switch to `hashHistory` for this effect, but the URL will be longer and more verbose (for example, `http://user.github.io/todomvc/#/todos/42?_k=yknaj`). [Read more](https://reacttraining.com/react-router/web/api/Router) about different history implementations in React Router.
+- Alternatively, you can use a trick to teach GitHub Pages to handle 404s by redirecting to your `index.html` page with a custom redirect parameter. You would need to add a `404.html` file with the redirection code to the `build` folder before deploying your project, and you’ll need to add code handling the redirect parameter to `index.html`. You can find a detailed explanation of this technique [in this guide](https://github.com/rafrex/spa-github-pages).
+
+### Troubleshooting
+
+#### "/dev/tty: No such a device or address"
+
+If, when deploying, you get `/dev/tty: No such a device or address` or a similar error, try the following:
+
+1. Create a new [Personal Access Token](https://github.com/settings/tokens)
+2. `git remote set-url origin https://