├── .eslintignore ├── .eslintrc ├── .gitignore ├── .travis.yml ├── CONTRIBUTING.md ├── ISSUE_TEMPLATE.md ├── LICENSE ├── PATENTS ├── PULL_REQUEST_TEMPLATE.md ├── README.md ├── appveyor.cleanup-cache.txt ├── appveyor.yml ├── lerna.json ├── package.json ├── packages ├── bem-react-scripts │ ├── .npmignore │ ├── README.md │ ├── babelrc │ ├── 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 │ │ └── webpackDevServer.config.js │ ├── eslintrc │ ├── 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 │ │ └── utils │ │ │ ├── addWebpackMiddleware.js │ │ │ ├── createJestConfig.js │ │ │ └── createWebpackCompiler.js │ └── template │ │ ├── .bemrc │ │ ├── README.md │ │ ├── gitignore │ │ ├── postcss.config.js │ │ ├── public │ │ ├── favicon.ico │ │ └── index.html │ │ └── src │ │ ├── components │ │ ├── App │ │ │ ├── App.css │ │ │ ├── App.js │ │ │ ├── App.test.js │ │ │ ├── Header │ │ │ │ ├── App-Header.css │ │ │ │ └── App-Header.js │ │ │ └── Intro │ │ │ │ ├── App-Intro.css │ │ │ │ └── App-Intro.js │ │ └── Page │ │ │ └── Page.css │ │ └── index.js └── create-bem-react-app │ ├── README.md │ ├── createReactApp.js │ ├── index.js │ └── package.json └── tasks ├── cra.sh ├── e2e-installs.sh ├── e2e-kitchensink.sh ├── e2e-simple.sh ├── release.sh └── replace-own-deps.js /.eslintignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | build 3 | my-app* 4 | packages/bem-react-scripts/template 5 | packages/bem-react-scripts/fixtures 6 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "eslint:recommended", 3 | "env": { 4 | "browser": true, 5 | "commonjs": true, 6 | "node": true, 7 | "es6": true 8 | }, 9 | "parserOptions": { 10 | "ecmaVersion": 6 11 | }, 12 | "rules": { 13 | "no-console": "off", 14 | "strict": ["error", "global"] 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .idea/ 2 | .vscode/ 3 | node_modules/ 4 | build 5 | .DS_Store 6 | *.tgz 7 | my-app* 8 | template/src/__tests__/__snapshots__/ 9 | lerna-debug.log 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | /.changelog 14 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | --- 2 | language: node_js 3 | node_js: 4 | - 4 5 | - 6 6 | - 7 7 | cache: 8 | directories: 9 | - node_modules 10 | - packages/create-bem-react-app/node_modules 11 | - packages/bem-react-scripts/node_modules 12 | install: true 13 | script: 14 | - 'if [ $TEST_SUITE = "simple" ]; then tasks/e2e-simple.sh; fi' 15 | - 'if [ $TEST_SUITE = "installs" ]; then tasks/e2e-installs.sh; fi' 16 | - 'if [ $TEST_SUITE = "kitchensink" ]; then tasks/e2e-kitchensink.sh; fi' 17 | env: 18 | global: 19 | - USE_YARN=no 20 | matrix: 21 | - TEST_SUITE=simple 22 | - TEST_SUITE=installs 23 | - TEST_SUITE=kitchensink 24 | matrix: 25 | include: 26 | - node_js: 0.10 27 | env: TEST_SUITE=simple 28 | - node_js: 6 29 | env: USE_YARN=yes TEST_SUITE=simple 30 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing to Create BEM React App 2 | 3 | Loving Create BEM 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/bem/create-bem-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 bem-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 BEM 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 | -------------------------------------------------------------------------------- /PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | 9 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Create BEM React App [![Build Status](https://travis-ci.org/bem/create-bem-react-app.svg?branch=master)](https://travis-ci.org/bem/create-bem-react-app) 2 | 3 | Deprecated in favour of [bem-react-boilerplate](https://github.com/bem/bem-react-boilerplate). 4 | 5 | Create BEM React apps with no build configuration. 6 | 7 | * [Getting Started](#getting-started) – How to create a new app. 8 | * [User Guide](https://github.com/facebookincubator/create-react-app) – Original Guide. 9 | 10 | Create React App works on macOS, Windows, and Linux.
11 | If something doesn’t work please [file an issue](https://github.com/bem/create-bem-react-app/issues/new). 12 | 13 | ## Quick Overview 14 | 15 | ```sh 16 | npm install -g create-bem-react-app 17 | 18 | create-bem-react-app my-app 19 | cd my-app/ 20 | npm start 21 | ``` 22 | 23 | Then open [http://localhost:3000/](http://localhost:3000/) to see your app.
24 | When you’re ready to deploy to production, create a minified bundle with `npm run build`. 25 | 26 | npm start 27 | 28 | ### Get Started Immediately 29 | 30 | You **don’t** need to install or configure tools like Webpack or Babel.
31 | They are preconfigured and hidden so that you can focus on the code. 32 | 33 | Just create a project, and you’re good to go. 34 | 35 | ## Getting Started 36 | 37 | ### Installation 38 | 39 | Install it once globally: 40 | 41 | ```sh 42 | npm install -g create-bem-react-app 43 | ``` 44 | 45 | **You’ll need to have Node >= 4 on your machine**. 46 | 47 | **We strongly recommend to use Node >= 6 and npm >= 3 for faster installation speed and better disk usage.** You can use [nvm](https://github.com/creationix/nvm#usage) to easily switch Node versions between different projects. 48 | 49 | **This tool doesn’t assume a Node backend**. The Node installation is only required for the build tools that rely on it locally, such as Webpack and Babel. 50 | 51 | ### Creating an App 52 | 53 | To create a new app, run: 54 | 55 | ```sh 56 | create-bem-react-app my-app 57 | cd my-app 58 | ``` 59 | 60 | It will create a directory called `my-app` inside the current folder.
61 | Inside that directory, it will generate the initial project structure and install the transitive dependencies: 62 | 63 | ``` 64 | my-app/ 65 | README.md 66 | node_modules/ 67 | package.json 68 | .gitignore 69 | public/ 70 | favicon.ico 71 | index.html 72 | src/ 73 | App/ 74 | Header/ 75 | App-Header.css 76 | App-Header.js 77 | Intro/ 78 | App-Intro.css 79 | App-Intro.js 80 | App.css 81 | App.js 82 | App.test.js 83 | Page/ 84 | Page.inline.svg 85 | Page.css 86 | index.js 87 | ``` 88 | 89 | No configuration or complicated folder structures, just the files you need to build your app.
90 | Once the installation is done, you can run some commands inside the project folder: 91 | 92 | ### `npm start` or `yarn start` 93 | 94 | Runs the app in development mode.
95 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 96 | 97 | The page will reload if you make edits.
98 | You will see the build errors and lint warnings in the console. 99 | 100 | Build errors 101 | 102 | ### `npm test` or `yarn test` 103 | 104 | Runs the test watcher in an interactive mode.
105 | By default, runs tests related to files changes since the last commit. 106 | 107 | [Read more about testing.](https://github.com/bem/create-bem-react-app/blob/master/packages/bem-react-scripts/template/README.md#running-tests) 108 | 109 | ### `npm run build` or `yarn build` 110 | 111 | Builds the app for production to the `build` folder.
112 | It correctly bundles React in production mode and optimizes the build for the best performance. 113 | 114 | The build is minified and the filenames include the hashes.
115 | Your app is ready to be deployed! 116 | 117 | ## What’s changed? 118 | 119 | Currently it includes something more than original Create React App package: 120 | 121 | * [webpack-bem-loader](https://github.com/bem/webpack-bem-loader) 122 | * [bem/sdk.config](https://github.com/bem/bem-sdk/blob/master/packages/config/README.md#config-example) 123 | * [babel-plugin-bem-import](https://github.com/bem/babel-plugin-bem-import) 124 | * [bem-react-core](https://github.com/bem/bem-react-core) 125 | * [raw-loader](https://github.com/webpack-contrib/raw-loader) includes content of *.inline.* files 126 | 127 | ## Building multiple bundles 128 | 129 | If you want to make several bundles and have their own implementation of blocks, you need to use [sets](https://github.com/bem/bem-sdk/blob/master/packages/config/README.md#config-example) 130 | 131 | 1. Add sets in ```.bemrc``` 132 | 2. Build the project. You can specify some options for [parallel-webpack](https://github.com/trivago/parallel-webpack) (watch, maxRetries, stats) 133 | 3. Run app with ```npm run start set-name``` 134 | 135 | ## Contributing 136 | 137 | We'd love to have your helping hand on `create-bem-react-app`! See [CONTRIBUTING.md](CONTRIBUTING.md) for more information on what we're looking for and how to get started. 138 | -------------------------------------------------------------------------------- /appveyor.cleanup-cache.txt: -------------------------------------------------------------------------------- 1 | Edit this file to trigger a cache rebuild. 2 | http://help.appveyor.com/discussions/questions/1310-delete-cache 3 | 4 | ---- 5 | Just testing if this works. 6 | -------------------------------------------------------------------------------- /appveyor.yml: -------------------------------------------------------------------------------- 1 | environment: 2 | matrix: 3 | - nodejs_version: 7 4 | test_suite: "simple" 5 | - nodejs_version: 7 6 | test_suite: "installs" 7 | - nodejs_version: 7 8 | test_suite: "kitchensink" 9 | - nodejs_version: 6 10 | test_suite: "simple" 11 | - nodejs_version: 6 12 | test_suite: "installs" 13 | - nodejs_version: 6 14 | test_suite: "kitchensink" 15 | - nodejs_version: 4 16 | test_suite: "simple" 17 | - nodejs_version: 4 18 | test_suite: "installs" 19 | - nodejs_version: 4 20 | test_suite: "kitchensink" 21 | 22 | cache: 23 | - node_modules -> appveyor.cleanup-cache.txt 24 | - packages\bem-react-scripts\node_modules -> appveyor.cleanup-cache.txt 25 | 26 | clone_depth: 50 27 | 28 | matrix: 29 | fast_finish: true 30 | 31 | platform: 32 | - x64 33 | 34 | install: 35 | - ps: Install-Product node $env:nodejs_version $env:platform 36 | 37 | build: off 38 | 39 | skip_commits: 40 | files: 41 | - '**/*.md' 42 | 43 | test_script: 44 | - node --version 45 | - npm --version 46 | - sh tasks/e2e-%test_suite%.sh 47 | -------------------------------------------------------------------------------- /lerna.json: -------------------------------------------------------------------------------- 1 | { 2 | "lerna": "2.0.0-beta.38", 3 | "version": "independent", 4 | "changelog": { 5 | "repo": "bem/create-bem-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 | "packages": [ 17 | "packages/*" 18 | ] 19 | } 20 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "scripts": { 4 | "build": "node packages/bem-react-scripts/scripts/build.js", 5 | "changelog": "lerna-changelog", 6 | "create-bem-react-app": "tasks/cra.sh", 7 | "e2e": "tasks/e2e-simple.sh", 8 | "postinstall": "lerna bootstrap", 9 | "publish": "tasks/release.sh", 10 | "start": "node packages/bem-react-scripts/scripts/start.js", 11 | "test": "node packages/bem-react-scripts/scripts/test.js --env=jsdom", 12 | "format": "prettier --trailing-comma es5 --single-quote --write 'packages/*/*.js' 'packages/*/!(node_modules)/**/*.js'", 13 | "precommit": "lint-staged" 14 | }, 15 | "devDependencies": { 16 | "eslint": "3.16.1", 17 | "husky": "^0.13.2", 18 | "lerna": "2.0.0-beta.38", 19 | "lerna-changelog": "^0.2.3", 20 | "lint-staged": "^3.3.1", 21 | "prettier": "^0.21.0" 22 | }, 23 | "lint-staged": { 24 | "*.js": [ 25 | "prettier --trailing-comma es5 --single-quote --write", 26 | "git add" 27 | ] 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /packages/bem-react-scripts/.npmignore: -------------------------------------------------------------------------------- 1 | /fixtures 2 | -------------------------------------------------------------------------------- /packages/bem-react-scripts/README.md: -------------------------------------------------------------------------------- 1 | # react-scripts 2 | 3 | This package includes scripts and 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 | -------------------------------------------------------------------------------- /packages/bem-react-scripts/babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["react-app"] 3 | } 4 | -------------------------------------------------------------------------------- /packages/bem-react-scripts/bin/react-scripts.js: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | /** 3 | * Copyright (c) 2015-present, Facebook, Inc. 4 | * All rights reserved. 5 | * 6 | * This source code is licensed under the BSD-style license found in the 7 | * LICENSE file in the root directory of this source tree. An additional grant 8 | * of patent rights can be found in the PATENTS file in the same directory. 9 | */ 10 | 11 | 'use strict'; 12 | 13 | var spawn = require('cross-spawn'); 14 | var script = process.argv[2]; 15 | var args = process.argv.slice(3); 16 | 17 | switch (script) { 18 | case 'build': 19 | case 'eject': 20 | case 'start': 21 | case 'test': 22 | var result = spawn.sync( 23 | 'node', 24 | [require.resolve('../scripts/' + script)].concat(args), 25 | { stdio: 'inherit' } 26 | ); 27 | if (result.signal) { 28 | if (result.signal === 'SIGKILL') { 29 | console.log( 30 | 'The build failed because the process exited too early. ' + 31 | 'This probably means the system ran out of memory or someone called ' + 32 | '`kill -9` on the process.' 33 | ); 34 | } else if (result.signal === 'SIGTERM') { 35 | console.log( 36 | 'The build failed because the process exited too early. ' + 37 | 'Someone might have called `kill` or `killall`, or the system could ' + 38 | 'be shutting down.' 39 | ); 40 | } 41 | process.exit(1); 42 | } 43 | process.exit(result.status); 44 | break; 45 | default: 46 | console.log('Unknown script "' + script + '".'); 47 | console.log('Perhaps you need to update bem-react-scripts?'); 48 | console.log( 49 | 'See: https://github.com/bem/create-bem-react-app/blob/master/packages/bem-react-scripts/template/README.md#updating-to-new-releases' 50 | ); 51 | break; 52 | } 53 | -------------------------------------------------------------------------------- /packages/bem-react-scripts/config/env.js: -------------------------------------------------------------------------------- 1 | // @remove-on-eject-begin 2 | /** 3 | * Copyright (c) 2015-present, Facebook, Inc. 4 | * All rights reserved. 5 | * 6 | * This source code is licensed under the BSD-style license found in the 7 | * LICENSE file in the root directory of this source tree. An additional grant 8 | * of patent rights can be found in the PATENTS file in the same directory. 9 | */ 10 | // @remove-on-eject-end 11 | 'use strict'; 12 | 13 | // Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be 14 | // injected into the application via DefinePlugin in Webpack configuration. 15 | const REACT_APP = /^REACT_APP_/i; 16 | 17 | function getClientEnvironment(publicUrl) { 18 | const raw = Object.keys(process.env) 19 | .filter(key => REACT_APP.test(key)) 20 | .reduce( 21 | (env, key) => { 22 | env[key] = process.env[key]; 23 | return env; 24 | }, 25 | { 26 | // Useful for determining whether we’re running in production mode. 27 | // Most importantly, it switches React into the correct mode. 28 | NODE_ENV: process.env.NODE_ENV || 'development', 29 | // Useful for resolving the correct path to static assets in `public`. 30 | // For example, . 31 | // This should only be used as an escape hatch. Normally you would put 32 | // images into the `src` and `import` them in code to get their paths. 33 | PUBLIC_URL: publicUrl, 34 | } 35 | ); 36 | // Stringify all values so we can feed into Webpack DefinePlugin 37 | const stringified = { 38 | 'process.env': Object.keys(raw).reduce( 39 | (env, key) => { 40 | env[key] = JSON.stringify(raw[key]); 41 | return env; 42 | }, 43 | {} 44 | ), 45 | }; 46 | 47 | return { raw, stringified }; 48 | } 49 | 50 | module.exports = getClientEnvironment; 51 | -------------------------------------------------------------------------------- /packages/bem-react-scripts/config/jest/babelTransform.js: -------------------------------------------------------------------------------- 1 | // @remove-file-on-eject 2 | /** 3 | * Copyright (c) 2014-present, Facebook, Inc. 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 | const babelJest = require('babel-jest'); 12 | const bemConfig = require('bem-config')(); 13 | const levels = Object.keys(bemConfig.levelMapSync()); 14 | 15 | module.exports = babelJest.createTransformer({ 16 | presets: [require.resolve('babel-preset-react-app')], 17 | plugins: [ 18 | [ 19 | require.resolve('babel-plugin-bem-import'), 20 | { 21 | levels, 22 | techs: ['js'], 23 | }, 24 | ], 25 | ], 26 | babelrc: false, 27 | }); 28 | -------------------------------------------------------------------------------- /packages/bem-react-scripts/config/jest/cssTransform.js: -------------------------------------------------------------------------------- 1 | // @remove-on-eject-begin 2 | /** 3 | * Copyright (c) 2014-present, Facebook, Inc. 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 | // @remove-on-eject-end 10 | 'use strict'; 11 | 12 | // This is a custom Jest transformer turning style imports into empty objects. 13 | // http://facebook.github.io/jest/docs/tutorial-webpack.html 14 | 15 | module.exports = { 16 | process() { 17 | return 'module.exports = {};'; 18 | }, 19 | getCacheKey() { 20 | // The output is always the same. 21 | return 'cssTransform'; 22 | }, 23 | }; 24 | -------------------------------------------------------------------------------- /packages/bem-react-scripts/config/jest/fileTransform.js: -------------------------------------------------------------------------------- 1 | // @remove-on-eject-begin 2 | /** 3 | * Copyright (c) 2014-present, Facebook, Inc. 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 | // @remove-on-eject-end 10 | 'use strict'; 11 | 12 | const path = require('path'); 13 | 14 | // This is a custom Jest transformer turning file imports into filenames. 15 | // http://facebook.github.io/jest/docs/tutorial-webpack.html 16 | 17 | module.exports = { 18 | process(src, filename) { 19 | return `module.exports = ${JSON.stringify(path.basename(filename))};`; 20 | }, 21 | }; 22 | -------------------------------------------------------------------------------- /packages/bem-react-scripts/config/paths.js: -------------------------------------------------------------------------------- 1 | // @remove-on-eject-begin 2 | /** 3 | * Copyright (c) 2015-present, Facebook, Inc. 4 | * All rights reserved. 5 | * 6 | * This source code is licensed under the BSD-style license found in the 7 | * LICENSE file in the root directory of this source tree. An additional grant 8 | * of patent rights can be found in the PATENTS file in the same directory. 9 | */ 10 | // @remove-on-eject-end 11 | 'use strict'; 12 | 13 | const path = require('path'); 14 | const fs = require('fs'); 15 | const url = require('url'); 16 | const bemConfig = require('@bem/sdk.config')(); 17 | const userOptions = bemConfig.moduleSync('create-bem-react-app'); 18 | const levels = bemConfig.levelMapSync(); 19 | 20 | let sets = bemConfig.getSync().sets; 21 | sets && Object.keys(sets).forEach(setName => 22 | sets[setName] = bemConfig.levelsSync(setName).map(level => level.path)); 23 | 24 | // Make sure any symlinks in the project folder are resolved: 25 | // https://github.com/facebookincubator/create-react-app/issues/637 26 | const appDirectory = fs.realpathSync(process.cwd()); 27 | function resolveApp(relativePath) { 28 | return path.resolve(appDirectory, relativePath); 29 | } 30 | 31 | // We support resolving modules according to `NODE_PATH`. 32 | // This lets you use absolute paths in imports inside large monorepos: 33 | // https://github.com/facebookincubator/create-react-app/issues/253. 34 | 35 | // It works similar to `NODE_PATH` in Node itself: 36 | // https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders 37 | 38 | // We will export `nodePaths` as an array of absolute paths. 39 | // It will then be used by Webpack configs. 40 | // Jest doesn’t need this because it already handles `NODE_PATH` out of the box. 41 | 42 | // Note that unlike in Node, only *relative* paths from `NODE_PATH` are honored. 43 | // Otherwise, we risk importing Node.js core modules into an app instead of Webpack shims. 44 | // https://github.com/facebookincubator/create-react-app/issues/1023#issuecomment-265344421 45 | 46 | const nodePaths = (process.env.NODE_PATH || '') 47 | .split(process.platform === 'win32' ? ';' : ':') 48 | .filter(Boolean) 49 | .filter(folder => !path.isAbsolute(folder)) 50 | .map(resolveApp); 51 | 52 | const envPublicUrl = process.env.PUBLIC_URL; 53 | 54 | function ensureSlash(path, needsSlash) { 55 | const hasSlash = path.endsWith('/'); 56 | if (hasSlash && !needsSlash) { 57 | return path.substr(path, path.length - 1); 58 | } else if (!hasSlash && needsSlash) { 59 | return `${path}/`; 60 | } else { 61 | return path; 62 | } 63 | } 64 | 65 | function getPublicUrl(appPackageJson) { 66 | return envPublicUrl || require(appPackageJson).homepage; 67 | } 68 | 69 | // We use `PUBLIC_URL` environment variable or "homepage" field to infer 70 | // "public path" at which the app is served. 71 | // Webpack needs to know it to put the right