React Development Configuration
Why?
react-dev-config
is a react development configuration outsourced in its own
package similiar to create-react-app
.
create-react-app
Differences to 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
andstylelint
- Testing via
jest
and e.g.enzyme
- CSS Modules and PostCSS (
postcss-cssnext
andpostcss-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":
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 projectmkdir configtouch 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.jsconst babelrc = moduleexports = ; babelrcplugins = 'transform-react-constant-elements'; // If you don't want to override current plugins, write this instead:babelrcplugins;
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.