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..a4300320094 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,171 @@ +## 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)) + +### 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 +* `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@1.0.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/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) 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" } } diff --git a/packages/babel-preset-react-app/index.js b/packages/babel-preset-react-app/index.js index 1f7ec0f8e0e..a028babc06c 100644 --- a/packages/babel-preset-react-app/index.js +++ b/packages/babel-preset-react-app/index.js @@ -11,32 +11,27 @@ 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 + }], + // 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 +64,13 @@ if (env === 'development' || env === 'test') { } if (env === 'test') { + plugins.push.apply(plugins, [ + // 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') + ]); + module.exports = { presets: [ // ES features necessary for user's Node version @@ -90,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 08a210674ee..b61315e1916 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", @@ -12,6 +12,7 @@ ], "dependencies": { "babel-plugin-transform-class-properties": "6.16.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", diff --git a/packages/create-react-app/package.json b/packages/create-react-app/package.json index 4dd8b0f1a6c..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.6.0", + "version": "1.0.0", "keywords": [ "react" ], 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: [], diff --git a/packages/eslint-config-react-app/package.json b/packages/eslint-config-react-app/package.json index e0321bd47eb..333ceef1ab4 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", @@ -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" } } 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; 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 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/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js index 8e264d40286..96fd632b795 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 = '/'; @@ -127,7 +131,8 @@ module.exports = { /\.html$/, /\.(js|jsx)$/, /\.css$/, - /\.json$/ + /\.json$/, + /\.svg$/ ], loader: 'url', query: { @@ -165,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 60016896892..71509658eb7 100644 --- a/packages/react-scripts/config/webpack.config.prod.js +++ b/packages/react-scripts/config/webpack.config.prod.js @@ -9,17 +9,22 @@ */ // @remove-on-eject-end -var path = require('path'); var autoprefixer = require('autoprefixer'); var webpack = require('webpack'); 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'); +// @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) { @@ -76,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 }, @@ -133,7 +142,8 @@ module.exports = { /\.html$/, /\.(js|jsx)$/, /\.css$/, - /\.json$/ + /\.json$/, + /\.svg$/ ], loader: 'url', query: { @@ -175,6 +185,14 @@ module.exports = { { test: /\.json$/, loader: 'json' + }, + // "file" loader for svg + { + test: /\.svg$/, + loader: 'file', + query: { + name: 'static/media/[name].[hash:8].[ext]' + } } ] }, @@ -255,6 +273,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 d0f22bdd934..74acb73eecf 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.1", "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,14 +56,15 @@ "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", "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", "whatwg-fetch": "1.0.0" }, "devDependencies": { 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 48409092a27..4010a51cb3e 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -42,9 +42,13 @@ 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) + - [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) @@ -53,6 +57,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 @@ -138,6 +144,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!** @@ -808,7 +816,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 @@ -825,6 +837,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. @@ -836,6 +849,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) @@ -844,9 +861,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 @@ -881,9 +904,15 @@ 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. +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. @@ -921,9 +950,57 @@ 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 +`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: @@ -934,14 +1011,76 @@ 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. #### 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: @@ -1091,6 +1230,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) diff --git a/packages/react-scripts/utils/createJestConfig.js b/packages/react-scripts/utils/createJestConfig.js index 46f3a1da1a5..2b0c4bf0fc8 100644 --- a/packages/react-scripts/utils/createJestConfig.js +++ b/packages/react-scripts/utils/createJestConfig.js @@ -20,13 +20,14 @@ 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')], setupTestFrameworkScriptFile: setupTestsFile, testPathIgnorePatterns: ['/(build|docs|node_modules)/'], testEnvironment: 'node', + testURL: 'http://localhost', }; if (rootDir) { config.rootDir = rootDir; diff --git a/tasks/e2e.sh b/tasks/e2e.sh index 557b48ccda2..ce7b50f35b5 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 @@ -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.