Yeoman generator for ReactJS - lets you quickly set up a project including karma test runner and Webpack module system.

Generator-React-Webpack will help you build new React projects using modern technologies.

Out of the box it comes with support for:

• Webpack
• ES2015 via Babel-Loader
• Different supported style languages (sass, scss, less, stylus)
• Automatic code linting via esLint
• Ability to unit test components via Karma and Mocha/Chai

The new version of generator-react-webpack does NOT include support for Flux-Frameworks directly. Instead, we will use it as a base to provide own generators that use it as a base. This will make the base generator easier to use and update.

Currently, there are no stable flux implementation based on generator-react-webpack v2. We are working on an implementation for alt.js.

If you are interested, feel free to write your own generator and use generator-react-webpack as a base (via composition).

If you have build a generator using generator-react-webpack, tell us and we will add a link to our README.

npm install -g yo
npm install generator-react-webpack

# Create a new directory, and `cd` into it:
mkdir my-new-project && cd my-new-project

# Run the generator
yo react-webpack

Please make sure to edit your newly generated package.json file to set description, author information and the like.

# After setup of course :)
# cd my-new-project
yo react-webpack:component my/namespaced/components/name

The above command will create a new component, as well as its stylesheet and a basic testcase.

The following commands are available in your project:

# Start for development
npm start # or
npm run serve

# Start the dev-server with the dist version
npm run serve:dist

# Just build the dist version and copy static files
npm run dist

# Run unit tests
npm test

# Lint all files in src (also automatically done AFTER tests are run)
npm run lint

# Clean up the dist directory
npm run clean

# Just copy the static assets
npm run copy

We have opted to follow @floydophone convention of uppercase for component file naming e.g. Component.js. I am open to suggestions if there is a general objection to this decision.

Each component is a module and can be required using the Webpack module system. Webpack uses Loaders which means you can also require CSS and a host of other file types. Read the Webpack documentation to find out more.

Thanks to all who contributed to generator-angular as the majority of code here has been shamelessy sourced from that repos.

Thanks to Edd Hannay for his Webpack optimisations, my local merge and testing meant his additions lost his signature (my fault sorry) so big thanks Edd.

Contributions are welcomed. When submitting a bugfix, write a test that exposes the bug and fails before applying your fix. Submit the test alongside the fix.

npm test or node node_modules/.bin/mocha

BSD license