Skip to main content

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

Project description

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 git@github.com: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(
'git@github.com: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 ../ git@github.com:hzdg/cookiecutter-webpack.git


Contributing
------------

Accepting pull requests!

Clone the project:
```sh
$ git clone git@github.com:hzdg/cookiecutter-webpack.git
```
Install python and npm dependencies:
```sh
$ pip install -r requirements.txt && npm install
```
Run build tests:
```sh
$ npm test
```


# Change Log
All enhancements and patches to Cookiecutter Django will be documented in this file.
This project adheres to [Semantic Versioning](http://semver.org/).


### [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)

Project details


Supported by

AWS Cloud computing and Security Sponsor Datadog Monitoring Fastly CDN Google Download Analytics Pingdom Monitoring Sentry Error logging StatusPage Status page