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.
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
project_name
: Your Project Namerepo_name
: Name of this projects git repositoryrepo_owner
: Your github usernamestatic_root
: Path to where this projects source code lives, or path to static files directory if integrating into an existing projectproduction_output_path
: Path where your compiled bundles should goauthor_name
: Your Namedescription
: A short description of the project for theREADME.md
fileversion
: Project version numberexisting_project
:n
if this is a new project andy
if you're integrating into an existing project. See the notes below about integrating into an existing project.css_extension
: [none
,less
,sass
] - useless
orsass
to preprocess styles.use_ejs
:y
if you want to includeejs
templates and loaders in the project. Recommended if not using an existing project.
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.
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.
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
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