diff --git a/.gitignore b/.gitignore
index 7444dad4ec2..0aa0ed568ba 100644
--- a/.gitignore
+++ b/.gitignore
@@ -5,5 +5,7 @@ build
my-app*
template/src/__tests__/__snapshots__/
lerna-debug.log
-npm-debug.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
/.changelog
diff --git a/.travis.yml b/.travis.yml
index bb9c8112081..aa61d9eb976 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -1,7 +1,6 @@
---
language: node_js
node_js:
- - 0.10
- 4
- 6
cache:
@@ -9,7 +8,18 @@ cache:
- node_modules
- packages/create-react-app/node_modules
- packages/react-scripts/node_modules
-script: tasks/e2e.sh
+script:
+ - 'if [ $TEST_SUITE = "simple" ]; then tasks/e2e-simple.sh; fi'
+ - 'if [ $TEST_SUITE = "installs" ]; then tasks/e2e-installs.sh; fi'
+ - 'if [ $TEST_SUITE = "kitchensink" ]; then tasks/e2e-kitchensink.sh; fi'
env:
- - USE_YARN=no
- - USE_YARN=yes
+ global:
+ - USE_YARN=no
+ matrix:
+ - TEST_SUITE=simple
+ - TEST_SUITE=installs
+ - TEST_SUITE=kitchensink
+matrix:
+ include:
+ - node_js: 6
+ env: USE_YARN=yes TEST_SUITE=simple
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4d8cdb4fecb..5d4225d0755 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,196 @@
+## 0.9.0 (February 11, 2017)
+
+Thanks to [@Timer](https://github.com/timer) for cutting this release.
+
+#### :rocket: New Feature
+
+* `react-scripts`
+
+ * [#1489](https://github.com/facebookincubator/create-react-app/pull/1489) Support setting `"homepage"` to `"."` to generate relative asset paths. ([@tibdex](https://github.com/tibdex))
+
+ Applications that don’t use the HTML5 `pushState` API can now be built to be served from any relative URL. To enable this, specify `"."` as your `homepage` setting in `package.json`. It used to be possible before with a few known bugs, but they should be fixed now. See [Serving the Same Build from Different Paths](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#serving-the-same-build-from-different-paths).
+
+ * [#937](https://github.com/facebookincubator/create-react-app/pull/1504) Add `PUBLIC_URL` environment variable for advanced use. ([@EnoahNetzach](https://github.com/EnoahNetzach))
+
+ If you use a CDN to serve the app, you can now specify `PUBLIC_URL` environment variable to override the base URL (including the hostname) for resources referenced from the built code. This new variable is mentioned in the new [Advanced Configuration](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#advanced-configuration) section.
+
+ * [#1440](https://github.com/facebookincubator/create-react-app/pull/1440) Make all `REACT_APP_*` environment variables accessible in `index.html`. ([@jihchi](https://github.com/jihchi))
+
+ This makes all environment variables previously available in JS, also available in the HTML file, for example `%REACT_APP_MY_VARIABLE%`. See [Referencing Environment Variables in HTML](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#referencing-environment-variables-in-the-html).
+
+* `react-dev-utils`
+
+ * [#1148](https://github.com/facebookincubator/create-react-app/pull/1148) Configure which browser to open with `npm start`. ([@GAumala](https://github.com/GAumala))
+
+ You can now disable the automatic browser launching by setting the `BROWSER` environment variable to `none`. You can also specify a different browser (or an arbitrary script) to open by default, [as supported by `opn` command](https://github.com/sindresorhus/opn#app) that we use under the hood. See [Advanced Configuration](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#advanced-configuration).
+
+#### :boom: Breaking Change
+
+* `react-scripts`
+
+ * [#1522](https://github.com/facebookincubator/create-react-app/pull/1522) Upgrade dependencies. ([@Timer](https://github.com/Timer))
+ * [#1432](https://github.com/facebookincubator/create-react-app/pull/1432) Bump Jest version. ([@gaearon](https://github.com/gaearon))
+ * [#1311](https://github.com/facebookincubator/create-react-app/pull/1311) Updated `babel-jest` and `jest` packages to 18.0.0. ([@lopezator](https://github.com/lopezator))
+
+ Jest has been updated to 18 and has introduced some [breaking changes and new features](https://facebook.github.io/jest/blog/2016/12/15/2016-in-jest.html).
+
+* `react-scripts`, `react-dev-utils`
+
+ * [#1264](https://github.com/facebookincubator/create-react-app/pull/1264) Remove interactive shell check when opening browser on start. ([@CaryLandholt](https://github.com/CaryLandholt))
+
+ Non-interactive terminals no longer automatically disable launching of the browser. Instead, you need to [specify `none` as `BROWSER` environment variable](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#advanced-configuration) if you wish to disable it.
+
+#### :bug: Bug Fix
+
+* `react-scripts`
+
+ * [#1441](https://github.com/facebookincubator/create-react-app/pull/1441) Added `babel-runtime` dependency to deduplicate dependencies when using Yarn. ([@jkimbo](https://github.com/jkimbo))
+
+ This works around a bug in Yarn that caused newly created projects to be over 400MB. Now they are down to 126MB, just like with npm 3.
+
+ * [#1522](https://github.com/facebookincubator/create-react-app/pull/1522) Upgrade dependencies. ([@Timer](https://github.com/Timer))
+ * [#1458](https://github.com/facebookincubator/create-react-app/pull/1458) Additionally remove `react-scripts` from dependencies on eject. ([@creynders](https://github.com/creynders))
+ * [#1309](https://github.com/facebookincubator/create-react-app/pull/1309) Bump `babel-loader` version (#1009). ([@frontsideair](https://github.com/frontsideair))
+ * [#1267](https://github.com/facebookincubator/create-react-app/pull/1267) Only gitignore directories in root, not deep. ([@jayphelps](https://github.com/jayphelps))
+
+* `react-dev-utils`
+
+ * [#1377](https://github.com/facebookincubator/create-react-app/pull/1377) webpack-dev-server patch for 'still-ok' success status. ([@TheBlackBolt](https://github.com/TheBlackBolt))
+ * [#1274](https://github.com/facebookincubator/create-react-app/pull/1274) Downgrading to compatible version of SockJS-Client. ([@holloway](https://github.com/holloway))
+ * [#1247](https://github.com/facebookincubator/create-react-app/pull/1247) Only open Chrome tab if BROWSER is missing or is Chrome. ([@gaearon](https://github.com/gaearon))
+
+#### :nail_care: Enhancement
+
+* `react-scripts`
+
+ * [#1496](https://github.com/facebookincubator/create-react-app/pull/1496) Make build exit with error code when interrupted. ([@brandones](https://github.com/brandones))
+ * [#1352](https://github.com/facebookincubator/create-react-app/pull/1352) More descriptive error message for `env.CI = true` warnings causing failures. ([@jayphelps](https://github.com/jayphelps))
+ * [#1264](https://github.com/facebookincubator/create-react-app/pull/1264) Remove interactive shell check when opening browser on start. ([@CaryLandholt](https://github.com/CaryLandholt))
+ * [#1311](https://github.com/facebookincubator/create-react-app/pull/1311) Updated `babel-jest` and `jest` packages to 18.0.0. ([@lopezator](https://github.com/lopezator))
+ * [#1432](https://github.com/facebookincubator/create-react-app/pull/1432) Bump Jest version. ([@gaearon](https://github.com/gaearon))
+ * [#1507](https://github.com/facebookincubator/create-react-app/pull/1507) fix: add yarn gitignores. ([@adjohnson916](https://github.com/adjohnson916))
+ * [#1510](https://github.com/facebookincubator/create-react-app/pull/1510) Add missing `'\n'` to the end of `package.json` file. ([@pd4d10](https://github.com/pd4d10))
+ * [#1324](https://github.com/facebookincubator/create-react-app/pull/1324) Use npm script hooks to avoid `&&` in deploy script. ([@zpao](https://github.com/zpao))
+
+* `create-react-app`
+
+ * [#1270](https://github.com/facebookincubator/create-react-app/pull/1270) gh-1269: Enabling nested folder paths for project name. ([@dinukadesilva](https://github.com/dinukadesilva))
+
+
+#### :memo: Documentation
+
+* User Guide
+
+ * [#1515](https://github.com/facebookincubator/create-react-app/pull/1515) readme: Advanced Configuration. ([@Timer](https://github.com/Timer))
+ * [#1513](https://github.com/facebookincubator/create-react-app/pull/1513) clarifying the use of custom environment variables. ([@calweb](https://github.com/calweb))
+ * [#1511](https://github.com/facebookincubator/create-react-app/pull/1511) Change "OS X" references to "macOS". ([@RodrigoHahn](https://github.com/RodrigoHahn))
+ * [#1482](https://github.com/facebookincubator/create-react-app/pull/1482) Edit User Guide: Add ESLint config for VS Code users. ([@vulong23](https://github.com/vulong23))
+ * [#1483](https://github.com/facebookincubator/create-react-app/pull/1483) Reflect websocket proxy support on README (#1013). ([@frontsideair](https://github.com/frontsideair))
+ * [#1453](https://github.com/facebookincubator/create-react-app/pull/1453) Readme: Removes experimental from Jest snapshot. ([@frehner](https://github.com/frehner))
+ * [#1437](https://github.com/facebookincubator/create-react-app/pull/1437) Added links to tutorials for integrating cra with an api backend. ([@alexdriaguine](https://github.com/alexdriaguine))
+ * [#1422](https://github.com/facebookincubator/create-react-app/pull/1422) Add causes of dev server not detecting changes. ([@jetpackpony](https://github.com/jetpackpony))
+ * [#1260](https://github.com/facebookincubator/create-react-app/pull/1260) Heroku Deployment: Adds a note on how to resolve "File/Module Not Found Errors" . ([@MsUzoAgu](https://github.com/MsUzoAgu))
+ * [#1256](https://github.com/facebookincubator/create-react-app/pull/1256) Add "Changing the Page Title" to User Guide. ([@gaearon](https://github.com/gaearon))
+ * [#1245](https://github.com/facebookincubator/create-react-app/pull/1245) Replace the Flow documentation section. ([@gaearon](https://github.com/gaearon))
+ * [#1514](https://github.com/facebookincubator/create-react-app/pull/1514) corrected minor typo. ([@crowchirp](https://github.com/crowchirp))
+ * [#1393](https://github.com/facebookincubator/create-react-app/pull/1393) replace two space syntax with br tag. ([@carlsagan21](https://github.com/carlsagan21))
+ * [#1384](https://github.com/facebookincubator/create-react-app/pull/1384) Document Flow support. ([@dschep](https://github.com/dschep))
+
+* READMEs
+
+ * [#1375](https://github.com/facebookincubator/create-react-app/pull/1375) Change console.log for errors and warnings. ([@jimmyhmiller](https://github.com/jimmyhmiller))
+ * [#1369](https://github.com/facebookincubator/create-react-app/pull/1369) Add missing import in react-dev-utils README.md. ([@pedronauck](https://github.com/pedronauck))
+
+#### :house: Internal
+
+* Internal Test Suite
+
+ * [#1519](https://github.com/facebookincubator/create-react-app/pull/1519) Add test cases for PUBLIC_URL and relative path. ([@Timer](https://github.com/Timer))
+ * [#1484](https://github.com/facebookincubator/create-react-app/pull/1484) Improve e2e-kitchensink and Jest coverage. ([@Timer](https://github.com/Timer))
+ * [#1463](https://github.com/facebookincubator/create-react-app/pull/1463) Minor code style and wrong expect. ([@tuchk4](https://github.com/tuchk4))
+ * [#1470](https://github.com/facebookincubator/create-react-app/pull/1470) E2e jsdom fix. ([@EnoahNetzach](https://github.com/EnoahNetzach))
+ * [#1187](https://github.com/facebookincubator/create-react-app/pull/1187) Use a more sophisticated template for end-to-end testing.. ([@EnoahNetzach](https://github.com/EnoahNetzach))
+
+* Other
+
+ * [#1289](https://github.com/facebookincubator/create-react-app/pull/1289) Remove path-exists from dependencies and replace it with fs.existsSync. ([@halfzebra](https://github.com/halfzebra))
+
+#### Committers: 35
+- Alex Driaguine ([alexdriaguine](https://github.com/alexdriaguine))
+- Anders D. Johnson ([adjohnson916](https://github.com/adjohnson916))
+- Anthony F. ([frehner](https://github.com/frehner))
+- Brandon Istenes ([brandones](https://github.com/brandones))
+- Calvin Webster ([calweb](https://github.com/calweb))
+- Cary Landholt ([CaryLandholt](https://github.com/CaryLandholt))
+- Chandan Rai ([crowchirp](https://github.com/crowchirp))
+- Christian Raidl ([Chris-R3](https://github.com/Chris-R3))
+- Dan Abramov ([gaearon](https://github.com/gaearon))
+- Daniel Schep ([dschep](https://github.com/dschep))
+- David ([lopezator](https://github.com/lopezator))
+- Dinuka De Silva ([dinukadesilva](https://github.com/dinukadesilva))
+- Eduard Kyvenko ([halfzebra](https://github.com/halfzebra))
+- Fabrizio Castellarin ([EnoahNetzach](https://github.com/EnoahNetzach))
+- Fatih ([frontsideair](https://github.com/frontsideair))
+- Gabriel Aumala ([GAumala](https://github.com/GAumala))
+- Jay Phelps ([jayphelps](https://github.com/jayphelps))
+- Jih-Chi Lee ([jihchi](https://github.com/jihchi))
+- Jimmy Miller ([jimmyhmiller](https://github.com/jimmyhmiller))
+- Joe Haddad ([Timer](https://github.com/Timer))
+- Johnny Magrippis ([jmagrippis](https://github.com/jmagrippis))
+- Jonathan Kim ([jkimbo](https://github.com/jkimbo))
+- MUA ([MsUzoAgu](https://github.com/MsUzoAgu))
+- Matthew Holloway ([holloway](https://github.com/holloway))
+- Nguyen Le Vu Long ([vulong23](https://github.com/vulong23))
+- Paul O’Shannessy ([zpao](https://github.com/zpao))
+- Pedro Nauck ([pedronauck](https://github.com/pedronauck))
+- Robbie H ([TheBlackBolt](https://github.com/TheBlackBolt))
+- Thibault Derousseaux ([tibdex](https://github.com/tibdex))
+- Valerii ([tuchk4](https://github.com/tuchk4))
+- Vasiliy Taranov ([jetpackpony](https://github.com/jetpackpony))
+- [RodrigoHahn](https://github.com/RodrigoHahn)
+- creynders ([creynders](https://github.com/creynders))
+- pd4d10 ([pd4d10](https://github.com/pd4d10))
+- soo ([carlsagan21](https://github.com/carlsagan21))
+
+### Migrating from 0.8.5 to 0.9.0
+
+Inside any created project that has not been ejected, run:
+
+```
+npm install --save-dev --save-exact react-scripts@0.9.0
+```
+
+Then, run your tests. If you are affected by breaking changes from Jest 18, consult [blog post](https://facebook.github.io/jest/blog/2016/12/15/2016-in-jest.html), [changelog](https://github.com/facebook/jest/blob/master/CHANGELOG.md#jest-1800), and [documentation](http://facebook.github.io/jest/docs/getting-started.html). You might need to update any snapshots since their format might have changed.
+
+If you relied on the browser not starting in non-interactive terminals, you now need to explicitly specify `BROWSER=none` as an environment variable to disable it.
+
+## 0.8.5 (January 9, 2017)
+
+Thanks to [@fson](https://github.com/fson) for cutting this release.
+
+#### :bug: Bug Fix
+* `create-react-app`, `react-scripts`
+ * [#1365](https://github.com/facebookincubator/create-react-app/pull/1365) Use yarnpkg alias to run Yarn. ([@fson](https://github.com/fson))
+
+ Fixes an issue where running `create-react-app` failed on systems with Apache Hadoop installed because it falsely detected Hadoop YARN executable as Yarn package manager.
+
+#### Committers: 1
+- Ville Immonen ([fson](https://github.com/fson))
+
+### Migrating from 0.8.4 to 0.8.5
+
+Inside any created project that has not been ejected, run:
+
+```
+npm install --save-dev --save-exact react-scripts@0.8.5
+```
+
+You may also optionally update the global command-line utility:
+
+```
+npm install -g create-react-app@1.0.3
+```
+
## 0.8.4 (December 11, 2016)
#### :bug: Bug Fix
@@ -226,6 +419,8 @@ npm install --save-dev --save-exact react-scripts@0.8.2
## 0.8.1 (December 4, 2016)
+Thanks to [@fson](https://github.com/fson) for cutting this release.
+
#### :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))
@@ -240,6 +435,8 @@ npm install --save-dev --save-exact react-scripts@0.8.1
## 0.8.0 (December 3, 2016)
+Thanks to [@fson](https://github.com/fson) for cutting this release.
+
#### :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))
@@ -394,6 +591,8 @@ npm install --save-dev --save-exact react-scripts@0.8.0
## 0.7.0 (October 22, 2016)
+Thanks to [@fson](https://github.com/fson) for cutting this release.
+
### Build Dependency (`react-scripts`)
* Updates Jest to [version 16.0](http://facebook.github.io/jest/blog/2016/10/03/jest-16.html), with an upgraded CLI, improved snapshot testing, new matchers and more. ([@chase](https://github.com/chase) in [#858](https://github.com/facebookincubator/create-react-app/pull/858))
@@ -414,7 +613,7 @@ npm install --save-dev --save-exact react-scripts@0.8.0
### Babel Preset (`babel-preset-react-app`)
-* The preset now detects the Node.js version in test environment and disables unnecessary ES2015 transforms using using `babel-preset-env`. ([@shubheksha](https://github.com/shubheksha) in [#878](https://github.com/facebookincubator/create-react-app/pull/878), [@JeffreyATW](https://github.com/JeffreyATW) in [#927
+* The preset now detects the Node.js version in test environment and disables unnecessary ES2015 transforms using `babel-preset-env`. ([@shubheksha](https://github.com/shubheksha) in [#878](https://github.com/facebookincubator/create-react-app/pull/878), [@JeffreyATW](https://github.com/JeffreyATW) in [#927
](https://github.com/facebookincubator/create-react-app/pull/927))
* Fixes a duplicate dependency on `babel-plugin-transform-regenerator`. ([@akofman](https://github.com/akofman) in [#864](https://github.com/facebookincubator/create-react-app/pull/864))
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 74785fd16ce..b6c4e69bbfd 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -68,6 +68,7 @@ and then run `npm start` or `npm run build`.
* You'll need an [access token for the GitHub API](https://help.github.com/articles/creating-an-access-token-for-command-line-use/). Save it to this environment variable: `export GITHUB_AUTH="..."`
* Run `npm run changelog`. The command will find all the labeled pull requests merged since the last release and group them by the label and affected packages, and create a change log entry with all the changes and links to PRs and their authors. Copy and paste it to `CHANGELOG.md`.
* Add a four-space indented paragraph after each non-trivial list item, explaining what changed and why. For each breaking change also write who it affects and instructions for migrating existing code.
+ * Maybe add some newlines here and there. Preview the result on GitHub to get a feel for it. Changelog generator output is a bit too terse for my taste, so try to make it visually pleasing and well grouped.
6. Make sure to include “Migrating from ...” instructions for the previous release. Often you can copy and paste them.
7. After merging the changelog update, create a GitHub Release with the same text. See previous Releases for inspiration.
8. **Do not run `npm publish`. Instead, run `npm run publish`.**
diff --git a/README.md b/README.md
index e9f8c1b6074..af4603b5d7d 100644
--- a/README.md
+++ b/README.md
@@ -13,7 +13,6 @@ npm install -g create-react-app
create-react-app my-app
cd my-app/
npm start
-
```
Then open [http://localhost:3000/](http://localhost:3000/) to see your app.
@@ -70,7 +69,7 @@ my-app/
No configuration or complicated folder structures, just the files you need to build your app.
Once the installation is done, you can run some commands inside the project folder:
-### `npm start`
+### `npm start` or `yarn start`
Runs the app in development mode.
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
@@ -80,14 +79,14 @@ You will see the build errors and lint warnings in the console.
-### `npm test`
+### `npm test` or `yarn test`
-Runs the test watcher in an interactive mode.
+Runs the test watcher in an interactive mode.
By default, runs tests related to files changes since the last commit.
[Read more about testing.](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#running-tests)
-### `npm run build`
+### `npm run build` or `yarn build`
Builds the app for production to the `build` folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
@@ -102,6 +101,7 @@ The [User Guide](https://github.com/facebookincubator/create-react-app/blob/mast
- [Updating to New Releases](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#updating-to-new-releases)
- [Folder Structure](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#folder-structure)
- [Available Scripts](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#available-scripts)
+- [Supported Language Features and Polyfills](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#supported-language-features-and-polyfills)
- [Syntax Highlighting in the Editor](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#syntax-highlighting-in-the-editor)
- [Displaying Lint Output in the Editor](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#displaying-lint-output-in-the-editor)
- [Changing the Page ``](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#changing-the-page-title)
@@ -109,6 +109,7 @@ The [User Guide](https://github.com/facebookincubator/create-react-app/blob/mast
- [Importing a Component](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#importing-a-component)
- [Adding a Stylesheet](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-a-stylesheet)
- [Post-Processing CSS](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#post-processing-css)
+- [Adding a CSS Preprocessor (Sass, Less etc.)](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-a-css-preprocessor-sass-less-etc)
- [Adding Images and Fonts](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-images-and-fonts)
- [Using the `public` Folder](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#using-the-public-folder)
- [Using Global Variables](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#using-global-variables)
@@ -116,7 +117,7 @@ The [User Guide](https://github.com/facebookincubator/create-react-app/blob/mast
- [Adding Flow](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-flow)
- [Adding Custom Environment Variables](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-custom-environment-variables)
- [Can I Use Decorators?](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#can-i-use-decorators)
-- [Integrating with a Node Backend](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#integrating-with-a-node-backend)
+- [Integrating with an API Backend](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#integrating-with-an-api-backend)
- [Proxying API Requests in Development](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#proxying-api-requests-in-development)
- [Using HTTPS in Development](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#using-https-in-development)
- [Generating Dynamic `<meta>` 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)
@@ -124,6 +125,7 @@ The [User Guide](https://github.com/facebookincubator/create-react-app/blob/mast
- [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)
+- [Advanced Configuration](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#advanced-configuration)
- [Troubleshooting](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#troubleshooting)
A copy of the user guide will be created as `README.md` in your project folder.
@@ -144,7 +146,7 @@ Please refer to the [User Guide](https://github.com/facebookincubator/create-rea
**If you’re getting started** with React, use `create-react-app` to automate the build of your app. There is no configuration file, and `react-scripts` is the only extra build dependency in your `package.json`. Your environment will have everything you need to build a modern React app:
-* React, JSX, and ES6 support.
+* React, JSX, ES6, and Flow syntax support.
* Language extras beyond ES6 like the object spread operator.
* A dev server that lints for common errors.
* Import CSS and image files directly from JavaScript.
@@ -172,7 +174,7 @@ Some features are currently **not supported**:
* Server rendering.
* Some experimental syntax extensions (e.g. decorators).
* CSS Modules.
-* LESS or Sass.
+* Importing LESS or Sass directly ([but you still can use them](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-a-css-preprocessor-sass-less-etc)).
* Hot reloading of components.
Some of them might get added in the future if they are stable, are useful to majority of React apps, don’t conflict with existing tools, and don’t introduce additional configuration.
@@ -205,7 +207,7 @@ We are grateful to the authors of existing related projects for their ideas and
## Alternatives
-If you don’t agree with the choices made in this project, you might want to explore alternatives with different tradeoffs.
+If you don’t agree with the choices made in this project, you might want to explore alternatives with different tradeoffs.<br>
Some of the more popular and actively maintained ones are:
* [insin/nwb](https://github.com/insin/nwb)
diff --git a/lerna.json b/lerna.json
index 00b2a8875a0..f648aac48a1 100644
--- a/lerna.json
+++ b/lerna.json
@@ -1,5 +1,5 @@
{
- "lerna": "2.0.0-beta.30",
+ "lerna": "2.0.0-beta.37",
"version": "independent",
"changelog": {
"repo": "facebookincubator/create-react-app",
diff --git a/package.json b/package.json
index 6645ea27971..a9262568d25 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
"build": "node packages/react-scripts/scripts/build.js",
"changelog": "lerna-changelog",
"create-react-app": "tasks/cra.sh",
- "e2e": "tasks/e2e.sh",
+ "e2e": "tasks/e2e-simple.sh",
"postinstall": "lerna bootstrap",
"publish": "tasks/release.sh",
"start": "node packages/react-scripts/scripts/start.js",
@@ -18,7 +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.37",
"lerna-changelog": "^0.2.3"
}
}
diff --git a/packages/babel-preset-react-app/index.js b/packages/babel-preset-react-app/index.js
index a028babc06c..8a42f885e31 100644
--- a/packages/babel-preset-react-app/index.js
+++ b/packages/babel-preset-react-app/index.js
@@ -88,7 +88,11 @@ if (env === 'test') {
module.exports = {
presets: [
// Latest stable ECMAScript features
- require.resolve('babel-preset-latest'),
+ [require.resolve('babel-preset-latest'), {
+ 'es2015': {
+ modules: false
+ }
+ }],
// JSX, Flow
require.resolve('babel-preset-react')
],
diff --git a/packages/babel-preset-react-app/package.json b/packages/babel-preset-react-app/package.json
index c9513ae340a..ae5ab93be65 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": "2.0.1",
+ "version": "2.1.0",
"description": "Babel preset used by Create React App",
"repository": "facebookincubator/create-react-app",
"license": "BSD-3-Clause",
@@ -11,18 +11,18 @@
"index.js"
],
"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",
- "babel-plugin-transform-react-jsx-self": "6.11.0",
- "babel-plugin-transform-react-jsx-source": "6.9.0",
- "babel-plugin-transform-regenerator": "6.16.1",
- "babel-plugin-transform-runtime": "6.15.0",
- "babel-preset-env": "0.0.8",
- "babel-preset-latest": "6.16.0",
- "babel-preset-react": "6.16.0",
- "babel-runtime": "6.11.6"
+ "babel-plugin-transform-class-properties": "6.22.0",
+ "babel-plugin-transform-es2015-parameters": "6.22.0",
+ "babel-plugin-transform-object-rest-spread": "6.22.0",
+ "babel-plugin-transform-react-constant-elements": "6.22.0",
+ "babel-plugin-transform-react-jsx": "6.22.0",
+ "babel-plugin-transform-react-jsx-self": "6.22.0",
+ "babel-plugin-transform-react-jsx-source": "6.22.0",
+ "babel-plugin-transform-regenerator": "6.22.0",
+ "babel-plugin-transform-runtime": "6.22.0",
+ "babel-preset-env": "1.1.8",
+ "babel-preset-latest": "6.22.0",
+ "babel-preset-react": "6.22.0",
+ "babel-runtime": "6.22.0"
}
}
diff --git a/packages/create-react-app/index.js b/packages/create-react-app/index.js
index ab356d4d795..4dbb37f4969 100644
--- a/packages/create-react-app/index.js
+++ b/packages/create-react-app/index.js
@@ -52,6 +52,7 @@ if (currentNodeVersion.split('.')[0] < 4) {
process.exit(1);
}
+var commander = require('commander');
var fs = require('fs-extra');
var path = require('path');
var execSync = require('child_process').execSync;
@@ -60,7 +61,7 @@ var semver = require('semver');
var projectName;
-var program = require('commander')
+var program = commander
.version(require('./package.json').version)
.arguments('<project-directory>')
.usage(chalk.green('<project-directory>') + ' [options]')
@@ -69,6 +70,7 @@ var program = require('commander')
})
.option('--verbose', 'print additional logs')
.option('--scripts-version <alternative-package>', 'use a non-standard version of react-scripts')
+ .allowUnknownOption()
.on('--help', function () {
console.log(' Only ' + chalk.green('<project-directory>') + ' is required.');
console.log();
@@ -82,7 +84,7 @@ var program = require('commander')
console.log(' ' + chalk.cyan('https://github.com/facebookincubator/create-react-app/issues/new'));
console.log();
})
- .parse(process.argv)
+ .parse(process.argv);
if (typeof projectName === 'undefined') {
console.error('Please specify the project directory:');
@@ -95,9 +97,14 @@ if (typeof projectName === 'undefined') {
process.exit(1);
}
-createApp(projectName, program.verbose, program.scriptsVersion);
+var hiddenProgram = new commander.Command()
+ .option('--internal-testing-template <path-to-template>', '(internal usage only, DO NOT RELY ON THIS) ' +
+ 'use a non-standard application template')
+ .parse(process.argv)
+
+createApp(projectName, program.verbose, program.scriptsVersion, hiddenProgram.internalTestingTemplate);
-function createApp(name, verbose, version) {
+function createApp(name, verbose, version, template) {
var root = path.resolve(name);
var appName = path.basename(root);
@@ -130,12 +137,12 @@ function createApp(name, verbose, version) {
console.log('Installing ' + chalk.cyan('react-scripts') + '...');
console.log();
- run(root, appName, version, verbose, originalDirectory);
+ run(root, appName, version, verbose, originalDirectory, template);
}
function shouldUseYarn() {
try {
- execSync('yarn --version', {stdio: 'ignore'});
+ execSync('yarnpkg --version', {stdio: 'ignore'});
return true;
} catch (e) {
return false;
@@ -146,7 +153,7 @@ function install(packageToInstall, verbose, callback) {
var command;
var args;
if (shouldUseYarn()) {
- command = 'yarn';
+ command = 'yarnpkg';
args = [ 'add', '--dev', '--exact', packageToInstall];
} else {
command = 'npm';
@@ -163,7 +170,7 @@ function install(packageToInstall, verbose, callback) {
});
}
-function run(root, appName, version, verbose, originalDirectory) {
+function run(root, appName, version, verbose, originalDirectory, template) {
var packageToInstall = getInstallPackage(version);
var packageName = getPackageName(packageToInstall);
@@ -183,7 +190,7 @@ function run(root, appName, version, verbose, originalDirectory) {
'init.js'
);
var init = require(scriptsPath);
- init(root, appName, verbose, originalDirectory);
+ init(root, appName, verbose, originalDirectory, template);
});
}
diff --git a/packages/create-react-app/package.json b/packages/create-react-app/package.json
index 94525c3e812..93df8da55b8 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.2",
+ "version": "1.0.4",
"keywords": [
"react"
],
diff --git a/packages/eslint-config-react-app/README.md b/packages/eslint-config-react-app/README.md
index 5c20f50ca2e..33e08ec48ed 100644
--- a/packages/eslint-config-react-app/README.md
+++ b/packages/eslint-config-react-app/README.md
@@ -17,7 +17,7 @@ If you want to use this ESLint configuration in a project not built with Create
First, install this package, ESLint and the necessary plugins.
```sh
- npm install --save-dev eslint-config-react-app 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
+ npm install --save-dev eslint-config-react-app 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@3.0.2 eslint-plugin-react@6.4.1
```
Then create a file named `.eslintrc` with following contents in the root folder of your project:
diff --git a/packages/eslint-config-react-app/package.json b/packages/eslint-config-react-app/package.json
index 66e690e90f2..7503170be15 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.5.0",
+ "version": "0.5.1",
"description": "ESLint configuration used by Create React App",
"repository": "facebookincubator/create-react-app",
"license": "BSD-3-Clause",
@@ -15,7 +15,7 @@
"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-jsx-a11y": "^3.0.2",
"eslint-plugin-react": "^6.4.1"
}
}
diff --git a/packages/react-dev-utils/README.md b/packages/react-dev-utils/README.md
index 3c6a10f62e0..455996fcc59 100644
--- a/packages/react-dev-utils/README.md
+++ b/packages/react-dev-utils/README.md
@@ -117,6 +117,7 @@ Extracts and prettifies warning and error messages from webpack [stats](https://
```js
var webpack = require('webpack');
var config = require('../config/webpack.config.dev');
+var formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');
var compiler = webpack(config);
@@ -132,12 +133,12 @@ compiler.plugin('done', function(stats) {
}
if (messages.errors.length) {
console.log('Failed to compile.');
- messages.errors.forEach(console.log);
+ messages.errors.forEach(e => console.log(e));
return;
}
if (messages.warnings.length) {
console.log('Compiled with warnings.');
- messages.warnings.forEach(console.log);
+ messages.warnings.forEach(w => console.log(w));
}
});
```
@@ -184,6 +185,7 @@ You can control the behavior on `<Enter>` with `isYesDefault`.
```js
var prompt = require('react-dev-utils/prompt');
+
prompt(
'Are you sure you want to eat all the candy?',
/* isYesDefault */ false
diff --git a/packages/react-dev-utils/package.json b/packages/react-dev-utils/package.json
index f3062c56d19..9870e1ecc34 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.4.2",
+ "version": "0.5.0",
"description": "Webpack utilities used by Create React App",
"repository": "facebookincubator/create-react-app",
"license": "BSD-3-Clause",
diff --git a/packages/react-dev-utils/webpackHotDevClient.js b/packages/react-dev-utils/webpackHotDevClient.js
index f15fd06f291..7b1768d8fa0 100644
--- a/packages/react-dev-utils/webpackHotDevClient.js
+++ b/packages/react-dev-utils/webpackHotDevClient.js
@@ -248,6 +248,7 @@ connection.onmessage = function(e) {
case 'hash':
handleAvailableHash(message.data);
break;
+ case 'still-ok':
case 'ok':
handleSuccess();
break;
diff --git a/packages/react-scripts/.npmignore b/packages/react-scripts/.npmignore
new file mode 100644
index 00000000000..76163ab966a
--- /dev/null
+++ b/packages/react-scripts/.npmignore
@@ -0,0 +1 @@
+/fixtures
diff --git a/packages/react-scripts/bin/react-scripts.js b/packages/react-scripts/bin/react-scripts.js
index 58381833957..5ed9b244ca6 100755
--- a/packages/react-scripts/bin/react-scripts.js
+++ b/packages/react-scripts/bin/react-scripts.js
@@ -13,10 +13,27 @@ case 'test':
[require.resolve('../scripts/' + script)].concat(args),
{stdio: 'inherit'}
);
+ if (result.signal) {
+ if (result.signal == 'SIGKILL') {
+ console.log(
+ 'The build failed because the process exited too early. ' +
+ 'This probably means the system ran out of memory or someone called ' +
+ '`kill -9` on the process.'
+ );
+ } else if (result.signal == 'SIGTERM') {
+ console.log(
+ 'The build failed because the process exited too early. ' +
+ 'Someone might have called `kill` or `killall`, or the system could ' +
+ 'be shutting down.'
+ );
+ }
+ process.exit(1);
+ }
process.exit(result.status);
break;
default:
console.log('Unknown script "' + script + '".');
console.log('Perhaps you need to update react-scripts?');
+ console.log('See: https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#updating-to-new-releases');
break;
}
diff --git a/packages/react-scripts/config/env.js b/packages/react-scripts/config/env.js
index 66ba341b358..168e1e644f1 100644
--- a/packages/react-scripts/config/env.js
+++ b/packages/react-scripts/config/env.js
@@ -15,25 +15,33 @@
var REACT_APP = /^REACT_APP_/i;
function getClientEnvironment(publicUrl) {
- var processEnv = Object
+ var raw = Object
.keys(process.env)
.filter(key => REACT_APP.test(key))
.reduce((env, key) => {
- env[key] = JSON.stringify(process.env[key]);
+ env[key] = process.env[key];
return env;
}, {
// Useful for determining whether we’re running in production mode.
// Most importantly, it switches React into the correct mode.
- 'NODE_ENV': JSON.stringify(
- process.env.NODE_ENV || 'development'
- ),
+ 'NODE_ENV': process.env.NODE_ENV || 'development',
// Useful for resolving the correct path to static assets in `public`.
// For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
// This should only be used as an escape hatch. Normally you would put
// images into the `src` and `import` them in code to get their paths.
- 'PUBLIC_URL': JSON.stringify(publicUrl)
+ 'PUBLIC_URL': publicUrl
});
- return {'process.env': processEnv};
+ // Stringify all values so we can feed into Webpack DefinePlugin
+ var stringified = {
+ 'process.env': Object
+ .keys(raw)
+ .reduce((env, key) => {
+ env[key] = JSON.stringify(raw[key]);
+ return env;
+ }, {})
+ };
+
+ return { raw, stringified };
}
module.exports = getClientEnvironment;
diff --git a/packages/react-scripts/config/paths.js b/packages/react-scripts/config/paths.js
index 2f10ea2fb8a..7d114080f7c 100644
--- a/packages/react-scripts/config/paths.js
+++ b/packages/react-scripts/config/paths.js
@@ -11,6 +11,7 @@
var path = require('path');
var fs = require('fs');
+var url = require('url');
// Make sure any symlinks in the project folder are resolved:
// https://github.com/facebookincubator/create-react-app/issues/637
@@ -40,6 +41,37 @@ var nodePaths = (process.env.NODE_PATH || '')
.filter(folder => !path.isAbsolute(folder))
.map(resolveApp);
+var envPublicUrl = process.env.PUBLIC_URL;
+
+function ensureSlash(path, needsSlash) {
+ var hasSlash = path.endsWith('/');
+ if (hasSlash && !needsSlash) {
+ return path.substr(path, path.length - 1);
+ } else if (!hasSlash && needsSlash) {
+ return path + '/';
+ } else {
+ return path;
+ }
+}
+
+function getPublicUrl(appPackageJson) {
+ return envPublicUrl || require(appPackageJson).homepage;
+}
+
+// We use `PUBLIC_URL` environment variable or "homepage" field to infer
+// "public path" at which the app is served.
+// Webpack needs to know it to put the right <script> hrefs into HTML even in
+// single-page apps that may serve index.html for nested URLs like /todos/42.
+// We can't use a relative path in HTML because we don't want to load something
+// like /todos/42/static/js/bundle.7289d.js. We have to know the root.
+function getServedPath(appPackageJson) {
+ var publicUrl = getPublicUrl(appPackageJson);
+ var servedUrl = envPublicUrl || (
+ publicUrl ? url.parse(publicUrl).pathname : '/'
+ );
+ return ensureSlash(servedUrl, true);
+}
+
// config after eject: we're in ./config/
module.exports = {
appBuild: resolveApp('build'),
@@ -52,7 +84,9 @@ module.exports = {
testsSetup: resolveApp('src/setupTests.js'),
appNodeModules: resolveApp('node_modules'),
ownNodeModules: resolveApp('node_modules'),
- nodePaths: nodePaths
+ nodePaths: nodePaths,
+ publicUrl: getPublicUrl(resolveApp('package.json')),
+ servedPath: getServedPath(resolveApp('package.json'))
};
// @remove-on-eject-begin
@@ -73,7 +107,9 @@ module.exports = {
appNodeModules: resolveApp('node_modules'),
// this is empty with npm3 but node resolution searches higher anyway:
ownNodeModules: resolveOwn('../node_modules'),
- nodePaths: nodePaths
+ nodePaths: nodePaths,
+ publicUrl: getPublicUrl(resolveApp('package.json')),
+ servedPath: getServedPath(resolveApp('package.json'))
};
// config before publish: we're in ./packages/react-scripts/config/
@@ -89,7 +125,9 @@ if (__dirname.indexOf(path.join('packages', 'react-scripts', 'config')) !== -1)
testsSetup: resolveOwn('../template/src/setupTests.js'),
appNodeModules: resolveOwn('../node_modules'),
ownNodeModules: resolveOwn('../node_modules'),
- nodePaths: nodePaths
+ nodePaths: nodePaths,
+ publicUrl: getPublicUrl(resolveOwn('../package.json')),
+ servedPath: getServedPath(resolveOwn('../package.json'))
};
}
// @remove-on-eject-end
diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js
index 96fd632b795..e26a5a25d81 100644
--- a/packages/react-scripts/config/webpack.config.dev.js
+++ b/packages/react-scripts/config/webpack.config.dev.js
@@ -78,15 +78,15 @@ module.exports = {
resolve: {
// This allows you to set a fallback for where Webpack should look for modules.
// We read `NODE_PATH` environment variable in `paths.js` and pass paths here.
- // We use `fallback` instead of `root` because we want `node_modules` to "win"
- // if there any conflicts. This matches Node resolution mechanism.
+ // We placed these paths second because we want `node_modules` to "win"
+ // if there are any conflicts. This matches Node resolution mechanism.
// https://github.com/facebookincubator/create-react-app/issues/253
- fallback: paths.nodePaths,
+ modules: ['node_modules'].concat(paths.nodePaths),
// These are the reasonable defaults supported by the Node ecosystem.
// We also include JSX as a common component filename extension to support
// some tools, although we do not recommend using it, see:
// https://github.com/facebookincubator/create-react-app/issues/290
- extensions: ['.js', '.json', '.jsx', ''],
+ extensions: ['.js', '.json', '.jsx'],
alias: {
// Support React Native Web
// https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
@@ -97,35 +97,40 @@ module.exports = {
// Resolve loaders (webpack plugins for CSS, images, transpilation) from the
// directory of `react-scripts` itself rather than the project directory.
resolveLoader: {
- root: paths.ownNodeModules,
- moduleTemplates: ['*-loader']
+ modules: [
+ paths.ownNodeModules,
+ // Lerna hoists everything, so we need to look in our app directory
+ paths.appNodeModules
+ ]
},
// @remove-on-eject-end
module: {
- // First, run the linter.
- // It's important to do this before Babel processes the JS.
- preLoaders: [
+ rules: [
+ // First, run the linter.
+ // It's important to do this before Babel processes the JS.
{
test: /\.(js|jsx)$/,
- loader: 'eslint',
- include: paths.appSrc,
- }
- ],
- loaders: [
- // Default loader: load all assets that are not handled
- // by other loaders with the url loader.
- // Note: This list needs to be updated with every change of extensions
- // the other loaders match.
- // E.g., when adding a loader for a new supported file extension,
- // we need to add the supported extension to this loader too.
- // Add one new line in `exclude` for each loader.
- //
- // "file" loader makes sure those assets get served by WebpackDevServer.
- // When you `import` an asset, you get its (virtual) filename.
- // In production, they would get copied to the `build` folder.
- // "url" loader works like "file" loader except that it embeds assets
- // smaller than specified limit in bytes as data URLs to avoid requests.
- // A missing `test` is equivalent to a match.
+ enforce: 'pre',
+ use: [{
+ // @remove-on-eject-begin
+ // Point ESLint to our predefined config.
+ options: {
+ configFile: path.join(__dirname, '../.eslintrc'),
+ useEslintrc: false
+ },
+ // @remove-on-eject-end
+ loader: 'eslint-loader'
+ }],
+ include: paths.appSrc
+ },
+ // ** ADDING/UPDATING LOADERS **
+ // The "url" loader handles all assets unless explicitly excluded.
+ // The `exclude` list *must* be updated with every change to loader extensions.
+ // When adding a new loader, you must add its `test`
+ // as a new entry in the `exclude` list for "url" loader.
+
+ // "url" loader embeds assets smaller than specified size as data URLs to avoid requests.
+ // Otherwise, it acts like the "file" loader.
{
exclude: [
/\.html$/,
@@ -134,8 +139,8 @@ module.exports = {
/\.json$/,
/\.svg$/
],
- loader: 'url',
- query: {
+ loader: 'url-loader',
+ options: {
limit: 10000,
name: 'static/media/[name].[hash:8].[ext]'
}
@@ -144,8 +149,8 @@ module.exports = {
{
test: /\.(js|jsx)$/,
include: paths.appSrc,
- loader: 'babel',
- query: {
+ loader: 'babel-loader',
+ options: {
// @remove-on-eject-begin
babelrc: false,
presets: [require.resolve('babel-preset-react-app')],
@@ -163,51 +168,50 @@ module.exports = {
// in development "style" loader enables hot editing of CSS.
{
test: /\.css$/,
- loader: 'style!css?importLoaders=1!postcss'
- },
- // JSON is not enabled by default in Webpack but both Node and Browserify
- // allow it implicitly so we also enable it.
- {
- test: /\.json$/,
- loader: 'json'
+ use: [
+ 'style-loader', {
+ loader: 'css-loader',
+ options: {
+ importLoaders: 1
+ }
+ }, {
+ loader: 'postcss-loader',
+ options: {
+ ident: 'postcss', // https://webpack.js.org/guides/migrating/#complex-options
+ plugins: function () {
+ return [
+ autoprefixer({
+ browsers: [
+ '>1%',
+ 'last 4 versions',
+ 'Firefox ESR',
+ 'not ie < 9', // React doesn't support IE8 anyway
+ ]
+ })
+ ]
+ }
+ }
+ }
+ ]
},
// "file" loader for svg
{
test: /\.svg$/,
- loader: 'file',
- query: {
+ loader: 'file-loader',
+ options: {
name: 'static/media/[name].[hash:8].[ext]'
}
}
+ // ** STOP ** Are you adding a new loader?
+ // Remember to add the new extension(s) to the "url" loader exclusion list.
]
},
- // @remove-on-eject-begin
- // Point ESLint to our predefined config.
- eslint: {
- configFile: path.join(__dirname, '../.eslintrc'),
- useEslintrc: false
- },
- // @remove-on-eject-end
- // We use PostCSS for autoprefixing only.
- postcss: function() {
- return [
- autoprefixer({
- browsers: [
- '>1%',
- 'last 4 versions',
- 'Firefox ESR',
- 'not ie < 9', // React doesn't support IE8 anyway
- ]
- }),
- ];
- },
plugins: [
- // Makes the public URL available as %PUBLIC_URL% in index.html, e.g.:
+ // Makes some environment variables available in index.html.
+ // The public URL is available as %PUBLIC_URL% in index.html, e.g.:
// <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
// In development, this will be an empty string.
- new InterpolateHtmlPlugin({
- PUBLIC_URL: publicUrl
- }),
+ new InterpolateHtmlPlugin(env.raw),
// Generates an `index.html` file with the <script> injected.
new HtmlWebpackPlugin({
inject: true,
@@ -215,7 +219,7 @@ module.exports = {
}),
// Makes some environment variables available to the JS code, for example:
// if (process.env.NODE_ENV === 'development') { ... }. See `./env.js`.
- new webpack.DefinePlugin(env),
+ new webpack.DefinePlugin(env.stringified),
// This is necessary to emit hot updates (currently CSS only):
new webpack.HotModuleReplacementPlugin(),
// Watcher doesn't work well if you mistype casing in a path so we use
@@ -234,5 +238,11 @@ module.exports = {
fs: 'empty',
net: 'empty',
tls: 'empty'
+ },
+ // Turn off performance hints during development because we don't do any
+ // splitting or minification in interest of speed. These warnings become
+ // cumbersome.
+ performance: {
+ hints: false
}
};
diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js
index 058db0d7921..86d87d39211 100644
--- a/packages/react-scripts/config/webpack.config.prod.js
+++ b/packages/react-scripts/config/webpack.config.prod.js
@@ -24,40 +24,37 @@ var getClientEnvironment = require('./env');
var path = require('path');
// @remove-on-eject-end
-function ensureSlash(path, needsSlash) {
- var hasSlash = path.endsWith('/');
- if (hasSlash && !needsSlash) {
- return path.substr(path, path.length - 1);
- } else if (!hasSlash && needsSlash) {
- return path + '/';
- } else {
- return path;
- }
-}
-
-// We use "homepage" field to infer "public path" at which the app is served.
-// Webpack needs to know it to put the right <script> hrefs into HTML even in
-// single-page apps that may serve index.html for nested URLs like /todos/42.
-// We can't use a relative path in HTML because we don't want to load something
-// like /todos/42/static/js/bundle.7289d.js. We have to know the root.
-var homepagePath = require(paths.appPackageJson).homepage;
-var homepagePathname = homepagePath ? url.parse(homepagePath).pathname : '/';
// Webpack uses `publicPath` to determine where the app is being served from.
// It requires a trailing slash, or the file assets will get an incorrect path.
-var publicPath = ensureSlash(homepagePathname, true);
+var publicPath = paths.servedPath;
+// Some apps do not use client-side routing with pushState.
+// For these, "homepage" can be set to "." to enable relative asset paths.
+var shouldUseRelativeAssetPaths = publicPath === './';
// `publicUrl` is just like `publicPath`, but we will provide it to our app
// as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
-// Omit trailing slash as %PUBLIC_PATH%/xyz looks better than %PUBLIC_PATH%xyz.
-var publicUrl = ensureSlash(homepagePathname, false);
+// Omit trailing slash as %PUBLIC_URL%/xyz looks better than %PUBLIC_URL%xyz.
+var publicUrl = publicPath.slice(0, -1);
// Get environment variables to inject into our app.
var env = getClientEnvironment(publicUrl);
// Assert this just to be safe.
// Development builds of React are slow and not intended for production.
-if (env['process.env'].NODE_ENV !== '"production"') {
+if (env.stringified['process.env'].NODE_ENV !== '"production"') {
throw new Error('Production builds must have NODE_ENV=production.');
}
+// Note: defined here because it will be used more than once.
+const cssFilename = 'static/css/[name].[contenthash:8].css';
+
+// ExtractTextPlugin expects the build output to be flat.
+// (See https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/27)
+// However, our output is structured with css, js and media folders.
+// To have this structure working with relative paths, we have to use custom options.
+const extractTextPluginOptions = shouldUseRelativeAssetPaths
+ // Making sure that the publicPath goes back to to build folder.
+ ? {publicPath: Array(cssFilename.split('/').length).join('../')}
+ : {};
+
// This is the production configuration.
// It compiles slowly and is focused on producing a fast and minimal bundle.
// The development configuration is different and lives in a separate file.
@@ -86,15 +83,15 @@ module.exports = {
resolve: {
// This allows you to set a fallback for where Webpack should look for modules.
// We read `NODE_PATH` environment variable in `paths.js` and pass paths here.
- // We use `fallback` instead of `root` because we want `node_modules` to "win"
- // if there any conflicts. This matches Node resolution mechanism.
+ // We placed these paths second because we want `node_modules` to "win"
+ // if there are any conflicts. This matches Node resolution mechanism.
// https://github.com/facebookincubator/create-react-app/issues/253
- fallback: paths.nodePaths,
+ modules: ['node_modules'].concat(paths.nodePaths),
// These are the reasonable defaults supported by the Node ecosystem.
// We also include JSX as a common component filename extension to support
// some tools, although we do not recommend using it, see:
// https://github.com/facebookincubator/create-react-app/issues/290
- extensions: ['.js', '.json', '.jsx', ''],
+ extensions: ['.js', '.json', '.jsx'],
alias: {
// Support React Native Web
// https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
@@ -105,33 +102,42 @@ module.exports = {
// Resolve loaders (webpack plugins for CSS, images, transpilation) from the
// directory of `react-scripts` itself rather than the project directory.
resolveLoader: {
- root: paths.ownNodeModules,
- moduleTemplates: ['*-loader']
+ modules: [
+ paths.ownNodeModules,
+ // Lerna hoists everything, so we need to look in our app directory
+ paths.appNodeModules
+ ]
},
// @remove-on-eject-end
module: {
- // First, run the linter.
- // It's important to do this before Babel processes the JS.
- preLoaders: [
+ rules: [
+ // First, run the linter.
+ // It's important to do this before Babel processes the JS.
{
test: /\.(js|jsx)$/,
- loader: 'eslint',
+ enforce: 'pre',
+ use: [{
+ // @remove-on-eject-begin
+ // Point ESLint to our predefined config.
+ options: {
+ // TODO: consider separate config for production,
+ // e.g. to enable no-console and no-debugger only in production.
+ configFile: path.join(__dirname, '../.eslintrc'),
+ useEslintrc: false
+ },
+ // @remove-on-eject-end
+ loader: 'eslint-loader'
+ }],
include: paths.appSrc
- }
- ],
- loaders: [
- // Default loader: load all assets that are not handled
- // by other loaders with the url loader.
- // Note: This list needs to be updated with every change of extensions
- // the other loaders match.
- // E.g., when adding a loader for a new supported file extension,
- // we need to add the supported extension to this loader too.
- // Add one new line in `exclude` for each loader.
- //
- // "file" loader makes sure those assets end up in the `build` folder.
- // When you `import` an asset, you get its filename.
- // "url" loader works just like "file" loader but it also embeds
- // assets smaller than specified size as data URLs to avoid requests.
+ },
+ // ** ADDING/UPDATING LOADERS **
+ // The "url" loader handles all assets unless explicitly excluded.
+ // The `exclude` list *must* be updated with every change to loader extensions.
+ // When adding a new loader, you must add its `test`
+ // as a new entry in the `exclude` list in the "url" loader.
+
+ // "url" loader embeds assets smaller than specified size as data URLs to avoid requests.
+ // Otherwise, it acts like the "file" loader.
{
exclude: [
/\.html$/,
@@ -140,8 +146,8 @@ module.exports = {
/\.json$/,
/\.svg$/
],
- loader: 'url',
- query: {
+ loader: 'url-loader',
+ options: {
limit: 10000,
name: 'static/media/[name].[hash:8].[ext]'
}
@@ -150,9 +156,9 @@ module.exports = {
{
test: /\.(js|jsx)$/,
include: paths.appSrc,
- loader: 'babel',
+ loader: 'babel-loader',
// @remove-on-eject-begin
- query: {
+ options: {
babelrc: false,
presets: [require.resolve('babel-preset-react-app')],
},
@@ -172,55 +178,55 @@ module.exports = {
// in the main CSS file.
{
test: /\.css$/,
- loader: ExtractTextPlugin.extract('style', 'css?importLoaders=1!postcss')
+ loader: ExtractTextPlugin.extract(Object.assign({
+ fallback: 'style-loader',
+ use: [
+ {
+ loader: 'css-loader',
+ options: {
+ importLoaders: 1
+ }
+ }, {
+ loader: 'postcss-loader',
+ options: {
+ ident: 'postcss', // https://webpack.js.org/guides/migrating/#complex-options
+ plugins: function () {
+ return [
+ autoprefixer({
+ browsers: [
+ '>1%',
+ 'last 4 versions',
+ 'Firefox ESR',
+ 'not ie < 9', // React doesn't support IE8 anyway
+ ]
+ })
+ ]
+ }
+ }
+ }
+ ]
+ }, extractTextPluginOptions))
// Note: this won't work without `new ExtractTextPlugin()` in `plugins`.
},
- // JSON is not enabled by default in Webpack but both Node and Browserify
- // allow it implicitly so we also enable it.
- {
- test: /\.json$/,
- loader: 'json'
- },
// "file" loader for svg
{
test: /\.svg$/,
- loader: 'file',
- query: {
+ loader: 'file-loader',
+ options: {
name: 'static/media/[name].[hash:8].[ext]'
}
}
+ // ** STOP ** Are you adding a new loader?
+ // Remember to add the new extension(s) to the "url" loader exclusion list.
]
},
- // @remove-on-eject-begin
- // Point ESLint to our predefined config.
- eslint: {
- // TODO: consider separate config for production,
- // e.g. to enable no-console and no-debugger only in production.
- configFile: path.join(__dirname, '../.eslintrc'),
- useEslintrc: false
- },
- // @remove-on-eject-end
- // We use PostCSS for autoprefixing only.
- postcss: function() {
- return [
- autoprefixer({
- browsers: [
- '>1%',
- 'last 4 versions',
- 'Firefox ESR',
- 'not ie < 9', // React doesn't support IE8 anyway
- ]
- }),
- ];
- },
plugins: [
- // Makes the public URL available as %PUBLIC_URL% in index.html, e.g.:
+ // Makes some environment variables available in index.html.
+ // The public URL is available as %PUBLIC_URL% in index.html, e.g.:
// <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
// In production, it will be an empty string unless you specify "homepage"
// in `package.json`, in which case it will be the pathname of that URL.
- new InterpolateHtmlPlugin({
- PUBLIC_URL: publicUrl
- }),
+ new InterpolateHtmlPlugin(env.raw),
// Generates an `index.html` file with the <script> injected.
new HtmlWebpackPlugin({
inject: true,
@@ -242,11 +248,7 @@ module.exports = {
// if (process.env.NODE_ENV === 'production') { ... }. See `./env.js`.
// It is absolutely essential that NODE_ENV was set to production here.
// Otherwise React will be compiled in the very slow development mode.
- new webpack.DefinePlugin(env),
- // This helps ensure the builds are consistent if source hasn't changed:
- new webpack.optimize.OccurrenceOrderPlugin(),
- // Try to dedupe duplicated modules, if any:
- new webpack.optimize.DedupePlugin(),
+ new webpack.DefinePlugin(env.stringified),
// Minify the code.
new webpack.optimize.UglifyJsPlugin({
compress: {
@@ -259,10 +261,13 @@ module.exports = {
output: {
comments: false,
screw_ie8: true
- }
+ },
+ sourceMap: true
}),
// Note: this won't work without ExtractTextPlugin.extract(..) in `loaders`.
- new ExtractTextPlugin('static/css/[name].[contenthash:8].css'),
+ new ExtractTextPlugin({
+ filename: cssFilename
+ }),
// Generate a manifest file which contains a mapping of all asset filenames
// to their corresponding output file so that tools can pick it up without
// having to parse `index.html`.
diff --git a/packages/react-scripts/fixtures/kitchensink/.babelrc b/packages/react-scripts/fixtures/kitchensink/.babelrc
new file mode 100644
index 00000000000..14397221e3b
--- /dev/null
+++ b/packages/react-scripts/fixtures/kitchensink/.babelrc
@@ -0,0 +1,4 @@
+{
+ "presets": ["react-app"],
+ "plugins": ["babel-plugin-transform-es2015-modules-commonjs"]
+}
diff --git a/packages/react-scripts/fixtures/kitchensink/.env b/packages/react-scripts/fixtures/kitchensink/.env
new file mode 100644
index 00000000000..3e6e8a5a360
--- /dev/null
+++ b/packages/react-scripts/fixtures/kitchensink/.env
@@ -0,0 +1 @@
+REACT_APP_FILE_ENV_MESSAGE=fromtheenvfile
diff --git a/packages/react-scripts/fixtures/kitchensink/.flowconfig b/packages/react-scripts/fixtures/kitchensink/.flowconfig
new file mode 100644
index 00000000000..c658362285f
--- /dev/null
+++ b/packages/react-scripts/fixtures/kitchensink/.flowconfig
@@ -0,0 +1,8 @@
+[ignore]
+<PROJECT_ROOT>/node_modules/fbjs/.*
+
+[include]
+
+[libs]
+
+[options]
diff --git a/packages/react-scripts/fixtures/kitchensink/.template.dependencies.json b/packages/react-scripts/fixtures/kitchensink/.template.dependencies.json
new file mode 100644
index 00000000000..a20139318c1
--- /dev/null
+++ b/packages/react-scripts/fixtures/kitchensink/.template.dependencies.json
@@ -0,0 +1,10 @@
+{
+ "dependencies": {
+ "babel-register": "6.22.0",
+ "babel-plugin-transform-es2015-modules-commonjs": "6.22.0",
+ "babel-polyfill": "6.20.0",
+ "chai": "3.5.0",
+ "jsdom": "9.8.3",
+ "mocha": "3.2.0"
+ }
+}
diff --git a/packages/react-scripts/fixtures/kitchensink/gitignore b/packages/react-scripts/fixtures/kitchensink/gitignore
new file mode 100644
index 00000000000..6c96c5cff12
--- /dev/null
+++ b/packages/react-scripts/fixtures/kitchensink/gitignore
@@ -0,0 +1,15 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+node_modules
+
+# testing
+coverage
+
+# production
+build
+
+# misc
+.DS_Store
+.env
+npm-debug.log
diff --git a/packages/react-scripts/fixtures/kitchensink/integration/env.test.js b/packages/react-scripts/fixtures/kitchensink/integration/env.test.js
new file mode 100644
index 00000000000..e7b3afe42ed
--- /dev/null
+++ b/packages/react-scripts/fixtures/kitchensink/integration/env.test.js
@@ -0,0 +1,33 @@
+import { expect } from 'chai'
+import initDOM from './initDOM'
+
+describe('Integration', () => {
+ describe('Environment variables', () => {
+ it('file env variables', async () => {
+ const doc = await initDOM('file-env-variables')
+
+ expect(doc.getElementById('feature-file-env-variables').textContent).to.equal('fromtheenvfile.')
+ })
+
+ it('NODE_PATH', async () => {
+ const doc = await initDOM('node-path')
+
+ expect(doc.getElementById('feature-node-path').childElementCount).to.equal(4)
+ })
+
+ it('PUBLIC_URL', async () => {
+ const doc = await initDOM('public-url')
+
+ const prefix = process.env.NODE_ENV === 'development' ? '' : 'http://www.example.org/spa';
+ expect(doc.getElementById('feature-public-url').textContent).to.equal(`${prefix}.`)
+ expect(doc.querySelector('head link[rel="shortcut icon"]').getAttribute('href'))
+ .to.equal(`${prefix}/favicon.ico`)
+ })
+
+ it('shell env variables', async () => {
+ const doc = await initDOM('shell-env-variables')
+
+ expect(doc.getElementById('feature-shell-env-variables').textContent).to.equal('fromtheshell.')
+ })
+ })
+})
diff --git a/packages/react-scripts/fixtures/kitchensink/integration/initDOM.js b/packages/react-scripts/fixtures/kitchensink/integration/initDOM.js
new file mode 100644
index 00000000000..7cf8134b79f
--- /dev/null
+++ b/packages/react-scripts/fixtures/kitchensink/integration/initDOM.js
@@ -0,0 +1,56 @@
+const fs = require('fs')
+const http = require('http')
+const jsdom = require('jsdom')
+const path = require('path')
+const { expect } = require('chai')
+
+let getMarkup
+let resourceLoader
+
+if (process.env.E2E_FILE) {
+ const file = path.isAbsolute(process.env.E2E_FILE)
+ ? process.env.E2E_FILE
+ : path.join(process.cwd(), process.env.E2E_FILE)
+
+ const markup = fs.readFileSync(file, 'utf8')
+ getMarkup = () => markup
+
+ const pathPrefix = process.env.PUBLIC_URL.replace(/^https?:\/\/[^\/]+\/?/, '')
+
+ resourceLoader = (resource, callback) => callback(
+ null,
+ fs.readFileSync(path.join(path.dirname(file), resource.url.pathname.replace(pathPrefix, '')), 'utf8')
+ )
+} else if (process.env.E2E_URL) {
+ getMarkup = () => new Promise(resolve => {
+ http.get(process.env.E2E_URL, (res) => {
+ let rawData = ''
+ res.on('data', chunk => rawData += chunk)
+ res.on('end', () => resolve(rawData))
+ })
+ })
+
+ resourceLoader = (resource, callback) => resource.defaultFetch(callback)
+} else {
+ it.only('can run jsdom (at least one of "E2E_FILE" or "E2E_URL" environment variables must be provided)', () => {
+ expect(new Error('This isn\'t the error you are looking for.')).to.be.undefined()
+ })
+}
+
+export default feature => new Promise(async resolve => {
+ const markup = await getMarkup()
+ const host = process.env.E2E_URL || 'http://www.example.org/spa:3000'
+ const doc = jsdom.jsdom(markup, {
+ features: {
+ FetchExternalResources: ['script', 'css'],
+ ProcessExternalResources: ['script'],
+ },
+ created: (_, win) => win.addEventListener('ReactFeatureDidMount', () => resolve(doc), true),
+ deferClose: true,
+ resourceLoader,
+ url: `${host}#${feature}`,
+ virtualConsole: jsdom.createVirtualConsole().sendTo(console),
+ })
+
+ doc.close()
+})
diff --git a/packages/react-scripts/fixtures/kitchensink/integration/syntax.test.js b/packages/react-scripts/fixtures/kitchensink/integration/syntax.test.js
new file mode 100644
index 00000000000..c8b7fbbc508
--- /dev/null
+++ b/packages/react-scripts/fixtures/kitchensink/integration/syntax.test.js
@@ -0,0 +1,96 @@
+import { expect } from 'chai'
+import initDOM from './initDOM'
+
+describe('Integration', () => {
+ describe('Language syntax', () => {
+ it('array destructuring', async () => {
+ const doc = await initDOM('array-destructuring')
+
+ expect(doc.getElementById('feature-array-destructuring').childElementCount).to.equal(4)
+ })
+
+ it('array spread', async () => {
+ const doc = await initDOM('array-spread')
+
+ expect(doc.getElementById('feature-array-spread').childElementCount).to.equal(4)
+ })
+
+ it('async/await', async () => {
+ const doc = await initDOM('async-await')
+
+ expect(doc.getElementById('feature-async-await').childElementCount).to.equal(4)
+ })
+
+ it('class properties', async () => {
+ const doc = await initDOM('class-properties')
+
+ expect(doc.getElementById('feature-class-properties').childElementCount).to.equal(4)
+ })
+
+ it('computed properties', async () => {
+ const doc = await initDOM('computed-properties')
+
+ expect(doc.getElementById('feature-computed-properties').childElementCount).to.equal(4)
+ })
+
+ it('custom interpolation', async () => {
+ const doc = await initDOM('custom-interpolation')
+
+ expect(doc.getElementById('feature-custom-interpolation').childElementCount).to.equal(4)
+ })
+
+ it('default parameters', async () => {
+ const doc = await initDOM('default-parameters')
+
+ expect(doc.getElementById('feature-default-parameters').childElementCount).to.equal(4)
+ })
+
+ it('destructuring and await', async () => {
+ const doc = await initDOM('destructuring-and-await')
+
+ expect(doc.getElementById('feature-destructuring-and-await').childElementCount).to.equal(4)
+ })
+
+ it('generators', async () => {
+ const doc = await initDOM('generators')
+
+ expect(doc.getElementById('feature-generators').childElementCount).to.equal(4)
+ })
+
+ it('object destructuring', async () => {
+ const doc = await initDOM('object-destructuring')
+
+ expect(doc.getElementById('feature-object-destructuring').childElementCount).to.equal(4)
+ })
+
+ it('object spread', async () => {
+ const doc = await initDOM('object-spread')
+
+ expect(doc.getElementById('feature-object-spread').childElementCount).to.equal(4)
+ })
+
+ it('promises', async () => {
+ const doc = await initDOM('promises')
+
+ expect(doc.getElementById('feature-promises').childElementCount).to.equal(4)
+ })
+
+ it('rest + default', async () => {
+ const doc = await initDOM('rest-and-default')
+
+ expect(doc.getElementById('feature-rest-and-default').childElementCount).to.equal(4)
+ })
+
+ it('rest parameters', async () => {
+ const doc = await initDOM('rest-parameters')
+
+ expect(doc.getElementById('feature-rest-parameters').childElementCount).to.equal(4)
+ })
+
+ it('template interpolation', async () => {
+ const doc = await initDOM('template-interpolation')
+
+ expect(doc.getElementById('feature-template-interpolation').childElementCount).to.equal(4)
+ })
+ })
+})
diff --git a/packages/react-scripts/fixtures/kitchensink/integration/webpack.test.js b/packages/react-scripts/fixtures/kitchensink/integration/webpack.test.js
new file mode 100644
index 00000000000..9e2826b8fc6
--- /dev/null
+++ b/packages/react-scripts/fixtures/kitchensink/integration/webpack.test.js
@@ -0,0 +1,44 @@
+import { expect } from 'chai'
+import initDOM from './initDOM'
+
+describe('Integration', () => {
+ describe('Webpack plugins', () => {
+ it('css inclusion', async () => {
+ const doc = await initDOM('css-inclusion')
+
+ expect(doc.getElementsByTagName('style')[0].textContent.replace(/\s/g, ''))
+ .to.match(/#feature-css-inclusion\{background:.+;color:.+}/)
+ })
+
+ it('image inclusion', async () => {
+ const doc = await initDOM('image-inclusion')
+
+ expect(doc.getElementById('feature-image-inclusion').src).to.match(/^data:image\/jpeg;base64.+==$/)
+ })
+
+ it('no ext inclusion', async () => {
+ const doc = await initDOM('no-ext-inclusion')
+
+ expect(doc.getElementById('feature-no-ext-inclusion').textContent)
+ .to.equal('This is just a file without an extension.')
+ })
+
+ it('json inclusion', async () => {
+ const doc = await initDOM('json-inclusion')
+
+ expect(doc.getElementById('feature-json-inclusion').textContent).to.equal('This is an abstract.')
+ })
+
+ it('svg inclusion', async () => {
+ const doc = await initDOM('svg-inclusion')
+
+ expect(doc.getElementById('feature-svg-inclusion').src).to.match(/\/static\/media\/logo\..+\.svg$/)
+ })
+
+ it('unknown ext inclusion', async () => {
+ const doc = await initDOM('unknown-ext-inclusion')
+
+ expect(doc.getElementById('feature-unknown-ext-inclusion').textContent).to.equal('Whoooo, spooky!.')
+ })
+ })
+})
diff --git a/packages/react-scripts/fixtures/kitchensink/public/favicon.ico b/packages/react-scripts/fixtures/kitchensink/public/favicon.ico
new file mode 100644
index 00000000000..5c125de5d89
Binary files /dev/null and b/packages/react-scripts/fixtures/kitchensink/public/favicon.ico differ
diff --git a/packages/react-scripts/fixtures/kitchensink/public/index.html b/packages/react-scripts/fixtures/kitchensink/public/index.html
new file mode 100644
index 00000000000..ce76aae90a4
--- /dev/null
+++ b/packages/react-scripts/fixtures/kitchensink/public/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+ <title>React App
+
+
+
+
+