`](https://yarnpkg.com/lang/en/docs/cli/create/) is available in Yarn 0.25+_
It will create a directory called `my-app` inside the current folder.
Inside that directory, it will generate the initial project structure and install the transitive dependencies:
@@ -143,7 +145,7 @@ Please refer to the [User Guide](https://facebook.github.io/create-react-app/doc
## Philosophy
-- **One Dependency:** There is only one build dependency. It uses Webpack, Babel, ESLint, and other amazing projects, but provides a cohesive curated experience on top of them.
+- **One Dependency:** There is only one build dependency. It uses webpack, Babel, ESLint, and other amazing projects, but provides a cohesive curated experience on top of them.
- **No Configuration Required:** You don't need to configure anything. A reasonably good configuration of both development and production builds is handled for you so you can focus on writing code.
@@ -178,7 +180,7 @@ Here are a few common cases where you might want to try something else:
- If you want to **try React** without hundreds of transitive build tool dependencies, consider [using a single HTML file or an online sandbox instead](https://reactjs.org/docs/try-react.html).
-- If you need to **integrate React code with a server-side template framework** like Rails, Django or Symfony, or if you’re **not building a single-page app**, consider using [nwb](https://github.com/insin/nwb), or [Neutrino](https://neutrino.js.org/) which are more flexible. For Rails specifically, you can use [Rails Webpacker](https://github.com/rails/webpacker). For Symfony, try [Symfony's Webpack Encore](https://symfony.com/doc/current/frontend/encore/reactjs.html).
+- If you need to **integrate React code with a server-side template framework** like Rails, Django or Symfony, or if you’re **not building a single-page app**, consider using [nwb](https://github.com/insin/nwb), or [Neutrino](https://neutrino.js.org/) which are more flexible. For Rails specifically, you can use [Rails Webpacker](https://github.com/rails/webpacker). For Symfony, try [Symfony's webpack Encore](https://symfony.com/doc/current/frontend/encore/reactjs.html).
- If you need to **publish a React component**, [nwb](https://github.com/insin/nwb) can [also do this](https://github.com/insin/nwb#react-components-and-libraries), as well as [Neutrino's react-components preset](https://neutrino.js.org/packages/react-components/).
@@ -206,6 +208,8 @@ We'd love to have your helping hand on `create-react-app`! See [CONTRIBUTING.md]
This project exists thanks to all the people who [contribute](CONTRIBUTING.md).
+Thanks to [Netlify](https://www.netlify.com/) for hosting our documentation.
+
## Acknowledgements
We are grateful to the authors of existing related projects for their ideas and collaboration:
diff --git a/docusaurus/docs/adding-a-stylesheet.md b/docusaurus/docs/adding-a-stylesheet.md
index 2dc27b1e..f1dea111 100644
--- a/docusaurus/docs/adding-a-stylesheet.md
+++ b/docusaurus/docs/adding-a-stylesheet.md
@@ -4,7 +4,7 @@ title: Adding a Stylesheet
sidebar_label: Adding Stylesheets
---
-This project setup uses [Webpack](https://webpack.js.org/) for handling all assets. Webpack offers a custom way of “extending” the concept of `import` beyond JavaScript. To express that a JavaScript file depends on a CSS file, you need to **import the CSS from the JavaScript file**:
+This project setup uses [webpack](https://webpack.js.org/) for handling all assets. webpack offers a custom way of “extending” the concept of `import` beyond JavaScript. To express that a JavaScript file depends on a CSS file, you need to **import the CSS from the JavaScript file**:
## `Button.css`
@@ -18,7 +18,7 @@ This project setup uses [Webpack](https://webpack.js.org/) for handling all asse
```js
import React, { Component } from 'react';
-import './Button.css'; // Tell Webpack that Button.js uses these styles
+import './Button.css'; // Tell webpack that Button.js uses these styles
class Button extends Component {
render() {
@@ -28,8 +28,8 @@ class Button extends Component {
}
```
-**This is not required for React** but many people find this feature convenient. You can read about the benefits of this approach [here](https://medium.com/seek-blog/block-element-modifying-your-javascript-components-d7f99fcab52b). However you should be aware that this makes your code less portable to other build tools and environments than Webpack.
+**This is not required for React** but many people find this feature convenient. You can read about the benefits of this approach [here](https://medium.com/seek-blog/block-element-modifying-your-javascript-components-d7f99fcab52b). However you should be aware that this makes your code less portable to other build tools and environments than webpack.
In development, expressing dependencies this way allows your styles to be reloaded on the fly as you edit them. In production, all CSS files will be concatenated into a single minified `.css` file in the build output.
-If you are concerned about using Webpack-specific semantics, you can put all your CSS right into `src/index.css`. It would still be imported from `src/index.js`, but you could always remove that import if you later migrate to a different build tool.
+If you are concerned about using webpack-specific semantics, you can put all your CSS right into `src/index.css`. It would still be imported from `src/index.js`, but you could always remove that import if you later migrate to a different build tool.
diff --git a/docusaurus/docs/adding-images-fonts-and-files.md b/docusaurus/docs/adding-images-fonts-and-files.md
index 3489670e..67cc4b53 100644
--- a/docusaurus/docs/adding-images-fonts-and-files.md
+++ b/docusaurus/docs/adding-images-fonts-and-files.md
@@ -3,9 +3,9 @@ id: adding-images-fonts-and-files
title: Adding Images, Fonts, and Files
---
-With Webpack, using static assets like images and fonts works similarly to CSS.
+With webpack, using static assets like images and fonts works similarly to CSS.
-You can **`import` a file right in a JavaScript module**. This tells Webpack to include that file in the bundle. Unlike CSS imports, importing a file gives you a string value. This value is the final path you can reference in your code, e.g. as the `src` attribute of an image or the `href` of a link to a PDF.
+You can **`import` a file right in a JavaScript module**. This tells webpack to include that file in the bundle. Unlike CSS imports, importing a file gives you a string value. This value is the final path you can reference in your code, e.g. as the `src` attribute of an image or the `href` of a link to a PDF.
To reduce the number of requests to the server, importing images that are less than 10,000 bytes returns a [data URI](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs) instead of a path. This applies to the following file extensions: bmp, gif, jpg, jpeg, and png. SVG files are excluded due to [#1153](https://github.com/facebook/create-react-app/issues/1153). You can control the 10,000 byte threshold by setting the `IMAGE_INLINE_SIZE_LIMIT` environment variable as documented in our [advanced configuration](advanced-configuration.md).
@@ -13,7 +13,7 @@ Here is an example:
```js
import React from 'react';
-import logo from './logo.png'; // Tell Webpack this JS file uses this image
+import logo from './logo.png'; // Tell webpack this JS file uses this image
console.log(logo); // /logo.84287d09.png
@@ -25,7 +25,7 @@ function Header() {
export default Header;
```
-This ensures that when the project is built, Webpack will correctly move the images into the build folder, and provide us with correct paths.
+This ensures that when the project is built, webpack will correctly move the images into the build folder, and provide us with correct paths.
This works in CSS too:
@@ -35,9 +35,9 @@ This works in CSS too:
}
```
-Webpack finds all relative module references in CSS (they start with `./`) and replaces them with the final paths from the compiled bundle. If you make a typo or accidentally delete an important file, you will see a compilation error, like when you import a non-existent JavaScript module. The final filenames in the compiled bundle are generated by Webpack from content hashes. If the file content changes in the future, Webpack will give it a different name in production so you don’t need to worry about long-term caching of assets.
+webpack finds all relative module references in CSS (they start with `./`) and replaces them with the final paths from the compiled bundle. If you make a typo or accidentally delete an important file, you will see a compilation error, like when you import a non-existent JavaScript module. The final filenames in the compiled bundle are generated by webpack from content hashes. If the file content changes in the future, webpack will give it a different name in production so you don’t need to worry about long-term caching of assets.
-Please be advised that this is also a custom feature of Webpack.
+Please be advised that this is also a custom feature of webpack.
**It is not required for React** but many people enjoy it (and React Native uses a similar mechanism for images).
@@ -51,12 +51,15 @@ One way to add SVG files was described in the section above. You can also import
```js
import { ReactComponent as Logo } from './logo.svg';
-const App = () => (
-
- {/* Logo is an actual React component */}
-
-
-);
+
+function App() {
+ return (
+
+ {/* Logo is an actual React component */}
+
+
+ );
+}
```
This is handy if you don't want to load SVG as a separate file. Don't forget the curly braces in the import! The `ReactComponent` import name is significant and tells Create React App that you want a React component that renders an SVG, rather than its filename.
diff --git a/docusaurus/docs/advanced-configuration.md b/docusaurus/docs/advanced-configuration.md
index 871edd2f..bf7777a4 100644
--- a/docusaurus/docs/advanced-configuration.md
+++ b/docusaurus/docs/advanced-configuration.md
@@ -14,7 +14,10 @@ You can adjust various development and production settings by setting environmen
| HOST | ✅ Used | 🚫 Ignored | By default, the development web server binds to all hostnames on the device (`localhost`, LAN network address, etc.). You may use this variable to specify a different host. |
| PORT | ✅ Used | 🚫 Ignored | By default, the development web server will attempt to listen on port 3000 or prompt you to attempt the next available port. You may use this variable to specify a different port. |
| HTTPS | ✅ Used | 🚫 Ignored | When set to `true`, Create React App will run the development server in `https` mode. |
-| PUBLIC_URL | 🚫 Ignored | ✅ Used | Create React App assumes your application is hosted at the serving web server's root or a subpath as specified in [`package.json` (`homepage`)](deployment#building-for-relative-paths). Normally, Create React App ignores the hostname. You may use this variable to force assets to be referenced verbatim to the url you provide (hostname included). This may be particularly useful when using a CDN to host your application. |
+| WDS_SOCKET_HOST | ✅ Used | 🚫 Ignored | When set, Create React App will run the development server with a custom websocket hostname for hot module reloading. Normally, `webpack-dev-server` defaults to `window.location.hostname` for the SockJS hostname. You may use this variable to start local development on more than one Create React App project at a time. See [webpack-dev-server documentation](https://webpack.js.org/configuration/dev-server/#devserversockhost) for more details. |
+| WDS_SOCKET_PATH | ✅ Used | 🚫 Ignored | When set, Create React App will run the development server with a custom websocket path for hot module reloading. Normally, `webpack-dev-server` defaults to `/sockjs-node` for the SockJS pathname. You may use this variable to start local development on more than one Create React App project at a time. See [webpack-dev-server documentation](https://webpack.js.org/configuration/dev-server/#devserversockpath) for more details. |
+| WDS_SOCKET_PORT | ✅ Used | 🚫 Ignored | When set, Create React App will run the development server with a custom websocket port for hot module reloading. Normally, `webpack-dev-server` defaults to `window.location.port` for the SockJS port. You may use this variable to start local development on more than one Create React App project at a time. See [webpack-dev-server documentation](https://webpack.js.org/configuration/dev-server/#devserversockport) for more details. |
+| PUBLIC_URL | ✅ Used | ✅ Used | Create React App assumes your application is hosted at the serving web server's root or a subpath as specified in [`package.json` (`homepage`)](deployment#building-for-relative-paths). Normally, Create React App ignores the hostname. You may use this variable to force assets to be referenced verbatim to the url you provide (hostname included). This may be particularly useful when using a CDN to host your application. |
| CI | ✅ Used | ✅ Used | When set to `true`, Create React App treats warnings as failures in the build. It also makes the test runner non-watching. Most CIs set this flag by default. |
| REACT_EDITOR | ✅ Used | 🚫 Ignored | When an app crashes in development, you will see an error overlay with clickable stack trace. When you click on it, Create React App will try to determine the editor you are using based on currently running processes, and open the relevant source file. You can [send a pull request to detect your editor of choice](https://github.com/facebook/create-react-app/issues/2636). Setting this environment variable overrides the automatic detection. If you do it, make sure your systems [PATH]() environment variable points to your editor’s bin folder. You can also set it to `none` to disable it completely. |
| CHOKIDAR_USEPOLLING | ✅ Used | 🚫 Ignored | When set to `true`, the watcher runs in polling mode, as necessary inside a VM. Use this option if `npm start` isn't detecting changes. |
diff --git a/docusaurus/docs/available-scripts.md b/docusaurus/docs/available-scripts.md
index effdc2b7..808d3d92 100644
--- a/docusaurus/docs/available-scripts.md
+++ b/docusaurus/docs/available-scripts.md
@@ -30,7 +30,7 @@ Your app is ready to be deployed! See the section about [deployment](deployment.
If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
-Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc.) into your project as dependencies in `package.json`. Technically, the distinction between dependencies and development dependencies is pretty arbitrary for front-end apps that produce static bundles.
+Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc.) into your project as dependencies in `package.json`. Technically, the distinction between dependencies and development dependencies is pretty arbitrary for front-end apps that produce static bundles.
In addition, it used to cause problems with some hosting platforms that didn't install development dependencies (and thus weren't able to build the project on the server or test it right before deployment). You are free to rearrange your dependencies in `package.json` as you see fit.
diff --git a/docusaurus/docs/custom-templates.md b/docusaurus/docs/custom-templates.md
index 98acb9b1..4cf863e9 100644
--- a/docusaurus/docs/custom-templates.md
+++ b/docusaurus/docs/custom-templates.md
@@ -9,16 +9,10 @@ Custom Templates enable you to select a template to create your project from, wh
You'll notice that Custom Templates are always named in the format `cra-template-[template-name]`, however you only need to provide the `[template-name]` to the creation command.
-### npm
+Scoped templates are also supported, under the name `@[scope-name]/cra-template` or `@[scope-name]/cra-template-[template-name]`, which can be installed via `@[scope]` and `@[scope]/[template-name]` respectively.
```sh
-npm init react-app my-app --template [template-name]
-```
-
-### Yarn
-
-```sh
-yarn create react-app my-app --template [template-name]
+npx create-react-app my-app --template [template-name]
```
## Finding custom templates
@@ -50,6 +44,14 @@ my-app/
index.js (or index.tsx)
```
+### Testing a template
+
+To test a template locally, pass the file path to the directory of your template source using the `file:` prefix.
+
+```sh
+npx create-react-app my-app --template file:../path/to/your/template/cra-template-[template-name]
+```
+
### The `template` folder
This folder is copied to the user's app directory as Create React App installs. During this process, the file `gitignore` is renamed to `.gitignore`.
@@ -58,18 +60,31 @@ You can add whatever files you want in here, but you must have at least the file
### The `template.json` file
-This is where you can define dependencies (only dependencies are supported for now), as well as any custom scripts that your template relies on.
+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.
+
+Below is an example `template.json` file:
```json
{
- "dependencies": {
- "serve": "^11.2.0"
- },
- "scripts": {
- "serve": "serve -s build",
- "build-and-serve": "npm run build && npm run serve"
+ "package": {
+ "dependencies": {
+ "eslint-plugin-jsx-a11y": "^6.2.3",
+ "serve": "^11.2.0"
+ },
+ "scripts": {
+ "serve": "serve -s build",
+ "build-and-serve": "npm run build && npm run serve"
+ },
+ "eslintConfig": {
+ "extends": ["react-app", "plugin:jsx-a11y/recommended"],
+ "plugins": ["jsx-a11y"]
+ }
}
}
```
+Any values you add for `"dependencies"` and `"scripts"` will be merged with the Create React App defaults. Values for any other keys will be used as-is, replacing any matching Create React App defaults.
+
For convenience, we always replace `npm run` with `yarn` in your custom `"scripts"`, as well as in your `README` when projects are initialized with yarn.
diff --git a/docusaurus/docs/folder-structure.md b/docusaurus/docs/folder-structure.md
index 3701132d..f135b635 100644
--- a/docusaurus/docs/folder-structure.md
+++ b/docusaurus/docs/folder-structure.md
@@ -29,7 +29,7 @@ For the project to build, **these files must exist with exact filenames**:
You can delete or rename the other files.
-You may create subdirectories inside `src`. For faster rebuilds, only files inside `src` are processed by Webpack. You need to **put any JS and CSS files inside `src`**, otherwise Webpack won’t see them.
+You may create subdirectories inside `src`. For faster rebuilds, only files inside `src` are processed by webpack. You need to **put any JS and CSS files inside `src`**, otherwise webpack won’t see them.
Only files inside `public` can be used from `public/index.html`. Read instructions below for using assets from JavaScript and HTML.
diff --git a/docusaurus/docs/getting-started.md b/docusaurus/docs/getting-started.md
index 98484f9a..f2323611 100644
--- a/docusaurus/docs/getting-started.md
+++ b/docusaurus/docs/getting-started.md
@@ -28,7 +28,7 @@ When you’re ready to deploy to production, create a minified bundle with `npm
### Get Started Immediately
-You **don’t** need to install or configure tools like Webpack or Babel. They are preconfigured and hidden so that you can focus on the code.
+You **don’t** need to install or configure tools like webpack or Babel. They are preconfigured and hidden so that you can focus on the code.
Create a project, and you’re good to go.
@@ -147,7 +147,7 @@ The page will automatically reload if you make changes to the code. You will see
Runs the test watcher in an interactive mode. By default, runs tests related to files changed since the last commit.
-[Read more about testing](https://facebook.github.io/create-react-app/docs/running-tests).
+[Read more about testing](running-tests.md).
### `npm run build` or `yarn build`
diff --git a/docusaurus/docs/importing-a-component.md b/docusaurus/docs/importing-a-component.md
index 61fc9b0d..2f4a4c56 100644
--- a/docusaurus/docs/importing-a-component.md
+++ b/docusaurus/docs/importing-a-component.md
@@ -3,7 +3,7 @@ id: importing-a-component
title: Importing a Component
---
-This project setup supports ES6 modules thanks to Webpack.
+This project setup supports ES6 modules thanks to webpack.
While you can still use `require()` and `module.exports`, we encourage you to use [`import` and `export`](http://exploringjs.com/es6/ch_modules.html) instead.
diff --git a/docusaurus/docs/making-a-progressive-web-app.md b/docusaurus/docs/making-a-progressive-web-app.md
index e8e9c1bd..227b21eb 100644
--- a/docusaurus/docs/making-a-progressive-web-app.md
+++ b/docusaurus/docs/making-a-progressive-web-app.md
@@ -10,7 +10,7 @@ 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.
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/react-scripts/template/src/index.js) file:
+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
@@ -62,7 +62,7 @@ following into account:
fetched the latest updates that will be available the next time they load the
page (showing a "New content is available once existing tabs are closed." message). Showing
these messages is currently left as an exercise to the developer, but as a
- starting point, you can make use of the logic included in [`src/serviceWorker.js`](https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/src/serviceWorker.js), which
+ starting point, you can make use of the logic included in [`src/serviceWorker.js`](https://github.com/facebook/create-react-app/blob/master/packages/cra-template/template/src/serviceWorker.js), which
demonstrates which service worker lifecycle events to listen for to detect each
scenario, and which as a default, only logs appropriate messages to the
JavaScript console.
@@ -93,11 +93,11 @@ following into account:
## Progressive Web App Metadata
The default configuration includes a web app manifest located at
-[`public/manifest.json`](https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/public/manifest.json), that you can customize with
+[`public/manifest.json`](https://github.com/facebook/create-react-app/blob/master/packages/cra-template/template/public/manifest.json), that you can customize with
details specific to your web application.
When a user adds a web app to their homescreen using Chrome or Firefox on
-Android, the metadata in [`manifest.json`](https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/public/manifest.json) determines what
+Android, the metadata in [`manifest.json`](https://github.com/facebook/create-react-app/blob/master/packages/cra-template/template/public/manifest.json) determines what
icons, names, and branding colors to use when the web app is displayed.
[The Web App Manifest guide](https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/)
provides more context about what each field means, and how your customizations
diff --git a/docusaurus/docs/running-tests.md b/docusaurus/docs/running-tests.md
index f416b64d..7b81c1d2 100644
--- a/docusaurus/docs/running-tests.md
+++ b/docusaurus/docs/running-tests.md
@@ -245,12 +245,12 @@ const localStorageMock = {
global.localStorage = localStorageMock;
```
-> 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, so you should manually create the property `setupTestFrameworkScriptFile` in the configuration for Jest, something like the following:
+> 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, so you should manually create the property `setupFilesAfterEnv` in the configuration for Jest, something like the following:
> ```js
> "jest": {
> // ...
-> "setupTestFrameworkScriptFile": "/src/setupTests.js"
+> "setupFilesAfterEnv": ["/src/setupTests.js"]
> }
> ```
diff --git a/docusaurus/docs/setting-up-your-editor.md b/docusaurus/docs/setting-up-your-editor.md
index 95dbaa59..17c11255 100644
--- a/docusaurus/docs/setting-up-your-editor.md
+++ b/docusaurus/docs/setting-up-your-editor.md
@@ -22,21 +22,6 @@ Some editors, including Sublime Text, Atom, and Visual Studio Code, provide plug
They are not required for linting. You should see the linter output right in your terminal as well as the browser console. If you prefer the lint results to appear right in your editor, please make sure you install an ESLint plugin/extension.
-If you're using TypeScript and Visual Studio Code, the [ESLint Visual Studio Code extension](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint#overview) currently [doesn't have TypeScript support enabled by default](https://github.com/Microsoft/vscode-eslint/issues/609). To enable TypeScript support in the ESLint extension, add the following to your project's Visual Studio Code settings file, located at `.vscode/settings.json` (you can create this file if it doesn't already exist):
-
-```json
-{
- "eslint.validate": [
- "javascript",
- "javascriptreact",
- { "language": "typescript", "autoFix": true },
- { "language": "typescriptreact", "autoFix": true }
- ]
-}
-```
-
-Now your editor should report the linting warnings.
-
Note that even if you customise your ESLint config, these changes will **only affect the editor integration**. They won’t affect the terminal and in-browser lint output. This is because Create React App intentionally provides a minimal set of rules that find common mistakes.
If you want to enforce a coding style for your project, consider using [Prettier](https://github.com/jlongster/prettier) instead of ESLint style rules.
@@ -166,8 +151,7 @@ Next we add a 'lint-staged' field to the `package.json`, for example:
},
+ "lint-staged": {
+ "src/**/*.{js,jsx,ts,tsx,json,css,scss,md}": [
-+ "prettier --write",
-+ "git add"
++ "prettier --write"
+ ]
+ },
"scripts": {
diff --git a/docusaurus/docs/supported-browsers-features.md b/docusaurus/docs/supported-browsers-features.md
index b43648bb..6a7123de 100644
--- a/docusaurus/docs/supported-browsers-features.md
+++ b/docusaurus/docs/supported-browsers-features.md
@@ -50,6 +50,6 @@ Here is an example `browserslist` that is specified in `package.json`:
}
```
-> Note that this does not include polyfills automatically for you. You will still need to polyfill language features (see above) as needed based on the browsers your are supporting.
+> Note that this does not include polyfills automatically for you. You will still need to polyfill language features (see above) as needed based on the browsers you are supporting.
-> When editing the `browserslist` config, you may notice that your changes don't get picked up right away. This is due to an [issue in babel-loader](https://github.com/babel/babel-loader/issues/690) not detecting the change in your `package.json`. An quick solution is to delete the `node_modules/.cache` folder and try again.
+> When editing the `browserslist` config, you may notice that your changes don't get picked up right away. This is due to an [issue in babel-loader](https://github.com/babel/babel-loader/issues/690) not detecting the change in your `package.json`. A quick solution is to delete the `node_modules/.cache` folder and try again.
diff --git a/docusaurus/docs/troubleshooting.md b/docusaurus/docs/troubleshooting.md
index 38892e77..0d0b247b 100644
--- a/docusaurus/docs/troubleshooting.md
+++ b/docusaurus/docs/troubleshooting.md
@@ -12,14 +12,32 @@ If this doesn’t happen, try one of the following workarounds:
- Check that your file is imported by your entrypoint. TypeScript will show errors on any of your source files, but webpack only reloads your files if they are directly or indirectly imported by one of your entrypoints.
- If your project is in a Dropbox folder, try moving it out.
-- If the watcher doesn’t see a file called `index.js` and you’re referencing it by the folder name, you [need to restart the watcher](https://github.com/facebook/create-react-app/issues/1164) due to a Webpack bug.
+- If the watcher doesn’t see a file called `index.js` and you’re referencing it by the folder name, you [need to restart the watcher](https://github.com/facebook/create-react-app/issues/1164) due to a webpack bug.
- Some editors like Vim and IntelliJ have a “safe write” feature that currently breaks the watcher. You will need to disable it. Follow the instructions in [“Adjusting Your Text Editor”](https://webpack.js.org/guides/development/#adjusting-your-text-editor).
-- If your project path contains parentheses, try moving the project to a path without them. This is caused by a [Webpack watcher bug](https://github.com/webpack/watchpack/issues/42).
+- If your project path contains parentheses, try moving the project to a path without them. This is caused by a [webpack watcher bug](https://github.com/webpack/watchpack/issues/42).
- On Linux and macOS, you might need to [tweak system settings](https://github.com/webpack/docs/wiki/troubleshooting#not-enough-watchers) to allow more watchers.
- If the project runs inside a virtual machine such as (a Vagrant provisioned) VirtualBox, create an `.env` file in your project directory if it doesn’t exist, and add `CHOKIDAR_USEPOLLING=true` to it. This ensures that the next time you run `npm start`, the watcher uses the polling mode, as necessary inside a VM.
If none of these solutions help please leave a comment [in this thread](https://github.com/facebook/create-react-app/issues/659).
+## `npm start` fail due to watch error
+
+If you are using a Linux operating system and see an error similar to: `ENOSPC: System limit for number of file watchers reached`, you can fix the issue by increasing the `fs.inotify.max_user_watches` setting of your operating system.
+
+If you are running Debian, RedHat, or another similar Linux distribution, run the following in a terminal:
+
+```sh
+echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p
+```
+
+If you are running ArchLinux, run the following command instead:
+
+```sh
+echo fs.inotify.max_user_watches=524288 | sudo tee /etc/sysctl.d/40-max-user-watches.conf && sudo sysctl --system
+```
+
+Then paste it in your terminal and press on enter to run it. You could find more information [here](https://github.com/guard/listen/wiki/Increasing-the-amount-of-inotify-watchers#the-technical-details).
+
## `npm test` hangs or crashes on macOS Sierra
If you run `npm test` and the console gets stuck after printing `react-scripts test` to the console there might be a problem with your [Watchman](https://facebook.github.io/watchman/) installation as described in [facebook/create-react-app#713](https://github.com/facebook/create-react-app/issues/713).
diff --git a/docusaurus/docs/using-https-in-development.md b/docusaurus/docs/using-https-in-development.md
index 3541e356..edd66883 100644
--- a/docusaurus/docs/using-https-in-development.md
+++ b/docusaurus/docs/using-https-in-development.md
@@ -32,6 +32,18 @@ HTTPS=true npm start
Note that the server will use a self-signed certificate, so your web browser will almost definitely display a warning upon accessing the page.
+
+## Custom SSL certificate
+
+To set a custom certificate, set the `SSL_CRT_FILE` and `SSL_KEY_FILE` environment variables to the path of the certificate and key files in the same way you do for `HTTPS` above. Note that you will also need to set `HTTPS=true`.
+
+### Linux, macOS (Bash)
+
+```bash
+HTTPS=true SSL_CRT_FILE=cert.crt SSL_KEY_FILE=cert.key npm start
+```
+
+
To avoid having to set the environment variable each time, you can either include in the `npm start` script like so:
```json
@@ -42,3 +54,4 @@ To avoid having to set the environment variable each time, you can either includ
Or you can create a `.env` file with `HTTPS=true` set.
[Learn more about environment variables in CRA](https://create-react-app.dev/docs/adding-custom-environment-variables).
+
diff --git a/docusaurus/docs/using-the-public-folder.md b/docusaurus/docs/using-the-public-folder.md
index 378bdb60..b2b68743 100644
--- a/docusaurus/docs/using-the-public-folder.md
+++ b/docusaurus/docs/using-the-public-folder.md
@@ -24,7 +24,7 @@ This mechanism provides a number of benefits:
However there is an **escape hatch** that you can use to add an asset outside of the module system.
-If you put a file into the `public` folder, it will **not** be processed by Webpack. Instead it will be copied into the build folder untouched. To reference assets in the `public` folder, you need to use an environment variable called `PUBLIC_URL`.
+If you put a file into the `public` folder, it will **not** be processed by webpack. Instead it will be copied into the build folder untouched. To reference assets in the `public` folder, you need to use an environment variable called `PUBLIC_URL`.
Inside `index.html`, you can use it like this:
@@ -61,6 +61,6 @@ The `public` folder is useful as a workaround for a number of less common cases:
- You need a file with a specific name in the build output, such as [`manifest.webmanifest`](https://developer.mozilla.org/en-US/docs/Web/Manifest).
- You have thousands of images and need to dynamically reference their paths.
- You want to include a small script like [`pace.js`](https://github.hubspot.com/pace/docs/welcome/) outside of the bundled code.
-- Some library may be incompatible with Webpack and you have no other option but to include it as a `