goldhand / cookiecutter-webpack

Boilerplate for webpack 2, babel, react + redux + hmr, and karma. Can be inserted into existing django projects.
93 stars 16 forks source link
babel cookiecutter cookiecutter-webpack hmr karma mocha react redux webpack webpack2

Cookiecutter-webpack

CircleCI

Boilerplate for setting up webpack 2 configuration with hot reloading, babel for es6 modules, react + redux for views and state, and karma + mocha + expect for testing.

Getting Started

Download cookiecutter to a global python path

$ pip install cookiecutter

In your project directory run

$ cookiecutter https://github.com/goldhand/cookiecutter-webpack.git

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

Install npm packages

$ npm install

Start the server

$ npm start

Open up http://localhost:8080 in your browser.

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.

You can run the test suite

$ npm test

You should also create a new git repo and push it to github

$ git init
$ git add .
$ git commit -m "Init"
$ git remote add origin git@github.com:goldhand/project_name.git
$ git push -u origin master

Options

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:goldhand/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': 'goldhand',
          'static_root': '{{ cookiecutter.project_dir }}/static/{{ cookiecutter.project_dir }}',
          'production_output_path': '{{ cookiecutter.project_dir }}/static/{{ cookiecutter.project_dir }}/dist/',
          'author_name': '{{ cookiecutter.author_name }}',
          'description': '{{ cookiecutter.description }}',
          'version': '{{ cookiecutter.version }}',
          'existing_project': 'y',
          'css_extension': 'sass',
          'use_ejs': 'n'
      })

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:goldhand/cookiecutter-webpack.git

Contributing

Accepting pull requests!

Clone the project:

$ git clone git@github.com:goldhand/cookiecutter-webpack.git

Install python and npm dependencies:

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

Run build tests:

$ make test