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.