Awesome
generator-react-webpack-alt
Generator-React-Webpack - with Flux Support (using alt.js)
What is it for?
This generator can be used to create and manage projects that use React, Webpack and Flux (using alt.js as implementation). It depends on generator-react-webpack as a base and extends it to create new stores and actions.
What is included?
Generator-React-Webpack-Alt includes support for creating new stores (and tests), as well as the creation of actions, components and sources.
It also has support for the the features that are available in its parent project, generator-react-webpack. This includes the run-configuration, webpack, esLint and test-environment.
Planned Features and updates
There are currently some features missing from the generator. These will be available in a later version:
- Creation of Components like in Generator-React-Webpack
- Creation of Datasources
- Creation of Action/Store-Pairs via a single subgenerator (react-webpack-alt:all).
- Automatic inclusion of generated actions into stores when using subgenerator "all"
- Creation of Unittests for Actions
- Add a correct versioning for generator-react-webpack so we dont need to draw the current git master.
Installation
npm install -g yo
npm install -g generator-react-webpack-alt
Setting up projects
# Create a new directory, and `cd` into it:
mkdir my-new-project && cd my-new-project
# Run the generator
yo react-webpack-alt
Generating new components
yo react-webpack-alt:component my/namespaced/components/name
Generating new stores and actions
# After setup of course :)
# cd my-new-project
yo react-webpack-alt:action my/namespaced/actions/name
yo react-webpack-alt:store my/namespaced/stores/name
# Create a new store, as well as a dedicated action for it
yo react-webpack-alt:all my/namespaced/functions/name
Generating sources
Stores in alt.js can use so called sources to make the usage of async actions easier for you. Please look at the alt.js documentation for this feature to see how this can be implemented.
You can create an empty source by using the following command:
yo react-webpack-alt:source my/namespaced/sources/name
You will then be able to include it in your stores via
import NameSource from 'sources/my/namespaces/sources/nameSource';
NameSource.remoteAction();
Usage
Please take a look at react-webpack-template for an in depth explanation or use npm run to get a list of all commands available for building and running your application.
Basics are:
npm start: Will start up the dev webservernpm test: Run unit testsnpm run dist: Create the packed version
Contribute
Contributions are welcomed. If you find something is missing or there are errors hidden somewhere, feel free to add a new issue.
Running Tests
npm test or node node_modules/.bin/mocha