mirror of
https://github.com/cookiecutter/cookiecutter-django.git
synced 2024-11-22 01:26:57 +03:00
* Remove webpack and merge * Put postgresql_version line back in cookiecutter.json * Put goldhand back in contributors file, added ssteinerX * Add *.egginfo to .gitignore * Fix dangling endif in README.rst
This commit is contained in:
parent
6a9ec57bf5
commit
7d7b044432
1
.gitignore
vendored
1
.gitignore
vendored
|
@ -25,6 +25,7 @@ sftp-config.json
|
|||
*.pyc
|
||||
.idea
|
||||
_build
|
||||
*.egg-info/
|
||||
|
||||
# Project Specific Stuff
|
||||
local_settings.py
|
||||
|
|
|
@ -121,6 +121,7 @@ Listed in alphabetical order.
|
|||
stepmr `@stepmr`_
|
||||
Sławek Ehlert `@slafs`_
|
||||
Srinivas Nyayapati `@shireenrao`_
|
||||
Steve Steiner `@ssteinerX`_
|
||||
Sule Marshall `@suledev`_
|
||||
Taylor Baldwin
|
||||
Théo Segonds `@show0k`_
|
||||
|
@ -200,6 +201,7 @@ Listed in alphabetical order.
|
|||
.. _@shultz: https://github.com/shultz
|
||||
.. _@siauPatrick: https://github.com/siauPatrick
|
||||
.. _@slafs: https://github.com/slafs
|
||||
.. _@ssteinerX: https://github.com/ssteinerx
|
||||
.. _@stepmr: https://github.com/stepmr
|
||||
.. _@suledev: https://github.com/suledev
|
||||
.. _@Travistock: https://github.com/Tavistock
|
||||
|
|
|
@ -166,12 +166,10 @@ For local development, see the following:
|
|||
|
||||
* `Developing locally`_
|
||||
* `Developing locally using docker`_
|
||||
* `Developing locally using webpack`_
|
||||
|
||||
.. _options: http://cookiecutter-django.readthedocs.io/en/latest/project-generation-options.html
|
||||
.. _`Developing locally`: http://cookiecutter-django.readthedocs.io/en/latest/developing-locally.html
|
||||
.. _`Developing locally using docker`: http://cookiecutter-django.readthedocs.io/en/latest/developing-locally-docker.html
|
||||
.. _`Developing locally using webpack`: http://cookiecutter-django.readthedocs.io/en/latest/developing-locally-webpack.html
|
||||
|
||||
Community
|
||||
-----------
|
||||
|
|
|
@ -19,7 +19,7 @@
|
|||
"use_heroku": "n",
|
||||
"use_compressor": "n",
|
||||
"postgresql_version": ["9.5", "9.4", "9.3", "9.2"],
|
||||
"js_task_runner": ["Gulp", "Grunt", "Webpack", "None"],
|
||||
"js_task_runner": ["Gulp", "Grunt", "None"],
|
||||
"use_lets_encrypt": "n",
|
||||
"open_source_license": ["MIT", "BSD", "GPLv3", "Apache Software License 2.0", "Not open source"]
|
||||
}
|
||||
|
|
|
@ -1,144 +0,0 @@
|
|||
Developing Locally with Webpack
|
||||
===============================
|
||||
|
||||
.. index:: Webpack, React, Redux, Karma, HMR
|
||||
|
||||
The steps below will get you up and running with a super speedy local development environment with Webpack, React, Redux and Hot module Replacement.
|
||||
|
||||
Before you begin, make sure you've created a python virtual environment, installed local python dependencies and created a postgres database::
|
||||
|
||||
$ virtualenv env
|
||||
$ source env/bin/activate
|
||||
$ pip install -r requirements/local.txt
|
||||
$ createdb [project_slug]
|
||||
$ python manage.py migrate
|
||||
$ python manage.py runserver
|
||||
|
||||
These prerequisite steps are detailed more in the `developing locally section`_. If you've already done them, continue to installing javascript dependencies.
|
||||
|
||||
.. _developing locally section: https://cookiecutter-django.readthedocs.io/en/latest/developing-locally.html
|
||||
|
||||
|
||||
Install javascript dependencies
|
||||
-------------------------------
|
||||
|
||||
You will need `NodeJS`_ set up on your local machine to use `npm`_.
|
||||
|
||||
.. _NodeJS: https://nodejs.org/en/
|
||||
.. _npm: https://www.npmjs.com/
|
||||
|
||||
|
||||
Install all the javascript dev dependencies as specified in the ``.package.json`` file::
|
||||
|
||||
$ npm install
|
||||
|
||||
|
||||
Start the django and webpack servers
|
||||
------------------------------------
|
||||
|
||||
Start up the python and webpack dev server's::
|
||||
|
||||
$ npm start
|
||||
|
||||
|
||||
Open up ``http://localhost:8000`` to see the project running in your browser.
|
||||
|
||||
You can also open ``http://localhost:8080`` to see the webpack-dev-server running.
|
||||
|
||||
**Why are there two servers? Why not use django's built in static file server?**
|
||||
|
||||
We are using webpack's dev server to enable `hot module replacement`_.
|
||||
|
||||
If you're not familiar with hmr, then try editing one of the react components that was generated in your static directory.
|
||||
You will see your updates without any page reloading.
|
||||
Because we have sass loaders in our webpack configuration, this also applies to style edits.
|
||||
|
||||
.. _hot module replacement: https://webpack.github.io/docs/hot-module-replacement.html
|
||||
|
||||
|
||||
**Static Project Structure**
|
||||
|
||||
The static project is in your django project's static root, specifically: ``[ project_slug ]/static/[ project_slug ]``.
|
||||
|
||||
There is also a generated ``README.md`` in that directory that outlines the React + Redux + Webpack project structure.
|
||||
|
||||
|
||||
Running Tests with karma
|
||||
------------------------
|
||||
|
||||
Javascript tests are in the ``[ project_slug ]/static/[ project_slug ]/__tests__/`` directory.
|
||||
|
||||
To run karma::
|
||||
|
||||
$ npm test
|
||||
|
||||
This will also run eslint on your javascript files because it is a loader in the webpack test config.
|
||||
|
||||
To keep karma running and watch for file changes run::
|
||||
|
||||
$ npm watch:test
|
||||
|
||||
|
||||
Deployment with webpack
|
||||
-----------------------
|
||||
|
||||
To build your assets for production deployment::
|
||||
|
||||
$ npm run build
|
||||
|
||||
This will bundle all your files and place them in the ``[ project_slug ]/static/[ project_slug ]/dist/`` directory as specified in the webpack production config's ``output.path``.
|
||||
|
||||
There is a generated ``webpack-stats-production.json`` file that contains references to webpack's built files that django will need in production. It is ignored by git but you will want to make sure it is included in deployment.
|
||||
|
||||
|
||||
Bundling static assets
|
||||
----------------------
|
||||
|
||||
You can "bundle" (webpack term) all your static assets into separate modules for each page. When webpack bundles these assets it looks for entry points that you specify (in ``config.entry``) and loads all that entry points dependencies into the bundle, if that entry point has dependencies, webpack will load those dependencies and so on recursively. You can even include image files and style sheets as dependencies too.
|
||||
|
||||
The current webpack configuration that is built in the django-cookiecutter project is already configured to create three bundles, ``main``, ``vendor`` and ``common``.
|
||||
|
||||
* ``main`` contains the main project app, currently a counter demo.
|
||||
* ``vendor`` contains all the third party code, currently react, redux and related libraries. We isolate ``vendor`` because it is likely to be shared between apps and will also not be updated in production as much as our ``main`` bundle so it can stay cached.
|
||||
* ``common`` contains shared modules between bundles.
|
||||
|
||||
These bundles are being served locally by the webpack-development-server when you run ``npm start``.
|
||||
|
||||
Bundles need to be included in django templates. Bundles are hashed each build though, so you can't just add a script tag for them.
|
||||
We use ``django-webpack-loader`` to make Django aware of webpack's build stats. In templates, we can use tags provided by ``django-webpack-loader`` to reference each bundle with the correct build hash.
|
||||
|
||||
.. code-block:: django
|
||||
|
||||
<!--base.html-->
|
||||
{% load render_bundle from webpack_loader %}
|
||||
...
|
||||
{% block javascript %}
|
||||
<!-- render 'main' bundle with correct build hash -->
|
||||
{% render_bundle 'main' %}
|
||||
{% endblock javascript %}
|
||||
|
||||
**Bundling Example:**
|
||||
|
||||
Say we create a new module for user administration. We don't want to include it in the main app because it's only needed in the user page.
|
||||
|
||||
We would first create a seperate entry point in our ``./config/webpack.base.config.js`` file:
|
||||
|
||||
.. code-block:: javascript
|
||||
|
||||
entry: {
|
||||
main: './assets/js/index', // the entry that already exists for our main app
|
||||
users: './assets/js/userApp', // create a new entry for our userApp called 'users'
|
||||
}
|
||||
|
||||
|
||||
Then we can load that bundle in our ``users.html`` template:
|
||||
|
||||
.. code-block:: django
|
||||
|
||||
<!--users.html-->
|
||||
{% load render_bundle from webpack_loader %}
|
||||
...
|
||||
{% block javascript %}
|
||||
{{ block.super }}
|
||||
{% render_bundle 'users' %}
|
||||
{% endblock javascript %}
|
|
@ -15,7 +15,6 @@ Contents:
|
|||
project-generation-options
|
||||
developing-locally
|
||||
developing-locally-docker
|
||||
developing-locally-webpack
|
||||
settings
|
||||
linters
|
||||
live-reloading-and-sass-compilation
|
||||
|
|
|
@ -40,20 +40,4 @@ This is included in flake8's checks, but you can also run it separately to see a
|
|||
The config for pep8 is located in setup.cfg. It specifies:
|
||||
|
||||
* Set max line length to 120 chars
|
||||
* Exclude .tox,.git,*/migrations/*,*/static/CACHE/*,docs,node_modules
|
||||
|
||||
|
||||
eslint
|
||||
------
|
||||
|
||||
If you are using webpack, an ``.eslint`` file will be generated in your project base.
|
||||
|
||||
Running the karma tests will also run the linter.
|
||||
|
||||
$ npm test
|
||||
|
||||
You can manually run the eslint from your project root too:
|
||||
|
||||
$ eslint <javascript files that you wish to lint>
|
||||
|
||||
Using the flag ``--fix`` will atomatically fix any errors.
|
||||
* Exclude .tox,.git,*/migrations/*,*/static/CACHE/*,docs,node_modules
|
|
@ -16,7 +16,6 @@ from __future__ import print_function
|
|||
import os
|
||||
import random
|
||||
import shutil
|
||||
from cookiecutter.main import cookiecutter
|
||||
|
||||
# Get the root project directory
|
||||
PROJECT_DIRECTORY = os.path.realpath(os.path.curdir)
|
||||
|
@ -162,30 +161,6 @@ def remove_packageJSON_file():
|
|||
PROJECT_DIRECTORY, filename
|
||||
))
|
||||
|
||||
|
||||
def add_webpack():
|
||||
"""
|
||||
Adds webpack configuration using cookiecutter to install hzdg/cookiecutter-webpack
|
||||
"""
|
||||
cookiecutter(
|
||||
'https://github.com/hzdg/cookiecutter-webpack.git',
|
||||
replay=False, overwrite_if_exists=True, output_dir='../',
|
||||
checkout='pydanny-django', no_input=True, extra_context={
|
||||
'project_name': '{{ cookiecutter.project_name }}',
|
||||
'repo_name': '{{ cookiecutter.project_slug }}',
|
||||
'repo_owner': '',
|
||||
'project_dir': '{{ cookiecutter.project_slug }}',
|
||||
'static_root': '{{ cookiecutter.project_slug }}/static/{{ cookiecutter.project_slug }}',
|
||||
'production_output_path': '{{ cookiecutter.project_slug }}/static/{{ cookiecutter.project_slug }}/dist/',
|
||||
'author_name': '{{ cookiecutter.author_name | escape }}',
|
||||
'description': '{{ cookiecutter.description | escape }}',
|
||||
'version': '{{ cookiecutter.version }}',
|
||||
'existing_project': 'y',
|
||||
'css_extension': 'sass',
|
||||
'use_ejs': 'n',
|
||||
'open_source_license': '{{ cookiecutter.open_source_license }}'
|
||||
})
|
||||
|
||||
def remove_certbot_files():
|
||||
"""
|
||||
Removes files needed for certbot if it isn't going to be used
|
||||
|
@ -246,11 +221,6 @@ if '{{ cookiecutter.js_task_runner}}'.lower() == 'gulp':
|
|||
remove_grunt_files()
|
||||
elif '{{ cookiecutter.js_task_runner}}'.lower() == 'grunt':
|
||||
remove_gulp_files()
|
||||
elif '{{ cookiecutter.js_task_runner }}'.lower() == 'webpack':
|
||||
remove_gulp_files()
|
||||
remove_grunt_files()
|
||||
remove_packageJSON_file()
|
||||
add_webpack()
|
||||
else:
|
||||
remove_gulp_files()
|
||||
remove_grunt_files()
|
||||
|
|
|
@ -47,34 +47,6 @@ Running tests with py.test
|
|||
::
|
||||
|
||||
$ py.test
|
||||
{% if cookiecutter.js_task_runner == 'Webpack' %}
|
||||
|
||||
Running javascript tests with karma
|
||||
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
|
||||
|
||||
::
|
||||
|
||||
$ npm test
|
||||
|
||||
Hot reloading with React and Webpack
|
||||
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
|
||||
|
||||
Install npm depenencies::
|
||||
|
||||
$ npm install
|
||||
|
||||
Start the development server::
|
||||
|
||||
$ npm start
|
||||
|
||||
A more detailed explanation for `Developing locally with webpack`_
|
||||
|
||||
The `static project readme`_ contains a lot of information about React / Redux and Webpack for this project.
|
||||
|
||||
.. _`static project readme`: {{ cookiecutter.project_slug }}/static/{{ cookiecutter.project_slug }}/README.md
|
||||
.. _`Developing locally with webpack`: http://cookiecutter-django.readthedocs.io/en/latest/developing-locally-webpack.html
|
||||
|
||||
{% else %}
|
||||
|
||||
Live reloading and Sass CSS compilation
|
||||
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
|
||||
|
@ -83,7 +55,6 @@ Moved to `Live reloading and SASS compilation`_.
|
|||
|
||||
.. _`Live reloading and SASS compilation`: http://cookiecutter-django.readthedocs.io/en/latest/live-reloading-and-sass-compilation.html
|
||||
|
||||
{% endif %}
|
||||
{% if cookiecutter.use_celery == "y" %}
|
||||
|
||||
Celery
|
||||
|
|
|
@ -247,19 +247,6 @@ STATICFILES_FINDERS += ("compressor.finders.CompressorFinder", )
|
|||
|
||||
# Location of root django.contrib.admin URL, use {% raw %}{% url 'admin:index' %}{% endraw %}
|
||||
ADMIN_URL = r'^admin/'
|
||||
{% if cookiecutter.js_task_runner == 'Webpack' %}
|
||||
# WEBPACK
|
||||
# ------------------------------------------------------------------------------
|
||||
INSTALLED_APPS += ('webpack_loader',)
|
||||
# Webpack Local Stats file
|
||||
STATS_FILE = ROOT_DIR('webpack-stats.json')
|
||||
# Webpack config
|
||||
WEBPACK_LOADER = {
|
||||
'DEFAULT': {
|
||||
'STATS_FILE': STATS_FILE
|
||||
}
|
||||
}
|
||||
{% endif %}
|
||||
|
||||
# Your common stuff: Below this line define 3rd party library settings
|
||||
# ------------------------------------------------------------------------------
|
||||
|
|
|
@ -302,20 +302,6 @@ LOGGING = {
|
|||
{% endif %}
|
||||
# Custom Admin URL, use {% raw %}{% url 'admin:index' %}{% endraw %}
|
||||
ADMIN_URL = env('DJANGO_ADMIN_URL')
|
||||
{% if cookiecutter.js_task_runner == 'Webpack' %}
|
||||
|
||||
# WEBPACK
|
||||
# ------------------------------------------------------------------------------
|
||||
# Webpack Production Stats file
|
||||
STATS_FILE = ROOT_DIR('webpack-stats-production.json')
|
||||
# Webpack config
|
||||
WEBPACK_LOADER = {
|
||||
'DEFAULT': {
|
||||
'BUNDLE_DIR_NAME': '{{ cookiecutter.project_slug }}/static/{{ cookiecutter.project_slug }}/dist/',
|
||||
'STATS_FILE': STATS_FILE
|
||||
}
|
||||
}
|
||||
{% endif %}
|
||||
|
||||
# Your production stuff: Below this line define 3rd party library settings
|
||||
# ------------------------------------------------------------------------------
|
||||
|
|
|
@ -58,9 +58,4 @@ rcssmin==1.0.6 {% if cookiecutter.windows == 'y' %}--install-option="--without-c
|
|||
django-compressor==2.1
|
||||
{% endif %}
|
||||
|
||||
{% if cookiecutter.js_task_runner == 'Webpack' -%}
|
||||
# Webpack
|
||||
django-webpack-loader==0.3.3
|
||||
{%- endif %}
|
||||
|
||||
# Your custom requirements go here
|
||||
|
|
|
@ -1,5 +1,4 @@
|
|||
{% raw %}{% load staticfiles i18n {% endraw %}{% if cookiecutter.use_compressor == "y" %}compress {% endif %}{% raw %}%}
|
||||
{% endraw %}{% if cookiecutter.js_task_runner == 'Webpack' -%}{% raw %}{% load render_bundle from webpack_loader %}{% endraw %}{%- endif %}{% raw %}<!DOCTYPE html>
|
||||
{% raw %}{% load staticfiles i18n {% endraw %}{% if cookiecutter.use_compressor == "y" %}compress{% endif %}{% raw %}%}<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
|
@ -77,9 +76,7 @@
|
|||
<div class="alert {% if message.tags %}alert-{{ message.tags }}{% endif %}">{{ message }}</div>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
{% endraw %}{% if cookiecutter.js_task_runner == 'Webpack' %}{% raw %}
|
||||
<div id="main"></div>
|
||||
{% endraw %}{% endif %}{% raw %}
|
||||
|
||||
{% block content %}
|
||||
<p>Use this document as a way to quick start any new project.</p>
|
||||
{% endblock content %}
|
||||
|
@ -98,17 +95,12 @@
|
|||
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/js/bootstrap.min.js" integrity="sha384-ux8v3A6CPtOTqOzMKiuo3d/DomGaaClxFYdCu2HPMBEkf6x2xiDyJ7gkXU0MWwaD" crossorigin="anonymous"></script>
|
||||
|
||||
<!-- Your stuff: Third-party javascript libraries go here -->
|
||||
{% endraw %}{% if cookiecutter.js_task_runner == 'Webpack' %}{% raw %}
|
||||
<!-- Webpack bundles -->
|
||||
{% render_bundle 'vendor' %}
|
||||
{% render_bundle 'common' %}
|
||||
{% render_bundle 'main' %}
|
||||
{% endraw %}{% else %}{% raw %}
|
||||
|
||||
<!-- place project specific Javascript in this file -->
|
||||
{% endraw %}{% if cookiecutter.use_compressor == "y" %}{% raw %}{% compress js %}{% endraw %}{% endif %}{% raw %}
|
||||
<script src="{% static 'js/project.js' %}"></script>
|
||||
{% endraw %}{% if cookiecutter.use_compressor == "y" %}{% raw %}{% endcompress %}{% endraw %}{% endif %}{% raw %}
|
||||
{% endraw %}{% endif %}{% raw %}
|
||||
|
||||
{% endblock javascript %}
|
||||
</body>
|
||||
</html>
|
||||
|
|
Loading…
Reference in New Issue
Block a user