Remove webpack and merge (#778) (#785)

* 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:
Jannis Gebauer 2016-09-12 00:22:21 +02:00 committed by GitHub
parent 6a9ec57bf5
commit 7d7b044432
13 changed files with 9 additions and 268 deletions

1
.gitignore vendored
View File

@ -25,6 +25,7 @@ sftp-config.json
*.pyc
.idea
_build
*.egg-info/
# Project Specific Stuff
local_settings.py

View File

@ -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

View File

@ -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
-----------

View File

@ -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"]
}

View File

@ -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 %}

View File

@ -15,7 +15,6 @@ Contents:
project-generation-options
developing-locally
developing-locally-docker
developing-locally-webpack
settings
linters
live-reloading-and-sass-compilation

View File

@ -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

View File

@ -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()

View File

@ -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

View File

@ -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
# ------------------------------------------------------------------------------

View File

@ -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
# ------------------------------------------------------------------------------

View File

@ -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

View File

@ -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>