-
-
Notifications
You must be signed in to change notification settings - Fork 26.8k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Enable 1.0 docs #2220
Merged
Merged
Enable 1.0 docs #2220
Changes from 5 commits
Commits
Show all changes
10 commits
Select commit
Hold shift + click to select a range
30f9439
Uncomment merged PRs
Timer 25b4ba2
Switch to br
Timer e72d7d0
Update some webpack links
Timer 9e53860
Add a little about section for PWA
Timer d9c58fc
oops
Timer d92faea
fast on subsequent visits
Timer 8b234bd
Add manual proxy config instructions
Timer c7b3f86
hint package.json
Timer 54798c4
Change to js for comments
Timer 377432f
Tune wording
Timer File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -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) | ||
<!-- todo: uncomment | ||
- [Offline-First Considerations](#offline-first-considerations) | ||
- [Progressive Web App Metadata](#progressive-web-app-metadata) | ||
--> | ||
- [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.<br> | ||
>It also only works with npm 3 or higher. | ||
|
||
Some editors, including Sublime Text, Atom, and Visual Studio Code, provide plugins for ESLint. | ||
|
@@ -331,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` | ||
|
||
|
@@ -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 | ||
``` | ||
|
||
<!-- | ||
TODO: uncomment (and tweak) the doc for 0.10 | ||
What .env* files are used? | ||
`.env` files **should be** checked into source control (with the exclusion of `.env*.local`). | ||
|
||
What other `.env` files are can be used? | ||
|
||
>Note: this feature is available with `react-scripts@1.0.0` and higher. | ||
|
||
* `.env` - Default | ||
* `.env.development`, `.env.test`, `.env.production` - Environment-specific settings. | ||
* `.env.local` - Local overrides. This file is loaded for all environments except test. | ||
* `.env.development.local`, `.env.test.local`, `.env.production.local` - Local overrides of environment-specific settings. | ||
|
||
Files priority (file is skipped if does not exist): | ||
File priority, from left to right: | ||
|
||
* npm test - `.env.test.local`, `env.test`, `.env.local`, `.env` | ||
* npm run build - `.env.production.local`, `env.production`, `.env.local`, `.env` | ||
* npm start - `.env.development.local`, `env.development`, `.env.local`, `.env` | ||
|
||
Priority from left to right. | ||
--> | ||
|
||
These variables will act as the defaults if the machine does not explicitly set them.<br> | ||
Please refer to the [dotenv documentation](https://github.com/motdotla/dotenv) for more details. | ||
|
||
|
@@ -1218,15 +1215,17 @@ 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). | ||
|
||
<!-- | ||
TODO: uncomment | ||
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. | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Maybe "fast on subsequent visits" |
||
* 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. | ||
|
||
The [`sw-precache-webpack-plugin`](https://github.com/goldhand/sw-precache-webpack-plugin) | ||
is integrated into [`webpack.config.prod.js`](../config/webpack.config.prod.js), | ||
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) | ||
|
@@ -1265,9 +1264,8 @@ changes you've made locally. | |
1. If you *need* to test your offline-first service worker locally, build | ||
the application (using `npm run build`) and run a simple http server from your | ||
build directory. After running the build script, `create-react-app` will give | ||
instructions for one way to test your production build locally using | ||
`pushstate-server` and the [deployment instructions](#deployment) have | ||
instructions for using the python `SimpleHTTPServer`. *Be sure to always use an | ||
instructions for one way to test your production build locally and the [deployment instructions](#deployment) have | ||
instructions for using other methods. *Be sure to always use an | ||
incognito window to avoid complications with your browser cache.* | ||
|
||
1. If possible,configure your production environment to serve the generated | ||
|
@@ -1315,8 +1313,6 @@ icons, names, and branding colors to use when the web app is displayed. | |
provides more context about what each field means, and how your customizations | ||
will affect your users' experience. | ||
|
||
--> | ||
|
||
## 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.<hash>.js` are served with the contents of the `/static/js/main.<hash>.js` file. | ||
|
@@ -1392,9 +1388,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. | ||
|
||
<!-- | ||
TODO: uncomment for 1.0 | ||
|
||
On a production build, and in a browser that supports [service workers](https://developers.google.com/web/fundamentals/getting-started/primers/service-workers), | ||
the service worker will automatically handle all navigation requests, like for | ||
`/todos/42`, by serving the cached copy of your `index.html`. This | ||
|
@@ -1403,7 +1396,6 @@ service worker navigation routing can be configured or disabled by | |
[`navigateFallback`](https://github.com/GoogleChrome/sw-precache#navigatefallback-string) | ||
and [`navigateFallbackWhitelist`](https://github.com/GoogleChrome/sw-precache#navigatefallbackwhitelist-arrayregexp) | ||
options of the `SWPreachePlugin` [configuration](../config/webpack.config.prod.js). | ||
--> | ||
|
||
### Building for Relative Paths | ||
|
||
|
@@ -1675,7 +1667,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. <!-- TODO: enable with 0.10: 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. --> | ||
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. | ||
|
@@ -1691,7 +1683,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. | ||
|
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We need an intro paragraph selling user on PWAs here. Can grab something from Google docs and rephrase.