From 2d3ca9bfab35d9aff0aa6f8304e7a7a4a6099acb Mon Sep 17 00:00:00 2001 From: Steve Steiner Date: Thu, 8 Sep 2016 10:52:10 -0400 Subject: [PATCH] Remove webpack and merge (#778) * 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 --- .gitignore | 1 + CONTRIBUTORS.rst | 2 + README.rst | 2 - cookiecutter.json | 2 +- docs/developing-locally-webpack.rst | 144 ------------------ docs/index.rst | 1 - docs/linters.rst | 18 +-- hooks/post_gen_project.py | 30 ---- {{cookiecutter.project_slug}}/README.rst | 29 ---- .../config/settings/common.py | 13 -- .../config/settings/production.py | 14 -- .../requirements/base.txt | 5 - .../templates/base.html | 16 +- 13 files changed, 9 insertions(+), 268 deletions(-) delete mode 100644 docs/developing-locally-webpack.rst diff --git a/.gitignore b/.gitignore index 818cccd5a..393a1968c 100644 --- a/.gitignore +++ b/.gitignore @@ -25,6 +25,7 @@ sftp-config.json *.pyc .idea _build +*.egg-info/ # Project Specific Stuff local_settings.py diff --git a/CONTRIBUTORS.rst b/CONTRIBUTORS.rst index 2d3894e23..25fcfa3ba 100644 --- a/CONTRIBUTORS.rst +++ b/CONTRIBUTORS.rst @@ -120,6 +120,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`_ @@ -198,6 +199,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 diff --git a/README.rst b/README.rst index 4932bb1dc..a0aa50778 100644 --- a/README.rst +++ b/README.rst @@ -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 ----------- diff --git a/cookiecutter.json b/cookiecutter.json index b43667e0a..9b9c67077 100644 --- a/cookiecutter.json +++ b/cookiecutter.json @@ -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"] } diff --git a/docs/developing-locally-webpack.rst b/docs/developing-locally-webpack.rst deleted file mode 100644 index b981aea70..000000000 --- a/docs/developing-locally-webpack.rst +++ /dev/null @@ -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 - - - {% load render_bundle from webpack_loader %} - ... - {% block javascript %} - - {% 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 - - - {% load render_bundle from webpack_loader %} - ... - {% block javascript %} - {{ block.super }} - {% render_bundle 'users' %} - {% endblock javascript %} diff --git a/docs/index.rst b/docs/index.rst index a228698a3..07cedc4ab 100644 --- a/docs/index.rst +++ b/docs/index.rst @@ -15,7 +15,6 @@ Contents: project-generation-options developing-locally developing-locally-docker - developing-locally-webpack settings linters live-reloading-and-sass-compilation diff --git a/docs/linters.rst b/docs/linters.rst index 27e6a4d79..c2f76f352 100644 --- a/docs/linters.rst +++ b/docs/linters.rst @@ -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 - -Using the flag ``--fix`` will atomatically fix any errors. +* Exclude .tox,.git,*/migrations/*,*/static/CACHE/*,docs,node_modules \ No newline at end of file diff --git a/hooks/post_gen_project.py b/hooks/post_gen_project.py index 300da58b4..dd6a3f07d 100644 --- a/hooks/post_gen_project.py +++ b/hooks/post_gen_project.py @@ -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() diff --git a/{{cookiecutter.project_slug}}/README.rst b/{{cookiecutter.project_slug}}/README.rst index e9a4e6106..f760a1e2c 100644 --- a/{{cookiecutter.project_slug}}/README.rst +++ b/{{cookiecutter.project_slug}}/README.rst @@ -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 diff --git a/{{cookiecutter.project_slug}}/config/settings/common.py b/{{cookiecutter.project_slug}}/config/settings/common.py index b5f1a328b..4fc8596de 100644 --- a/{{cookiecutter.project_slug}}/config/settings/common.py +++ b/{{cookiecutter.project_slug}}/config/settings/common.py @@ -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 # ------------------------------------------------------------------------------ diff --git a/{{cookiecutter.project_slug}}/config/settings/production.py b/{{cookiecutter.project_slug}}/config/settings/production.py index c8d504696..04a9426fd 100644 --- a/{{cookiecutter.project_slug}}/config/settings/production.py +++ b/{{cookiecutter.project_slug}}/config/settings/production.py @@ -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 # ------------------------------------------------------------------------------ diff --git a/{{cookiecutter.project_slug}}/requirements/base.txt b/{{cookiecutter.project_slug}}/requirements/base.txt index 404431d9d..42520a3b2 100644 --- a/{{cookiecutter.project_slug}}/requirements/base.txt +++ b/{{cookiecutter.project_slug}}/requirements/base.txt @@ -59,9 +59,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 diff --git a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/templates/base.html b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/templates/base.html index 110ba8827..64ddaa418 100644 --- a/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/templates/base.html +++ b/{{cookiecutter.project_slug}}/{{cookiecutter.project_slug}}/templates/base.html @@ -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 %} +{% raw %}{% load staticfiles i18n {% endraw %}{% if cookiecutter.use_compressor == "y" %}compress{% endif %}{% raw %}%} @@ -77,9 +76,7 @@
{{ message }}
{% endfor %} {% endif %} -{% endraw %}{% if cookiecutter.js_task_runner == 'Webpack' %}{% raw %} -
-{% endraw %}{% endif %}{% raw %} + {% block content %}

Use this document as a way to quick start any new project.

{% endblock content %} @@ -98,17 +95,12 @@ -{% endraw %}{% if cookiecutter.js_task_runner == 'Webpack' %}{% raw %} - - {% render_bundle 'vendor' %} - {% render_bundle 'common' %} - {% render_bundle 'main' %} -{% endraw %}{% else %}{% raw %} + {% endraw %}{% if cookiecutter.use_compressor == "y" %}{% raw %}{% compress js %}{% endraw %}{% endif %}{% raw %} {% endraw %}{% if cookiecutter.use_compressor == "y" %}{% raw %}{% endcompress %}{% endraw %}{% endif %}{% raw %} -{% endraw %}{% endif %}{% raw %} + {% endblock javascript %}