Flux/ReactJS generator

Yeoman generator for web application (SPA) based on Facebook's React library and Flux architecture. Use it to quickly bootstrap your web application projects.

Batteries included

Gulp build system.
Webpack module builder with hot loader and dev server.
React-hot-loader for automated build on edit.
Beautiful flat-ui theme for boostrap.
Jest based unit testing.
React router for client side routing.
Generators for react components and stores.

Usage

Install locally

mkdir myapp && cd myapp
npm install cybersiddhu/generator-flux-webapp

Create project

yo flux-webapp [appname]

The above will generate a project with the following folder layout

├── build/                      # The folder for compiled output, will be created after running the first build.
├── docs/                       # Documentation files for the project
├── gulp/                       # The folder for gulp tasks
│   ├── dev_server.js           # Tasks for running developmental server, build and deploy
│   └── flatui.js               # Tasks for managing installation of Flat-UI bootstrap theme.
├── jest/                       # The folder for jest configuration files
│   └── preprocessor.js         # Jest preprocessor file for JSX transformation
├── src/                        # The source code of the application
│   ├── images/                 # The folder for static images
│   ├── scripts/                # Source code for various parts of flux architecture
│   │   ├── actions/            # Action creators that allow to trigger a dispatch to stores
│   │   ├── components/         # React components. E.g. Navbar.jsx, Calendar.jsx
│   │   │   ├── __tests__/      # Unit tests for components, mainly jest based.
│   │   ├── constants/          # Enumerations used in action creators and stores
│   │   ├── dispatcher/         # Application specific dispatcher
│   │   ├── stores/             # Stores contain the application state and logic
│   │   │   ├── __tests__/      # Unit tests for stores, mainly jest based.
│   │   ├── utils/              # API to interact with data store(server or clientside), generally called by action creators
│   │   └── app.jsx             # Entry point for application
│   │   └── router.js           # Router instance to use the routes defintion
│   │   └── routes.jsx          # Client side routing definition
│   ├── styles/                 # CSS style sheets, default is less
│   │   ├── vendor/             # Folder for third patry CSS framework
│   │   └── main.less           # Entry point for stylesheet customization
│   └── template/               # The folder for any kind of templates
│       └── index.html          # A template file to make the index file for the build process
├── gulpfile.js                 # Primary gulp configuration file, use to source custom one from gulp/ folder
├── index.html                  # Index file needed for webpack dev server
├── LICENSE                     # Default MIT license 
├── package.json                # Dependency management file for npm
├── README.md                   # This file.
├── webpack.config.js           # Webpack config file for build task
└── webpack-dev.config.js       # Webpack config file for running the developmental server

Working with the Application

The following functionality are included with the application by default

Generators

Note:Generators are expected to be run from the root directory of your application.

Also all the generated stub files include some boilerplate code to get started.

Component

yo flux-webapp:component photo

Will produces src/scripts/components/Photo.jsx and

src/scripts/components/__tests__/Photo-test.js

Store

yo flux-webapp:store photo

Will produces src/scripts/stores/PhotoStore.js and

src/scripts/stores__tests__/PhotoStore-test.js

Run

gulp

This will start a lightweight webpack development server on port 9000. The setup includes live reload and synchronization across multiple devices and browsers.

Build

gulp build

The build will be generated in build folder including and index.html

Deploy

gulp deploy

This will deploy the build to the github pages

CSS

gulp setup:flatcss

The above sets up a flat theme for bootstrap3. The theme is imported and can be customized from main.less file in stylesheet folder. To use it in the application import it from the main entry point(app.jsx).

Unit testing

npm test

It will fire a jest based unit tests, for stores and components by default.

Client side routing

React router can be used for managing routes. Edit src/scripts/routes.jsx to manipulate routing definition for the application.

Props

Thanks to Aldo Nievas's, it is a modified version of his generator.

cybersiddhu / generator-flux-webapp