Merge pull request #117 from CatalystCode/enhancement/webpack-in-django

Enhancement/Integrate Webpack and Django

.dockerignore

@@ -4,6 +4,7 @@ app/staticfiles/
 app/db.sqlite3
 app/server/node_modules/
 app/server/static/bundle/
+app/server/webpack-stats.json
 !data/
 !tests/
 !tools/

.gitignore

@@ -201,3 +201,4 @@ pip-selfcheck.json
 node_modules/
 app/staticfiles/
 app/server/static/bundle/
+app/server/webpack-stats.json

README.md

@@ -98,13 +98,13 @@ pip install -r requirements.txt
 cd app
 ```
 
-Next we need to compile the frontend. Run the following commands:
+Next we need to start the webpack server so that the frontend gets compiled continuously.
+Run the following commands in a new shell:
 
 ```bash
 cd server
 npm install
-npm run build
-cd ..
+npm start
 ```
 
 Next we need to make migration. Run the following command:

app/app/settings.py

@@ -53,6 +53,7 @@ INSTALLED_APPS = [
     'django_filters',
     'social_django',
     'polymorphic',
+    'webpack_loader',
 ]
 
 MIDDLEWARE = [
@@ -97,6 +98,17 @@ STATICFILES_DIRS = [
 
 STATICFILES_STORAGE = 'whitenoise.storage.CompressedManifestStaticFilesStorage'
 
+WEBPACK_LOADER = {
+    'DEFAULT': {
+        'CACHE': not DEBUG,
+        'BUNDLE_DIR_NAME': 'bundle/',
+        'STATS_FILE': path.join(BASE_DIR, 'server', 'webpack-stats.json'),
+        'POLL_INTERVAL': 0.1,
+        'TIMEOUT': None,
+        'IGNORE': [r'.*\.hot-update.js', r'.+\.map']
+    }
+}
+
 WSGI_APPLICATION = 'app.wsgi.application'
 
 AUTHENTICATION_BACKENDS = [

app/server/package.json

@@ -3,6 +3,7 @@
   "version": "1.0.0",
   "main": "index.js",
   "scripts": {
+    "start": "cross-env HOT_RELOAD=1 DEBUG=1 webpack-dev-server",
     "build": "webpack",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
@@ -17,11 +18,14 @@
     "vue-shortkey": "^3.1.6"
   },
   "devDependencies": {
+    "cross-env": "^5.2.0",
     "eslint": "^5.3.0",
     "eslint-config-airbnb-base": "^13.0.0",
     "eslint-plugin-import": "^2.13.0",
     "webpack": "^4.12.0",
-    "webpack-cli": "^3.2.3"
+    "webpack-bundle-tracker": "^0.4.2-beta",
+    "webpack-cli": "^3.2.3",
+    "webpack-dev-server": "^3.2.1"
   },
   "directories": {
     "test": "tests"

app/server/templates/admin/dataset.html

@@ -1,5 +1,6 @@
 {% extends "admin/admin_base.html" %}
 {% load static %}
+{% load render_bundle from webpack_loader %}
 {% block content-area %}
 <div class="card">
   <header class="card-header">
@@ -78,5 +79,5 @@
 {% endif %}
 {% endblock %}
 {% block footer %}
-<script src="{% static 'bundle/dataset.js' %}"></script>
+{% render_bundle 'dataset' 'js' %}
 {% endblock %}

app/server/templates/admin/download/base.html

@@ -1,5 +1,6 @@
 {% extends "admin/admin_base.html" %}
 {% load static %}
+{% load render_bundle from webpack_loader %}
 {% block content-area %}
 <div class="columns">
   <div class="column is-12">
@@ -24,5 +25,5 @@
 </div>
 {% endblock %}
 {% block footer %}
-<script src="{% static 'bundle/upload.js' %}"></script>
+{% render_bundle 'upload' 'js' %}
 {% endblock %}

app/server/templates/admin/guideline.html

@@ -1,5 +1,6 @@
 {% extends "admin/admin_base.html" %}
 {% load static %}
+{% load render_bundle from webpack_loader %}
 {% block header %}
 <link rel="stylesheet" href="{% static 'css/admin.css' %}">
 {% endblock %}
@@ -18,5 +19,5 @@
 {% block footer %}
 <script src="https://unpkg.com/marked@0.3.6"></script>
 <script src="https://unpkg.com/lodash@4.16.0"></script>
-<script src="{% static 'bundle/guideline.js' %}"></script>
+{% render_bundle 'guideline' 'js' %}
 {% endblock %}

app/server/templates/admin/label.html

@@ -1,5 +1,6 @@
 {% extends "admin/admin_base.html" %}
 {% load static %}
+{% load render_bundle from webpack_loader %}
 {% block content-area %}
 
 <div class="card">
@@ -108,5 +109,5 @@
 </div>
 {% endblock %}
 {% block footer %}
-<script src="{% static 'bundle/label.js' %}"></script>
+{% render_bundle 'label' 'js' %}
 {% endblock %}

app/server/templates/admin/stats.html

@@ -1,5 +1,6 @@
 {% extends "admin/admin_base.html" %}
 {% load static %}
+{% load render_bundle from webpack_loader %}
 {% block content-area %}
 
 <div class="columns">
@@ -51,5 +52,5 @@
 
 {% endblock %}
 {% block footer %}
-<script src="{% static 'bundle/stats.js' %}"></script>
+{% render_bundle 'stats' 'js' %}
 {% endblock %}

app/server/templates/admin/upload/base.html

@@ -1,5 +1,6 @@
 {% extends "admin/admin_base.html" %}
 {% load static %}
+{% load render_bundle from webpack_loader %}
 {% block content-area %}
 <div class="columns">
   <div class="column is-12">
@@ -47,5 +48,5 @@
 </div>
 {% endblock %}
 {% block footer %}
-<script src="{% static 'bundle/upload.js' %}"></script>
+{% render_bundle 'upload' 'js' %}
 {% endblock %}

app/server/templates/annotation/document_classification.html

@@ -1,5 +1,6 @@
 {% extends "annotation/annotation_base.html" %}
 {% load static %}
+{% load render_bundle from webpack_loader %}
 {% block annotation-area %}
 <div class="card">
   <header class="card-header">
@@ -37,5 +38,5 @@
 </div>
 {% endblock %}
 {% block footer %}
-<script src="{% static 'bundle/document_classification.js' %}"></script>
+{% render_bundle 'document_classification' 'js' %}
 {% endblock %}

app/server/templates/annotation/seq2seq.html

@@ -1,5 +1,6 @@
 {% extends "annotation/annotation_base.html" %}
 {% load static %}
+{% load render_bundle from webpack_loader %}
 {% block annotation-area %}
 <div class="card has-text-weight-bold has-text-white has-background-royalblue">
   <div class="card-content">
@@ -28,5 +29,5 @@
 </section>
 {% endblock %}
 {% block footer %}
-<script src="{% static 'bundle/seq2seq.js' %}"></script>
+{% render_bundle 'seq2seq' 'js' %}
 {% endblock %}

app/server/templates/annotation/sequence_labeling.html

@@ -1,5 +1,6 @@
 {% extends "annotation/annotation_base.html" %}
 {% load static %}
+{% load render_bundle from webpack_loader %}
 {% block annotation-area %}
 <div class="card">
   <header class="card-header">
@@ -26,5 +27,5 @@
 </div>
 {% endblock %}
 {% block footer %}
-<script src="{% static 'bundle/sequence_labeling.js' %}"></script>
+{% render_bundle 'sequence_labeling' 'js' %}
 {% endblock %}

app/server/templates/demo/demo_named_entity.html

@@ -1,5 +1,6 @@
 {% extends "annotation/annotation_base.html" %}
 {% load static %}
+{% load render_bundle from webpack_loader %}
 {% block annotation-area %}
 <div class="card">
   <header class="card-header">
@@ -26,5 +27,5 @@
 </div>
 {% endblock %}
 {% block footer %}
-<script src="{% static 'bundle/demo_named_entity.js' %}"></script>
+{% render_bundle 'demo_named_entity' 'js' %}
 {% endblock %}

app/server/templates/demo/demo_text_classification.html

@@ -1,5 +1,6 @@
 {% extends "annotation/annotation_base.html" %}
 {% load static %}
+{% load render_bundle from webpack_loader %}
 {% block annotation-area %}
 <div class="card">
   <header class="card-header">
@@ -37,5 +38,5 @@
 </div>
 {% endblock %}
 {% block footer %}
-<script src="{% static 'bundle/demo_text_classification.js' %}"></script>
+{% render_bundle 'demo_text_classification' 'js' %}
 {% endblock %}

app/server/templates/demo/demo_translation.html

@@ -1,5 +1,6 @@
 {% extends "annotation/annotation_base.html" %}
 {% load static %}
+{% load render_bundle from webpack_loader %}
 {% block annotation-area %}
 <div class="card has-text-weight-bold	has-text-white has-background-royalblue">
   <div class="card-content">
@@ -28,5 +29,5 @@
 </section>
 {% endblock %}
 {% block footer %}
-<script src="{% static 'bundle/demo_translation.js' %}"></script>
+{% render_bundle 'demo_translation' 'js' %}
 {% endblock %}

app/server/templates/projects.html

@@ -1,5 +1,6 @@
 {% extends "base.html" %}
 {% load static %}
+{% load render_bundle from webpack_loader %}
 {% load widget_tweaks %}
 {% block content %}
 <div id="projects_root" v-cloak>
@@ -148,5 +149,5 @@
 </div>
 {% endblock %}
 {% block footer %}
-<script src="{% static 'bundle/projects.js' %}"></script>
+{% render_bundle 'projects' 'js' %}
 {% endblock %}

app/server/webpack.config.js

@@ -1,8 +1,12 @@
 const process = require('process');
+const BundleTracker = require('webpack-bundle-tracker');
 const VueLoaderPlugin = require('vue-loader/lib/plugin')
 
+const devMode = process.env.DEBUG !== 'False';
+const hotReload = process.env.HOT_RELOAD === '1';
+
 module.exports = {
-    mode: process.env.DEBUG === 'False' ? 'production' : 'development',
+    mode: devMode ? 'development' : 'production',
     entry: {
         'sequence_labeling': './static/js/sequence_labeling.js',
         'document_classification': './static/js/document_classification.js',
@@ -18,9 +22,16 @@ module.exports = {
         'dataset': './static/js/dataset.js',
     },
     output: {
+        publicPath: hotReload ? 'http://localhost:8080/' : '',
         path: __dirname + '/static/bundle',
         filename: '[name].js'
     },
+    devtool: devMode ? 'cheap-eval-source-map' : 'source-map',
+    devServer: {
+        hot: true,
+        quiet: false,
+        headers: { 'Access-Control-Allow-Origin': '*' }
+    },
     module: {
         rules: [
             {
@@ -30,6 +41,7 @@ module.exports = {
         ]
     },
     plugins: [
+        new BundleTracker({ filename: './webpack-stats.json' }),
         new VueLoaderPlugin()
     ],
     resolve: {

requirements.txt

@@ -3,6 +3,7 @@ dj-database-url==0.5.0
 Django==2.1.7
 django-filter==2.0.0
 django-heroku==0.3.1
+django-webpack-loader==0.6.0
 django-widget-tweaks==1.4.2
 django-polymorphic==2.0.3
 django-rest-polymorphic==0.1.8