generator-flux

Flux/React application generator

Interested in taking next-gen Flux for a spin?

Try the new generator-redux to get a sneak peek at the future of functional Flux/React!

Getting Started

What is Flux?

It's an "Application Architecture for Building User Interfaces", built by the team at Facebook. It's a set of patterns building larger applications on top of the incredible React component library.

Features:

• <input checked="" disabled="" type="checkbox"> Facebook's Flux architecture (using official dispatcher)
• <input checked="" disabled="" type="checkbox"> Gulp for builds
• <input checked="" disabled="" type="checkbox"> Browserify and CJS modules
• <input checked="" disabled="" type="checkbox"> Babel for es6 transpilation
• <input checked="" disabled="" type="checkbox"> Static server with livereload
• <input checked="" disabled="" type="checkbox"> SASS CSS preprocessor

Basic Support

• <input disabled="" type="checkbox"> Choice of UI Framework (React-Bootstrap, Material UI)

Coming soon:

• <input disabled="" type="checkbox"> React-router
• <input disabled="" type="checkbox"> Storage options: localStorage and Firebase to start
• <input disabled="" type="checkbox"> Test generation (likely using Jest)
• <input disabled="" type="checkbox"> Cleaner ActionCreator patterns

Prerequisites

You must have Node.js w/NPM installed. I recommend installing via homebrew, but you should be able to use the pre-built installers if you prefer.

Also, generator-flux is a Yeoman generator. If you do not have Yeoman installed, first run:

$ npm install -g yo

Installing the generator

To install generator-flux from npm, run:

$ npm install -g generator-flux

Finally, initiate the generator:

$ yo flux

Configuration Options

During install-time, you will be prompted to enter some information to help create the project structure and package.json file:

• Application name (string): A human-readable name for your project, i.e. "My Flux Application"
• Application Description (string): Describe your application in one sentence, to be used in package.json and the generated README.md

Running the scaffolded project

The generated project includes a live-reloading static server on port 8080 (you can change the port in the gulpfile.js config), which will build, launch, and rebuild the app whenever you change application code. To start the server, run:

$ npm start

To run the live-reloading static server on port 8080 with source maps enabled (don't use source maps for production!), run:

$ npm run dev

If you prefer to just build without the live reload and build-on-each-change watcher, run:

$ npm run build

After First Run

The flux generator is still useful even after your app is fully generated. It comes with several subgenerators that you can invoke at any time to add new:

Components

$ yo flux:component ComponentName

Actions

$ yo flux:action ActionCreatorName

Stores

$ yo flux:store StoreName

License

MIT