juliocesar / neob

Yet another React/Webpack boilerplate

Neob

A React/Webpack/(S)CSS Modules/testing applications boilerplate.

Features

• Webpack + hot-module-replacement (babel-plugin-react-transform + react-transform-hmr).
• Production optimisations settings/plugins for Webpack.
• Modular component organisation. Component folders in src/components carry code, styles and tests.
• css-modules + SCSS + PostCSS.
• Themes using colour scales. Single mixin for consolidating colour sourcing.
• Sizing scales (vertical rhythm and other goodies) done using dirg.
• Basic routing setup with react-router.
• Tests using Ava and Enzyme.
• ESLint, with a slightly modified version of the Feross Standard as default, extended to include test files linting. Drop your own .eslintrc.json file on top of it if you don’t like it.
• No Gulp or Grunt. Automation is done by commands in package.json. More complex stuff done by scripts in bin.

Usage

• Start the dev server:

$ npm start

• Build to static files in build:

$ npm run build

• Compile static application and deploy it to GitHub pages (update bin/publish-gh-page with your repository’s actual address):

$ ./bin/publish-gh-page

Themes

Themes are SCSS hashes kept in src/stylesheets/themes. The color mixin then sources them by key, and allows for 5 tint steps towards darker or lighter, allowing controlled variations for each entry.

By default, the build will look for a default.scss file. Alternative files can be loaded by passing an environment variable THEME:

$ THEME=green npm start

Or build to static files using a specific theme:

$ THEME=green npm run build

Grid

Refer to dirg’s documentation, or the longer post on it.

You can override the default scale by supplying one in a separate file. Create (for example), a file src/stylesheets/dirg-scale.scss with:

$dirg-scales: (
  default: (
    font-size: 16px,
    unit: 21px,
    factor: 1.35
  )
);

Then source it right before dirg:

@import 'dirg-scale';
@import 'dirg';
…

Credits (y u no fork)

neob is based off of react-kickstart. I wasn’t sure initially how much it’d look like it, so I went with a copy first. It has now diverged sufficiently anyway to become more than just a build boilerplate, but introduce a few helpers for building applications.

License

MIT.