diff --git a/.github/stale.yml b/.github/stale.yml index e9387e49029..b2c3bb27cda 100644 --- a/.github/stale.yml +++ b/.github/stale.yml @@ -9,8 +9,14 @@ daysUntilClose: 5 # Issues or Pull Requests with these labels will never be considered stale. Set to `[]` to disable exemptLabels: - - "issue: proposal" + - "contributions: claimed" + - "contributions: up for grabs!" + - "good first issue" - "issue: announcement" + - "issue: bug" + - "issue: proposal" + - "tag: bug fix" + - "tag: needs investigation" # Set to true to ignore issues in a project (defaults to false) exemptProjects: true diff --git a/.travis.yml b/.travis.yml index fe543211f32..fd0ba53313b 100644 --- a/.travis.yml +++ b/.travis.yml @@ -10,7 +10,7 @@ cache: directories: - .npm before_install: - - curl -o- -L https://yarnpkg.com/install.sh | bash -s -- --nightly + - curl -o- -L https://yarnpkg.com/install.sh | bash -s - export PATH="$HOME/.yarn/bin:$PATH" install: true script: diff --git a/CHANGELOG.md b/CHANGELOG.md index 7599943de0b..0449848a4fa 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,122 @@ +## 2.1.4 (February 10, 2019) + +v2.1.4 is a maintenance release that brings a number of awesome improvements. A few notable ones include: + +- :rocket: Reduced TypeScript rebuild times while running the development server. TypeScript is now blazing fast! Special thanks to [@deftomat](https://github.com/deftomat) and [@johnnyreilly](https://github.com/johnnyreilly) and the other contributors for their hard work on this. ([#5903](https://github.com/facebook/create-react-app/pull/5903)) +- Jest [type ahead support](https://github.com/jest-community/jest-watch-typeahead) which provides a much nicer experience when filtering your tests using the Jest CLI ([#5213](https://github.com/facebook/create-react-app/pull/5213)) +- And many more improvements! + + +#### :bug: Bug Fix + +- `react-scripts` + - [#6364](https://github.com/facebook/create-react-app/pull/6364) Use semicolons in the ProcessEnv interface. ([@DominikPalo](https://github.com/DominikPalo)) + - [#6276](https://github.com/facebook/create-react-app/pull/6276) Prevent cursor events on app-logo svg. ([@kostadriano](https://github.com/kostadriano)) + +#### :nail_care: Enhancement + +- `react-scripts` + - [#5213](https://github.com/facebook/create-react-app/pull/5213) Add Jest typeahead plugin. ([@gaearon](https://github.com/gaearon)) + - [#5713](https://github.com/facebook/create-react-app/pull/5713) Sass source map for dev. ([@zhuoli99](https://github.com/zhuoli99)) + - [#6285](https://github.com/facebook/create-react-app/pull/6285) Allow react-scripts test --no-watch. ([@ricokahler](https://github.com/ricokahler)) + - [#5060](https://github.com/facebook/create-react-app/pull/5060) Enable eval-source-map for firefox. ([@jasonLaster](https://github.com/jasonLaster)) +- `react-dev-utils`, `react-scripts` + - [#5903](https://github.com/facebook/create-react-app/pull/5903) Speed up TypeScript projects. ([@deftomat](https://github.com/deftomat)) + +#### :memo: Documentation + +- Other + - [#6383](https://github.com/facebook/create-react-app/pull/6383) Update docs links to prefer HTTPS for supported domains. ([@ianschmitz](https://github.com/ianschmitz)) + - [#6062](https://github.com/facebook/create-react-app/pull/6062) [docs] Warn/clarify that env vars are NOT "SECRET". ([@JBallin](https://github.com/JBallin)) + - [#6359](https://github.com/facebook/create-react-app/pull/6359) Update ZEIT Now deployment instructions. ([@timothyis](https://github.com/timothyis)) + - [#6346](https://github.com/facebook/create-react-app/pull/6346) Minor issue in README.md. ([@nathanlschneider](https://github.com/nathanlschneider)) + - [#6331](https://github.com/facebook/create-react-app/pull/6331) Update docs to document `--no-watch`. ([@ricokahler](https://github.com/ricokahler)) + - [#6229](https://github.com/facebook/create-react-app/pull/6229) Update `serve` port flag and add example. ([@lyzhovnik](https://github.com/lyzhovnik)) + - [#6190](https://github.com/facebook/create-react-app/pull/6190) Updating updating-to-new-releases.md for users who installed CRA globally. ([@carpben](https://github.com/carpben)) + - [#6095](https://github.com/facebook/create-react-app/pull/6095) Changes to steps for publishing GitHub User Page. ([@StevenTan](https://github.com/StevenTan)) + - [#6157](https://github.com/facebook/create-react-app/pull/6157) Add note for global install of CLI. ([@ianschmitz](https://github.com/ianschmitz)) + - [#6149](https://github.com/facebook/create-react-app/pull/6149) update link for difference between proposal stages. ([@loveky](https://github.com/loveky)) + - [#6141](https://github.com/facebook/create-react-app/pull/6141) Remove extra table cell. ([@yangshun](https://github.com/yangshun)) +- `react-scripts` + - [#6355](https://github.com/facebook/create-react-app/pull/6355) Make manifest.json description more generic. ([@chrisself](https://github.com/chrisself)) + +#### :house: Internal + +- Other + - [#6050](https://github.com/facebook/create-react-app/pull/6050) Fix e2e:docker failure with "access denied". ([@jamesknelson](https://github.com/jamesknelson)) + - [#6179](https://github.com/facebook/create-react-app/pull/6179) Update local-test.sh to return test exit code. ([@dallonf](https://github.com/dallonf)) + - [#6165](https://github.com/facebook/create-react-app/pull/6165) Fix CI builds. ([@ianschmitz](https://github.com/ianschmitz)) +- `react-scripts` + - [#5798](https://github.com/facebook/create-react-app/pull/5798) Added `module` to ignored node modules list. ([@dotansimha](https://github.com/dotansimha)) + - [#6022](https://github.com/facebook/create-react-app/pull/6022) TypeScript detection filtering 'node_modules'.. ([@holloway](https://github.com/holloway)) +- `react-dev-utils`, `react-scripts` + - [#6150](https://github.com/facebook/create-react-app/pull/6150) dependencies: move chalk to react-dev-utils. ([@otaviopace](https://github.com/otaviopace)) +- `babel-plugin-named-asset-import`, `react-scripts` + - [#5816](https://github.com/facebook/create-react-app/pull/5816) Upgrade @svgr/webpack to 4.1.0. ([@alaycock](https://github.com/alaycock)) +- `react-dev-utils` + - [#6162](https://github.com/facebook/create-react-app/pull/6162) Update react-dev-util globby dependency to v8.0.2. ([@davidlukerice](https://github.com/davidlukerice)) +- `babel-preset-react-app`, `react-app-polyfill`, `react-dev-utils`, `react-error-overlay`, `react-scripts` + - [#6137](https://github.com/facebook/create-react-app/pull/6137) Fix CI and upgrade dependencies. ([@Timer](https://github.com/Timer)) + +#### :hammer: Underlying Tools + +- `babel-preset-react-app`, `react-app-polyfill`, `react-dev-utils`, `react-scripts` + - [#6393](https://github.com/facebook/create-react-app/pull/6393) Upgrade dependencies. ([@ianschmitz](https://github.com/ianschmitz)) +- `babel-preset-react-app` + - [#6307](https://github.com/facebook/create-react-app/pull/6307) Update babel-plugin-macros 2.4.4 -> 2.4.5. ([@maniax89](https://github.com/maniax89)) +- `eslint-config-react-app`, `react-scripts` + - [#6132](https://github.com/facebook/create-react-app/pull/6132) Bump eslint-plugin-react version and update webpack config. ([@ianschmitz](https://github.com/ianschmitz)) + +#### Committers: 29 + +- Adam Laycock ([alaycock](https://github.com/alaycock)) +- Adriano Costa ([kostadriano](https://github.com/kostadriano)) +- Andrew Turgeon ([maniax89](https://github.com/maniax89)) +- Ben Carp ([carpben](https://github.com/carpben)) +- Charles Pritchard ([Downchuck](https://github.com/Downchuck)) +- Chris Self ([chrisself](https://github.com/chrisself)) +- Dallon Feldner ([dallonf](https://github.com/dallonf)) +- Dan Abramov ([gaearon](https://github.com/gaearon)) +- David Rice ([davidlukerice](https://github.com/davidlukerice)) +- Dominik Palo ([DominikPalo](https://github.com/DominikPalo)) +- Dotan Simha ([dotansimha](https://github.com/dotansimha)) +- Ian Schmitz ([ianschmitz](https://github.com/ianschmitz)) +- JBallin ([JBallin](https://github.com/JBallin)) +- James George ([jamesgeorge007](https://github.com/jamesgeorge007)) +- James K Nelson ([jamesknelson](https://github.com/jamesknelson)) +- Jason Laster ([jasonLaster](https://github.com/jasonLaster)) +- Joe Haddad ([Timer](https://github.com/Timer)) +- Matthew Holloway ([holloway](https://github.com/holloway)) +- Nathan Schneider ([nathanlschneider](https://github.com/nathanlschneider)) +- Nikita Lyzhov ([lyzhovnik](https://github.com/lyzhovnik)) +- Otávio Pace ([otaviopace](https://github.com/otaviopace)) +- Rico Kahler ([ricokahler](https://github.com/ricokahler)) +- Steven Tan ([StevenTan](https://github.com/StevenTan)) +- Timothy ([timothyis](https://github.com/timothyis)) +- Tomáš Szabo ([deftomat](https://github.com/deftomat)) +- Yangshun Tay ([yangshun](https://github.com/yangshun)) +- [gottfired](https://github.com/gottfired) +- [zhuoli99](https://github.com/zhuoli99) +- loveky ([loveky](https://github.com/loveky)) + +### Migrating from 2.1.3 to 2.1.4 + +Inside any created project that has not been ejected, run: + +```bash +npm install --save --save-exact react-scripts@2.1.4 +``` + +or + +``` +yarn add --exact react-scripts@2.1.4 +``` + ## 2.1.3 (January 4, 2019) +v2.1.3 is a maintenance release to fix a [vulnerability in webpack-dev-server](https://www.npmjs.com/advisories/725). + #### :memo: Documentation - Other diff --git a/README.md b/README.md index 881ba7f4ad5..75aed91b989 100644 --- a/README.md +++ b/README.md @@ -163,7 +163,7 @@ Create React App is a great fit for: - **Starting new single-page React applications.** - **Creating examples** with React for your libraries and components. -Here are few common cases where you might want to try something else: +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). diff --git a/appveyor.yml b/appveyor.yml index 5f5143167d6..ab266ab976e 100644 --- a/appveyor.yml +++ b/appveyor.yml @@ -37,7 +37,7 @@ platform: install: - ps: Install-Product node $env:nodejs_version $env:platform - ps: | - (New-Object Net.WebClient).DownloadFile("https://nightly.yarnpkg.com/latest.msi", "$env:temp\yarn.msi") + (New-Object Net.WebClient).DownloadFile("https://yarnpkg.com/latest.msi", "$env:temp\yarn.msi") cmd /c start /wait msiexec.exe /i $env:temp\yarn.msi /quiet /qn /norestart build: off diff --git a/docusaurus/docs/adding-bootstrap.md b/docusaurus/docs/adding-bootstrap.md index 19b3e752441..dc103f81a99 100644 --- a/docusaurus/docs/adding-bootstrap.md +++ b/docusaurus/docs/adding-bootstrap.md @@ -32,7 +32,7 @@ import 'bootstrap/dist/css/bootstrap.css'; Sometimes you might need to tweak the visual styles of Bootstrap (or equivalent package).
As of `react-scripts@2.0.0` you can import `.scss` files. This makes it possible to use a package's built-in Sass variables for global style preferences. -To customize Bootstrap, create a file called `src/custom.scss` (or similar) and import the Bootstrap source stylesheet. Add any overrides _before_ the imported file(s). You can reference [Bootstrap's documentation](http://getbootstrap.com/docs/4.1/getting-started/theming/#css-variables) for the names of the available variables. +To customize Bootstrap, create a file called `src/custom.scss` (or similar) and import the Bootstrap source stylesheet. Add any overrides _before_ the imported file(s). You can reference [Bootstrap's documentation](https://getbootstrap.com/docs/4.1/getting-started/theming/#css-variables) for the names of the available variables. ```scss // Override default variables before the import diff --git a/docusaurus/docs/adding-custom-environment-variables.md b/docusaurus/docs/adding-custom-environment-variables.md index 15d5527106b..557542fa86d 100644 --- a/docusaurus/docs/adding-custom-environment-variables.md +++ b/docusaurus/docs/adding-custom-environment-variables.md @@ -6,24 +6,23 @@ sidebar_label: Environment Variables > Note: this feature is available with `react-scripts@0.2.3` and higher. -Your project can consume variables declared in your environment as if they were declared locally in your JS files. By -default you will have `NODE_ENV` defined for you, and any other environment variables starting with -`REACT_APP_`. +Your project can consume variables declared in your environment as if they were declared locally in your JS files. By default you will have `NODE_ENV` defined for you, and any other environment variables starting with `REACT_APP_`. + +> WARNING: Do not store any secrets (such as private API keys) in your React app! +> +> Environment variables are embedded into the build, meaning anyone can view them by inspecting your app's files. **The environment variables are embedded during the build time**. Since Create React App produces a static HTML/CSS/JS bundle, it can’t possibly read them at runtime. To read them at runtime, you would need to load HTML into memory on the server and replace placeholders in runtime, just like [described here](title-and-meta-tags.md#injecting-data-from-the-server-into-the-page). Alternatively you can rebuild the app on the server anytime you change them. > Note: You must create custom environment variables beginning with `REACT_APP_`. Any other variables except `NODE_ENV` will be ignored to avoid accidentally [exposing a private key on the machine that could have the same name](https://github.com/facebook/create-react-app/issues/865#issuecomment-252199527). Changing any environment variables will require you to restart the development server if it is running. -These environment variables will be defined for you on `process.env`. For example, having an environment -variable named `REACT_APP_SECRET_CODE` will be exposed in your JS as `process.env.REACT_APP_SECRET_CODE`. +These environment variables will be defined for you on `process.env`. For example, having an environment variable named `REACT_APP_NOT_SECRET_CODE` will be exposed in your JS as `process.env.REACT_APP_NOT_SECRET_CODE`. There is also a special built-in environment variable called `NODE_ENV`. You can read it from `process.env.NODE_ENV`. When you run `npm start`, it is always equal to `'development'`, when you run `npm test` it is always equal to `'test'`, and when you run `npm run build` to make a production bundle, it is always equal to `'production'`. **You cannot override `NODE_ENV` manually.** This prevents developers from accidentally deploying a slow development build to production. -These environment variables can be useful for displaying information conditionally based on where the project is -deployed or consuming sensitive data that lives outside of version control. +These environment variables can be useful for displaying information conditionally based on where the project is deployed or consuming sensitive data that lives outside of version control. -First, you need to have environment variables defined. For example, let’s say you wanted to consume a secret defined -in the environment inside a `
`: +First, you need to have environment variables defined. For example, let’s say you wanted to consume an environment variable inside a ``: ```jsx render() { @@ -31,29 +30,25 @@ render() {
You are running this application in {process.env.NODE_ENV} mode. - +
); } ``` -During the build, `process.env.REACT_APP_SECRET_CODE` will be replaced with the current value of the `REACT_APP_SECRET_CODE` environment variable. Remember that the `NODE_ENV` variable will be set for you automatically. +During the build, `process.env.REACT_APP_NOT_SECRET_CODE` will be replaced with the current value of the `REACT_APP_NOT_SECRET_CODE` environment variable. Remember that the `NODE_ENV` variable will be set for you automatically. When you load the app in the browser and inspect the ``, you will see its value set to `abcdef`, and the bold text will show the environment provided when using `npm start`: ```html
You are running this application in development mode. -
- -
+
``` -The above form is looking for a variable called `REACT_APP_SECRET_CODE` from the environment. In order to consume this -value, we need to have it defined in the environment. This can be done using two ways: either in your shell or in -a `.env` file. Both of these ways are described in the next few sections. +The above form is looking for a variable called `REACT_APP_NOT_SECRET_CODE` from the environment. In order to consume this value, we need to have it defined in the environment. This can be done using two ways: either in your shell or in a `.env` file. Both of these ways are described in the next few sections. Having access to the `NODE_ENV` is also useful for performing actions conditionally: @@ -82,13 +77,12 @@ Note that the caveats from the above section apply: ## Adding Temporary Environment Variables In Your Shell -Defining environment variables can vary between OSes. It’s also important to know that this manner is temporary for the -life of the shell session. +Defining environment variables can vary between OSes. It’s also important to know that this manner is temporary for the life of the shell session. ### Windows (cmd.exe) ```cmd -set "REACT_APP_SECRET_CODE=abcdef" && npm start +set "REACT_APP_NOT_SECRET_CODE=abcdef" && npm start ``` (Note: Quotes around the variable assignment are required to avoid a trailing whitespace.) @@ -96,13 +90,13 @@ set "REACT_APP_SECRET_CODE=abcdef" && npm start ### Windows (Powershell) ```Powershell -($env:REACT_APP_SECRET_CODE = "abcdef") -and (npm start) +($env:REACT_APP_NOT_SECRET_CODE = "abcdef") -and (npm start) ``` ### Linux, macOS (Bash) ```bash -REACT_APP_SECRET_CODE=abcdef npm start +REACT_APP_NOT_SECRET_CODE=abcdef npm start ``` ## Adding Development Environment Variables In `.env` @@ -112,7 +106,7 @@ REACT_APP_SECRET_CODE=abcdef npm start To define permanent environment variables, create a file called `.env` in the root of your project: ``` -REACT_APP_SECRET_CODE=abcdef +REACT_APP_NOT_SECRET_CODE=abcdef ``` > Note: You must create custom environment variables beginning with `REACT_APP_`. Any other variables except `NODE_ENV` will be ignored to avoid [accidentally exposing a private key on the machine that could have the same name](https://github.com/facebook/create-react-app/issues/865#issuecomment-252199527). Changing any environment variables will require you to restart the development server if it is running. diff --git a/docusaurus/docs/advanced-configuration.md b/docusaurus/docs/advanced-configuration.md index c991fd72edb..1b817529409 100644 --- a/docusaurus/docs/advanced-configuration.md +++ b/docusaurus/docs/advanced-configuration.md @@ -11,10 +11,10 @@ You can adjust various development and production settings by setting environmen | HOST | ✅ Used | 🚫 Ignored | By default, the development web server binds to `localhost`. 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.md). This may be particularly useful when using a CDN to host your application. | +| 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. | | 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. | | GENERATE_SOURCEMAP | 🚫 Ignored | ✅ Used | When set to `false`, source maps are not generated for a production build. This solves OOM issues on some smaller machines. | | NODE_PATH | ✅ Used | ✅ Used | Same as [`NODE_PATH` in Node.js](https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders), but only relative folders are allowed. Can be handy for emulating a monorepo setup by setting `NODE_PATH=src`. | -| INLINE_RUNTIME_CHUNK | 🚫 Ignored | ✅ Used | By default, Create React App will embed the runtime script into `index.html` during the production build. When set to `false`, the script will not be embedded and will be imported as usual. This is normally required when dealing with CSP. | | +| INLINE_RUNTIME_CHUNK | 🚫 Ignored | ✅ Used | By default, Create React App will embed the runtime script into `index.html` during the production build. When set to `false`, the script will not be embedded and will be imported as usual. This is normally required when dealing with CSP. | diff --git a/docusaurus/docs/alternatives-to-ejecting.md b/docusaurus/docs/alternatives-to-ejecting.md index 6686ed93408..7a37673eb0c 100644 --- a/docusaurus/docs/alternatives-to-ejecting.md +++ b/docusaurus/docs/alternatives-to-ejecting.md @@ -3,4 +3,4 @@ id: alternatives-to-ejecting title: Alternatives to Ejecting --- -[Ejecting](available-scripts.md#npm-run-eject) lets you customize anything, but from that point on you have to maintain the configuration and scripts yourself. This can be daunting if you have many similar projects. In such cases instead of ejecting we recommend to _fork_ `react-scripts` and any other packages you need. [This article](https://auth0.com/blog/how-to-configure-create-react-app/) dives into how to do it in depth. You can find more discussion in [this issue](https://github.com/facebook/create-react-app/issues/682.md). +[Ejecting](available-scripts.md#npm-run-eject) lets you customize anything, but from that point on you have to maintain the configuration and scripts yourself. This can be daunting if you have many similar projects. In such cases instead of ejecting we recommend to _fork_ `react-scripts` and any other packages you need. [This article](https://auth0.com/blog/how-to-configure-create-react-app/) dives into how to do it in depth. You can find more discussion in [this issue](https://github.com/facebook/create-react-app/issues/682). diff --git a/docusaurus/docs/code-splitting.md b/docusaurus/docs/code-splitting.md index 8cfcee4700f..ace13fdfcce 100644 --- a/docusaurus/docs/code-splitting.md +++ b/docusaurus/docs/code-splitting.md @@ -51,6 +51,6 @@ You can also use it with `async` / `await` syntax if you prefer it. ## With React Router -If you are using React Router check out [this tutorial](http://serverless-stack.com/chapters/code-splitting-in-create-react-app.html) on how to use code splitting with it. You can find the companion GitHub repository [here](https://github.com/AnomalyInnovations/serverless-stack-demo-client/tree/code-splitting-in-create-react-app). +If you are using React Router check out [this tutorial](https://serverless-stack.com/chapters/code-splitting-in-create-react-app.html) on how to use code splitting with it. You can find the companion GitHub repository [here](https://github.com/AnomalyInnovations/serverless-stack-demo-client/tree/code-splitting-in-create-react-app). Also check out the [Code Splitting](https://reactjs.org/docs/code-splitting.html) section in React documentation. diff --git a/docusaurus/docs/debugging-tests.md b/docusaurus/docs/debugging-tests.md index 93da201a9f6..80ca856cf33 100644 --- a/docusaurus/docs/debugging-tests.md +++ b/docusaurus/docs/debugging-tests.md @@ -54,7 +54,8 @@ Use the following [`launch.json`](https://code.visualstudio.com/docs/editor/debu "args": [ "test", "--runInBand", - "--no-cache" + "--no-cache", + "--no-watch" ], "cwd": "${workspaceRoot}", "protocol": "inspector", diff --git a/docusaurus/docs/deployment.md b/docusaurus/docs/deployment.md index d25f18244fe..cca02624135 100644 --- a/docusaurus/docs/deployment.md +++ b/docusaurus/docs/deployment.md @@ -15,7 +15,11 @@ npm install -g serve serve -s build ``` -The last command shown above will serve your static site on the port **5000**. Like many of [serve](https://github.com/zeit/serve)’s internal settings, the port can be adjusted using the `-p` or `--port` flags. +The last command shown above will serve your static site on the port **5000**. Like many of [serve](https://github.com/zeit/serve)’s internal settings, the port can be adjusted using the `-l` or `--listen` flags: + +```sh +serve -s build -l 4000 +``` Run this command to get a full list of the options available: @@ -27,7 +31,7 @@ serve -h You don’t necessarily need a static server in order to run a Create React App project in production. It works just as fine integrated into an existing dynamic one. -Here’s a programmatic example using [Node](https://nodejs.org/) and [Express](http://expressjs.com/): +Here’s a programmatic example using [Node](https://nodejs.org/) and [Express](https://expressjs.com/): ```javascript const express = require('express'); @@ -75,7 +79,7 @@ If you’re using [Apache HTTP Server](https://httpd.apache.org/), you need to c It will get copied to the `build` folder when you run `npm run build`. -If you’re using [Apache Tomcat](http://tomcat.apache.org/), you need to follow [this Stack Overflow answer](https://stackoverflow.com/a/41249464/4878474). +If you’re using [Apache Tomcat](https://tomcat.apache.org/), you need to follow [this Stack Overflow answer](https://stackoverflow.com/a/41249464/4878474). Now requests to `/todos/42` will be handled correctly both in development and in production. @@ -106,7 +110,8 @@ To override this, specify the `homepage` in your `package.json`, for example: This will let Create React App correctly infer the root path to use in the generated HTML file. **Note**: If you are using `react-router@^4`, you can root ``s using the `basename` prop on any ``.
-More information [here](https://reacttraining.com/react-router/web/api/BrowserRouter/basename-string).
+More information [here](https://reacttraining.com/react-router/web/api/BrowserRouter/basename-string).
+
For example: @@ -240,7 +245,8 @@ For more information see [Firebase Hosting](https://firebase.google.com/docs/hos ### Step 1: Add `homepage` to `package.json` -**The step below is important!**
+**The step below is important!**
+ **If you skip it, your app will not deploy correctly.** Open your `package.json` and add a `homepage` field for your project: @@ -291,11 +297,10 @@ Add the following scripts in your `package.json`: The `predeploy` script will run automatically before `deploy` is run. -If you are deploying to a GitHub user page instead of a project page you'll need to make two -additional modifications: +If you are deploying to a GitHub user page instead of a project page you'll need to make one +additional modification: -1. First, change your repository's source branch to be any branch other than **master**. -1. Additionally, tweak your `package.json` scripts to push deployments to **master**: +1. Tweak your `package.json` scripts to push deployments to **master**: ```diff "scripts": { @@ -312,11 +317,11 @@ Then run: npm run deploy ``` -### Step 4: Ensure your project’s settings use `gh-pages` +### Step 4: For a project page, ensure your project’s settings use `gh-pages` Finally, make sure **GitHub Pages** option in your GitHub project settings is set to use the `gh-pages` branch: -gh-pages branch setting +gh-pages branch setting ### Step 5: Optionally, configure the domain @@ -422,23 +427,25 @@ When you build the project, Create React App will place the `public` folder cont ## [Now](https://zeit.co/now) -Now offers a zero-configuration single-command deployment. You can use `now` to deploy your app for free. +[Now](https://zeit.co/docs) offers a simple, single-command deployment. You can use `now` to deploy your app for free. -1. Install the `now` command-line tool either via the recommended [desktop tool](https://zeit.co/download) or via node with `npm install -g now`. +The first step is to install Now. You can do this by installing [the Now Desktop app](https://zeit.co/download), which also installs Now CLI and keeps it up-to-date, or by [installing Now CLI](https://zeit.co/download#now-cli) directly with npm: -2. Build your app by running `npm run build`. +```shell +npm i -g now +``` -3. Move into the build directory by running `cd build`. +To deploy your built project directly with Now CLI in your terminal, without any configuration: -4. Run `now --name your-project-name` from within the build directory. You will see a **now.sh** URL in your output like this: +1. Build your app by running `npm run build`. - ``` - > Ready! https://your-project-name-tpspyhtdtk.now.sh (copied to clipboard) - ``` +2. Move into the build directory by running `cd build`. + +3. Run `now --name your-project-name` from within the build directory. You will be given a **now.sh** URL as a response as your build is deployed, similar to the following: https://my-cra-project-4rx7b16z3.now.sh/ - Paste that URL into your browser when the build is complete, and you will see your deployed app. + Click or paste the deployment URL into your browser when the build is complete and you will see your deployed app. -Details are available in [this article.](https://zeit.co/blog/unlimited-static) +For more information on deploying React applications with Now, including automatically building your application fresh in the cloud, setting up routes to rewrite all paths to the index.html file, and setting up caching headers for speed, see [the ZEIT Guide for Deploying a React app with Create React App](https://zeit.co/guides/deploying-react-with-now-cra/). ## [S3](https://aws.amazon.com/s3) and [CloudFront](https://aws.amazon.com/cloudfront/) diff --git a/docusaurus/docs/developing-components-in-isolation.md b/docusaurus/docs/developing-components-in-isolation.md index 601ccd4896c..9286348d77e 100644 --- a/docusaurus/docs/developing-components-in-isolation.md +++ b/docusaurus/docs/developing-components-in-isolation.md @@ -14,7 +14,7 @@ Usually, it’s hard to see these states without running a sample app or some ex Create React App doesn’t include any tools for this by default, but you can easily add [Storybook for React](https://storybook.js.org) ([source](https://github.com/storybooks/storybook)) or [React Styleguidist](https://react-styleguidist.js.org/) ([source](https://github.com/styleguidist/react-styleguidist)) to your project. **These are third-party tools that let you develop components and see all their states in isolation from your app**. -![Storybook for React Demo](http://i.imgur.com/7CIAWpB.gif) +![Storybook for React Demo](https://i.imgur.com/7CIAWpB.gif) You can also deploy your Storybook or style guide as a static app. This way, everyone in your team can view and review different states of UI components without starting a backend server or creating an account in your app. diff --git a/docusaurus/docs/getting-started.md b/docusaurus/docs/getting-started.md index c7d5eb50514..6945b4e6f08 100644 --- a/docusaurus/docs/getting-started.md +++ b/docusaurus/docs/getting-started.md @@ -14,9 +14,11 @@ cd my-app npm start ``` +> If you've previously installed `create-react-app` globally via `npm install -g create-react-app`, we recommend you uninstall the package using `npm uninstall -g create-react-app` to ensure that `npx` always uses the latest version. + _([npx](https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b) comes with npm 5.2+ and higher, see [instructions for older npm versions](https://gist.github.com/gaearon/4064d3c23a77c74a3614c498a8bb1c5f))_ -Then open [http://localhost:3000/](http://localhost:3000/) to see your app. +Then open [http://localhost:3000/](http://localhost:3000/) to see your app. When you’re ready to deploy to production, create a minified bundle with `npm run build`. diff --git a/docusaurus/docs/importing-a-component.md b/docusaurus/docs/importing-a-component.md index 52767005c08..82ca5487a9c 100644 --- a/docusaurus/docs/importing-a-component.md +++ b/docusaurus/docs/importing-a-component.md @@ -37,7 +37,7 @@ class DangerButton extends Component { export default DangerButton; ``` -Be aware of the [difference between default and named exports](http://stackoverflow.com/questions/36795819/react-native-es-6-when-should-i-use-curly-braces-for-import/36796281#36796281). It is a common source of mistakes. +Be aware of the [difference between default and named exports](https://stackoverflow.com/questions/36795819/react-native-es-6-when-should-i-use-curly-braces-for-import/36796281#36796281). It is a common source of mistakes. We suggest that you stick to using default imports and exports when a module only exports a single thing (for example, a component). That’s what you get when you use `export default Button` and `import Button from './Button'`. @@ -45,6 +45,6 @@ Named exports are useful for utility modules that export several functions. A mo Learn more about ES6 modules: -- [When to use the curly braces?](http://stackoverflow.com/questions/36795819/react-native-es-6-when-should-i-use-curly-braces-for-import/36796281#36796281) +- [When to use the curly braces?](https://stackoverflow.com/questions/36795819/react-native-es-6-when-should-i-use-curly-braces-for-import/36796281#36796281) - [Exploring ES6: Modules](http://exploringjs.com/es6/ch_modules.html) - [Understanding ES6: Modules](https://leanpub.com/understandinges6/read#leanpub-auto-encapsulating-code-with-modules) diff --git a/docusaurus/docs/making-a-progressive-web-app.md b/docusaurus/docs/making-a-progressive-web-app.md index 1623defd4f9..0eb7d404edf 100644 --- a/docusaurus/docs/making-a-progressive-web-app.md +++ b/docusaurus/docs/making-a-progressive-web-app.md @@ -15,7 +15,7 @@ following in their [`src/index.js`](https://github.com/facebook/create-react-app ```js // If you want your app to work offline and load faster, you can change // unregister() to register() below. Note this comes with some pitfalls. -// Learn more about service workers: http://bit.ly/CRA-PWA +// Learn more about service workers: https://bit.ly/CRA-PWA serviceWorker.unregister(); ``` @@ -69,7 +69,7 @@ following into account: 1. Service workers [require HTTPS](https://developers.google.com/web/fundamentals/getting-started/primers/service-workers#you_need_https), although to facilitate local testing, that policy - [does not apply to `localhost`](http://stackoverflow.com/questions/34160509/options-for-testing-service-workers-via-http/34161385#34161385). + [does not apply to `localhost`](https://stackoverflow.com/questions/34160509/options-for-testing-service-workers-via-http/34161385#34161385). If your production web server does not support HTTPS, then the service worker registration will fail, but the rest of your web app will remain functional. diff --git a/docusaurus/docs/proxying-api-requests-in-development.md b/docusaurus/docs/proxying-api-requests-in-development.md index d094d267180..d429ac0299f 100644 --- a/docusaurus/docs/proxying-api-requests-in-development.md +++ b/docusaurus/docs/proxying-api-requests-in-development.md @@ -23,7 +23,7 @@ To tell the development server to proxy any unknown requests to your API server This way, when you `fetch('/api/todos')` in development, the development server will recognize that it’s not a static asset, and will proxy your request to `http://localhost:4000/api/todos` as a fallback. The development server will **only** attempt to send requests without `text/html` in its `Accept` header to the proxy. -Conveniently, this avoids [CORS issues](http://stackoverflow.com/questions/21854516/understanding-ajax-cors-and-security-considerations) and error messages like this in development: +Conveniently, this avoids [CORS issues](https://stackoverflow.com/questions/21854516/understanding-ajax-cors-and-security-considerations) and error messages like this in development: ``` Fetch API cannot load http://localhost:4000/api/todos. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled. @@ -35,7 +35,7 @@ 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)). +- Enable CORS on your server ([here’s how to do it for Express](https://enable-cors.org/server_expressjs.html)). - Use [environment variables](adding-custom-environment-variables.md) to inject the right server host and port into your app. ## "Invalid Host Header" Errors After Configuring Proxy diff --git a/docusaurus/docs/running-tests.md b/docusaurus/docs/running-tests.md index 6daaffb73aa..0a855d4869b 100644 --- a/docusaurus/docs/running-tests.md +++ b/docusaurus/docs/running-tests.md @@ -7,7 +7,7 @@ title: Running Tests > [Read the migration guide to learn how to enable it in older projects!](https://github.com/facebook/create-react-app/blob/master/CHANGELOG-0.x.md#migrating-from-023-to-030) -Create React App uses [Jest](https://facebook.github.io/jest/) as its test runner. To prepare for this integration, we did a [major revamp](https://facebook.github.io/jest/blog/2016/09/01/jest-15.html) of Jest so if you heard bad things about it years ago, give it another try. +Create React App uses [Jest](https://jestjs.io/) as its test runner. To prepare for this integration, we did a [major revamp](https://jestjs.io/blog/2016/09/01/jest-15.html) of Jest so if you heard bad things about it years ago, give it another try. Jest is a Node-based runner. This means that the tests always run in a Node environment and not in a real browser. This lets us enable fast iteration speed and prevent flakiness. @@ -29,12 +29,14 @@ We recommend to put the test files (or `__tests__` folders) next to the code the ## Command Line Interface -When you run `npm test`, Jest will launch in the watch mode. Every time you save a file, it will re-run the tests, just like `npm start` recompiles the code. +When you run `npm test`, Jest will launch in watch mode\*. Every time you save a file, it will re-run the tests, just like `npm start` recompiles the code. The watcher includes an interactive command-line interface with the ability to run all tests, or focus on a search pattern. It is designed this way so that you can keep it open and enjoy fast re-runs. You can learn the commands from the “Watch Usage” note that the watcher prints after every run: ![Jest watch mode](https://jestjs.io/img/blog/15-watch.gif) +> \*Although we recommend running your tests in watch mode during development, you can disable this behavior by passing in the `--no-watch` flag. In most CI environments, this is handled for you (see [On CI servers](#on-ci-servers)). + ## Version Control Integration By default, when you run `npm test`, Jest will only run the tests related to files changed since the last commit. This is an optimization designed to make your tests run fast regardless of how many tests you have. However it assumes that you don’t often commit the code that doesn’t pass the tests. @@ -58,8 +60,8 @@ it('sums numbers', () => { }); ``` -All `expect()` matchers supported by Jest are [extensively documented here](https://facebook.github.io/jest/docs/en/expect.html#content).
-You can also use [`jest.fn()` and `expect(fn).toBeCalled()`](https://facebook.github.io/jest/docs/en/expect.html#tohavebeencalled) to create “spies” or mock functions. +All `expect()` matchers supported by Jest are [extensively documented here](https://jestjs.io/docs/en/expect.html#content).
+You can also use [`jest.fn()` and `expect(fn).toBeCalled()`](https://jestjs.io/docs/en/expect.html#tohavebeencalled) to create “spies” or mock functions. ## Testing Components @@ -84,7 +86,7 @@ When you encounter bugs caused by changing components, you will gain a deeper in ### Option 1: Shallow Rendering -If you’d like to test components in isolation from the child components they render, we recommend using [`shallow()` rendering API](http://airbnb.io/enzyme/docs/api/shallow.html) from [Enzyme](http://airbnb.io/enzyme/). To install it, run: +If you’d like to test components in isolation from the child components they render, we recommend using [`shallow()` rendering API](https://airbnb.io/enzyme/docs/api/shallow.html) from [Enzyme](https://airbnb.io/enzyme/). To install it, run: ```sh npm install --save enzyme enzyme-adapter-react-16 react-test-renderer @@ -125,9 +127,9 @@ it('renders without crashing', () => { }); ``` -Unlike the previous smoke test using `ReactDOM.render()`, this test only renders `` and doesn’t go deeper. For example, even if `` itself renders a `