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 AWS Cloud computing and Security Sponsor Datadog Datadog Monitoring Fastly Fastly CDN Google Google Download Analytics Microsoft Microsoft PSF Sponsor Pingdom Pingdom Monitoring Sentry Sentry Error logging StatusPage StatusPage Status page