Add note for using CHOKIDAR_USEPOLLING in virtual machines to enable …

…HMR (#1608) * Add note for using CHOKIDAR_USEPOLLING in virtual machines to enable HMR * Use br in react-scripts template README md * Use br in md for new line breaks * Update troubleshooting HMR to allow for VMs running Windows * Fix up the instructions
facebook · Feb 23, 2017 · bf0c02e · bf0c02e
1 parent 0a41334
commit bf0c02e
Show file tree

Hide file tree

Showing 10 changed files with 24 additions and 23 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -771,7 +771,7 @@ This ensures it become a part of the build output, and resolves correctly both w
 
 ## 0.4.3 (September 18, 2016)
 
-This is a hotfix release for a broken package.  
+This is a hotfix release for a broken package.<br>
 It contained no changes to the code.
 
 ### Build Dependency (`react-scripts`)
@@ -913,7 +913,7 @@ npm install --save-dev --save-exact react-scripts@0.3.0
 
 #### Breaking Change
 
-Now `favicon.ico` is not treated specially anymore.  
+Now `favicon.ico` is not treated specially anymore.<br>
 If you use it, move it to `src` and add the following line to `<head>` in your HTML:
 
 ```html

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -10,7 +10,7 @@ Following these guidelines helps to communicate that you respect the time of the
 
 As much as possible, we try to avoid adding configuration and flags. The purpose of this tool is to provide the best experience for people getting started with React, and this will always be our first priority. This means that sometimes we [sacrifice additional functionality](https://gettingreal.37signals.com/ch05_Half_Not_Half_Assed.php) (such as server rendering) because it is too hard to solve it in a way that wouldn’t require any configuration.
 
-We prefer **convention, heuristics, or interactivity** over configuration.  
+We prefer **convention, heuristics, or interactivity** over configuration.<br>
 Here’s a few examples of them in action.
 
 ### Convention

diff --git a/README.md b/README.md
@@ -5,7 +5,7 @@ Create React apps with no build configuration.
 * [Getting Started](#getting-started) – How to create a new app.
 * [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md) – How to develop apps bootstrapped with Create React App.
 
-Create React App works on macOS, Windows, and Linux.  
+Create React App works on macOS, Windows, and Linux.<br>
 If something doesn’t work please [file an issue](https://github.com/facebookincubator/create-react-app/issues/new).
 
 ## tl;dr

diff --git a/packages/babel-preset-react-app/README.md b/packages/babel-preset-react-app/README.md
@@ -1,6 +1,6 @@
 # babel-preset-react-app
 
-This package includes the Babel preset used by [Create React App](https://github.com/facebookincubator/create-react-app).  
+This package includes the Babel preset used by [Create React App](https://github.com/facebookincubator/create-react-app).<br>
 Please refer to its documentation:
 
 * [Getting Started](https://github.com/facebookincubator/create-react-app/blob/master/README.md#getting-started) – How to create a new app.

diff --git a/packages/create-react-app/README.md b/packages/create-react-app/README.md
@@ -1,6 +1,6 @@
 # create-react-app
 
-This package includes the global command for [Create React App](https://github.com/facebookincubator/create-react-app).  
+This package includes the global command for [Create React App](https://github.com/facebookincubator/create-react-app).<br>
 Please refer to its documentation:
 
 * [Getting Started](https://github.com/facebookincubator/create-react-app/blob/master/README.md#getting-started) – How to create a new app.

diff --git a/packages/eslint-config-react-app/README.md b/packages/eslint-config-react-app/README.md
@@ -1,6 +1,6 @@
 # eslint-config-react-app
 
-This package includes the shareable ESLint configuration used by [Create React App](https://github.com/facebookincubator/create-react-app).  
+This package includes the shareable ESLint configuration used by [Create React App](https://github.com/facebookincubator/create-react-app).<br>
 Please refer to its documentation:
 
 * [Getting Started](https://github.com/facebookincubator/create-react-app/blob/master/README.md#getting-started) – How to create a new app.

diff --git a/packages/react-dev-utils/README.md b/packages/react-dev-utils/README.md
@@ -1,6 +1,6 @@
 # react-dev-utils
 
-This package includes some utilities used by [Create React App](https://github.com/facebookincubator/create-react-app).  
+This package includes some utilities used by [Create React App](https://github.com/facebookincubator/create-react-app).<br>
 Please refer to its documentation:
 
 * [Getting Started](https://github.com/facebookincubator/create-react-app/blob/master/README.md#getting-started) – How to create a new app.
@@ -20,7 +20,7 @@ There is no single entry point. You can only import individual top-level modules
 
 #### `new InterpolateHtmlPlugin(replacements: {[key:string]: string})`
 
-This Webpack plugin lets us interpolate custom variables into `index.html`.  
+This Webpack plugin lets us interpolate custom variables into `index.html`.<br>
 It works in tandem with [HtmlWebpackPlugin](https://github.com/ampedandwired/html-webpack-plugin) 2.x via its [events](https://github.com/ampedandwired/html-webpack-plugin#events).
 
 ```js
@@ -58,8 +58,8 @@ module.exports = {
 
 #### `new WatchMissingNodeModulesPlugin(nodeModulesPath: string)`
 
-This Webpack plugin ensures `npm install <library>` forces a project rebuild.  
-We’re not sure why this isn't Webpack's default behavior.  
+This Webpack plugin ensures `npm install <library>` forces a project rebuild.<br>
+We’re not sure why this isn't Webpack's default behavior.<br>
 See [#186](https://github.com/facebookincubator/create-react-app/issues/186) for details.
 
 ```js
@@ -83,8 +83,8 @@ module.exports = {
 
 #### `checkRequiredFiles(files: Array<string>): boolean`
 
-Makes sure that all passed files exist.  
-Filenames are expected to be absolute.  
+Makes sure that all passed files exist.<br>
+Filenames are expected to be absolute.<br>
 If a file is not found, prints a warning message and returns `false`.
 
 ```js
@@ -161,8 +161,8 @@ getProcessForPort(3000);
 
 #### `openBrowser(url: string): boolean`
 
-Attempts to open the browser with a given URL.  
-On Mac OS X, attempts to reuse an existing Chrome tab via AppleScript.  
+Attempts to open the browser with a given URL.<br>
+On Mac OS X, attempts to reuse an existing Chrome tab via AppleScript.<br>
 Otherwise, falls back to [opn](https://github.com/sindresorhus/opn) behavior.
 
 
@@ -179,8 +179,8 @@ if (openBrowser('http://localhost:3000')) {
 
 This function displays a console prompt to the user.
 
-By convention, "no" should be the conservative choice.  
-If you mistype the answer, we'll always take it as a "no".  
+By convention, "no" should be the conservative choice.<br>
+If you mistype the answer, we'll always take it as a "no".<br>
 You can control the behavior on `<Enter>` with `isYesDefault`.
 
 ```js

diff --git a/packages/react-scripts/README.md b/packages/react-scripts/README.md
@@ -1,6 +1,6 @@
 # react-scripts
 
-This package includes scripts and configuration used by [Create React App](https://github.com/facebookincubator/create-react-app).  
+This package includes scripts and configuration used by [Create React App](https://github.com/facebookincubator/create-react-app).<br>
 Please refer to its documentation:
 
 * [Getting Started](https://github.com/facebookincubator/create-react-app/blob/master/README.md#getting-started) – How to create a new app.

diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md
@@ -175,7 +175,7 @@ You don’t have to ever use `eject`. The curated feature set is suitable for sm
 
 ## Supported Language Features and Polyfills
 
-This project supports a superset of the latest JavaScript standard.  
+This project supports a superset of the latest JavaScript standard.<br>
 In addition to [ES6](https://github.com/lukehoban/es6features) syntax features, it also supports:
 
 * [Exponentiation Operator](https://github.com/rwaldron/exponentiation-operator) (ES2016).
@@ -402,7 +402,7 @@ Then in `package.json`, add the following lines to `scripts`:
      "test": "react-scripts test --env=jsdom",
 ```
 
->Note: To use a different preprocessor, replace `build-css` and `watch-css` commands according to your preprocessor’s documentation. 
+>Note: To use a different preprocessor, replace `build-css` and `watch-css` commands according to your preprocessor’s documentation.
 
 Now you can rename `src/App.css` to `src/App.scss` and run `npm run watch-css`. The watcher will find every Sass file in `src` subdirectories, and create a corresponding CSS file next to it, in our case overwriting `src/App.css`. Since `src/App.js` still imports `src/App.css`, the styles become a part of your application. You can now edit `src/App.scss`, and `src/App.css` will be regenerated.
 
@@ -1355,10 +1355,10 @@ You can find instructions in [Deploying React with Zero Configuration](https://b
 
 Sometimes `npm run build` works locally but fails during deploy via Heroku with an error 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  
+MyDirectory in /tmp/build_1234/src
 ```
 
 This 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.
@@ -1452,6 +1452,7 @@ If this doesn’t happen, try one of the following workarounds:
 * 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 [“Working with editors supporting safe write”](https://webpack.github.io/docs/webpack-dev-server.html#working-with-editors-ides-supporting-safe-write).
 * 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://webpack.github.io/docs/troubleshooting.html#not-enough-watchers) to allow more watchers.
+* If the project runs inside a virtual machine such as (a Vagrant provisioned) VirtualBox, run `npm install --save-dev cross-env` in its root folder and then replace `"react-scripts start"` in the `scripts` section of its `package.json` with `"cross-env CHOKIDAR_USEPOLLING=true react-scripts start"`. 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/facebookincubator/create-react-app/issues/659).
 

diff --git a/template/README.md b/template/README.md
@@ -1,4 +1,4 @@
-This page has moved!  
+This page has moved!<br>
 Please update your link to point [here](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md) instead.
 
 Sorry for the inconvenience!