From f5f4460681e216528e33c1bf9c34142400e03e0f Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Mon, 28 Nov 2016 17:35:57 +0000 Subject: [PATCH 01/30] Add a link to PWA instructions --- packages/react-scripts/template/README.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index 48409092a27..bb2d758245c 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -43,6 +43,7 @@ You can find the most recent version of this guide [here](https://github.com/fac - [Disabling jsdom](#disabling-jsdom) - [Experimental Snapshot Testing](#experimental-snapshot-testing) - [Developing Components in Isolation](#developing-components-in-isolation) +- [Making a Progressive Web App](#making-a-progressive-web-app) - [Deployment](#deployment) - [Building for Relative Paths](#building-for-relative-paths) - [GitHub Pages](#github-pages) @@ -921,6 +922,10 @@ Learn more about React Storybook: * [Documentation](https://getstorybook.io/docs) * [Snapshot Testing](https://github.com/kadirahq/storyshots) with 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 ## Building for Relative Paths From 5a273b2a934df7390d3c7af5f46052d49c309b1f Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Mon, 28 Nov 2016 17:37:01 +0000 Subject: [PATCH 02/30] Add link to PWA instructions to main README --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 9daf39241a0..f204942a7aa 100644 --- a/README.md +++ b/README.md @@ -120,6 +120,7 @@ The [User Guide](https://github.com/facebookincubator/create-react-app/blob/mast - [Generating Dynamic `` Tags on the Server](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#generating-dynamic-meta-tags-on-the-server) - [Running Tests](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#running-tests) - [Developing Components in Isolation](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#developing-components-in-isolation) +- [Making a Progressive Web App](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#making-a-progressive-web-app) - [Deployment](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#deployment) - [Troubleshooting](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#troubleshooting) From 9ce0aa5f5aa43b0cd31ae870a4fb1d5d6195ed5e Mon Sep 17 00:00:00 2001 From: Orta Date: Thu, 1 Dec 2016 16:09:43 +0000 Subject: [PATCH 03/30] Add a note about vscode-jest (#1126) --- packages/react-scripts/template/README.md | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index bb2d758245c..aefce176412 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -42,6 +42,7 @@ You can find the most recent version of this guide [here](https://github.com/fac - [Continuous Integration](#continuous-integration) - [Disabling jsdom](#disabling-jsdom) - [Experimental Snapshot Testing](#experimental-snapshot-testing) + - [Editor Integration](#editor-integration) - [Developing Components in Isolation](#developing-components-in-isolation) - [Making a Progressive Web App](#making-a-progressive-web-app) - [Deployment](#deployment) @@ -882,6 +883,12 @@ Snapshot testing is a new feature of Jest that automatically generates text snap This feature is experimental and still [has major usage issues](https://github.com/facebookincubator/create-react-app/issues/372) so we only encourage you to use it if you like experimental technology. We intend to gradually improve it over time and eventually offer it as the default solution for testing React components, but this will take time. [Read more about snapshot testing.](http://facebook.github.io/jest/blog/2016/07/27/jest-14.html) +### Editor Integration + +If you use [Visual Studio Code](https://code.visualstudio.com), there is a [Jest extension](https://github.com/orta/vscode-jest) which works with Create React App out of the box. This provides a lot of IDE-like features while using a text editor: showing the status of a test run with potential fail messages inline, starting and stopping the watcher automatically, and offering one-click snapshot updates. + +![VS Code Jest Preview](https://cloud.githubusercontent.com/assets/49038/20795349/a032308a-b7c8-11e6-9b34-7eeac781003f.png) + ## Developing Components in Isolation Usually, in an app, you have a lot of UI components, and each of them has many different states. From cdd17a6914c3875fe0d5d4f562c47130062407fa Mon Sep 17 00:00:00 2001 From: Dirk-Jan Rutten Date: Sat, 3 Dec 2016 13:39:29 +0100 Subject: [PATCH 04/30] Crash the build during CI whenever linter warnings are encountered (#944) * Added functionality to crash the build during CI whenever linter warnings are encountered. * Updated the docs with a description on how to use the build in CI * Fixed small typo * Fixed description of build error. --- packages/react-scripts/scripts/build.js | 5 +++++ packages/react-scripts/template/README.md | 21 ++++++++++++++++++--- 2 files changed, 23 insertions(+), 3 deletions(-) diff --git a/packages/react-scripts/scripts/build.js b/packages/react-scripts/scripts/build.js index 8e4141be8bc..a53b2f01adb 100644 --- a/packages/react-scripts/scripts/build.js +++ b/packages/react-scripts/scripts/build.js @@ -144,6 +144,11 @@ function build(previousSizeMap) { process.exit(1); } + if (process.env.CI && stats.compilation.warnings.length) { + printErrors('Failed to compile.', stats.compilation.warnings); + process.exit(1); + } + console.log(chalk.green('Compiled successfully.')); console.log(); diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index aefce176412..79105db05c5 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -810,7 +810,11 @@ Note that tests run much slower with coverage so it is recommended to run it sep ### Continuous Integration -By default `npm test` runs the watcher with interactive CLI. However, you can force it to run tests once and finish the process by setting an environment variable called `CI`. Popular CI servers already set it by default but you can do this yourself too: +By default `npm test` runs the watcher with interactive CLI. However, you can force it to run tests once and finish the process by setting an environment variable called `CI`. + +When creating a build of your application with `npm run build` linter warnings are not checked by default. Like `npm test`, you can force the build to perform a linter warning check by setting the environment variable `CI`. If any warnings are encountered then the build fails. + +Popular CI servers already set the environment variable `CI` by default but you can do this yourself too: ### On CI servers #### Travis CI @@ -827,6 +831,7 @@ cache: - node_modules script: - npm test + - npm run build ``` 1. Trigger your first build with a git push. 1. [Customize your Travis CI Build](https://docs.travis-ci.com/user/customizing-the-build/) if needed. @@ -838,6 +843,10 @@ script: set CI=true&&npm test ``` +```cmd +set CI=true&&npm run build +``` + (Note: the lack of whitespace is intentional.) ##### Linux, OS X (Bash) @@ -846,9 +855,15 @@ set CI=true&&npm test CI=true npm test ``` -This way Jest will run tests once instead of launching the watcher. +```bash +CI=true npm run build +``` + +The test command will force Jest to run tests once instead of launching the watcher. + +> If you find yourself doing this often in development, please [file an issue](https://github.com/facebookincubator/create-react-app/issues/new) to tell us about your use case because we want to make watcher the best experience and are open to changing how it works to accommodate more workflows. -If you find yourself doing this often in development, please [file an issue](https://github.com/facebookincubator/create-react-app/issues/new) to tell us about your use case because we want to make watcher the best experience and are open to changing how it works to accommodate more workflows. +The build command will check for linter warnings and fail if any are found. ### Disabling jsdom From e167e45a2ce31dfa5a4a0b3f25b61a8bf68a7523 Mon Sep 17 00:00:00 2001 From: Ville Immonen Date: Sat, 3 Dec 2016 17:53:03 +0200 Subject: [PATCH 05/30] Update changelog for 0.8.0 and add Lerna Changelog (#1141) --- .gitignore | 1 + CHANGELOG.md | 154 +++++++++++++++++++++++++++++++++++++++++++++++++++ lerna.json | 14 ++++- package.json | 4 +- 4 files changed, 171 insertions(+), 2 deletions(-) diff --git a/.gitignore b/.gitignore index 1900a2f2cf9..7444dad4ec2 100644 --- a/.gitignore +++ b/.gitignore @@ -6,3 +6,4 @@ my-app* template/src/__tests__/__snapshots__/ lerna-debug.log npm-debug.log +/.changelog diff --git a/CHANGELOG.md b/CHANGELOG.md index b7d168daeec..b2f4460a3fc 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,157 @@ +## 0.8.0 (2016-12-03) + +#### :rocket: New Feature +* `react-scripts` + * [#944](https://github.com/facebookincubator/create-react-app/pull/944) Crash the build during CI whenever linter warnings are encountered. ([@excitement-engineer](https://github.com/excitement-engineer)) + + Linter warnings and errors are now checked during a continuous integration build (set by the `CI` environment variable) and the build will fail if any issues are found. See [Continuous Integration](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#continuous-integration) for more information. + + * [#1090](https://github.com/facebookincubator/create-react-app/pull/1090) Enable proxying of WebSockets. ([@dceddia](https://github.com/dceddia)) + +* `create-react-app`, `react-scripts` + * [#898](https://github.com/facebookincubator/create-react-app/pull/898) Support Yarn. ([@fson](https://github.com/fson)) + + Yarn is a new fast, reliable and secure alternative to the `npm` client. If you have Yarn installed, `create-react-app` will use it to install packages when you create an app. It also creates a `yarn.lock` file that should be checked into source control (e.g. git). This ensures the same versions of packages will be installed each time `yarn install` is run, on any machine. + + `react-scripts` now also displays instructions using `yarn` commands for projects using Yarn (projects having a `yarn.lock` file). + + To create a project using Yarn, simply install `yarn` and use `create-react-app` like before: + ``` + npm install -g yarn create-react-app@latest + + create-react-app my-app # Packages are now installed with Yarn. + ``` + +#### :boom: Breaking Change +* `babel-preset-react-app` + * [#902](https://github.com/facebookincubator/create-react-app/pull/902) Enable useBuiltIns option on object-rest-spread. ([@existentialism](https://github.com/existentialism)) + + Object rest spread and JSX now use the native `Object.assign()` method instead of Babel's helper function. If you are using `babel-preset-react-app` directly in your project *and* targeting browsers that don't have `Object.assign()` available, from now on you need a polyfill for it (e.g. [`object-assign`](https://www.npmjs.com/package/object-assign)). + + **Note:** `react-scripts` already adds this polyfill, so no changes are necessary in Create React App projects. + +#### :bug: Bug Fix +* `react-scripts` + * [#978](https://github.com/facebookincubator/create-react-app/pull/978) Move the remove-on-eject-end tag at the end of the file. ([@EnoahNetzach](https://github.com/EnoahNetzach)) + + Fixes a bug in ejected configuration. + + * [#1017](https://github.com/facebookincubator/create-react-app/pull/1017) Don't look for `.babelrc` file during test. ([@nhajidin](https://github.com/nhajidin)) + + Fixes a `.babelrc` file in a parent directory interfering with the `npm test` command. + + * [#951](https://github.com/facebookincubator/create-react-app/pull/951) Check for presence of folders before continuing eject. ([@heldinz](https://github.com/heldinz)) + + Fixes a bug where `eject` failed when a `scripts` or `config` folder already existed in the project. + +* `react-dev-utils` + * [#1035](https://github.com/facebookincubator/create-react-app/pull/1035) Fix Chrome tab reuse. ([@einarlove](https://github.com/einarlove)) + + Fixes a bug with the app not opening in the existing tab in Chrome. + + * [#964](https://github.com/facebookincubator/create-react-app/pull/964) Catch and noop call to open web browser. ([@spadin](https://github.com/spadin)) + + Not being able to open a browser doesn't crash the development server now. + +* `eslint-config-react-app`, `react-scripts` + * [#953](https://github.com/facebookincubator/create-react-app/pull/953) Fix `.ico` file extension being handled by test configuration. ([@vadzim](https://github.com/vadzim)) + +#### :nail_care: Enhancement +* `react-scripts` + * [#1032](https://github.com/facebookincubator/create-react-app/pull/1032) Add support for non-interactive terminal. ([@sheerun](https://github.com/sheerun)) + * [#1078](https://github.com/facebookincubator/create-react-app/pull/1078) Upgrade Jest to 17.0. ([@fson](https://github.com/fson)) + * [#1059](https://github.com/facebookincubator/create-react-app/pull/1059) Use `url-loader` with limit 10k as a default loader. ([@bebbi](https://github.com/bebbi)) + + `react-scripts` now treats imports with any unknown file extension as a resource. Files with a size below 10 KB are inlined using a data URI and larger files copied to the build folder. This removes the need for an internal [whitelist of supported file extensions](https://github.com/facebookincubator/create-react-app/issues/667). Any file that's not JS or CSS is now handled the same way. + + * [#924](https://github.com/facebookincubator/create-react-app/pull/924) Enable JavaScript source maps in development. ([@ekaradon](https://github.com/ekaradon)) + * [#1058](https://github.com/facebookincubator/create-react-app/pull/1058) Add missing dev argument in build script message. ([@nhajidin](https://github.com/nhajidin)) + * [#961](https://github.com/facebookincubator/create-react-app/pull/961) Add `collectCoverageFrom` option to collect coverage on files without any tests. ([@pmackcode](https://github.com/pmackcode)) + + The test script now considers all files in the project when calculating test coverage. + + * [#968](https://github.com/facebookincubator/create-react-app/pull/968) Enable gzip compression in the development server (#966). ([@frontsideair](https://github.com/frontsideair)) +* `react-dev-utils`, `react-scripts` + * [#816](https://github.com/facebookincubator/create-react-app/pull/816) add logging of existing default port process on start. ([@ianmcnally](https://github.com/ianmcnally)) + + `react-scripts` can guess which process is running on the port 3000 when it's not available: + ``` + Something is already running on port 3000. Probably: + my-app + in /Users/ian/dev/my-app + + Would you like to run the app on another port instead? + ``` +* `react-dev-utils` + * [#963](https://github.com/facebookincubator/create-react-app/pull/963) Allow webpack 2 as a peerDependency in react-dev-utils. ([@einarlove](https://github.com/einarlove)) + +#### :memo: Documentation +* `react-scripts` + * [#1126](https://github.com/facebookincubator/create-react-app/pull/1126) Add a note about vscode-jest. ([@orta](https://github.com/orta)) + * [#1080](https://github.com/facebookincubator/create-react-app/pull/1080) Add a note for OSX users about watchman and jest. ([@dmr](https://github.com/dmr)) + * [#1071](https://github.com/facebookincubator/create-react-app/pull/1071) Adds to docs - deployment with S3/CloudFront. ([@marcgarreau](https://github.com/marcgarreau)) + * [#976](https://github.com/facebookincubator/create-react-app/pull/976) Added info on using global variables. ([@jhorneman](https://github.com/jhorneman)) + * [#996](https://github.com/facebookincubator/create-react-app/pull/996) Remove redundant `function` from export statement. ([@gnowoel](https://github.com/gnowoel)) + * [#959](https://github.com/facebookincubator/create-react-app/pull/959) Always build before deploying to gh-pages. ([@dsernst](https://github.com/dsernst)) + * [#974](https://github.com/facebookincubator/create-react-app/pull/974) Gently nudge users towards https by default. ([@Swizec](https://github.com/Swizec)) +* Other + * [#1031](https://github.com/facebookincubator/create-react-app/pull/1031) No Configuration -> Convention over Configuration. ([@sheerun](https://github.com/sheerun)) + * [#995](https://github.com/facebookincubator/create-react-app/pull/995) Add Gatsby to alternatives. ([@KyleAMathews](https://github.com/KyleAMathews)) + +#### :house: Internal +* `react-scripts` + * [#1072](https://github.com/facebookincubator/create-react-app/pull/1072) Replace rimraf with fs-extra functions. ([@existentialism](https://github.com/existentialism)) + * [#1068](https://github.com/facebookincubator/create-react-app/pull/1068) Remove bundledDependencies. ([@fson](https://github.com/fson)) + * [#1057](https://github.com/facebookincubator/create-react-app/pull/1057) Update `css-loader`. ([@nhajidin](https://github.com/nhajidin)) + * [#983](https://github.com/facebookincubator/create-react-app/pull/983) Remove custom babel-loader cache dir config. ([@fson](https://github.com/fson)) +* `babel-preset-react-app` + * [#1052](https://github.com/facebookincubator/create-react-app/pull/1052) Remove unnecessary transform plugins for object spread to work. ([@valscion](https://github.com/valscion)) + * [#992](https://github.com/facebookincubator/create-react-app/pull/992) Explain the usage of react-jsx-source & react-jsx-self. ([@bboysathish](https://github.com/bboysathish)) + * [#1051](https://github.com/facebookincubator/create-react-app/pull/1051) Update babel-present-env and use node: 'current' as target. ([@valscion](https://github.com/valscion)) + +#### Committers: 27 +- Adam Stankiewicz ([sheerun](https://github.com/sheerun)) +- Alice Rose ([heldinz](https://github.com/heldinz)) +- Arunoda Susiripala ([arunoda](https://github.com/arunoda)) +- Brian Ng ([existentialism](https://github.com/existentialism)) +- Daniel Rech ([dmr](https://github.com/dmr)) +- Dave Ceddia ([dceddia](https://github.com/dceddia)) +- David Ernst ([dsernst](https://github.com/dsernst)) +- Dirk-Jan Rutten ([excitement-engineer](https://github.com/excitement-engineer)) +- Einar Löve ([einarlove](https://github.com/einarlove)) +- Fabrizio Castellarin ([EnoahNetzach](https://github.com/EnoahNetzach)) +- Fatih ([frontsideair](https://github.com/frontsideair)) +- Ian McNally ([ianmcnally](https://github.com/ianmcnally)) +- Jurie Horneman ([jhorneman](https://github.com/jhorneman)) +- Kyle Mathews ([KyleAMathews](https://github.com/KyleAMathews)) +- Leo Wong ([gnowoel](https://github.com/gnowoel)) +- Marc Garreau ([marcgarreau](https://github.com/marcgarreau)) +- Nazim Hajidin ([nhajidin](https://github.com/nhajidin)) +- Orta ([orta](https://github.com/orta)) +- Patrick Mackinder ([pmackcode](https://github.com/pmackcode)) +- Sandro Padin ([spadin](https://github.com/spadin)) +- Sathish ([bboysathish](https://github.com/bboysathish)) +- Stefan ([bebbi](https://github.com/bebbi)) +- Swizec Teller ([Swizec](https://github.com/Swizec)) +- Vadzim ([vadzim](https://github.com/vadzim)) +- Vesa Laakso ([valscion](https://github.com/valscion)) +- Ville Immonen ([fson](https://github.com/fson)) +- [ekaradon](https://github.com/ekaradon) + +### Migrating from 0.7.0 to 0.8.0 + +You may optionally update the global command (it’s not required, but it adds Yarn support for new projects): + +``` +npm install -g create-react-app@0.7.0 +``` + +Inside any created project that has not been ejected, run: + +``` +npm install --save-dev --save-exact react-scripts@0.8.0 +``` + ## 0.7.0 (October 22, 2016) ### Build Dependency (`react-scripts`) diff --git a/lerna.json b/lerna.json index dfcc2e9f35f..00b2a8875a0 100644 --- a/lerna.json +++ b/lerna.json @@ -1,4 +1,16 @@ { "lerna": "2.0.0-beta.30", - "version": "independent" + "version": "independent", + "changelog": { + "repo": "facebookincubator/create-react-app", + "labels": { + "tag: new feature": ":rocket: New Feature", + "tag: breaking change": ":boom: Breaking Change", + "tag: bug fix": ":bug: Bug Fix", + "tag: enhancement": ":nail_care: Enhancement", + "tag: documentation": ":memo: Documentation", + "tag: internal": ":house: Internal" + }, + "cacheDir": ".changelog" + } } diff --git a/package.json b/package.json index 1ac6081b7b3..6645ea27971 100644 --- a/package.json +++ b/package.json @@ -2,6 +2,7 @@ "private": true, "scripts": { "build": "node packages/react-scripts/scripts/build.js", + "changelog": "lerna-changelog", "create-react-app": "tasks/cra.sh", "e2e": "tasks/e2e.sh", "postinstall": "lerna bootstrap", @@ -17,6 +18,7 @@ "eslint-plugin-import": "1.12.0", "eslint-plugin-jsx-a11y": "2.2.2", "eslint-plugin-react": "6.3.0", - "lerna": "2.0.0-beta.30" + "lerna": "2.0.0-beta.30", + "lerna-changelog": "^0.2.3" } } From 5ee027d638a582b2f1d47c35b4bc1d4c9f134737 Mon Sep 17 00:00:00 2001 From: Ville Immonen Date: Sat, 3 Dec 2016 18:03:38 +0200 Subject: [PATCH 06/30] Publish - babel-preset-react-app@2.0.0 - create-react-app@0.7.0 - eslint-config-react-app@0.4.0 - react-dev-utils@0.4.0 - react-scripts@0.8.0 --- packages/babel-preset-react-app/package.json | 2 +- packages/create-react-app/package.json | 2 +- packages/eslint-config-react-app/package.json | 2 +- packages/react-dev-utils/package.json | 2 +- packages/react-scripts/package.json | 8 ++++---- 5 files changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/babel-preset-react-app/package.json b/packages/babel-preset-react-app/package.json index 08a210674ee..9c0cd69bf60 100644 --- a/packages/babel-preset-react-app/package.json +++ b/packages/babel-preset-react-app/package.json @@ -1,6 +1,6 @@ { "name": "babel-preset-react-app", - "version": "1.0.0", + "version": "2.0.0", "description": "Babel preset used by Create React App", "repository": "facebookincubator/create-react-app", "license": "BSD-3-Clause", diff --git a/packages/create-react-app/package.json b/packages/create-react-app/package.json index 4dd8b0f1a6c..c245eb6df13 100644 --- a/packages/create-react-app/package.json +++ b/packages/create-react-app/package.json @@ -1,6 +1,6 @@ { "name": "create-react-app", - "version": "0.6.0", + "version": "0.7.0", "keywords": [ "react" ], diff --git a/packages/eslint-config-react-app/package.json b/packages/eslint-config-react-app/package.json index e0321bd47eb..2b373e72dba 100644 --- a/packages/eslint-config-react-app/package.json +++ b/packages/eslint-config-react-app/package.json @@ -1,6 +1,6 @@ { "name": "eslint-config-react-app", - "version": "0.3.0", + "version": "0.4.0", "description": "ESLint configuration used by Create React App", "repository": "facebookincubator/create-react-app", "license": "BSD-3-Clause", diff --git a/packages/react-dev-utils/package.json b/packages/react-dev-utils/package.json index c9f2fac2dcf..80b005eb017 100644 --- a/packages/react-dev-utils/package.json +++ b/packages/react-dev-utils/package.json @@ -1,6 +1,6 @@ { "name": "react-dev-utils", - "version": "0.3.0", + "version": "0.4.0", "description": "Webpack utilities used by Create React App", "repository": "facebookincubator/create-react-app", "license": "BSD-3-Clause", diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index d0f22bdd934..cc76abe7f2b 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -1,6 +1,6 @@ { "name": "react-scripts", - "version": "0.7.0", + "version": "0.8.0", "description": "Configuration and scripts for Create React App.", "repository": "facebookincubator/create-react-app", "license": "BSD-3-Clause", @@ -28,7 +28,7 @@ "babel-eslint": "7.0.0", "babel-jest": "17.0.2", "babel-loader": "6.2.7", - "babel-preset-react-app": "^1.0.0", + "babel-preset-react-app": "^2.0.0", "case-sensitive-paths-webpack-plugin": "1.1.4", "chalk": "1.1.3", "connect-history-api-fallback": "1.3.0", @@ -37,7 +37,7 @@ "detect-port": "1.0.1", "dotenv": "2.0.0", "eslint": "3.8.1", - "eslint-config-react-app": "^0.3.0", + "eslint-config-react-app": "^0.4.0", "eslint-loader": "1.6.0", "eslint-plugin-flowtype": "2.21.0", "eslint-plugin-import": "2.0.1", @@ -56,7 +56,7 @@ "path-exists": "2.1.0", "postcss-loader": "1.0.0", "promise": "7.1.1", - "react-dev-utils": "^0.3.0", + "react-dev-utils": "^0.4.0", "recursive-readdir": "2.1.0", "strip-ansi": "3.0.1", "style-loader": "0.13.1", From 27699338255b5d513668b3b6e815f34b5c65b218 Mon Sep 17 00:00:00 2001 From: Ville Immonen Date: Sat, 3 Dec 2016 19:53:44 +0200 Subject: [PATCH 07/30] Bump global CLI to 1.0.0 --- CHANGELOG.md | 2 +- packages/create-react-app/package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index b2f4460a3fc..d3c5ff3cdf4 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -143,7 +143,7 @@ You may optionally update the global command (it’s not required, but it adds Yarn support for new projects): ``` -npm install -g create-react-app@0.7.0 +npm install -g create-react-app@1.0.0 ``` Inside any created project that has not been ejected, run: diff --git a/packages/create-react-app/package.json b/packages/create-react-app/package.json index c245eb6df13..b10b06b8996 100644 --- a/packages/create-react-app/package.json +++ b/packages/create-react-app/package.json @@ -1,6 +1,6 @@ { "name": "create-react-app", - "version": "0.7.0", + "version": "1.0.0", "keywords": [ "react" ], From 329911606c454952db4ac137c828a3befcca9d06 Mon Sep 17 00:00:00 2001 From: Ville Immonen Date: Sat, 3 Dec 2016 20:01:32 +0200 Subject: [PATCH 08/30] Update package.json --- packages/create-react-app/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/create-react-app/package.json b/packages/create-react-app/package.json index b10b06b8996..2ee351e6aee 100644 --- a/packages/create-react-app/package.json +++ b/packages/create-react-app/package.json @@ -1,6 +1,6 @@ { "name": "create-react-app", - "version": "1.0.0", + "version": "0.8.0", "keywords": [ "react" ], From b57d8711b0df0cebe6230685238442901ff44c65 Mon Sep 17 00:00:00 2001 From: Ville Immonen Date: Sat, 3 Dec 2016 20:02:15 +0200 Subject: [PATCH 09/30] Publish - create-react-app@1.0.0 --- packages/create-react-app/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/create-react-app/package.json b/packages/create-react-app/package.json index 2ee351e6aee..b10b06b8996 100644 --- a/packages/create-react-app/package.json +++ b/packages/create-react-app/package.json @@ -1,6 +1,6 @@ { "name": "create-react-app", - "version": "0.8.0", + "version": "1.0.0", "keywords": [ "react" ], From 715de0de6b1cdfbff41e6f78b561c4750c42fcf3 Mon Sep 17 00:00:00 2001 From: Ville Immonen Date: Sun, 4 Dec 2016 10:57:57 +0200 Subject: [PATCH 10/30] Revert Jest moduleNameMapper regex back to a whitelist (#1149) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Jest matches moduleNameMapper regexes with module names, not the full file path, so the negative lookahead doesn’t work for filtering out JS files, because they can be imported without the extension. So paths like `lodash.assign` and `../utils/range` were mislabeled as resources with unknown file extensions because they have a dot in the name. As a stopgap measure, revert the moduleNameMapper regex added in #1077. --- packages/react-scripts/utils/createJestConfig.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-scripts/utils/createJestConfig.js b/packages/react-scripts/utils/createJestConfig.js index 46f3a1da1a5..38bef100623 100644 --- a/packages/react-scripts/utils/createJestConfig.js +++ b/packages/react-scripts/utils/createJestConfig.js @@ -20,7 +20,7 @@ module.exports = (resolve, rootDir, isEjecting) => { const config = { collectCoverageFrom: ['src/**/*.{js,jsx}'], moduleNameMapper: { - '^.+\\.(?!(js|jsx|css|json)$)[^\\.]+$': resolve('config/jest/FileStub.js'), + '^.+\\.(ico|jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': resolve('config/jest/FileStub.js'), '^.+\\.css$': resolve('config/jest/CSSStub.js') }, setupFiles: [resolve('config/polyfills.js')], From ea38f0b92288d84325b41b2b1c3b62cc1ac4c60d Mon Sep 17 00:00:00 2001 From: Ville Immonen Date: Sun, 4 Dec 2016 11:04:00 +0200 Subject: [PATCH 11/30] Update changelog for 0.8.1 --- CHANGELOG.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index d3c5ff3cdf4..d2633b2ba3b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,9 @@ +## 0.8.1 (2016-12-04) + +#### :bug: Bug Fix +* `react-scripts` + * [#1149](https://github.com/facebookincubator/create-react-app/pull/1149) Fix incorrectly stubbing JavaScript files with a dot in the import path in tests. ([@fson](https://github.com/fson)) + ## 0.8.0 (2016-12-03) #### :rocket: New Feature From b844e4e878603edb8ed11cbb81775a1548e2d754 Mon Sep 17 00:00:00 2001 From: Ville Immonen Date: Sun, 4 Dec 2016 11:04:12 +0200 Subject: [PATCH 12/30] Publish - react-scripts@0.8.1 --- packages/react-scripts/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index cc76abe7f2b..a379cab4253 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -1,6 +1,6 @@ { "name": "react-scripts", - "version": "0.8.0", + "version": "0.8.1", "description": "Configuration and scripts for Create React App.", "repository": "facebookincubator/create-react-app", "license": "BSD-3-Clause", From 4f3675c81fddad46e543d5add547e94dfe1cdd1d Mon Sep 17 00:00:00 2001 From: Ville Immonen Date: Sun, 4 Dec 2016 11:11:45 +0200 Subject: [PATCH 13/30] Update CHANGELOG.md --- CHANGELOG.md | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index d2633b2ba3b..a4300320094 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,14 @@ * `react-scripts` * [#1149](https://github.com/facebookincubator/create-react-app/pull/1149) Fix incorrectly stubbing JavaScript files with a dot in the import path in tests. ([@fson](https://github.com/fson)) +### Migrating from 0.8.0 to 0.8.1 + +Inside any created project that has not been ejected, run: + +``` +npm install --save-dev --save-exact react-scripts@0.8.1 +``` + ## 0.8.0 (2016-12-03) #### :rocket: New Feature From 15f65a0a4e603c007860889591457a6782f03cad Mon Sep 17 00:00:00 2001 From: Brian Ng Date: Mon, 5 Dec 2016 13:59:25 -0600 Subject: [PATCH 14/30] Make jsx-no-undef rule an error (#1159) --- packages/eslint-config-react-app/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/eslint-config-react-app/index.js b/packages/eslint-config-react-app/index.js index a067dd091b3..d93478bc8c9 100644 --- a/packages/eslint-config-react-app/index.js +++ b/packages/eslint-config-react-app/index.js @@ -189,7 +189,7 @@ module.exports = { // https://github.com/yannickcr/eslint-plugin-react/tree/master/docs/rules 'react/jsx-equals-spacing': ['warn', 'never'], 'react/jsx-no-duplicate-props': ['warn', { ignoreCase: true }], - 'react/jsx-no-undef': 'warn', + 'react/jsx-no-undef': 'error', 'react/jsx-pascal-case': ['warn', { allowAllCaps: true, ignore: [], From aaa615f6fae00b3a0c5f6f834cb0bb97343063db Mon Sep 17 00:00:00 2001 From: Stephen John Sorensen Date: Mon, 5 Dec 2016 15:06:47 -0500 Subject: [PATCH 15/30] Add testURL to jest config (#1120) In my tests, jsdom was throwing a "SecurityError" at HistoryImpl._sharedPushAndReplaceState (node_modules/react-scripts/node_modules/jsdom/lib/jsdom/living/window/History-impl.js:87:15) This happens because document.URL defaults to "about:blank". Unfortunately, if you interact with the History object it tries and fails to parse the URL, causing a "SecurityError" to be thrown. Setting the default URL to "http://localhost" fixes this issue. --- packages/react-scripts/utils/createJestConfig.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/react-scripts/utils/createJestConfig.js b/packages/react-scripts/utils/createJestConfig.js index 38bef100623..2b0c4bf0fc8 100644 --- a/packages/react-scripts/utils/createJestConfig.js +++ b/packages/react-scripts/utils/createJestConfig.js @@ -27,6 +27,7 @@ module.exports = (resolve, rootDir, isEjecting) => { setupTestFrameworkScriptFile: setupTestsFile, testPathIgnorePatterns: ['/(build|docs|node_modules)/'], testEnvironment: 'node', + testURL: 'http://localhost', }; if (rootDir) { config.rootDir = rootDir; From 0b6f4b8d3c3191d5caa7daf4967f6b21248fb75d Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Mon, 5 Dec 2016 21:24:54 +0000 Subject: [PATCH 16/30] Add "npm run build silently fails" to Troubleshooting (#1168) * Add "npm run build silently fails" to Troubleshooting * Update README.md --- 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 79105db05c5..4f5c388e7df 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -55,6 +55,8 @@ You can find the most recent version of this guide [here](https://github.com/fac - [S3 and CloudFront](#s3-and-cloudfront) - [Surge](#surge) - [Troubleshooting](#troubleshooting) + - [`npm test` hangs on macOS Sierra](#npm-test-hangs-on-macos-sierra) + - [`npm run build` silently fails](#npm-run-build-silently-fails) - [Something Missing?](#something-missing) ## Updating to New Releases @@ -1118,6 +1120,10 @@ If this still doesn't help, try running `launchctl unload -F ~/Library/LaunchAge There are also reports that *uninstalling* Watchman fixes the issue. So if nothing else helps, remove it from your system and try again. +### `npm run build` silently fails + +It is reported that `npm run build` can fail on machines with no swap space, which is common in cloud environments. If [the symptoms are matching](https://github.com/facebookincubator/create-react-app/issues/1133#issuecomment-264612171), consider adding some swap space to the machine you’re building on, or build the project locally. + ## Something Missing? If you have ideas for more “How To” recipes that should be on this page, [let us know](https://github.com/facebookincubator/create-react-app/issues) or [contribute some!](https://github.com/facebookincubator/create-react-app/edit/master/packages/react-scripts/template/README.md) From 3f6d68390a1381a6c1dacf657f67c1fc4e73bb5b Mon Sep 17 00:00:00 2001 From: Alex Wilmer Date: Mon, 5 Dec 2016 16:40:22 -0500 Subject: [PATCH 17/30] Fix minor typo/grammar (#1099) --- packages/react-scripts/template/README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index 4f5c388e7df..f247a2f2f24 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -908,7 +908,7 @@ If you use [Visual Studio Code](https://code.visualstudio.com), there is a [Jest ## Developing Components in Isolation -Usually, in an app, you have a lot of UI components, and each of them has many different states. +Usually, in an app, you have a lot of UI components, and each of them has many different states. For an example, a simple button component could have following states: * With a text label. @@ -969,8 +969,8 @@ This will let Create React App correctly infer the root path to use in the gener #### Step 1: Add `homepage` to `package.json` -**The below step is important!**
-**If your skip it, your app will not deploy correctly.** +**The step below is important!**
+**If you skip it, your app will not deploy correctly.** Open your `package.json` and add a `homepage` field: From b61dc6743012170201a23c4727a1235a81caaa5c Mon Sep 17 00:00:00 2001 From: Li Xuanji Date: Mon, 5 Dec 2016 16:57:54 -0500 Subject: [PATCH 18/30] Document what npm build does and pushState (#933) * Document what npm build does and pushState * Fix typos, add express example * Tweaks * Update README.md --- packages/react-scripts/template/README.md | 49 ++++++++++++++++++++++- 1 file changed, 48 insertions(+), 1 deletion(-) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index f247a2f2f24..7c7eda4b497 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -46,6 +46,7 @@ You can find the most recent version of this guide [here](https://github.com/fac - [Developing Components in Isolation](#developing-components-in-isolation) - [Making a Progressive Web App](#making-a-progressive-web-app) - [Deployment](#deployment) + - [Serving Apps with Client-Side Routing](#serving-apps-with-client-side-routing) - [Building for Relative Paths](#building-for-relative-paths) - [GitHub Pages](#github-pages) - [Heroku](#heroku) @@ -142,6 +143,8 @@ It correctly bundles React in production mode and optimizes the build for the be The build is minified and the filenames include the hashes.
Your app is ready to be deployed! +See the section about [deployment](#deployment) for more information. + ### `npm run eject` **Note: this is a one-way operation. Once you `eject`, you can’t go back!** @@ -952,7 +955,51 @@ You can turn your React app into a [Progressive Web App](https://developers.goog ## Deployment -## Building for Relative Paths +`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. For example, Python contains a built-in HTTP server that can serve static files: + +```sh +cd build +python -m SimpleHTTPServer 9000 +``` + +If you're using [Node](https://nodejs.org/) and [Express](http://expressjs.com/) as a server, it might look like this: + +```javascript +const express = require('express'); +const path = require('path'); +const app = express(); + +app.use(express.static('./build')); + +app.get('/', function (req, res) { + res.sendFile(path.join(__dirname, './build', 'index.html')); +}); + +app.listen(9000); +``` + +Create React App is not opinionated about your choice of web server. Any static file server will do. The `build` folder with static assets is the only output produced by Create React App. + +However this is not quite enough if you use client-side routing. Read the next section if you want to support URLs like `/todos/42` in your single-page app. + +### Serving Apps with Client-Side Routing + +If you use routers that use the HTML5 [`pushState` history API](https://developer.mozilla.org/en-US/docs/Web/API/History_API#Adding_and_modifying_history_entries) under the hood (for example, [React Router](https://github.com/ReactTraining/react-router) with `browserHistory`), many static file servers will fail. For example, if you used React Router with a route for `/todos/42`, the development server will respond to `localhost:3000/todos/42` properly, but an Express serving a production build as above will not. + +This is because when there is a fresh page load for a `/todos/42`, the server looks for the file `build/todos/42` and does not find it. The server needs to be configured to respond to a request to `/todos/42` by serving `index.html`. For example, we can amend our Express example above to serve `index.html` for any unknown paths: + +```diff + app.use(express.static('./build')); + +-app.get('/', function (req, res) { ++app.get('/*', function (req, res) { + res.sendFile(path.join(__dirname, './build', 'index.html')); + }); +``` + +Now requests to `/todos/42` will be handled correctly both in development and in production. + +### Building for Relative Paths By default, Create React App produces a build assuming your app is hosted at the server root.
To override this, specify the `homepage` in your `package.json`, for example: From 3a36693a05ed239397142e1571a3b9df506472a4 Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Mon, 5 Dec 2016 21:58:31 +0000 Subject: [PATCH 19/30] Update e2e.sh (#1167) --- tasks/e2e.sh | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tasks/e2e.sh b/tasks/e2e.sh index 557b48ccda2..58e6ad53ee8 100755 --- a/tasks/e2e.sh +++ b/tasks/e2e.sh @@ -56,7 +56,7 @@ root_path=$PWD if [ "$USE_YARN" = "yes" ] then # Install Yarn so that the test can use it to install packages. - npm install -g yarn + npm install -g yarn@0.17.10 # TODO: remove version when https://github.com/yarnpkg/yarn/issues/2142 is fixed. yarn cache clean fi From 023a5d9d46f1b6dbb784c3c1f252eb9091bb5f7c Mon Sep 17 00:00:00 2001 From: Guilherme Heynemann Bruzzi Date: Mon, 5 Dec 2016 20:19:26 -0200 Subject: [PATCH 20/30] Add deploy to Firebase CDN on template's README (Closes #374) (#1143) * Add deploy to Firebase CDN on template's README (Closes #374) * Move section and minor tweaks --- packages/react-scripts/template/README.md | 63 +++++++++++++++++++++++ 1 file changed, 63 insertions(+) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index 7c7eda4b497..4010a51cb3e 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -48,6 +48,7 @@ You can find the most recent version of this guide [here](https://github.com/fac - [Deployment](#deployment) - [Serving Apps with Client-Side Routing](#serving-apps-with-client-side-routing) - [Building for Relative Paths](#building-for-relative-paths) + - [Firebase](#firebase) - [GitHub Pages](#github-pages) - [Heroku](#heroku) - [Modulus](#modulus) @@ -1010,6 +1011,68 @@ 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. + +### Firebase + +Install the Firebase CLI if you haven't already by running `npm install -g firebase-tools`. Sign up for a [Firebase account](https://console.firebase.google.com/) and create a new project. Run `firebase login` and login with your previous created Firebase account. + +Then run the `firebase init` command from your project's root. You need to choose the **Hosting: Configure and deploy Firebase Hosting sites** and choose the Firebase project you created in the previous step. You will need to agree with `database.rules.json` being created, choose `build` as the public directory, and also agree to **Configure as a single-page app** by replying with `y`. + +```sh + === Project Setup + + First, let's associate this project directory with a Firebase project. + You can create multiple project aliases by running firebase use --add, + but for now we'll just set up a default project. + + ? What Firebase project do you want to associate as default? Example app (example-app-fd690) + + === Database Setup + + Firebase Realtime Database Rules allow you to define how your data should be + structured and when your data can be read from and written to. + + ? What file should be used for Database Rules? database.rules.json + ✔ Database Rules for example-app-fd690 have been downloaded to database.rules.json. + Future modifications to database.rules.json will update Database Rules when you run + firebase deploy. + + === Hosting Setup + + Your public directory is the folder (relative to your project directory) that + will contain Hosting assets to uploaded with firebase deploy. If you + have a build process for your assets, use your build's output directory. + + ? What do you want to use as your public directory? build + ? Configure as a single-page app (rewrite all urls to /index.html)? Yes + ✔ Wrote build/index.html + + i Writing configuration info to firebase.json... + i Writing project information to .firebaserc... + + ✔ Firebase initialization complete! +``` + +Now, after you create a production build with `npm run build`, you can deploy it by running `firebase deploy`. + +```sh + === Deploying to 'example-app-fd690'... + + i deploying database, hosting + ✔ database: rules ready to deploy. + i hosting: preparing build directory for upload... + Uploading: [============================== ] 75%✔ hosting: build folder uploaded successfully + ✔ hosting: 8 files uploaded successfully + i starting release process (may take several minutes)... + + ✔ Deploy complete! + + Project Console: https://console.firebase.google.com/project/example-app-fd690/overview + Hosting URL: https://example-app-fd690.firebaseapp.com +``` + +For more information see [Add Firebase to your JavaScript Project](https://firebase.google.com/docs/web/setup). + ### GitHub Pages >Note: this feature is available with `react-scripts@0.2.0` and higher. From f7d9cd8166ea73512acb0b603a3e09c2dc8b7b8e Mon Sep 17 00:00:00 2001 From: James Newell Date: Tue, 6 Dec 2016 09:58:36 +1100 Subject: [PATCH 21/30] Don't strip stack traces of evaluated webpack bundles (#1050) * Don't strip stack traces of evaluated webpack code * Strip stack traces at the end of a string because the last line doesn't always have a `\n` and `create-react-app` is leaving the last line of the stack traces present in the error messages * code comment * code comment --- packages/react-dev-utils/formatWebpackMessages.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/react-dev-utils/formatWebpackMessages.js b/packages/react-dev-utils/formatWebpackMessages.js index d72d5f734ca..c40691b7c6b 100644 --- a/packages/react-dev-utils/formatWebpackMessages.js +++ b/packages/react-dev-utils/formatWebpackMessages.js @@ -101,9 +101,12 @@ function formatMessage(message) { // Reassemble the message. message = lines.join('\n'); - // Internal stacks are generally useless so we strip them + // Internal stacks are generally useless so we strip them... with the + // exception of stacks containing `webpack:` because they're normally + // from user code generated by WebPack. For more information see + // https://github.com/facebookincubator/create-react-app/pull/1050 message = message.replace( - /^\s*at\s.*:\d+:\d+[\s\)]*\n/gm, '' + /^\s*at\s((?!webpack:).)*:\d+:\d+[\s\)]*(\n|$)/gm, '' ); // at ... ...:x:y return message; From 80765677d5591ba980681f899c65d06f84e29518 Mon Sep 17 00:00:00 2001 From: Harun Date: Tue, 6 Dec 2016 11:17:18 +0000 Subject: [PATCH 22/30] Remove path module from webpack config on eject. (#1175) * Remove path module from webpack config on eject. Fixes #1174 * Move path module inclusion right after the other imports Re: #1174 --- packages/react-scripts/config/webpack.config.dev.js | 6 +++++- packages/react-scripts/config/webpack.config.prod.js | 6 +++++- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js index 8e264d40286..bd8db711a0c 100644 --- a/packages/react-scripts/config/webpack.config.dev.js +++ b/packages/react-scripts/config/webpack.config.dev.js @@ -9,7 +9,6 @@ */ // @remove-on-eject-end -var path = require('path'); var autoprefixer = require('autoprefixer'); var webpack = require('webpack'); var HtmlWebpackPlugin = require('html-webpack-plugin'); @@ -19,6 +18,11 @@ var WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeMod var getClientEnvironment = require('./env'); var paths = require('./paths'); +// @remove-on-eject-begin +// `path` is not used after eject - see https://github.com/facebookincubator/create-react-app/issues/1174 +var path = require('path'); +// @remove-on-eject-end + // Webpack uses `publicPath` to determine where the app is being served from. // In development, we always serve from the root. This makes config easier. var publicPath = '/'; diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js index 60016896892..bae24d1a46d 100644 --- a/packages/react-scripts/config/webpack.config.prod.js +++ b/packages/react-scripts/config/webpack.config.prod.js @@ -9,7 +9,6 @@ */ // @remove-on-eject-end -var path = require('path'); var autoprefixer = require('autoprefixer'); var webpack = require('webpack'); var HtmlWebpackPlugin = require('html-webpack-plugin'); @@ -20,6 +19,11 @@ var url = require('url'); var paths = require('./paths'); var getClientEnvironment = require('./env'); +// @remove-on-eject-begin +// `path` is not used after eject - see https://github.com/facebookincubator/create-react-app/issues/1174 +var path = require('path'); +// @remove-on-eject-end + function ensureSlash(path, needsSlash) { var hasSlash = path.endsWith('/'); if (hasSlash && !needsSlash) { From 11cd813802153a5de0ec1d60ea764fd1b26be8c8 Mon Sep 17 00:00:00 2001 From: Vincenzo Chianese Date: Tue, 6 Dec 2016 13:20:09 +0100 Subject: [PATCH 23/30] Add Subresource Integrity support (#1176) * Add Subresource Integrity support * Pin dependency --- packages/react-scripts/config/webpack.config.prod.js | 5 +++++ packages/react-scripts/package.json | 1 + 2 files changed, 6 insertions(+) diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js index bae24d1a46d..df970584a9e 100644 --- a/packages/react-scripts/config/webpack.config.prod.js +++ b/packages/react-scripts/config/webpack.config.prod.js @@ -15,6 +15,7 @@ var HtmlWebpackPlugin = require('html-webpack-plugin'); var ExtractTextPlugin = require('extract-text-webpack-plugin'); var ManifestPlugin = require('webpack-manifest-plugin'); var InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin'); +var SubresourceIntegrityPlugin = require('webpack-subresource-integrity'); var url = require('url'); var paths = require('./paths'); var getClientEnvironment = require('./env'); @@ -259,6 +260,10 @@ module.exports = { // having to parse `index.html`. new ManifestPlugin({ fileName: 'asset-manifest.json' + }), + // Generate and inject subresources hashes in the final `index.html`. + new SubresourceIntegrityPlugin({ + hashFuncNames: ['sha256', 'sha384'] }) ], // Some libraries import Node modules but don't use them in the browser. diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index a379cab4253..9a13efce14d 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -64,6 +64,7 @@ "webpack": "1.13.2", "webpack-dev-server": "1.16.2", "webpack-manifest-plugin": "1.1.0", + "webpack-subresource-integrity": "0.7.0", "whatwg-fetch": "1.0.0" }, "devDependencies": { From 7af5374ec92317fde04d54c9b66fe15b668871c0 Mon Sep 17 00:00:00 2001 From: Fabrizio Castellarin Date: Tue, 6 Dec 2016 14:50:50 +0100 Subject: [PATCH 24/30] [babel-preset-react-app] Temporary fix missing babel plugins (#1177) * temporary fix missing babel plugins * Add an issue link --- packages/babel-preset-react-app/index.js | 62 ++++++++++++-------- packages/babel-preset-react-app/package.json | 3 + 2 files changed, 39 insertions(+), 26 deletions(-) diff --git a/packages/babel-preset-react-app/index.js b/packages/babel-preset-react-app/index.js index 1f7ec0f8e0e..0188b9484c1 100644 --- a/packages/babel-preset-react-app/index.js +++ b/packages/babel-preset-react-app/index.js @@ -11,32 +11,32 @@ var path = require('path'); const plugins = [ - // class { handleClick = () => { } } - require.resolve('babel-plugin-transform-class-properties'), - // The following two plugins use Object.assign directly, instead of Babel's - // extends helper. Note that this assumes `Object.assign` is available. - // { ...todo, completed: true } - [require.resolve('babel-plugin-transform-object-rest-spread'), { - useBuiltIns: true - }], - // Transforms JSX - [require.resolve('babel-plugin-transform-react-jsx'), { - useBuiltIns: true - }], - // function* () { yield 42; yield 43; } - [require.resolve('babel-plugin-transform-regenerator'), { - // Async functions are converted to generators by babel-preset-latest - async: false - }], - // Polyfills the runtime needed for async/await and generators - [require.resolve('babel-plugin-transform-runtime'), { - helpers: false, - polyfill: false, - regenerator: true, - // Resolve the Babel runtime relative to the config. - moduleName: path.dirname(require.resolve('babel-runtime/package')) - }] - ]; + // class { handleClick = () => { } } + require.resolve('babel-plugin-transform-class-properties'), + // The following two plugins use Object.assign directly, instead of Babel's + // extends helper. Note that this assumes `Object.assign` is available. + // { ...todo, completed: true } + [require.resolve('babel-plugin-transform-object-rest-spread'), { + useBuiltIns: true + }], + // Transforms JSX + [require.resolve('babel-plugin-transform-react-jsx'), { + useBuiltIns: true + }], + // function* () { yield 42; yield 43; } + [require.resolve('babel-plugin-transform-regenerator'), { + // Async functions are converted to generators by babel-preset-latest + async: false + }], + // Polyfills the runtime needed for async/await and generators + [require.resolve('babel-plugin-transform-runtime'), { + helpers: false, + polyfill: false, + regenerator: true, + // Resolve the Babel runtime relative to the config. + moduleName: path.dirname(require.resolve('babel-runtime/package')) + }] +]; // This is similar to how `env` works in Babel: // https://babeljs.io/docs/usage/babelrc/#env-option @@ -69,6 +69,16 @@ if (env === 'development' || env === 'test') { } if (env === 'test') { + // The following plugins are a temporary workaround because + // `babel-plugin-transform-regenerator` apparently needs them + // and `babel-preset-env` doesn't detect it. + // https://github.com/facebookincubator/create-react-app/issues/1156 + plugins.push.apply(plugins, [ + require.resolve('babel-plugin-transform-es2015-arrow-functions'), + require.resolve('babel-plugin-transform-es2015-destructuring'), + require.resolve('babel-plugin-transform-es2015-parameters') + ]); + module.exports = { presets: [ // ES features necessary for user's Node version diff --git a/packages/babel-preset-react-app/package.json b/packages/babel-preset-react-app/package.json index 9c0cd69bf60..e3b1ed91043 100644 --- a/packages/babel-preset-react-app/package.json +++ b/packages/babel-preset-react-app/package.json @@ -12,6 +12,9 @@ ], "dependencies": { "babel-plugin-transform-class-properties": "6.16.0", + "babel-plugin-transform-es2015-arrow-functions": "6.8.0", + "babel-plugin-transform-es2015-destructuring": "6.19.0", + "babel-plugin-transform-es2015-parameters": "6.18.0", "babel-plugin-transform-object-rest-spread": "6.19.0", "babel-plugin-transform-react-constant-elements": "6.9.1", "babel-plugin-transform-react-jsx": "6.8.0", From d8dfdb01c7a3db01196bfc95c31fa53cdf6ab88b Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Tue, 6 Dec 2016 15:10:42 +0000 Subject: [PATCH 25/30] Fix Babel issues in tests by applying the right transforms (#1179) --- packages/babel-preset-react-app/index.js | 22 +++++++++----------- packages/babel-preset-react-app/package.json | 2 -- 2 files changed, 10 insertions(+), 14 deletions(-) diff --git a/packages/babel-preset-react-app/index.js b/packages/babel-preset-react-app/index.js index 0188b9484c1..a028babc06c 100644 --- a/packages/babel-preset-react-app/index.js +++ b/packages/babel-preset-react-app/index.js @@ -23,11 +23,6 @@ const plugins = [ [require.resolve('babel-plugin-transform-react-jsx'), { useBuiltIns: true }], - // function* () { yield 42; yield 43; } - [require.resolve('babel-plugin-transform-regenerator'), { - // Async functions are converted to generators by babel-preset-latest - async: false - }], // Polyfills the runtime needed for async/await and generators [require.resolve('babel-plugin-transform-runtime'), { helpers: false, @@ -69,13 +64,10 @@ if (env === 'development' || env === 'test') { } if (env === 'test') { - // The following plugins are a temporary workaround because - // `babel-plugin-transform-regenerator` apparently needs them - // and `babel-preset-env` doesn't detect it. - // https://github.com/facebookincubator/create-react-app/issues/1156 plugins.push.apply(plugins, [ - require.resolve('babel-plugin-transform-es2015-arrow-functions'), - require.resolve('babel-plugin-transform-es2015-destructuring'), + // We always include this plugin regardless of environment + // because of a Babel bug that breaks object rest/spread without it: + // https://github.com/babel/babel/issues/4851 require.resolve('babel-plugin-transform-es2015-parameters') ]); @@ -100,7 +92,13 @@ if (env === 'test') { // JSX, Flow require.resolve('babel-preset-react') ], - plugins: plugins + plugins: plugins.concat([ + // function* () { yield 42; yield 43; } + [require.resolve('babel-plugin-transform-regenerator'), { + // Async functions are converted to generators by babel-preset-latest + async: false + }], + ]) }; if (env === 'production') { diff --git a/packages/babel-preset-react-app/package.json b/packages/babel-preset-react-app/package.json index e3b1ed91043..b61315e1916 100644 --- a/packages/babel-preset-react-app/package.json +++ b/packages/babel-preset-react-app/package.json @@ -12,8 +12,6 @@ ], "dependencies": { "babel-plugin-transform-class-properties": "6.16.0", - "babel-plugin-transform-es2015-arrow-functions": "6.8.0", - "babel-plugin-transform-es2015-destructuring": "6.19.0", "babel-plugin-transform-es2015-parameters": "6.18.0", "babel-plugin-transform-object-rest-spread": "6.19.0", "babel-plugin-transform-react-constant-elements": "6.9.1", From 15feb02e9cae7f737f44bd6a3ddf2103961fa362 Mon Sep 17 00:00:00 2001 From: Bogdan Soare Date: Tue, 6 Dec 2016 18:07:50 +0200 Subject: [PATCH 26/30] Use file-loader for svgs (#1180) --- packages/react-scripts/config/webpack.config.dev.js | 11 ++++++++++- packages/react-scripts/config/webpack.config.prod.js | 11 ++++++++++- tasks/e2e.sh | 3 +++ 3 files changed, 23 insertions(+), 2 deletions(-) diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js index bd8db711a0c..96fd632b795 100644 --- a/packages/react-scripts/config/webpack.config.dev.js +++ b/packages/react-scripts/config/webpack.config.dev.js @@ -131,7 +131,8 @@ module.exports = { /\.html$/, /\.(js|jsx)$/, /\.css$/, - /\.json$/ + /\.json$/, + /\.svg$/ ], loader: 'url', query: { @@ -169,6 +170,14 @@ module.exports = { { test: /\.json$/, loader: 'json' + }, + // "file" loader for svg + { + test: /\.svg$/, + loader: 'file', + query: { + name: 'static/media/[name].[hash:8].[ext]' + } } ] }, diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js index df970584a9e..c2f066e5d6a 100644 --- a/packages/react-scripts/config/webpack.config.prod.js +++ b/packages/react-scripts/config/webpack.config.prod.js @@ -138,7 +138,8 @@ module.exports = { /\.html$/, /\.(js|jsx)$/, /\.css$/, - /\.json$/ + /\.json$/, + /\.svg$/ ], loader: 'url', query: { @@ -180,6 +181,14 @@ module.exports = { { test: /\.json$/, loader: 'json' + }, + // "file" loader for svg + { + test: /\.svg$/, + loader: 'file', + query: { + name: 'static/media/[name].[hash:8].[ext]' + } } ] }, diff --git a/tasks/e2e.sh b/tasks/e2e.sh index 58e6ad53ee8..ce7b50f35b5 100755 --- a/tasks/e2e.sh +++ b/tasks/e2e.sh @@ -76,6 +76,7 @@ npm run build test -e build/*.html test -e build/static/js/*.js test -e build/static/css/*.css +test -e build/static/media/*.svg test -e build/favicon.ico # Run tests with CI flag @@ -140,6 +141,7 @@ npm run build test -e build/*.html test -e build/static/js/*.js test -e build/static/css/*.css +test -e build/static/media/*.svg test -e build/favicon.ico # Run tests with CI flag @@ -169,6 +171,7 @@ npm run build test -e build/*.html test -e build/static/js/*.js test -e build/static/css/*.css +test -e build/static/media/*.svg test -e build/favicon.ico # Run tests, overring the watch option to disable it. From 6ebec23a85a43cdc734848c9e0b3651a2dc14874 Mon Sep 17 00:00:00 2001 From: Jirat Ki Date: Wed, 7 Dec 2016 00:14:57 +0700 Subject: [PATCH 27/30] Chrome 'open tab' reuse an empty tab when possible (#1165) * Reuse empty tab on open chrome apple script * Break find tab into function * Use property to store found * Fix minor issues that caused window to not get active --- .../react-dev-utils/openChrome.applescript | 68 ++++++++++++++----- 1 file changed, 52 insertions(+), 16 deletions(-) diff --git a/packages/react-dev-utils/openChrome.applescript b/packages/react-dev-utils/openChrome.applescript index b36b70f6cfc..f5d79bb6201 100644 --- a/packages/react-dev-utils/openChrome.applescript +++ b/packages/react-dev-utils/openChrome.applescript @@ -7,23 +7,70 @@ This source code is licensed under the BSD-style license found in the of patent rights can be found in the PATENTS file in the same directory. *) +property targetTab: null +property targetTabIndex: -1 +property targetWindow: null + on run argv set theURL to item 1 of argv - tell application "Chrome" + tell application "Google Chrome" if (count every window) = 0 then make new window end if - -- Find a tab currently running the debugger + -- 1: Looking for tab running debugger + -- then, Reload debugging tab if found + -- then return + set found to my lookupTabWithUrl(theURL) + if found then + set targetWindow's active tab index to targetTabIndex + tell targetTab to reload + tell targetWindow to activate + set index of targetWindow to 1 + return + end if + + -- 2: Looking for Empty tab + -- In case debugging tab was not found + -- We try to find an empty tab instead + set found to my lookupTabWithUrl("chrome://newtab/") + if found then + set targetWindow's active tab index to targetTabIndex + set URL of targetTab to theURL + tell targetWindow to activate + return + end if + + -- 3: Create new tab + -- both debugging and empty tab were not found + -- make a new tab with url + tell window 1 + activate + make new tab with properties {URL:theURL} + end tell + end tell +end run + +-- Function: +-- Lookup tab with given url +-- if found, store tab, index, and window in properties +-- (properties were declared on top of file) +on lookupTabWithUrl(lookupUrl) + tell application "Google Chrome" + -- Find a tab with the given url set found to false set theTabIndex to -1 repeat with theWindow in every window set theTabIndex to 0 repeat with theTab in every tab of theWindow set theTabIndex to theTabIndex + 1 - if theTab's URL as string contains theURL then + if (theTab's URL as string) contains lookupUrl then + -- assign tab, tab index, and window to properties + set targetTab to theTab + set targetTabIndex to theTabIndex + set targetWindow to theWindow set found to true exit repeat end if @@ -33,17 +80,6 @@ on run argv exit repeat end if end repeat - - if found then - tell theTab to reload - set index of theWindow to 1 - set theWindow's active tab index to theTabIndex - tell theWindow to activate - else - tell window 1 - activate - make new tab with properties {URL:theURL} - end tell - end if end tell -end run + return found +end lookupTabWithUrl From 45c042685e1f7711925d43065c4ed52590724736 Mon Sep 17 00:00:00 2001 From: Vincenzo Chianese Date: Wed, 7 Dec 2016 13:27:07 +0100 Subject: [PATCH 28/30] Update webpack prod config (#1181) --- packages/react-scripts/config/webpack.config.prod.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js index c2f066e5d6a..71509658eb7 100644 --- a/packages/react-scripts/config/webpack.config.prod.js +++ b/packages/react-scripts/config/webpack.config.prod.js @@ -81,6 +81,10 @@ module.exports = { // We don't currently advertise code splitting but Webpack supports it. filename: 'static/js/[name].[chunkhash:8].js', chunkFilename: 'static/js/[name].[chunkhash:8].chunk.js', + // Given Webpack supports codesplit and production bundles are using + // subresource integrity, it's important to make sure the attribute + // set on async-loaded chunks is set to anonymous. + crossOriginLoading: 'anonymous', // We inferred the "public path" (such as / or /my-project) from homepage. publicPath: publicPath }, From 5f57040376eade695981c4c840636ca04efe6925 Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Wed, 7 Dec 2016 12:58:01 +0000 Subject: [PATCH 29/30] Update Webpack to fix source map issues (#1188) --- packages/react-scripts/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index 9a13efce14d..74acb73eecf 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -61,7 +61,7 @@ "strip-ansi": "3.0.1", "style-loader": "0.13.1", "url-loader": "0.5.7", - "webpack": "1.13.2", + "webpack": "1.14.0", "webpack-dev-server": "1.16.2", "webpack-manifest-plugin": "1.1.0", "webpack-subresource-integrity": "0.7.0", From d68a989779a6ab565f7cd6a166c870f768529ef9 Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Wed, 7 Dec 2016 14:12:58 +0000 Subject: [PATCH 30/30] Relax peerDependencies for ESLint preset (#1191) --- packages/eslint-config-react-app/package.json | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/eslint-config-react-app/package.json b/packages/eslint-config-react-app/package.json index 2b373e72dba..333ceef1ab4 100644 --- a/packages/eslint-config-react-app/package.json +++ b/packages/eslint-config-react-app/package.json @@ -11,11 +11,11 @@ "index.js" ], "peerDependencies": { - "babel-eslint": "7.0.0", - "eslint": "3.8.1", - "eslint-plugin-flowtype": "2.21.0", - "eslint-plugin-import": "2.0.1", - "eslint-plugin-jsx-a11y": "2.2.3", - "eslint-plugin-react": "6.4.1" + "babel-eslint": "^7.0.0", + "eslint": "^3.8.1", + "eslint-plugin-flowtype": "^2.21.0", + "eslint-plugin-import": "^2.0.1", + "eslint-plugin-jsx-a11y": "^2.2.3", + "eslint-plugin-react": "^6.4.1" } }