This repo is no longer maintained. Please use Facebook official generator: create-react-app instead.

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:
  • ES6 powered by Babel (Formally Javascript 6to5)
  • CoffeeScript
  • LiveScript
  • vanilla JavaScript
• Have JSX in CoffeeScript/LiveScript by coffee-react-transform
• Stylesheet syntax in your favor:
  • SASS/SCSS
  • Less
  • Stylus
  • pure CSS
• Optional Bootstrap Framework

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 or iojs installed. I recommend install it by nvm. Mac user can install nvm from homebrew.

Note: Jest doesn't work on io.js & node v0.11 ~ v0.12, if you like to have jest works, make sure you use node.js 4.0 above or v0.10

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!

Run the test suit

Don't forget to test your project by:

npm test

Build for deploy

npm run build

What RF generates:

.
└── myapp *
    ├── build
    │   └── index.html
    ├── package.json
    ├── preprocessor.js
    ├── node_modules
    ├── src
    │   ├── assets
    │   │   ├── images
    │   │   └── stylesheets
    │   │       └── style.sass **
    │   └── scripts
    │       ├── actions
    │       │   └── __tests__
    │       ├── components
    │       │   ├── App.js **
    │       │   └── __tests__
    │       ├── constants
    │       │   └── __tests__
    │       ├── dispatcher
    │       │   ├── AppDispatcher.js **
    │       │   └── __tests__
    │       ├── main.js **
    │       ├── mixins
    │       │   └── __tests__
    │       └── stores
    │           └── __tests__
    ├── webpack.dev.config.js
    └── webpack.prod.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
    │   ├── some bootstrap stuffs (if include)
    │   └── ...
    └── ...

Options

--d: Dialect

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

• ls for LiveScript
• coffee for coffee-script
• 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-bootstrap: Don't include Bootstrap framework stuffs

RF includes Bootstrap settings in the real Webpack way. Turn them off by --skip-bootstrap flag.

Example:

yo rf myapp --skip-bootstrap

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

RF creates 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__ directories

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

• PostCSS support
• Actions w/Constants, Store
• Custom template folder
• Component and Mixin generate command
• Isomorphic server script(?)

License

MIT