cookiecutter-webpack

Cookiecutter-webpack

Boilerplate for setting up webpack 2 configuration with hot reloading, babel for es6 modules, react + redux.

Getting Started

Download cookiecutter to a global python path

$ pip install cookiecutter

In your project directory run

$ cookiecutter [e-mail]:hzdg/cookiecutter-webpack.git

Answer the prompts then cd into your newly created project directory.

Install npm packages

$ npm install

Start the server

$ npm start

You will have a React / Redux counter app running with redux dev-tools. See the generated README.md for an explanation of the react / redux project structure.

Integrating into existing projects

You can chain this into an existing cookiecutter project by installing via the projects ./hooks/post_gen_project.py file or just installing it via the command line.

Using post hooks

Here is a django project post hook example that chains this through a django cookiecutter project.

from cookiecutter.main import cookiecutter

cookiecutter(
    '[e-mail]:hzdg/cookiecutter-webpack.git',
    replay=False, overwrite_if_exists=True, output_dir='../',
    checkout=None, no_input=True, extra_context={
        'project_name': '{{ cookiecutter.project_name }}',
        'repo_name': '{{ cookiecutter.repo_name }}',
        'repo_owner': 'hzdg',
        'static_root': '{{ cookiecutter.project_dir }}/static/{{ cookiecutter.project_dir }}',
        'local_output_path': '{{ cookiecutter.project_dir }}/static/{{ cookiecutter.project_dir }}/bundles/',
        'production_output_path': '{{ cookiecutter.project_dir }}/static/{{ cookiecutter.project_dir }}/dist/',
        'author_name': '{{ cookiecutter.author_name }}',
        'email': '{{ cookiecutter.email }}',
        'description': '{{ cookiecutter.description }}',
        'version': '{{ cookiecutter.version }}',
        'existing_project': 'y'
    })

The flag existing_project will move/remove some files and dependencies and also add supporting configurations for a django project.

Using command line

Just make sure you use the --overwrite-if-exists [ or -f] flag so cookiecutter can work within your existing project structure. You will also probably want to point to your existing projects parent directory and make sure you use the same repo_name as the project directory so your package.json files are installed at the project root.

cookiecutter -f -output-dir ../ [e-mail]:hzdg/cookiecutter-webpack.git

Contributing

Accepting pull requests!

Clone the project:

$ git clone [e-mail]:hzdg/cookiecutter-webpack.git

Install python and npm dependencies:

$ pip install -r requirements.txt && npm install

Run build tests:

$ npm test

Change Log

All enhancements and patches to Cookiecutter Django will be documented in this file. This project adheres to Semantic Versioning.

[2016-06-07]

Added

• Eslint ignore for tests (@goldhand)
• Eslint-loader to local config (@goldhand)
• Dependencies (pypi and npm) (@goldhand)
• Py.tests for default and existing_project builds (@golhand)
• Py.tests to check builds comply to their .eslint config (@goldhand)

Changed

• Webpack configs are nested in ./config/ directory (@goldhand)

[2016-05-29]

Fix

• Lint errors on webpack configs (@goldhand)

Removed

• Redux DevTools from production (@goldhand)
• Devtools filter monitor (@goldhand)

[2016-05-05]

Added

• React-devtools notes to Readme (@goldhand)
• Force-case-sensitivity-webpack-plugin to webpack local config (@goldhand)
• Less and less loader to requirements (@goldhand)
• Less file to counter demo (@goldhand)

Fix

• App.js casing (@goldhand)

Changed

• Counter demo component to have its own directory (@goldhand)

[2016-05-04]

Added

• Redux-react configurations (@goldhand)
• Test commands to npm (@goldhand)
• Package requirements to include redux-react requirements (@goldhand)
• Redux-react counter demo application (@goldhand)
• Redux dev tools (@goldhand)

Changed

• Readme to reflect redux-react application structure (@goldhand)