generator-rf

RF: a React/Flux generator with webpack, dialects and some good stuffs.

What's inside

• React
• Flux
• Jest
• webpack
• SourceMap from webpack's devtool
• Live-reload by react-hot-loader
• JS dialect in your favor:
  • CoffeeScript
  • LiveScript
  • Babel (Formally Javascript 6to5)
  • vanilla JavaScript
• Have JSX in CoffeeScript/LiveScript by coffee-react-transform
• Stylesheet syntax in your favor:
  • SASS/SCSS
  • Less
  • Stylus
  • pure CSS

What 'RF' stands for

No, not the boring abbreviation of "React" and "Flux". It's actually the suffix of rm -rf. Now it sounds dangerous and cooler, doesn't it?

Installation

Prerequisites

• Node.js w/npm installed. I recommend install it via nvm or node via homebrew.

Install Yeoman

npm install -g yo

Install RF generator

npm install -g generator-rf

Getting Started

Intiate Project

For example, to create a project named "myapp", just type:

yo rf myapp

Run it up

cd myapp && npm run dev

Then Open http://localhost:8080 in the browser and have fun!

If you get error message like Cannot GET / on MS Windows, try http://localhost:8080/index.html instead. And please let me how to fix it if you know how.

Run the test suit

Don't forget to test your project by:

npm test

Build for deploy

npm run build

What RF generates:

.
└── myapp *
    ├── package.json
    ├── preprocessor.js
    ├── node_modules
    ├── src
    │   ├── assets
    │   │   ├── images
    │   │   └── stylesheets
    │   │       └── style.sass **
    │   ├── index.html
    │   └── scripts
    │       ├── actions
    │       │   └── __tests__
    │       ├── components
    │       │   ├── App.coffee **
    │       │   └── __tests__
    │       │       └── App-test.coffee **
    │       ├── constants
    │       │   └── __tests__
    │       ├── dispatcher
    │       │   ├── AppDispatcher.coffee **
    │       │   └── __tests__
    │       ├── main.coffee **
    │       ├── mixins
    │       │   └── __tests__
    │       └── stores
    │           └── __tests__
    └── webpack.config.js

• * Won't create root directory if your current directory is identical with your project name. Check --skip-root section for detail.
• ** Varied by your choices of the dialect and stylesheet syntax

What npm run build gives:

.
└── myapp
    ├── build
    │   ├── bundle.js
    │   └── index.html
    └── ...

Options

--d: Dialect

By default, RF will generate codes in CoffeeScript. If you don't like it, use --d flag to change the dialect to generate.

• ls for LiveScript
• babel for Babel (Formally JavaScript 6to5)
• js for vanilla JavaScript

Example:

yo rf myapp --d=ls

--s: Stylesheet Syntax

RF generate SASS (indented syntax) by default. Use --s flag to change it.

• scss for SCSS (Sassy CSS)
• less for LESS
• stylus for Stylus
• or css for CSS.

Example:

yo rf myapp --s=scss

--skip-root: Don't create root directory

From 0.1.13, RF will create a root directory if current directory name is different from your appname, or generate files in current directory if they have same name. But if you're intentionally have them with different name, use --skip-root to generate files right in the current directory.

Example:

yo rf trueName --skip-root

--skip-test: Don't create __tests__ directory

For every sub-directories in src/scripts, RF will create a __tests__ directory within. Use skip-test to skip that.

Example:

yo rf myapp --skip-test

--skip-install: Skip automatic package installation

Example:

yo rf myapp --skip-install

Contribute

• Fork this project
• run npm install && npm test and make sure all test are pass
• Make your changes with a bit of test
• For commit message of pull request, please check these useful tips ahead.

TODO

• Actions w/Constants, Store
• Component and Mixin generate command
• Isomorphic server script(?)
• React native things(?)

License

MIT