├── .eslintrc ├── .gitignore ├── .travis.yml ├── CHANGELOG.md ├── CONTRIBUTING.md ├── ISSUE_TEMPLATE.md ├── LICENSE ├── PATENTS ├── README.md ├── examples └── relay │ ├── .env │ ├── README.md │ ├── libs │ ├── relay.js │ └── setupRelay.js │ ├── package.json │ ├── public │ ├── favicon.ico │ └── index.html │ ├── src │ ├── App.css │ ├── App.js │ ├── App.test.js │ ├── index.css │ ├── index.js │ └── logo.svg │ └── webpack.config.js ├── lerna.json ├── package.json ├── packages ├── babel-preset-react-app │ ├── README.md │ ├── index.js │ └── package.json ├── create-react-app │ ├── README.md │ ├── index.js │ └── package.json ├── eslint-config-react-app │ ├── README.md │ ├── index.js │ └── package.json ├── react-dev-utils │ ├── InterpolateHtmlPlugin.js │ ├── README.md │ ├── WatchMissingNodeModulesPlugin.js │ ├── checkRequiredFiles.js │ ├── clearConsole.js │ ├── formatWebpackMessages.js │ ├── getProcessForPort.js │ ├── openBrowser.js │ ├── openChrome.applescript │ ├── package.json │ ├── prompt.js │ └── webpackHotDevClient.js └── react-scripts │ ├── .babelrc │ ├── .eslintrc │ ├── .npmignore │ ├── README.md │ ├── bin │ └── react-scripts.js │ ├── config │ ├── env.js │ ├── jest │ │ ├── babelTransform.js │ │ ├── cssTransform.js │ │ └── fileTransform.js │ ├── paths.js │ ├── polyfills.js │ ├── webpack.config.dev.js │ └── webpack.config.prod.js │ ├── fixtures │ └── kitchensink │ │ ├── .babelrc │ │ ├── .env │ │ ├── .flowconfig │ │ ├── .template.dependencies.json │ │ ├── gitignore │ │ ├── integration │ │ ├── env.test.js │ │ ├── initDOM.js │ │ ├── syntax.test.js │ │ └── webpack.test.js │ │ ├── public │ │ ├── favicon.ico │ │ └── index.html │ │ └── src │ │ ├── App.js │ │ ├── absoluteLoad.js │ │ ├── features │ │ ├── env │ │ │ ├── FileEnvVariables.js │ │ │ ├── FileEnvVariables.test.js │ │ │ ├── NodePath.js │ │ │ ├── NodePath.test.js │ │ │ ├── PublicUrl.js │ │ │ ├── PublicUrl.test.js │ │ │ ├── ShellEnvVariables.js │ │ │ └── ShellEnvVariables.test.js │ │ ├── syntax │ │ │ ├── ArrayDestructuring.js │ │ │ ├── ArrayDestructuring.test.js │ │ │ ├── ArraySpread.js │ │ │ ├── ArraySpread.test.js │ │ │ ├── AsyncAwait.js │ │ │ ├── AsyncAwait.test.js │ │ │ ├── ClassProperties.js │ │ │ ├── ClassProperties.test.js │ │ │ ├── ComputedProperties.js │ │ │ ├── ComputedProperties.test.js │ │ │ ├── CustomInterpolation.js │ │ │ ├── CustomInterpolation.test.js │ │ │ ├── DefaultParameters.js │ │ │ ├── DefaultParameters.test.js │ │ │ ├── DestructuringAndAwait.js │ │ │ ├── DestructuringAndAwait.test.js │ │ │ ├── Generators.js │ │ │ ├── Generators.test.js │ │ │ ├── ObjectDestructuring.js │ │ │ ├── ObjectDestructuring.test.js │ │ │ ├── ObjectSpread.js │ │ │ ├── ObjectSpread.test.js │ │ │ ├── Promises.js │ │ │ ├── Promises.test.js │ │ │ ├── RestAndDefault.js │ │ │ ├── RestAndDefault.test.js │ │ │ ├── RestParameters.js │ │ │ ├── RestParameters.test.js │ │ │ ├── TemplateInterpolation.js │ │ │ └── TemplateInterpolation.test.js │ │ └── webpack │ │ │ ├── CssInclusion.js │ │ │ ├── CssInclusion.test.js │ │ │ ├── ImageInclusion.js │ │ │ ├── ImageInclusion.test.js │ │ │ ├── JsonInclusion.js │ │ │ ├── JsonInclusion.test.js │ │ │ ├── NoExtInclusion.js │ │ │ ├── NoExtInclusion.test.js │ │ │ ├── SvgInclusion.js │ │ │ ├── SvgInclusion.test.js │ │ │ ├── UnknownExtInclusion.js │ │ │ ├── UnknownExtInclusion.test.js │ │ │ └── assets │ │ │ ├── aFileWithExt.unknown │ │ │ ├── aFileWithoutExt │ │ │ ├── abstract.json │ │ │ ├── logo.svg │ │ │ ├── style.css │ │ │ └── tiniest-cat.jpg │ │ ├── index.js │ │ └── subfolder │ │ └── lol.js │ ├── package.json │ ├── scripts │ ├── build.js │ ├── eject.js │ ├── init.js │ ├── start.js │ └── test.js │ ├── template │ ├── README.md │ ├── gitignore │ ├── public │ │ ├── favicon.ico │ │ └── index.html │ └── src │ │ ├── App.css │ │ ├── App.js │ │ ├── App.test.js │ │ ├── index.css │ │ ├── index.js │ │ └── logo.svg │ └── utils │ └── createJestConfig.js ├── tasks ├── cra.sh ├── e2e-installs.sh ├── e2e-kitchensink.sh ├── e2e-simple.sh ├── release.sh └── replace-own-deps.js └── template └── README.md /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "react-app" 3 | } 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | build 3 | .DS_Store 4 | *.tgz 5 | my-app* 6 | template/src/__tests__/__snapshots__/ 7 | lerna-debug.log 8 | npm-debug.log* 9 | yarn-debug.log* 10 | yarn-error.log* 11 | /.changelog 12 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | --- 2 | language: node_js 3 | node_js: 4 | - 4 5 | - 6 6 | cache: 7 | directories: 8 | - node_modules 9 | - packages/create-react-app/node_modules 10 | - packages/react-scripts/node_modules 11 | script: 12 | - 'if [ $TEST_SUITE = "simple" ]; then tasks/e2e-simple.sh; fi' 13 | - 'if [ $TEST_SUITE = "installs" ]; then tasks/e2e-installs.sh; fi' 14 | - 'if [ $TEST_SUITE = "kitchensink" ]; then tasks/e2e-kitchensink.sh; fi' 15 | env: 16 | global: 17 | - USE_YARN=no 18 | matrix: 19 | - TEST_SUITE=simple 20 | - TEST_SUITE=installs 21 | - TEST_SUITE=kitchensink 22 | matrix: 23 | include: 24 | - node_js: 6 25 | env: USE_YARN=yes TEST_SUITE=simple 26 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing to Create React App 2 | 3 | Loving Create React App and want to get involved? Thanks! There are plenty of ways you can help. 4 | 5 | Please take a moment to review this document in order to make the contribution process easy and effective for everyone involved. 6 | 7 | Following these guidelines helps to communicate that you respect the time of the developers managing and developing this open source project. In return, they should reciprocate that respect in addressing your issue or assessing patches and features. 8 | 9 | ## Core Ideas 10 | 11 | As much as possible, we try to avoid adding configuration and flags. The purpose of this tool is to provide the best experience for people getting started with React, and this will always be our first priority. This means that sometimes we [sacrifice additional functionality](https://gettingreal.37signals.com/ch05_Half_Not_Half_Assed.php) (such as server rendering) because it is too hard to solve it in a way that wouldn’t require any configuration. 12 | 13 | We prefer **convention, heuristics, or interactivity** over configuration. 14 | Here’s a few examples of them in action. 15 | 16 | ### Convention 17 | 18 | Instead of letting the user specify the entry filename, we always assume it to be `src/index.js`. Rather than letting the user specify the output bundle name, we generate it, but make sure to include the content hash in it. Whenever possible, we want to leverage convention to make good choices for the user, especially in cases where it’s easy to misconfigure something. 19 | 20 | ### Heuristics 21 | 22 | Normally, `npm start` runs on port `3000`, and this is not explicitly configurable. However some environments like cloud IDEs want the programs to run on a specific port to serve their output. We want to play well with different environments, so Create React App reads `PORT` environment variable and prefers it when it is specified. The trick is that we know cloud IDEs already specify it automatically so there is no need for the user to do anything. Create React App relies on heuristics to do the right thing depending on environment. 23 | 24 | Another example of this is how `npm test` normally launches the watcher, but if the `CI` environment variable is set, it will run tests once. We know that popular CI environments set this variable so the user doesn’t need to do anything. It just works. 25 | 26 | ### Interactivity 27 | 28 | We prefer to add interactivity to the command line interface rather than add configuration flags. For example, `npm start` will attempt to run with port `3000` by default but it may be busy. Many other tools just fail in this case and ask that you pass a different port, but Create React App will display a prompt asking if you’d like to run the app on the next available port. 29 | 30 | Another example of interactivity is `npm test` watcher interface. Instead of asking people to pass command line flags for switching between test runner modes or search patterns, we print a hint with keys that you can press during the test session to instruct watcher what to do. Jest supports both flags and interactive CLI but Create React App prefers long-running sessions to keep user immersed in the flow over short-running sessions with different flags. 31 | 32 | ### Breaking the Rules 33 | 34 | No rules are perfect. Sometimes we may introduce flags or configuration if we believe the value is high enough to justify the mental cost. For example, we know that apps may be hosted paths different from the root, and we need to support this use case. However we still try to fall back to heuristics when possible. In this example, we ask that you specify `homepage` in `package.json`, and infer the correct path based on it. We also nudge the user to fill out the `homepage` after the build so the user becomes aware that the feature exists. 35 | 36 | ## Submitting a Pull Request 37 | 38 | Good pull requests, such as patches, improvements, and new features, are a fantastic help. They should remain focused in scope and avoid containing unrelated commits. 39 | 40 | Please **ask first** if somebody else is already working on this or the core developers think your feature is in-scope for Create React App. Generally always have a related issue with discussions for whatever you are including. 41 | 42 | Please also provide a **test plan**, i.e. specify how you verified that your addition works. 43 | 44 | ## Setting Up a Local Copy 45 | 46 | 1. Clone the repo with `git clone https://github.com/facebookincubator/create-react-app` 47 | 48 | 2. Run `npm install` in the root `create-react-app` folder. 49 | 50 | Once it is done, you can modify any file locally and run `npm start`, `npm test` or `npm run build` just like in a generated project. 51 | 52 | If you want to try out the end-to-end flow with the global CLI, you can do this too: 53 | 54 | ``` 55 | npm run create-react-app my-app 56 | cd my-app 57 | ``` 58 | 59 | and then run `npm start` or `npm run build`. 60 | 61 | ## Cutting a Release 62 | 63 | 1. Tag all merged pull requests that go into the release with the relevant milestone. Each merged PR should also be labeled with one of the [labels](https://github.com/facebookincubator/create-react-app/labels) named `tag: ...` to indicate what kind of change it is. 64 | 2. Close the milestone. 65 | 3. In most releases, only `react-scripts` needs to be released. If you don’t have any changes to the `packages/create-react-app` folder, you don’t need to bump its version or publish it (the publish script will publish only changed packages). 66 | 4. Note that files in `packages/create-react-app` should be modified with extreme caution. Since it’s a global CLI, any version of `create-react-app` (global CLI) including very old ones should work with the latest version of `react-scripts`. 67 | 5. Create a change log entry for the release: 68 | * 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="..."` 69 | * 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`. 70 | * 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. 71 | * 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. 72 | 6. Make sure to include “Migrating from ...” instructions for the previous release. Often you can copy and paste them. 73 | 7. After merging the changelog update, create a GitHub Release with the same text. See previous Releases for inspiration. 74 | 8. **Do not run `npm publish`. Instead, run `npm run publish`.** 75 | 9. Wait for a long time, and it will get published. Don’t worry that it’s stuck. In the end the publish script will prompt for versions before publishing the packages. 76 | 77 | Make sure to test the released version! If you want to be extra careful, you can publish a prerelease by running `npm run publish -- --tag next` instead of `npm run publish`. 78 | 79 | ------------ 80 | 81 | *Many thanks to [h5bp](https://github.com/h5bp/html5-boilerplate/blob/master/CONTRIBUTING.md) for the inspiration with this contributing guide* 82 | -------------------------------------------------------------------------------- /ISSUE_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | If you are reporting a bug, please fill in below. Otherwise feel free to remove this template entirely. 2 | 3 | ### Can you reproduce the problem with latest npm? 4 | 5 | Many errors, especially related to "missing modules", are due to npm bugs. 6 | 7 | If you're using Windows, [follow these instructions to update npm](https://github.com/npm/npm/wiki/Troubleshooting#upgrading-on-windows). 8 | 9 | If you're using OS X or Linux, run this to update npm: 10 | 11 | ``` 12 | npm install -g npm@latest 13 | 14 | cd your_project_directory 15 | rm -rf node_modules 16 | npm install 17 | ``` 18 | 19 | Then try to reproduce the issue again. 20 | 21 | Can you still reproduce it? 22 | 23 | ### Description 24 | 25 | What are you reporting? 26 | 27 | ### Expected behavior 28 | 29 | Tell us what you think should happen. 30 | 31 | ### Actual behavior 32 | 33 | Tell us what actually happens. 34 | 35 | ### Environment 36 | 37 | Run these commands in the project folder and fill in their results: 38 | 39 | 1. `npm ls react-scripts` (if you haven’t ejected): 40 | 2. `node -v`: 41 | 3. `npm -v`: 42 | 43 | Then, specify: 44 | 45 | 1. Operating system: 46 | 2. Browser and version: 47 | 48 | ### Reproducible Demo 49 | 50 | Please take the time to create a new app that reproduces the issue. 51 | 52 | Alternatively, you could copy your app that experiences the problem and start removing things until you’re left with the minimal reproducible demo. 53 | 54 | (Accidentally, you might get to the root of your problem during that process.) 55 | 56 | Push to GitHub and paste the link here. 57 | 58 | By doing this, you're helping the Create React App contributors a big time! 59 | Demonstrable issues gets fixed faster. 60 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | BSD License 2 | 3 | For create-react-app software 4 | 5 | Copyright (c) 2016-present, Facebook, Inc. All rights reserved. 6 | 7 | Redistribution and use in source and binary forms, with or without modification, 8 | are permitted provided that the following conditions are met: 9 | 10 | * Redistributions of source code must retain the above copyright notice, this 11 | list of conditions and the following disclaimer. 12 | 13 | * Redistributions in binary form must reproduce the above copyright notice, 14 | this list of conditions and the following disclaimer in the documentation 15 | and/or other materials provided with the distribution. 16 | 17 | * Neither the name Facebook nor the names of its contributors may be used to 18 | endorse or promote products derived from this software without specific 19 | prior written permission. 20 | 21 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND 22 | ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED 23 | WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE 24 | DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR 25 | ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES 26 | (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; 27 | LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON 28 | ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT 29 | (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS 30 | SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. 31 | -------------------------------------------------------------------------------- /PATENTS: -------------------------------------------------------------------------------- 1 | Additional Grant of Patent Rights Version 2 2 | 3 | "Software" means the create-react-app software distributed by Facebook, Inc. 4 | 5 | Facebook, Inc. ("Facebook") hereby grants to each recipient of the Software 6 | ("you") a perpetual, worldwide, royalty-free, non-exclusive, irrevocable 7 | (subject to the termination provision below) license under any Necessary 8 | Claims, to make, have made, use, sell, offer to sell, import, and otherwise 9 | transfer the Software. For avoidance of doubt, no license is granted under 10 | Facebook’s rights in any patent claims that are infringed by (i) modifications 11 | to the Software made by you or any third party or (ii) the Software in 12 | combination with any software or other technology. 13 | 14 | The license granted hereunder will terminate, automatically and without notice, 15 | if you (or any of your subsidiaries, corporate affiliates or agents) initiate 16 | directly or indirectly, or take a direct financial interest in, any Patent 17 | Assertion: (i) against Facebook or any of its subsidiaries or corporate 18 | affiliates, (ii) against any party if such Patent Assertion arises in whole or 19 | in part from any software, technology, product or service of Facebook or any of 20 | its subsidiaries or corporate affiliates, or (iii) against any party relating 21 | to the Software. Notwithstanding the foregoing, if Facebook or any of its 22 | subsidiaries or corporate affiliates files a lawsuit alleging patent 23 | infringement against you in the first instance, and you respond by filing a 24 | patent infringement counterclaim in that lawsuit against that party that is 25 | unrelated to the Software, the license granted hereunder will not terminate 26 | under section (i) of this paragraph due to such counterclaim. 27 | 28 | A "Necessary Claim" is a claim of a patent owned by Facebook that is 29 | necessarily infringed by the Software standing alone. 30 | 31 | A "Patent Assertion" is any lawsuit or other action alleging direct, indirect, 32 | or contributory infringement or inducement to infringe any patent, including a 33 | cross-claim or counterclaim. 34 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Configurable react-scripts 2 | Latest version of original react-scripts: 0.9.0 3 | 4 | ## ⚠️ Warning 5 | 6 | This is **not** a fork of [```create-react-app```](https://github.com/facebookincubator/create-react-app). It's just a fork of ```react-scripts``` with possible modification of webpack config. 7 | 8 | ## Why I've built this? 9 | 10 | Create-react-app is great. It is so great I've migrated most of my apps from different boilerplates. But I've always find something I missed. 11 | 12 | In first app, I've needed support of CSS-modules, so I've created my custom react-scripts with scope `@svrcekmichal/react-scripts`. Everything was great for a while, until I've needed to add LESS, so I published new version. In second app I've been using Relay, so I've added Relay to my package. As you can see, it started growing, but I've added it and pretend everything is fine. In third app I wanted to test styled-components and I wanted to add custom babel plugin fore better react-devtools. 13 | 14 | That's the point where everything in me broken. I've started to search for better alternatives and opened npms.io. I found 164+ packages with or withous scope which handled most of the time same stuff. LESS, SASS, CSS-modules, css variables etc. This is all stuff which can be added with few lines of code to webpack config. 15 | 16 | And here I am, and you are here too. Probably with the same problem. 17 | 18 | ## ☢ DANGER ☢ 19 | 20 | There is multiple reasons why not to do it this way! This solution was proposed multiple times before, so I link few PRs where is everything better explained. 21 | 22 | [#99](https://github.com/facebookincubator/create-react-app/issues/99) 23 | [#145](https://github.com/facebookincubator/create-react-app/issues/145) 24 | [#460](https://github.com/facebookincubator/create-react-app/issues/460) 25 | [#481](https://github.com/facebookincubator/create-react-app/issues/481) 26 | [#1060](https://github.com/facebookincubator/create-react-app/issues/1060) 27 | [#1103](https://github.com/facebookincubator/create-react-app/issues/1103) 28 | [#1111](https://github.com/facebookincubator/create-react-app/issues/1111) 29 | 30 | As [@gaearon](https://github.com/gaearon) mentioned multiple times there, it's not good idea to extend it. From my point of view, I'm giving you gun, so try not to shot yourself, because probably nobody will help you. When you modify something, be completely sure what you doing! 31 | 32 | ## Instalation 33 | 34 | ``` 35 | create-react-app my-app --scripts-version configurable-react-scripts 36 | ``` 37 | 38 | ## Usage 39 | 40 | To modify webpack config create `webpack.config.js` file in your project directory. Add following body and modify whatever you want inside function body. 41 | First argument is original config from `react-scripts`, second is for target only dev or only prod features. Don't forget to return modified config! 42 | 43 | ```js 44 | module.exports = function(webpackConfig, isDevelopment) { 45 | 46 | //here you can modify webpack config 47 | 48 | return webpackConfig; 49 | } 50 | ``` 51 | 52 | ## Examples 53 | 54 | I've added example with Relay. It can be seen in `examples` folder. If you can, I will accept any PR with features like LESS, SASS, CSS-modules etc. 55 | 56 | -------------------------------------------------------------------------------- /examples/relay/.env: -------------------------------------------------------------------------------- 1 | GRAPHQL_ENDPOINT=htp://localhost:4000/graphql -------------------------------------------------------------------------------- /examples/relay/README.md: -------------------------------------------------------------------------------- 1 | # Configurable react-scripts 2 | Latest version of original react-scripts: 0.9.0 3 | 4 | ## ⚠️ Warning 5 | 6 | This is **not** a fork of [```create-react-app```](https://github.com/facebookincubator/create-react-app). It's just a fork of ```react-scripts``` with possible modification of webpack config. 7 | 8 | ## Why I've built this? 9 | 10 | Create-react-app is great. It is so great I've migrated most of my apps from different boilerplates. But I've always find something I missed. 11 | 12 | In first app, I've needed support of CSS-modules, so I've created my custom react-scripts with scope `@svrcekmichal/react-scripts`. Everything was great for a while, until I've needed to add LESS, so I published new version. In second app I've been using Relay, so I've added Relay to my package. As you can see, it started growing, but I've added it and pretend everything is fine. In third app I wanted to test styled-components and I wanted to add custom babel plugin fore better react-devtools. 13 | 14 | That's the point where everything in me broken. I've started to search for better alternatives and opened npms.io. I found 164+ packages with or withous scope which handled most of the time same stuff. LESS, SASS, CSS-modules, css variables etc. This is all stuff which can be added with few lines of code to webpack config. 15 | 16 | And here I am, and you are here too. Probably with the same problem. 17 | 18 | ## ☢ DANGER ☢ 19 | 20 | There is multiple reasons why not to do it this way! This solution was proposed multiple times before, so I link few PRs where is everything better explained. 21 | 22 | [#99](https://github.com/facebookincubator/create-react-app/issues/99) 23 | [#145](https://github.com/facebookincubator/create-react-app/issues/145) 24 | [#460](https://github.com/facebookincubator/create-react-app/issues/460) 25 | [#481](https://github.com/facebookincubator/create-react-app/issues/481) 26 | [#1060](https://github.com/facebookincubator/create-react-app/issues/1060) 27 | [#1103](https://github.com/facebookincubator/create-react-app/issues/1103) 28 | [#1111](https://github.com/facebookincubator/create-react-app/issues/1111) 29 | 30 | As [@gaearon](https://github.com/gaearon) mentioned multiple times there, it's not good idea to extend it. From my point of view, I'm giving you gun, so try not to shot yourself, because probably nobody will help you. When you modify something, be completely sure what you doing! 31 | 32 | ## Instalation 33 | 34 | ``` 35 | create-react-app my-app --scripts-version configurable-react-scripts 36 | ``` 37 | 38 | ## Usage 39 | 40 | To modify webpack config create `webpack.config.js` file in your project directory. Add following body and modify whatever you want inside function body. 41 | First argument is original config from `react-scripts`, second is for target only dev or only prod features. Don't forget to return modified config! 42 | 43 | ```js 44 | module.exports = function(webpackConfig, isDevelopment) { 45 | 46 | //here you can modify webpack config 47 | 48 | return webpackConfig; 49 | } 50 | ``` 51 | 52 | ## Examples 53 | 54 | I've added example with Relay. It can be seen in `examples` folder. If you can, I will accept any PR with features like LESS, SASS, CSS-modules etc. 55 | 56 | -------------------------------------------------------------------------------- /examples/relay/libs/relay.js: -------------------------------------------------------------------------------- 1 | var path = require('path'); 2 | var chalk = require('chalk'); 3 | var fs = require('fs') 4 | 5 | exports.schemaPath = path.resolve(__dirname, '../graphql-schema.json'); 6 | 7 | exports.getBabelRelayPlugin = function(){ 8 | if(!fs.existsSync(exports.schemaPath)) { 9 | console.log(chalk.red('GraphQL schema not found - have you run "npm run setupRelay"?')) 10 | process.exit("GraphQL schema not found"); 11 | } 12 | 13 | var schema = require(exports.schemaPath); 14 | var getBabelRelayPlugin = require('babel-relay-plugin'); 15 | return getBabelRelayPlugin(schema.data); 16 | } 17 | 18 | -------------------------------------------------------------------------------- /examples/relay/libs/setupRelay.js: -------------------------------------------------------------------------------- 1 | const chalk = require('chalk'); 2 | const fetch = require('node-fetch'); 3 | const graphQlutilities = require('graphql/utilities'); 4 | const fs = require('fs'); 5 | require('dotenv').config({silent: true}); 6 | 7 | const relay = require('./relay'); 8 | 9 | const requireGraphQlConfig = function() { 10 | return new Promise((resolve, reject) => { 11 | if (!process.env.GRAPHQL_ENDPOINT) { 12 | reject(new Error( 13 | chalk.red('Relay requires a url to your graphql server\n') + 14 | 'Specifiy this in a ' + chalk.cyan('GRAPHQL_ENDPOINT') + ' environment variable.' 15 | )); 16 | } else { 17 | console.log(chalk.green("Relay support - GRAPHQL_ENDPOINT configured successfully")); 18 | resolve(); 19 | } 20 | }); 21 | } 22 | 23 | const loadSchema = function() { 24 | return new Promise((resolve, reject) => { 25 | if (!fs.existsSync(relay.schemaPath)) { 26 | reject(new Error( 27 | chalk.yellow('Relay support - babel-relay-plugin didn\'t find graphql-schema.json\n') 28 | )); 29 | } else { 30 | console.log(chalk.green("Relay support - graphql-schema.json find")); 31 | resolve() 32 | } 33 | }) 34 | } 35 | 36 | var validateSchemaJson = function () { 37 | return new Promise((resolve, reject) => { 38 | var schemaFileContents = fs.readFileSync(relay.schemaPath); 39 | // check that schema.json is valid json 40 | var schemaJSON; 41 | try { 42 | schemaJSON = JSON.parse(schemaFileContents); 43 | } catch (err) { 44 | return reject(new Error( 45 | chalk.red('JSON parsing of the contents of graphql-schema.json failed.\n') + 46 | 'Check the contents of ' + relay.schemaPath + '. It does not appear to be valid json\n' 47 | )); 48 | } 49 | 50 | try { 51 | graphQlutilities.buildClientSchema(schemaJSON.data); 52 | } catch (err) { 53 | reject(new Error( 54 | chalk.red('Could not parse the contents of schema.json into a valid graphql schema that is compatiable with this version of Relay and babel-relay-plugin\n') + 55 | 'Upgrading graphql library on your server may be a solution.' 56 | )); 57 | } 58 | 59 | console.log('Relay support - schema is valid'); 60 | resolve(); 61 | }); 62 | } 63 | 64 | // retreive JSON of graaphql schema via introspection for Babel Relay Plugin to use 65 | var fetchRelaySchema = function () { 66 | console.log('Relay support - fetching schema from ' + chalk.cyan(process.env.GRAPHQL_ENDPOINT)); 67 | return fetch(process.env.GRAPHQL_ENDPOINT, { 68 | method: 'POST', 69 | headers: { 70 | 'Accept': 'application/json', 71 | 'Content-Type': 'application/json' 72 | }, 73 | body: JSON.stringify({'query': graphQlutilities.introspectionQuery}), 74 | }) 75 | .then(res => res.json()).then(schemaJSON => { 76 | // verify that the schemaJSON is valid a graphQL Schema 77 | var graphQLSchema = graphQlutilities.buildClientSchema(schemaJSON.data); 78 | // Save relay compatible schema.json 79 | fs.writeFileSync(relay.schemaPath, JSON.stringify(schemaJSON, null, 2)); 80 | 81 | // Save user readable schema.graphql 82 | fs.writeFileSync(relay.schemaPath.replace('.json', '.graphql'), graphQlutilities.printSchema(graphQLSchema)); 83 | console.log(chalk.green('Relay support - GraphQL schema successfully fetched')); 84 | }); 85 | } 86 | 87 | requireGraphQlConfig() 88 | .then(loadSchema) 89 | .catch(fetchRelaySchema) 90 | .then(validateSchemaJson) 91 | .then(() => { 92 | console.log(chalk.green('Relay support everything configured successfully!')); 93 | }, function(e){ 94 | console.log(e.message); 95 | process.exit("Seomthing went wrong :D"); 96 | }); -------------------------------------------------------------------------------- /examples/relay/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "relay-example", 3 | "version": "0.1.0", 4 | "private": true, 5 | "devDependencies": { 6 | "@svrcekmichal/react-scripts": "^0.5.0-rc.0", 7 | "babel-relay-plugin": "^0.10.0", 8 | "chalk": "^1.1.3", 9 | "dotenv": "^4.0.0", 10 | "enzyme": "^2.7.1", 11 | "graphql": "^0.9.1", 12 | "node-fetch": "^1.6.3", 13 | "react-addons-test-utils": "^15.4.2" 14 | }, 15 | "dependencies": { 16 | "react": "^15.4.2", 17 | "react-dom": "^15.4.2", 18 | "react-relay": "^0.10.0", 19 | "react-router": "^3.0.2", 20 | "react-test-renderer": "^15.4.2", 21 | "relay-react-router": "^0.1.0" 22 | }, 23 | "scripts": { 24 | "setupRelay": "node libs/setupRelay.js", 25 | "start": "react-scripts start", 26 | "build": "react-scripts build", 27 | "test": "react-scripts test --env=jsdom", 28 | "eject": "react-scripts eject" 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /examples/relay/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/svrcekmichal/configurable-react-scripts/0346ff0f839191cc5b4cfff4cd5a964f01cafe01/examples/relay/public/favicon.ico -------------------------------------------------------------------------------- /examples/relay/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 16 | React App 17 | 18 | 19 |
20 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /examples/relay/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | animation: App-logo-spin infinite 20s linear; 7 | height: 80px; 8 | } 9 | 10 | .App-header { 11 | background-color: #222; 12 | height: 150px; 13 | padding: 20px; 14 | color: white; 15 | } 16 | 17 | .App-intro { 18 | font-size: large; 19 | } 20 | 21 | @keyframes App-logo-spin { 22 | from { transform: rotate(0deg); } 23 | to { transform: rotate(360deg); } 24 | } 25 | -------------------------------------------------------------------------------- /examples/relay/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import logo from './logo.svg'; 3 | import './App.css'; 4 | 5 | class App extends Component { 6 | render() { 7 | return ( 8 |
9 |
10 | logo 11 |

Welcome to Reactt

12 |
13 |

14 | To get started, edit src/App.js and save to reload. 15 |

16 |
17 | ); 18 | } 19 | } 20 | 21 | export default App; 22 | -------------------------------------------------------------------------------- /examples/relay/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | it('renders without crashing', () => { 6 | const div = document.createElement('div'); 7 | ReactDOM.render(, div); 8 | }); 9 | -------------------------------------------------------------------------------- /examples/relay/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: sans-serif; 5 | } 6 | -------------------------------------------------------------------------------- /examples/relay/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | import './index.css'; 5 | 6 | ReactDOM.render( 7 | , 8 | document.getElementById('root') 9 | ); 10 | -------------------------------------------------------------------------------- /examples/relay/src/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /examples/relay/webpack.config.js: -------------------------------------------------------------------------------- 1 | var relayLib = require('./libs/relay'); 2 | var fs = require('fs'); 3 | 4 | module.exports = function(webpackConfig, isDevelopment) { 5 | 6 | /** 7 | * Relay setup 8 | */ 9 | 10 | const babelRule = findRule(webpackConfig, function(rule){ return rule.loader === 'babel-loader' }); 11 | babelRule.options.plugins = babelRule.options.plugins || []; 12 | babelRule.options.plugins.push(relayLib.getBabelRelayPlugin()); 13 | babelRule.options.cacheDirectory = true; 14 | babelRule.options.cacheIdentifier = fs.statSync(relayLib.schemaPath).mtime; 15 | 16 | return webpackConfig; 17 | } 18 | 19 | function findRule(config, callback) { 20 | var index = config.module.rules.findIndex(callback); 21 | if(index === -1) throw Error('Rule now found'); 22 | return config.module.rules[index]; 23 | } -------------------------------------------------------------------------------- /lerna.json: -------------------------------------------------------------------------------- 1 | { 2 | "lerna": "2.0.0-beta.37", 3 | "version": "independent", 4 | "changelog": { 5 | "repo": "facebookincubator/create-react-app", 6 | "labels": { 7 | "tag: new feature": ":rocket: New Feature", 8 | "tag: breaking change": ":boom: Breaking Change", 9 | "tag: bug fix": ":bug: Bug Fix", 10 | "tag: enhancement": ":nail_care: Enhancement", 11 | "tag: documentation": ":memo: Documentation", 12 | "tag: internal": ":house: Internal" 13 | }, 14 | "cacheDir": ".changelog" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "scripts": { 4 | "build": "node packages/react-scripts/scripts/build.js", 5 | "changelog": "lerna-changelog", 6 | "create-react-app": "tasks/cra.sh", 7 | "e2e": "tasks/e2e-simple.sh", 8 | "postinstall": "lerna bootstrap", 9 | "publish": "tasks/release.sh", 10 | "start": "node packages/react-scripts/scripts/start.js", 11 | "test": "node packages/react-scripts/scripts/test.js --env=jsdom" 12 | }, 13 | "devDependencies": { 14 | "babel-eslint": "6.1.2", 15 | "eslint": "3.5.0", 16 | "eslint-config-react-app": "0.2.1", 17 | "eslint-plugin-flowtype": "2.18.1", 18 | "eslint-plugin-import": "1.12.0", 19 | "eslint-plugin-jsx-a11y": "2.2.2", 20 | "eslint-plugin-react": "6.3.0", 21 | "lerna": "^2.0.0-beta.37", 22 | "lerna-changelog": "^0.2.3" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /packages/babel-preset-react-app/README.md: -------------------------------------------------------------------------------- 1 | # babel-preset-react-app 2 | 3 | This package includes the Babel preset used by [Create React App](https://github.com/facebookincubator/create-react-app). 4 | Please refer to its documentation: 5 | 6 | * [Getting Started](https://github.com/facebookincubator/create-react-app/blob/master/README.md#getting-started) – How to create a new app. 7 | * [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md) – How to develop apps bootstrapped with Create React App. 8 | 9 | ## Usage in Create React App Projects 10 | 11 | The easiest way to use this configuration is with [Create React App](https://github.com/facebookincubator/create-react-app), which includes it by default. **You don’t need to install it separately in Create React App projects.** 12 | 13 | ## Usage Outside of Create React App 14 | 15 | If you want to use this Babel preset in a project not built with Create React App, you can install it with following steps. 16 | 17 | First, [install Babel](https://babeljs.io/docs/setup/). 18 | 19 | Then create a file named `.babelrc` with following contents in the root folder of your project: 20 | 21 | ```js 22 | { 23 | "presets": ["react-app"] 24 | } 25 | ``` 26 | 27 | This preset uses the `useBuiltIns` option with [transform-object-rest-spread](http://babeljs.io/docs/plugins/transform-object-rest-spread/) and [transform-react-jsx](http://babeljs.io/docs/plugins/transform-react-jsx/), which assumes that `Object.assign` is available or polyfilled. 28 | -------------------------------------------------------------------------------- /packages/babel-preset-react-app/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) 2015-present, Facebook, Inc. 3 | * All rights reserved. 4 | * 5 | * This source code is licensed under the BSD-style license found in the 6 | * LICENSE file in the root directory of this source tree. An additional grant 7 | * of patent rights can be found in the PATENTS file in the same directory. 8 | */ 9 | 'use strict'; 10 | 11 | var path = require('path'); 12 | 13 | const plugins = [ 14 | // class { handleClick = () => { } } 15 | require.resolve('babel-plugin-transform-class-properties'), 16 | // The following two plugins use Object.assign directly, instead of Babel's 17 | // extends helper. Note that this assumes `Object.assign` is available. 18 | // { ...todo, completed: true } 19 | [require.resolve('babel-plugin-transform-object-rest-spread'), { 20 | useBuiltIns: true 21 | }], 22 | // Transforms JSX 23 | [require.resolve('babel-plugin-transform-react-jsx'), { 24 | useBuiltIns: true 25 | }], 26 | // Polyfills the runtime needed for async/await and generators 27 | [require.resolve('babel-plugin-transform-runtime'), { 28 | helpers: false, 29 | polyfill: false, 30 | regenerator: true, 31 | // Resolve the Babel runtime relative to the config. 32 | moduleName: path.dirname(require.resolve('babel-runtime/package')) 33 | }] 34 | ]; 35 | 36 | // This is similar to how `env` works in Babel: 37 | // https://babeljs.io/docs/usage/babelrc/#env-option 38 | // We are not using `env` because it’s ignored in versions > babel-core@6.10.4: 39 | // https://github.com/babel/babel/issues/4539 40 | // https://github.com/facebookincubator/create-react-app/issues/720 41 | // It’s also nice that we can enforce `NODE_ENV` being specified. 42 | var env = process.env.BABEL_ENV || process.env.NODE_ENV; 43 | if (env !== 'development' && env !== 'test' && env !== 'production') { 44 | throw new Error( 45 | 'Using `babel-preset-react-app` requires that you specify `NODE_ENV` or '+ 46 | '`BABEL_ENV` environment variables. Valid values are "development", ' + 47 | '"test", and "production". Instead, received: ' + JSON.stringify(env) + '.' 48 | ); 49 | } 50 | 51 | if (env === 'development' || env === 'test') { 52 | // The following two plugins are currently necessary to make React warnings 53 | // include more valuable information. They are included here because they are 54 | // currently not enabled in babel-preset-react. See the below threads for more info: 55 | // https://github.com/babel/babel/issues/4702 56 | // https://github.com/babel/babel/pull/3540#issuecomment-228673661 57 | // https://github.com/facebookincubator/create-react-app/issues/989 58 | plugins.push.apply(plugins, [ 59 | // Adds component stack to warning messages 60 | require.resolve('babel-plugin-transform-react-jsx-source'), 61 | // Adds __self attribute to JSX which React will use for some warnings 62 | require.resolve('babel-plugin-transform-react-jsx-self') 63 | ]); 64 | } 65 | 66 | if (env === 'test') { 67 | plugins.push.apply(plugins, [ 68 | // We always include this plugin regardless of environment 69 | // because of a Babel bug that breaks object rest/spread without it: 70 | // https://github.com/babel/babel/issues/4851 71 | require.resolve('babel-plugin-transform-es2015-parameters') 72 | ]); 73 | 74 | module.exports = { 75 | presets: [ 76 | // ES features necessary for user's Node version 77 | [require('babel-preset-env').default, { 78 | targets: { 79 | node: 'current', 80 | }, 81 | }], 82 | // JSX, Flow 83 | require.resolve('babel-preset-react') 84 | ], 85 | plugins: plugins 86 | }; 87 | } else { 88 | module.exports = { 89 | presets: [ 90 | // Latest stable ECMAScript features 91 | [require.resolve('babel-preset-latest'), { 92 | 'es2015': { 93 | modules: false 94 | } 95 | }], 96 | // JSX, Flow 97 | require.resolve('babel-preset-react') 98 | ], 99 | plugins: plugins.concat([ 100 | // function* () { yield 42; yield 43; } 101 | [require.resolve('babel-plugin-transform-regenerator'), { 102 | // Async functions are converted to generators by babel-preset-latest 103 | async: false 104 | }], 105 | ]) 106 | }; 107 | 108 | if (env === 'production') { 109 | // Optimization: hoist JSX that never changes out of render() 110 | // Disabled because of issues: 111 | // * https://github.com/facebookincubator/create-react-app/issues/525 112 | // * https://phabricator.babeljs.io/search/query/pCNlnC2xzwzx/ 113 | // * https://github.com/babel/babel/issues/4516 114 | // TODO: Enable again when these issues are resolved. 115 | // plugins.push.apply(plugins, [ 116 | // require.resolve('babel-plugin-transform-react-constant-elements') 117 | // ]); 118 | } 119 | } 120 | -------------------------------------------------------------------------------- /packages/babel-preset-react-app/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "name": "babel-preset-react-app", 4 | "version": "2.1.0", 5 | "description": "Babel preset used by Create React App", 6 | "repository": "facebookincubator/create-react-app", 7 | "license": "BSD-3-Clause", 8 | "bugs": { 9 | "url": "https://github.com/facebookincubator/create-react-app/issues" 10 | }, 11 | "files": [ 12 | "index.js" 13 | ], 14 | "dependencies": { 15 | "babel-plugin-transform-class-properties": "6.22.0", 16 | "babel-plugin-transform-es2015-parameters": "6.22.0", 17 | "babel-plugin-transform-object-rest-spread": "6.22.0", 18 | "babel-plugin-transform-react-constant-elements": "6.22.0", 19 | "babel-plugin-transform-react-jsx": "6.22.0", 20 | "babel-plugin-transform-react-jsx-self": "6.22.0", 21 | "babel-plugin-transform-react-jsx-source": "6.22.0", 22 | "babel-plugin-transform-regenerator": "6.22.0", 23 | "babel-plugin-transform-runtime": "6.22.0", 24 | "babel-preset-env": "1.1.8", 25 | "babel-preset-latest": "6.22.0", 26 | "babel-preset-react": "6.22.0", 27 | "babel-runtime": "6.22.0" 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /packages/create-react-app/README.md: -------------------------------------------------------------------------------- 1 | # create-react-app 2 | 3 | This package includes the global command for [Create React App](https://github.com/facebookincubator/create-react-app). 4 | Please refer to its documentation: 5 | 6 | * [Getting Started](https://github.com/facebookincubator/create-react-app/blob/master/README.md#getting-started) – How to create a new app. 7 | * [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md) – How to develop apps bootstrapped with Create React App. 8 | -------------------------------------------------------------------------------- /packages/create-react-app/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "name": "create-react-app", 4 | "version": "1.0.4", 5 | "keywords": [ 6 | "react" 7 | ], 8 | "description": "Create React apps with no build configuration.", 9 | "repository": "facebookincubator/create-react-app", 10 | "license": "BSD-3-Clause", 11 | "engines": { 12 | "node": ">=4" 13 | }, 14 | "bugs": { 15 | "url": "https://github.com/facebookincubator/create-react-app/issues" 16 | }, 17 | "files": [ 18 | "index.js" 19 | ], 20 | "bin": { 21 | "create-react-app": "./index.js" 22 | }, 23 | "dependencies": { 24 | "chalk": "^1.1.1", 25 | "commander": "^2.9.0", 26 | "cross-spawn": "^4.0.0", 27 | "fs-extra": "^1.0.0", 28 | "semver": "^5.0.3" 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /packages/eslint-config-react-app/README.md: -------------------------------------------------------------------------------- 1 | # eslint-config-react-app 2 | 3 | This package includes the shareable ESLint configuration used by [Create React App](https://github.com/facebookincubator/create-react-app). 4 | Please refer to its documentation: 5 | 6 | * [Getting Started](https://github.com/facebookincubator/create-react-app/blob/master/README.md#getting-started) – How to create a new app. 7 | * [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md) – How to develop apps bootstrapped with Create React App. 8 | 9 | ## Usage in Create React App Projects 10 | 11 | The easiest way to use this configuration is with [Create React App](https://github.com/facebookincubator/create-react-app), which includes it by default. **You don’t need to install it separately in Create React App projects.** 12 | 13 | ## Usage Outside of Create React App 14 | 15 | If you want to use this ESLint configuration in a project not built with Create React App, you can install it with following steps. 16 | 17 | First, install this package, ESLint and the necessary plugins. 18 | 19 | ```sh 20 | 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 21 | ``` 22 | 23 | Then create a file named `.eslintrc` with following contents in the root folder of your project: 24 | 25 | ```js 26 | { 27 | "extends": "react-app" 28 | } 29 | ``` 30 | 31 | That's it! You can override the settings from `eslint-config-react-app` by editing the `.eslintrc` file. Learn more about [configuring ESLint](http://eslint.org/docs/user-guide/configuring) on the ESLint website. 32 | -------------------------------------------------------------------------------- /packages/eslint-config-react-app/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) 2015-present, Facebook, Inc. 3 | * All rights reserved. 4 | * 5 | * This source code is licensed under the BSD-style license found in the 6 | * LICENSE file in the root directory of this source tree. An additional grant 7 | * of patent rights can be found in the PATENTS file in the same directory. 8 | */ 9 | 10 | // Inspired by https://github.com/airbnb/javascript but less opinionated. 11 | 12 | // We use eslint-loader so even warnings are very visible. 13 | // This is why we only use "WARNING" level for potential errors, 14 | // and we don't use "ERROR" level at all. 15 | 16 | // In the future, we might create a separate list of rules for production. 17 | // It would probably be more strict. 18 | 19 | module.exports = { 20 | root: true, 21 | 22 | parser: 'babel-eslint', 23 | 24 | plugins: ['import', 'flowtype', 'jsx-a11y', 'react'], 25 | 26 | env: { 27 | browser: true, 28 | commonjs: true, 29 | es6: true, 30 | jest: true, 31 | node: true 32 | }, 33 | 34 | parserOptions: { 35 | ecmaVersion: 6, 36 | sourceType: 'module', 37 | ecmaFeatures: { 38 | jsx: true, 39 | generators: true, 40 | experimentalObjectRestSpread: true 41 | } 42 | }, 43 | 44 | settings: { 45 | 'import/ignore': [ 46 | 'node_modules' 47 | ], 48 | 'import/extensions': ['.js'], 49 | 'import/resolver': { 50 | node: { 51 | extensions: ['.js', '.json'] 52 | } 53 | } 54 | }, 55 | 56 | rules: { 57 | // http://eslint.org/docs/rules/ 58 | 'array-callback-return': 'warn', 59 | 'default-case': ['warn', { commentPattern: '^no default$' }], 60 | 'dot-location': ['warn', 'property'], 61 | eqeqeq: ['warn', 'allow-null'], 62 | 'guard-for-in': 'warn', 63 | 'new-parens': 'warn', 64 | 'no-array-constructor': 'warn', 65 | 'no-caller': 'warn', 66 | 'no-cond-assign': ['warn', 'always'], 67 | 'no-const-assign': 'warn', 68 | 'no-control-regex': 'warn', 69 | 'no-delete-var': 'warn', 70 | 'no-dupe-args': 'warn', 71 | 'no-dupe-class-members': 'warn', 72 | 'no-dupe-keys': 'warn', 73 | 'no-duplicate-case': 'warn', 74 | 'no-empty-character-class': 'warn', 75 | 'no-empty-pattern': 'warn', 76 | 'no-eval': 'warn', 77 | 'no-ex-assign': 'warn', 78 | 'no-extend-native': 'warn', 79 | 'no-extra-bind': 'warn', 80 | 'no-extra-label': 'warn', 81 | 'no-fallthrough': 'warn', 82 | 'no-func-assign': 'warn', 83 | 'no-implied-eval': 'warn', 84 | 'no-invalid-regexp': 'warn', 85 | 'no-iterator': 'warn', 86 | 'no-label-var': 'warn', 87 | 'no-labels': ['warn', { allowLoop: false, allowSwitch: false }], 88 | 'no-lone-blocks': 'warn', 89 | 'no-loop-func': 'warn', 90 | 'no-mixed-operators': ['warn', { 91 | groups: [ 92 | ['&', '|', '^', '~', '<<', '>>', '>>>'], 93 | ['==', '!=', '===', '!==', '>', '>=', '<', '<='], 94 | ['&&', '||'], 95 | ['in', 'instanceof'] 96 | ], 97 | allowSamePrecedence: false 98 | }], 99 | 'no-multi-str': 'warn', 100 | 'no-native-reassign': 'warn', 101 | 'no-negated-in-lhs': 'warn', 102 | 'no-new-func': 'warn', 103 | 'no-new-object': 'warn', 104 | 'no-new-symbol': 'warn', 105 | 'no-new-wrappers': 'warn', 106 | 'no-obj-calls': 'warn', 107 | 'no-octal': 'warn', 108 | 'no-octal-escape': 'warn', 109 | 'no-redeclare': 'warn', 110 | 'no-regex-spaces': 'warn', 111 | 'no-restricted-syntax': [ 112 | 'warn', 113 | 'LabeledStatement', 114 | 'WithStatement', 115 | ], 116 | 'no-script-url': 'warn', 117 | 'no-self-assign': 'warn', 118 | 'no-self-compare': 'warn', 119 | 'no-sequences': 'warn', 120 | 'no-shadow-restricted-names': 'warn', 121 | 'no-sparse-arrays': 'warn', 122 | 'no-template-curly-in-string': 'warn', 123 | 'no-this-before-super': 'warn', 124 | 'no-throw-literal': 'warn', 125 | 'no-undef': 'error', 126 | 'no-unexpected-multiline': 'warn', 127 | 'no-unreachable': 'warn', 128 | 'no-unused-expressions': ['warn', { 129 | 'allowShortCircuit': true, 130 | 'allowTernary': true 131 | }], 132 | 'no-unused-labels': 'warn', 133 | 'no-unused-vars': ['warn', { 134 | vars: 'local', 135 | varsIgnorePattern: '^_', 136 | args: 'none' 137 | }], 138 | 'no-use-before-define': ['warn', 'nofunc'], 139 | 'no-useless-computed-key': 'warn', 140 | 'no-useless-concat': 'warn', 141 | 'no-useless-constructor': 'warn', 142 | 'no-useless-escape': 'warn', 143 | 'no-useless-rename': ['warn', { 144 | ignoreDestructuring: false, 145 | ignoreImport: false, 146 | ignoreExport: false, 147 | }], 148 | 'no-with': 'warn', 149 | 'no-whitespace-before-property': 'warn', 150 | 'operator-assignment': ['warn', 'always'], 151 | radix: 'warn', 152 | 'require-yield': 'warn', 153 | 'rest-spread-spacing': ['warn', 'never'], 154 | strict: ['warn', 'never'], 155 | 'unicode-bom': ['warn', 'never'], 156 | 'use-isnan': 'warn', 157 | 'valid-typeof': 'warn', 158 | 159 | // https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/ 160 | 161 | // TODO: import rules are temporarily disabled because they don't play well 162 | // with how eslint-loader only checks the file you change. So if module A 163 | // imports module B, and B is missing a default export, the linter will 164 | // record this as an issue in module A. Now if you fix module B, the linter 165 | // will not be aware that it needs to re-lint A as well, so the error 166 | // will stay until the next restart, which is really confusing. 167 | 168 | // This is probably fixable with a patch to eslint-loader. 169 | // When file A is saved, we want to invalidate all files that import it 170 | // *and* that currently have lint errors. This should fix the problem. 171 | // (As an exception, import/no-webpack-loader-syntax can be enabled already 172 | // because it doesn't depend on whether the file exists, so this issue 173 | // doesn't apply to it.) 174 | 175 | // 'import/default': 'warn', 176 | // 'import/export': 'warn', 177 | // 'import/named': 'warn', 178 | // 'import/namespace': 'warn', 179 | // 'import/no-amd': 'warn', 180 | // 'import/no-duplicates': 'warn', 181 | // 'import/no-extraneous-dependencies': 'warn', 182 | // 'import/no-named-as-default': 'warn', 183 | // 'import/no-named-as-default-member': 'warn', 184 | // 'import/no-unresolved': ['warn', { commonjs: true }], 185 | // We don't support configuring Webpack using import source strings, so this 186 | // is always an error. 187 | 'import/no-webpack-loader-syntax': 'error', 188 | 189 | // https://github.com/yannickcr/eslint-plugin-react/tree/master/docs/rules 190 | 'react/jsx-equals-spacing': ['warn', 'never'], 191 | 'react/jsx-no-duplicate-props': ['warn', { ignoreCase: true }], 192 | 'react/jsx-no-undef': 'error', 193 | 'react/jsx-pascal-case': ['warn', { 194 | allowAllCaps: true, 195 | ignore: [], 196 | }], 197 | 'react/jsx-uses-react': 'warn', 198 | 'react/jsx-uses-vars': 'warn', 199 | 'react/no-danger-with-children': 'warn', 200 | 'react/no-deprecated': 'warn', 201 | 'react/no-direct-mutation-state': 'warn', 202 | 'react/no-is-mounted': 'warn', 203 | 'react/react-in-jsx-scope': 'error', 204 | 'react/require-render-return': 'warn', 205 | 'react/style-prop-object': 'warn', 206 | 207 | // https://github.com/evcohen/eslint-plugin-jsx-a11y/tree/master/docs/rules 208 | 'jsx-a11y/aria-role': 'warn', 209 | 'jsx-a11y/img-has-alt': 'warn', 210 | 'jsx-a11y/img-redundant-alt': 'warn', 211 | 'jsx-a11y/no-access-key': 'warn', 212 | 213 | // https://github.com/gajus/eslint-plugin-flowtype 214 | 'flowtype/define-flow-type': 'warn', 215 | 'flowtype/require-valid-file-annotation': 'warn', 216 | 'flowtype/use-flow-type': 'warn' 217 | } 218 | }; 219 | -------------------------------------------------------------------------------- /packages/eslint-config-react-app/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "name": "eslint-config-react-app", 4 | "version": "0.5.1", 5 | "description": "ESLint configuration used by Create React App", 6 | "repository": "facebookincubator/create-react-app", 7 | "license": "BSD-3-Clause", 8 | "bugs": { 9 | "url": "https://github.com/facebookincubator/create-react-app/issues" 10 | }, 11 | "files": [ 12 | "index.js" 13 | ], 14 | "peerDependencies": { 15 | "babel-eslint": "^7.0.0", 16 | "eslint": "^3.8.1", 17 | "eslint-plugin-flowtype": "^2.21.0", 18 | "eslint-plugin-import": "^2.0.1", 19 | "eslint-plugin-jsx-a11y": "^2.2.3", 20 | "eslint-plugin-react": "^6.4.1" 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /packages/react-dev-utils/InterpolateHtmlPlugin.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) 2015-present, Facebook, Inc. 3 | * All rights reserved. 4 | * 5 | * This source code is licensed under the BSD-style license found in the 6 | * LICENSE file in the root directory of this source tree. An additional grant 7 | * of patent rights can be found in the PATENTS file in the same directory. 8 | */ 9 | 10 | // This Webpack plugin lets us interpolate custom variables into `index.html`. 11 | // Usage: `new InterpolateHtmlPlugin({ 'MY_VARIABLE': 42 })` 12 | // Then, you can use %MY_VARIABLE% in your `index.html`. 13 | 14 | // It works in tandem with HtmlWebpackPlugin. 15 | // Learn more about creating plugins like this: 16 | // https://github.com/ampedandwired/html-webpack-plugin#events 17 | 18 | 'use strict'; 19 | const escapeStringRegexp = require('escape-string-regexp'); 20 | 21 | class InterpolateHtmlPlugin { 22 | constructor(replacements) { 23 | this.replacements = replacements; 24 | } 25 | 26 | apply(compiler) { 27 | compiler.plugin('compilation', compilation => { 28 | compilation.plugin('html-webpack-plugin-before-html-processing', 29 | (data, callback) => { 30 | // Run HTML through a series of user-specified string replacements. 31 | Object.keys(this.replacements).forEach(key => { 32 | const value = this.replacements[key]; 33 | data.html = data.html.replace( 34 | new RegExp('%' + escapeStringRegexp(key) + '%', 'g'), 35 | value 36 | ); 37 | }); 38 | callback(null, data); 39 | } 40 | ); 41 | }); 42 | } 43 | } 44 | 45 | module.exports = InterpolateHtmlPlugin; 46 | -------------------------------------------------------------------------------- /packages/react-dev-utils/README.md: -------------------------------------------------------------------------------- 1 | # react-dev-utils 2 | 3 | This package includes some utilities used by [Create React App](https://github.com/facebookincubator/create-react-app). 4 | Please refer to its documentation: 5 | 6 | * [Getting Started](https://github.com/facebookincubator/create-react-app/blob/master/README.md#getting-started) – How to create a new app. 7 | * [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md) – How to develop apps bootstrapped with Create React App. 8 | 9 | ## Usage in Create React App Projects 10 | 11 | These utilities come by default with [Create React App](https://github.com/facebookincubator/create-react-app), which includes it by default. **You don’t need to install it separately in Create React App projects.** 12 | 13 | ## Usage Outside of Create React App 14 | 15 | If you don’t use Create React App, or if you [ejected](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#npm-run-eject), you may keep using these utilities. Their development will be aligned with Create React App, so major versions of these utilities may come out relatively often. Feel free to fork or copy and paste them into your projects if you’d like to have more control over them, or feel free to use the old versions. Not all of them are React-specific, but we might make some of them more React-specific in the future. 16 | 17 | ### Entry Points 18 | 19 | There is no single entry point. You can only import individual top-level modules. 20 | 21 | #### `new InterpolateHtmlPlugin(replacements: {[key:string]: string})` 22 | 23 | This Webpack plugin lets us interpolate custom variables into `index.html`. 24 | It works in tandem with [HtmlWebpackPlugin](https://github.com/ampedandwired/html-webpack-plugin) 2.x via its [events](https://github.com/ampedandwired/html-webpack-plugin#events). 25 | 26 | ```js 27 | var path = require('path'); 28 | var HtmlWebpackPlugin = require('html-dev-plugin'); 29 | var InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin'); 30 | 31 | // Webpack config 32 | var publicUrl = '/my-custom-url'; 33 | 34 | module.exports = { 35 | output: { 36 | // ... 37 | publicPath: publicUrl + '/' 38 | }, 39 | // ... 40 | plugins: [ 41 | // Makes the public URL available as %PUBLIC_URL% in index.html, e.g.: 42 | // 43 | new InterpolateHtmlPlugin({ 44 | PUBLIC_URL: publicUrl 45 | // You can pass any key-value pairs, this was just an example. 46 | // WHATEVER: 42 will replace %WHATEVER% with 42 in index.html. 47 | }), 48 | // Generates an `index.html` file with the