bem / create-bem-react-app

[deprecated] Create BEM React apps with no build configuration.

Create BEM React App

Deprecated in favour of bem-react-boilerplate.

Create BEM React apps with no build configuration.

• Getting Started – How to create a new app.
• User Guide – Original Guide.

Create React App works on macOS, Windows, and Linux.
If something doesn’t work please file an issue.

Quick Overview

npm install -g create-bem-react-app

create-bem-react-app my-app
cd my-app/
npm start

Then open http://localhost:3000/ to see your app.
When you’re ready to deploy to production, create a minified bundle with npm run build.

Get Started Immediately

You don’t need to install or configure tools like Webpack or Babel.
They are preconfigured and hidden so that you can focus on the code.

Just create a project, and you’re good to go.

Getting Started

Installation

Install it once globally:

npm install -g create-bem-react-app

You’ll need to have Node >= 4 on your machine.

We strongly recommend to use Node >= 6 and npm >= 3 for faster installation speed and better disk usage. You can use nvm to easily switch Node versions between different projects.

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.

Creating an App

To create a new app, run:

create-bem-react-app my-app
cd my-app

It will create a directory called my-app inside the current folder.
Inside that directory, it will generate the initial project structure and install the transitive dependencies:

my-app/
  README.md
  node_modules/
  package.json
  .gitignore
  public/
    favicon.ico
    index.html
  src/
    App/
      Header/
        App-Header.css
        App-Header.js
      Intro/
        App-Intro.css
        App-Intro.js
      App.css
      App.js
      App.test.js
    Page/
      Page.inline.svg
      Page.css
    index.js

No configuration or complicated folder structures, just the files you need to build your app.
Once the installation is done, you can run some commands inside the project folder:

npm start or yarn start

Runs the app in development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will see the build errors and lint warnings in the console.

npm test or yarn test

Runs the test watcher in an interactive mode.
By default, runs tests related to files changes since the last commit.

Read more about testing.

npm run build or yarn build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

What’s changed?

Currently it includes something more than original Create React App package:

• webpack-bem-loader
• bem/sdk.config
• babel-plugin-bem-import
• bem-react-core
• raw-loader includes content of .inline. files

Building multiple bundles

If you want to make several bundles and have their own implementation of blocks, you need to use sets

1. Add sets in .bemrc
2. Build the project. You can specify some options for parallel-webpack (watch, maxRetries, stats)
3. Run app with npm run start set-name

Contributing

We'd love to have your helping hand on create-bem-react-app! See CONTRIBUTING.md for more information on what we're looking for and how to get started.

create-bem-react-app's Issues

npm test not working with components outside the appSrc

Should do something like #22 for npm test

Tests are broken

all of them:

• simple
• install
• kitchensink

https://travis-ci.org/bem/create-bem-react-app

neither start nor eject is working

neither npm run start no npm run eject is working
same error:

node_modules/@bem/sdk.config/index.js:412
        config.levels && config.levels.forEach(level => {

Docs in Russian

Revise eject after uptade to @bem/sdk.config

view/node_modules/@bem/sdk.config/index.js:412
        config.levels && config.levels.forEach(level => {
                                       ^

TypeError: config.levels.forEach is not a function
    at configs.forEach.config (/Users/grape/Sources/bem-react-electron-boilerplate/src/view/node_modules/@bem/sdk.config/index.js:412:40)
    at Array.forEach (<anonymous>)
    at extendConfigsPathByLayer (/Users/grape/Sources/bem-react-electron-boilerplate/src/view/node_modules/@bem/sdk.config/index.js:411:13)
    at BemConfig.configs (/Users/grape/Sources/bem-react-electron-boilerplate/src/view/node_modules/@bem/sdk.config/index.js:55:23)
    at BemConfig.getSync (/Users/grape/Sources/bem-react-electron-boilerplate/src/view/node_modules/@bem/sdk.config/index.js:258:23)
    at BemConfig.moduleSync (/Users/grape/Sources/bem-react-electron-boilerplate/src/view/node_modules/@bem/sdk.config/index.js:361:24)
    at Object.<anonymous> (/Users/grape/Sources/bem-react-electron-boilerplate/src/view/node_modules/bem-react-scripts/config/paths.js:17:31)
    at Module._compile (module.js:573:30)
    at Object.Module._extensions..js (module.js:584:10)
    at Module.load (module.js:507:32)
error Command failed with exit code 1.

Update to upstream

Relates to #28

Production build for webpack.config.prod.js

Fix paths for Windows

Not sure if it's the right place to report but right now there's no support for Windows — slashes are just missing :(

How we would get updates from upstream?

just merge facebookincubator/create-react-app:master ?

@awinogradov other ideas?

Support eject

npm start doesn't work

In the main repository:

npm start

> @ start /private/tmp/create-bem-react-app
> node packages/bem-react-scripts/scripts/start.js

/private/tmp/create-bem-react-app/packages/bem-react-scripts/config/paths.js:71
const publicUrl = userOptions.publicUrl ||
                             ^

TypeError: Cannot read property 'publicUrl' of undefined
    at Object.<anonymous> (/private/tmp/create-bem-react-app/packages/bem-react-scripts/config/paths.js:71:30)

Try to use react-app-rewired

https://github.com/timarney/react-app-rewired

Warning: Failed child context type: Cannot read property 'bemBlock' of undefined

Description

Newly created bem-react-app has in console Warning: Failed child context type: Cannot read property 'bemBlock' of undefined

Warning: Failed child context type: Cannot read property 'bemBlock' of undefined
    in App-Header (at App.js:12)
    in div
    in App (at index.js:7)
printWarning @ warning.js:33
warning @ warning.js:57
checkPropTypes @ checkPropTypes.js:52
processChildContext$1 @ react-dom.development.js:7854
invalidateContextProvider @ react-dom.development.js:7890
finishClassComponent @ react-dom.development.js:10262
updateClassComponent @ react-dom.development.js:10226
beginWork @ react-dom.development.js:10605
performUnitOfWork @ react-dom.development.js:12573
workLoop @ react-dom.development.js:12682
callCallback @ react-dom.development.js:1299
invokeGuardedCallbackDev @ react-dom.development.js:1338
invokeGuardedCallback @ react-dom.development.js:1195
performWork @ react-dom.development.js:12800
scheduleUpdateImpl @ react-dom.development.js:13185
scheduleUpdate @ react-dom.development.js:13124
scheduleTopLevelUpdate @ react-dom.development.js:13395
updateContainer @ react-dom.development.js:13425
(anonymous) @ react-dom.development.js:17105
unbatchedUpdates @ react-dom.development.js:13256
renderSubtreeIntoContainer @ react-dom.development.js:17104
render @ react-dom.development.js:17129
module.exports @ index.js:24
__webpack_require__ @ bootstrap 5dbe3d7…:657
fn @ bootstrap 5dbe3d7…:85
(anonymous) @ fetch.js:458
__webpack_require__ @ bootstrap 5dbe3d7…:657
module.exports.ctor.super_ @ bootstrap 5dbe3d7…:706
(anonymous) @ bundle.js:710

at file webpack:///./~/prop-types/factoryWithTypeCheckers.js

function checkType(isRequired, props, propName, componentName, location, propFullName, secret) {
     ...

      if (props[propName] == null) { <------ props is undefined
        if (isRequired) {
          if (props[propName] === null) {
            return new PropTypeError('The ' + location + ' `' + propFullName + '` is marked as required ' + ('in `' + componentName + '`, but its value is `null`.'));
          }
          return new PropTypeError('The ' + location + ' `' + propFullName + '` is marked as required in ' + ('`' + componentName + '`, but its value is `undefined`.'));
        }
        return null;
      } else {
        return validate(props, propName, componentName, location, propFullName);
      }
    }

Environment

Run these commands in the project folder and fill in their results:

node v8.4.0
npm v5.3.0:

Then, specify:

1. Operating system: OSX 10.11.6
2. Browser and version: Chromium 57, Firefox 57.0b9, Safari 11

BEM-loader for postcss

If I want to use css-globals or parent block styles I have to write this:

/* NavBar-Item.css */

@import '../Globals/Globals.css';
@import '../NavBar.css';

.NavBar-Item {
    background: $color-brand;
    width: $navbar-width;
}

But I think this would be better:

/* NavBar-Item.css */

@import 'b:Globals';
@import 'b:NavBar';

.NavBar-Item {
    background: $color-brand;
    width: $navbar-width;
}

Manage postcss plugins

Converting our speech to issue.

If I want to add nesting or variables for post-css now – I have to eject all the configs with command npm run eject and then do something else to add plugins that I need.

@awinogradov said that ejecting configs is not a good idea anyway, and its possible to add a kind of dot-config for managing plugins. Maybe package.json property would be enough?

So my request is a ability or guide how to manage post-css plugins

What about bem-i18n ?

Update README.md for BEM

Support configuring paths by bem-config

{
    "root": true,
    "levels": {
        "./src/ui/src/components": {
            "scheme": "nested",
            "default": true
        }
    },
    "modules": {
        "create-bem-react-app": {
            "appPath": "",
            "appBuild": "",
            "appPublic": "",
            "appHtml": "",
            "appIndexJs": "",
            "appPackageJson": "",
            "appSrc": "",
            "yarnLockFile": "",
            "testsSetup": "",
            "appNodeModules": "",
            "publicUrl": "",
            "servedPath": "",
            "ownPath": "",
            "ownNodeModules": ""
        }
    }
}

Failed start command

After installing and creating the application, an error occurs during the execution of the npm start command in node_modules/@bem/sdk.config/index.js:extendConfigsPathByLayer().

        config.levels && config.levels.forEach(level => {
                                       ^
TypeError: config.levels.forEach is not a function
    at configs.forEach.config (my-app/node_modules/@bem/sdk.config/index.js:412:40)
    at Array.forEach (native)
    at extendConfigsPathByLayer (my-app/node_modules/@bem/sdk.config/index.js:411:13)
    at BemConfig.configs (my-app/node_modules/@bem/sdk.config/index.js:55:23)
    at BemConfig.getSync (my-app/node_modules/@bem/sdk.config/index.js:258:23)
    at BemConfig.moduleSync (my-app/node_modules/@bem/sdk.config/index.js:361:24)

    at Object.<anonymous> (my-app/node_modules/bem-react-scripts/config/paths.js:17:31)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)```

The variable config.levels is expected as an array whereas when it's a hash:

{ 'src/components': { scheme: 'nested', default: true } }

In .bemrc change the parameter levels to become an array:

    "levels": [
        {
            "path": "src/components",
            "scheme": "nested",
            "default": true
        }
    ],

Next see an error:

Error: Cannot find module 'babel-preset-es2015'

Install it:

npm i -D babel-preset-es2015

Run npm start again. localhost:3000 opens in browser. Got in the browser window:

Failed to compile.

Error in ./src/index.js
Module not found: Can't resolve './componentsAppApp.css' in 'my-app/src'

 @ multi ./~/react-dev-utils/webpackHotDevClient.js ./~/bem-react-scripts/config/polyfills.js ./src/index.js

Got in the console the foloowing:

Failed to compile.

Error in ./src/index.js
Module not found: Can't resolve './componentsAppApp.css' in 'my-app/src'

 @ multi ./~/react-dev-utils/webpackHotDevClient.js ./~/bem-react-scripts/config/polyfills.js ./src/index.js

Error in ./src/index.js
Module not found: Can't resolve './componentsPagePage.css' in 'my-app/src'

 @ multi ./~/react-dev-utils/webpackHotDevClient.js ./~/bem-react-scripts/config/polyfills.js ./src/index.js

Error in ./src/index.js
Module not found: Can't resolve './componentsAppApp.js' in 'my-app/src'

 @ multi ./~/react-dev-utils/webpackHotDevClient.js ./~/bem-react-scripts/config/polyfills.js ./src/index.js

Versions:

$ npm view create-bem-react-app version
0.0.3

$ npm -v
5.5.1

$ node -v
v6.10.0

Running on Win10.