js-config-gen

Inspired by @petehunt's rwb.

My personal node module for scaffolding application using JavaScript. Primarily for scaffolding projects using React, Babel, Eslint, Karma and Mocha. Also serves as a way to shared configurations between projects I work on.

Generated static configs are available in dist, if you prefer to use a config as a base and do some heavy customizations or want to see what they are.

Usage

npm init # if you haven't already
npm install @mikechau/js-config-gen --save-dev

./node_modules/.bin/js-config-gen -i react-web

Usage:
  js-config-gen <args>

Args:

  --install, -i: install predefined package list, options: [react-web]
  --force, -f: overwrite existing configs, does not override --skip-install or --skip-commands
  --eslintrc: create eslintrc
  --babelrc: create babelrc
  --webpack: create webpack configs
  --webpack-dev-server: create webpack dev server config
  --karma: create karma configs
  --index-html: creates dev & prod index.html
  --redux: creates scaffold for redux
  --skip-install: override to skip installing of packages
  --skip-commands: override to skip adding of commands

Package Groups

• React Web: Standalone setup for a client side SPA for the web
  • Redux
  • Fetch
  • Webpack dev/test/prod configs
  • Eslint dev/test/prod configs (based on Airbnb style)
  • ES6
  • Babel w/ hot transforming, redbox-errors
  • PurifyCSS
  • Karma / Mocha for browser/unit testing, @mjackson's expect for assertions

Project Commands

Custom commands are added to your package.json scripts, use npm run to list them all.

These are the standard ones available:

• npm start - boots the dev server, start hacking!
• npm test - runs the test suite
• npm run build - compiles assets

Extending

While there is code generation involved, most of the generated configs are contained in the dist folder. You can require a module from dist and then merge over it to override any particular settings you want.

Alternatively, you could just copy a file and use it as a starting point for your project configurations.

Issues

• npm test triggers: Error: cannot resolve path (or pattern) './tests/**/*.spec.js'.

  The solution here is to add a mocha test, it is set to look for tests that end in *.spec.js, since no tests are generated it fails because it cannot find any tests.

Todo

Script

• Bin command

  • [ ] Add copy command to copy a file from dist
  • [ ] Choose specific style loader instead of including less and sass

• Misc

  • [x] Static HTML Templates
  • [x] Redux scaffolding
  • [ ] Write more tests
  • [ ] Continuous Integration

Production

• [x] PurifyCSS
• [x] Zopfli compression with webpack #10
• [x] Sprockets compatible manifest with webpack
• [x] Subresource integrity in manifest
• [ ] Generated index.html should include integrity

Testing

• [ ] Review babel-plugin-rewire for Babel 6 compatibility
• [ ] Integration testing with nightwatch, use Gulp to start the server, run nightwatch, then kill the server on completion link
• [ ] PhantomJS support

Development

• [x] Dev Server
• [ ] CSS Source Maps
• [ ] PostCSS / Autoprefixer
• [ ] CSS Modules / React styling
• [ ] Flow
• [ ] Bootswatch
• [ ] Native support
• [ ] Server support