From 2a8535b5d583660a7b7168f6dd2d37a4fd546ba8 Mon Sep 17 00:00:00 2001 From: Alexander James Phillips Date: Wed, 22 Feb 2017 18:37:18 +0000 Subject: [PATCH] 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 --- CHANGELOG.md | 4 ++-- CONTRIBUTING.md | 2 +- README.md | 2 +- packages/babel-preset-react-app/README.md | 2 +- packages/create-react-app/README.md | 2 +- packages/eslint-config-react-app/README.md | 2 +- packages/react-dev-utils/README.md | 20 ++++++++++---------- packages/react-scripts/README.md | 2 +- packages/react-scripts/template/README.md | 9 +++++---- template/README.md | 2 +- 10 files changed, 24 insertions(+), 23 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 5d4225d0755..3857dd1a915 100644 --- 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.
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.
If you use it, move it to `src` and add the following line to `` in your HTML: ```html diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index b6c4e69bbfd..3a6402606db 100644 --- 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.
Here’s a few examples of them in action. ### Convention diff --git a/README.md b/README.md index eafafb2aa57..14f0061f9bd 100644 --- 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.
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 index 5221c41af59..4dc9fb9b168 100644 --- 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).
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 index 062a320250d..c8fed06489f 100644 --- 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).
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 index 5c20f50ca2e..4d967afb806 100644 --- 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).
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 index 455996fcc59..2d430e2a299 100644 --- 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).
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`.
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 ` forces a project rebuild. -We’re not sure why this isn't Webpack's default behavior. +This Webpack plugin ensures `npm install ` forces a project rebuild.
+We’re not sure why this isn't Webpack's default behavior.
See [#186](https://github.com/facebookincubator/create-react-app/issues/186) for details. ```js @@ -83,8 +83,8 @@ module.exports = { #### `checkRequiredFiles(files: Array): boolean` -Makes sure that all passed files exist. -Filenames are expected to be absolute. +Makes sure that all passed files exist.
+Filenames are expected to be absolute.
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.
+On Mac OS X, attempts to reuse an existing Chrome tab via AppleScript.
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.
+If you mistype the answer, we'll always take it as a "no".
You can control the behavior on `` with `isYesDefault`. ```js diff --git a/packages/react-scripts/README.md b/packages/react-scripts/README.md index 845e546c67c..8004b887004 100644 --- 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).
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 index 6d237efd95a..f44cd23dd59 100644 --- 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.
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 index 8f918c1979f..32efd00ff82 100644 --- a/template/README.md +++ b/template/README.md @@ -1,4 +1,4 @@ -This page has moved! +This page has moved!
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!