From 30f94392466de5251f0e0a7a8ec304774faac8bd Mon Sep 17 00:00:00 2001 From: Joe Haddad Date: Thu, 18 May 2017 20:15:08 -0400 Subject: [PATCH 01/10] Uncomment merged PRs --- README.md | 6 +--- packages/react-scripts/template/README.md | 38 +++++++---------------- 2 files changed, 13 insertions(+), 31 deletions(-) diff --git a/README.md b/README.md index e9658d8585c..892987c91e9 100644 --- a/README.md +++ b/README.md @@ -100,10 +100,8 @@ Builds the app for production to the `build` folder.
It correctly bundles React in production mode and optimizes the build for the best performance. The build is minified and the filenames include the hashes.
-Your app is ready to be deployed! - +Your ([progressive web](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#making-a-progressive-web-app)) app is ready to be deployed ## User Guide @@ -165,9 +163,7 @@ Please refer to the [User Guide](https://github.com/facebookincubator/create-rea * Import CSS and image files directly from JavaScript. * Autoprefixed CSS, so you don’t need `-webkit` or other prefixes. * A `build` script to bundle JS, CSS, and images for production, with sourcemaps. - **The feature set is intentionally limited**. It doesn’t support advanced features such as server rendering or CSS modules. The tool is also **non-configurable** because it is hard to provide a cohesive experience and easy updates across a set of tools when the user can tweak anything. diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index 50bbf7b694a..5dd2ffd0a8a 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -61,10 +61,8 @@ You can find the most recent version of this guide [here](https://github.com/fac - [Editor Integration](#editor-integration) - [Developing Components in Isolation](#developing-components-in-isolation) - [Making a Progressive Web App](#making-a-progressive-web-app) - - [Deployment](#deployment) - [Static Server](#static-server) - [Other Solutions](#other-solutions) @@ -212,7 +210,7 @@ To configure the syntax highlighting in your favorite text editor, head to the [ ## Displaying Lint Output in the Editor ->Note: this feature is available with `react-scripts@0.2.0` and higher. +>Note: this feature is available with `react-scripts@0.2.0` and higher. >It also only works with npm 3 or higher. Some editors, including Sublime Text, Atom, and Visual Studio Code, provide plugins for ESLint. @@ -446,7 +444,7 @@ Then we can change `start` and `build` scripts to include the CSS preprocessor c } ``` -Now running `npm start` and `npm run build` also builds Sass files. +Now running `npm start` and `npm run build` also builds Sass files. **Why `node-sass-chokidar`?** @@ -744,24 +742,23 @@ To define permanent environment variables, create a file called `.env` in the ro REACT_APP_SECRET_CODE=abcdef ``` - - These variables will act as the defaults if the machine does not explicitly set them.
Please refer to the [dotenv documentation](https://github.com/motdotla/dotenv) for more details. @@ -1218,15 +1215,11 @@ Learn more about React Storybook: ## Making a Progressive Web App -You can turn your React app into a [Progressive Web App](https://developers.google.com/web/progressive-web-apps/) by following the steps in [this repository](https://github.com/jeffposnick/create-react-pwa). - - - ## Deployment `npm run build` creates a `build` directory with a production build of your app. Set up your favourite 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. @@ -1392,9 +1382,6 @@ It will get copied to the `build` folder when you run `npm run build`. Now requests to `/todos/42` will be handled correctly both in development and in production. - ### Building for Relative Paths @@ -1675,7 +1661,7 @@ You can adjust various development and production settings by setting environmen Variable | Development | Production | Usage :--- | :---: | :---: | :--- -BROWSER | :white_check_mark: | :x: | By default, Create React App will open the default system browser, favoring Chrome on macOS. Specify a [browser](https://github.com/sindresorhus/opn#app) to override this behavior, or set it to `none` to disable it completely. +BROWSER | :white_check_mark: | :x: | By default, Create React App will open the default system browser, favoring Chrome on macOS. Specify a [browser](https://github.com/sindresorhus/opn#app) to override this behavior, or set it to `none` to disable it completely. If you need to customize the way the browser is launched, you can specify a node script instead. Any arguments passed to `npm start` will also be passed to this script, and the url where your app is served will be the last argument. Your script's file name must have the `.js` extension. HOST | :white_check_mark: | :x: | By default, the development web server binds to `localhost`. You may use this variable to specify a different host. PORT | :white_check_mark: | :x: | 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 | :white_check_mark: | :x: | When set to `true`, Create React App will run the development server in `https` mode. From 25b4ba2c4faa031aef241361dcaf821a35797819 Mon Sep 17 00:00:00 2001 From: Joe Haddad Date: Thu, 18 May 2017 20:16:49 -0400 Subject: [PATCH 02/10] Switch to br --- packages/react-scripts/template/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index 5dd2ffd0a8a..ed4ee6b0d33 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -210,7 +210,7 @@ To configure the syntax highlighting in your favorite text editor, head to the [ ## Displaying Lint Output in the Editor ->Note: this feature is available with `react-scripts@0.2.0` and higher. +>Note: this feature is available with `react-scripts@0.2.0` and higher.
>It also only works with npm 3 or higher. Some editors, including Sublime Text, Atom, and Visual Studio Code, provide plugins for ESLint. From e72d7d0c857f17698862baaccd39260009685905 Mon Sep 17 00:00:00 2001 From: Joe Haddad Date: Thu, 18 May 2017 20:41:19 -0400 Subject: [PATCH 03/10] Update some webpack links --- packages/react-scripts/template/README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index ed4ee6b0d33..f5e391f0533 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -329,7 +329,7 @@ Learn more about ES6 modules: ## Adding a Stylesheet -This project setup uses [Webpack](https://webpack.github.io/) 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` @@ -1677,7 +1677,7 @@ If this doesn’t happen, try one of the following workarounds: * 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/facebookincubator/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 [“Working with editors supporting safe write”](https://webpack.github.io/docs/webpack-dev-server.html#working-with-editors-ides-supporting-safe-write). +* 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). * 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, 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. From 9e53860e4623dea26e7a9b63539ad6b0447e5b43 Mon Sep 17 00:00:00 2001 From: Joe Haddad Date: Thu, 18 May 2017 21:11:27 -0400 Subject: [PATCH 04/10] Add a little about section for PWA --- packages/react-scripts/template/README.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index f5e391f0533..b6dd6868b0d 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -1218,6 +1218,12 @@ Learn more about React Storybook: By default, the production build is a fully functional, offline-first [Progressive Web App](https://developers.google.com/web/progressive-web-apps/). +Progressive Web Apps are faster and more reliable than traditional web pages, and provide an engaging mobile experience: + + * All static site assets are cached so that your page loads fast, 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 users home screen, app icon and all. You can also re-engage users using web **push notifications**. This eliminates the need for the app store. + The [`sw-precache-webpack-plugin`](https://github.com/goldhand/sw-precache-webpack-plugin) is integrated into production configuration, and it will take care of generating a service worker file that will automatically From d9c58fca2e9c10e65e3b569fc210a27ae36f27b5 Mon Sep 17 00:00:00 2001 From: Joe Haddad Date: Thu, 18 May 2017 21:12:49 -0400 Subject: [PATCH 05/10] oops --- packages/react-scripts/template/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index b6dd6868b0d..5e49240b294 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -1222,7 +1222,7 @@ Progressive Web Apps are faster and more reliable than traditional web pages, an * All static site assets are cached so that your page loads fast, 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 users home screen, app icon and all. You can also re-engage users using web **push notifications**. This eliminates the need for the app store. + * On mobile devices, your app can be added directly to the user's home screen, app icon and all. You can also re-engage users using web **push notifications**. This eliminates the need for the app store. The [`sw-precache-webpack-plugin`](https://github.com/goldhand/sw-precache-webpack-plugin) is integrated into production configuration, From d92faead91f49e4c88ab8bb283d6edf0b9d3b26a Mon Sep 17 00:00:00 2001 From: Joe Haddad Date: Thu, 18 May 2017 21:16:55 -0400 Subject: [PATCH 06/10] fast on subsequent visits --- packages/react-scripts/template/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index 5e49240b294..97ac5bd390a 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -1220,7 +1220,7 @@ By default, the production build is a fully functional, offline-first Progressive Web Apps are faster and more reliable than traditional web pages, and provide an engaging mobile experience: - * All static site assets are cached so that your page loads fast, regardless of network connectivity (such as 2G or 3G). Updates are downloaded in the background. + * 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. You can also re-engage users using web **push notifications**. This eliminates the need for the app store. From 8b234bd2e362d7516232ecdb5a951cbdceecf6d7 Mon Sep 17 00:00:00 2001 From: Joe Haddad Date: Thu, 18 May 2017 21:35:45 -0400 Subject: [PATCH 07/10] Add manual proxy config instructions --- packages/react-scripts/template/README.md | 59 +++++++++++++++++++++++ 1 file changed, 59 insertions(+) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index 97ac5bd390a..5e232e863bb 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -830,9 +830,68 @@ Keep in mind that `proxy` only has effect in development (with `npm start`), and The `proxy` option supports HTTP, HTTPS and WebSocket connections.
If the `proxy` option is **not** flexible enough for you, alternatively you can: +* [Configure the proxy yourself](#configuring-the-proxy-manually) * Enable CORS on your server ([here’s how to do it for Express](http://enable-cors.org/server_expressjs.html)). * Use [environment variables](#adding-custom-environment-variables) to inject the right server host and port into your app. +#### Configuring the Proxy Manually + +>Note: this feature is available with `react-scripts@1.0.0` and higher. + +If the `proxy` option is **not** flexible enough for you, you can specify an object in the following form.
+You may also specify any configuration value [supported by `http-proxy-middleware`](https://github.com/chimurai/http-proxy-middleware#options) and [`http-proxy`](https://github.com/nodejitsu/node-http-proxy#options). +```json +{ + // ... + "proxy": { + "/api": { + "target": "", + "ws": true + // ... + } + } + // ... +} +``` + +All requests matching this path will be proxies, no exceptions. This includes requests for `text/html`, which the standard `proxy` option does not proxy. + +If you need to specify multiple proxies, you may do so by specifying additional entries. +You may also narrow down matches using `*` and/or `**`, to match the path exactly or any subpath. +```json +{ + // ... + "proxy": { + // Matches any request starting with /api + "/api": { + "target": "", + "ws": true + // ... + }, + // Matches any request starting with /foo + "/foo": { + "target": "", + "ssl": true, + "pathRewrite": { + "^/foo": "/foo/beta" + } + // ... + }, + // Matches /bar/abc.html but not /bar/sub/def.html + "/bar/*.html": { + "target": "", + // ... + }, + // Matches /bar/abc.html and /bar/sub/def.html + "/baz/**/*.html": { + "target": "" + // ... + } + } + // ... +} +``` + ## Using HTTPS in Development >Note: this feature is available with `react-scripts@0.4.0` and higher. From c7b3f86d3467567031c7a389e5418421dfdbbecb Mon Sep 17 00:00:00 2001 From: Joe Haddad Date: Thu, 18 May 2017 21:36:25 -0400 Subject: [PATCH 08/10] hint package.json --- packages/react-scripts/template/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index 5e232e863bb..f1c4d136fc4 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -838,7 +838,7 @@ If the `proxy` option is **not** flexible enough for you, alternatively you can: >Note: this feature is available with `react-scripts@1.0.0` and higher. -If the `proxy` option is **not** flexible enough for you, you can specify an object in the following form.
+If the `proxy` option is **not** flexible enough for you, you can also specify an object in the following form (in `package.json`).
You may also specify any configuration value [supported by `http-proxy-middleware`](https://github.com/chimurai/http-proxy-middleware#options) and [`http-proxy`](https://github.com/nodejitsu/node-http-proxy#options). ```json { From 54798c440ebfd56f2f57ff101b85219086bd3e25 Mon Sep 17 00:00:00 2001 From: Joe Haddad Date: Thu, 18 May 2017 21:38:21 -0400 Subject: [PATCH 09/10] Change to js for comments --- packages/react-scripts/template/README.md | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index f1c4d136fc4..a4bbece1fa7 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -41,6 +41,7 @@ You can find the most recent version of this guide [here](https://github.com/fac - [Node](#node) - [Ruby on Rails](#ruby-on-rails) - [Proxying API Requests in Development](#proxying-api-requests-in-development) + - [Configuring the Proxy Manually](#configuring-the-proxy-manually) - [Using HTTPS in Development](#using-https-in-development) - [Generating Dynamic `` Tags on the Server](#generating-dynamic-meta-tags-on-the-server) - [Pre-Rendering into Static HTML Files](#pre-rendering-into-static-html-files) @@ -834,13 +835,13 @@ If the `proxy` option is **not** flexible enough for you, alternatively you can: * Enable CORS on your server ([here’s how to do it for Express](http://enable-cors.org/server_expressjs.html)). * Use [environment variables](#adding-custom-environment-variables) to inject the right server host and port into your app. -#### Configuring the Proxy Manually +### Configuring the Proxy Manually >Note: this feature is available with `react-scripts@1.0.0` and higher. If the `proxy` option is **not** flexible enough for you, you can also specify an object in the following form (in `package.json`).
You may also specify any configuration value [supported by `http-proxy-middleware`](https://github.com/chimurai/http-proxy-middleware#options) and [`http-proxy`](https://github.com/nodejitsu/node-http-proxy#options). -```json +```js { // ... "proxy": { @@ -858,7 +859,7 @@ All requests matching this path will be proxies, no exceptions. This includes re If you need to specify multiple proxies, you may do so by specifying additional entries. You may also narrow down matches using `*` and/or `**`, to match the path exactly or any subpath. -```json +```js { // ... "proxy": { From 377432f95d120990e1477fcdd44624ecd188348f Mon Sep 17 00:00:00 2001 From: Joe Haddad Date: Thu, 18 May 2017 22:07:33 -0400 Subject: [PATCH 10/10] Tune wording --- packages/react-scripts/template/README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index a4bbece1fa7..a55f5876fe8 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -839,8 +839,8 @@ If the `proxy` option is **not** flexible enough for you, alternatively you can: >Note: this feature is available with `react-scripts@1.0.0` and higher. -If the `proxy` option is **not** flexible enough for you, you can also specify an object in the following form (in `package.json`).
-You may also specify any configuration value [supported by `http-proxy-middleware`](https://github.com/chimurai/http-proxy-middleware#options) and [`http-proxy`](https://github.com/nodejitsu/node-http-proxy#options). +If the `proxy` option is **not** flexible enough for you, you can specify an object in the following form (in `package.json`).
+You may also specify any configuration value [`http-proxy-middleware`](https://github.com/chimurai/http-proxy-middleware#options) or [`http-proxy`](https://github.com/nodejitsu/node-http-proxy#options) supports. ```js { // ...