React Development Configuration

Why?

react-dev-config is a react development configuration outsourced in its own package similiar to create-react-app.

Differences to create-react-app

create-react-app adverties no build configuration and they mean it - you cannot configure this tool.

The most glaring missing piece is CSS prepocessors. They are not supported at all. That means:

• no CSS Modules
• no PostCSS plugins

If you want to add or change anything, you have to eject. Running npm run eject spits out all the configuration files so you can edit them yourself.

It's great to have this option, but if you do it your are left with all the disadvantages of any other starter pack (many dependencies, config boilerplate, no ability to receive updates).

With react-dev-config you still have the important advantages of create-react-app (with a much smaller codebase), and can still configure your build as you like.

The react-dev-config configuration is meant as a great start configuration outsourced as a development dependency. It includes:

• React, JSX and ES6 support
• Webpack 2
• A dev server with hot inline reloading for JavaScript and CSS
• Linting scripts and styles with eslint and stylelint
• Testing via jest and e.g. enzyme
• CSS Modules and PostCSS (postcss-cssnext and postcss-font-magician)
• A build script to bundle JS, CSS and other files for production
• Downloading private SVN modules via svn-modules (if needed)

Getting Started

You can use the start configuration simply by running

npm install react-dev-config --save-dev

and adding the react-dev-config scripts to your package.json:

"scripts": {
  "postinstall": "react-dev-config svn install",
  "preuninstall": "react-dev-config svn uninstall",
  "lint:js": "react-dev-config lint js",
  "lint:js:fix": "npm run lint:js -- --fix",
  "lint:css": "react-dev-config lint css",
  "lint": "npm-run-all lint:*",
  "start": "react-dev-config start",
  "watch": "react-dev-config watch",
  "build": "react-dev-config build",
  "transpile": "react-dev-config transpile src --output dist",
  "test": "react-dev-config test",
  "test:watch": "npm test -- --watch"
}

You can find a working demo in the demo folder.

react-dev-config svn install|uninstall

Downloads and installs additional private SVN modules via svn-modules. Only add these if you need them.

react-dev-config lint js|css [--fix]

lint js lints your .js and .jsx files via eslint based on the eslint-config-airbnb configuration. An additional --fix will automatically fix errors.

lint css lints your .css files via stylelint based on the stylelint-config-standard.

react-dev-config start|watch|build

Lets you develop and build your application via webpack and webpack-dev-server.

start starts the webpack server at localhost:3000 with hot inline reloading whereas watch builds your files whenever a file changes.

react-dev-config transpile <input> [--output]

Transpiles your code using Babels Command Line Interface.

react-dev-config test [--watch]

Tests your application via jest.

Custom Configurations

react-dev-config tries its best to give you the best starting configuration, but if you need to customize a specific configuration it's there to hold your back.

You can customize all configuration files, that means: babelrc, eslintrc, eslintignore, stylelintrc, stylelintignore, jest, postcss, webpack.common, webpack.dev and webpack.prod.

webpack.common holds the configuration which are similiar in webpack.dev and webpack.prod.

If you want to customize a configuration, create a file called like the one from above in a config folder in your root directory:

cd project
mkdir config
touch config/babelrc.js

You can choose whether you want to extend or change the given configuration or create a new one by yourself.

If you want to extend or change a configuration, put something like this in your newly created file:

// config/babelrc.js
const babelrc = module.exports = require('react-dev-config/babelrc');

babelrc.plugins = ['transform-react-constant-elements'];

// If you don't want to override current plugins, write this instead:
babelrc.plugins.push('transform-react-constant-elements');

Don't forget to install the babel plugin by yourself:

npm install babel-plugin-transform-react-constant-elements --save-dev

You can always look up the given configurations or create an issue if you're getting stuck 😇.

Contributing

If you feel that your own customizations fit a lot of peoples need, feel free to make a pull request.