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!
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.
- Facebook's Flux architecture (using official dispatcher)
- Gulp for builds
- Browserify and CJS modules
- Babel for es6 transpilation
- Static server with livereload
- SASS CSS preprocessor
- Choice of UI Framework (React-Bootstrap, Material UI)
- Storage options:
localStorageand Firebase to start
- Test generation (likely using Jest)
- Cleaner ActionCreator patterns
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
During install-time, you will be prompted to enter some information to help create the project structure and
- 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.jsonand the generated
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:
$ yo flux:component ComponentName
$ yo flux:action ActionCreatorName
$ yo flux:store StoreName