Implement frontend dependency management

.gitignore

@@ -1,6 +1,7 @@
 ### Frontend resources ###
 **/static/vendor/
-
+**/static/dist/
+**/node_modules/
 
 # Created by https://www.gitignore.io/api/python,pycharm+iml,jupyternotebook
 

README.md

@@ -3,15 +3,8 @@ Tutorial Framework
 
 ## Frontend dependencies
 
-These aren't checked in, until the preferred method of dependency management is decided. Until then, they can be
+Open up a terminal in `src/app/static`. Issue `yarn install` to install dependencies and `webpack` to compile the
-downloaded from the following locations:
+frontend source.
-
-* [jQuery](https://jquery.com/download/)
-* [Bootstrap](https://getbootstrap.com/docs/4.0/getting-started/download/)
-* [Popper.js](https://github.com/FezVrasta/popper.js#installation)
-* [Highlight.js](https://highlightjs.org/download/)
-* [Showdown](https://github.com/showdownjs/showdown/releases)
-* [ace](https://github.com/ajaxorg/ace-builds/releases)
 
 ## Building and running with Docker
 

lib/debug.py

@@ -9,7 +9,7 @@ from tornado.autoreload import watch
 def _static_files():
     return chain.from_iterable(
         glob(pattern) for pattern in (
-            'static/*.js', 'static/*.css', 'templates/*htm?'
+            'static/dist/*.js', 'static/*.css', 'templates/*htm?'
         )
     )
 

src/app/static/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["env"]
+}

src/app/static/js/index.js

@@ -1,3 +1,8 @@
+import * as ace from 'brace';
+import 'brace/mode/python';
+import 'brace/theme/monokai';
+import * as showdown from 'showdown';
+
 let ws = new WebSocket('ws://' + document.location.host + '/ws');
 
 let converter = new showdown.Converter();

src/app/static/package.json

@@ -0,0 +1,16 @@
+{
+  "dependencies": {
+    "bootstrap": "4.0.0-beta.2",
+    "brace": "^0.11.0",
+    "jquery": "^3.2.1",
+    "popper.js": "^1.12.3",
+    "showdown": "^1.8.5",
+    "webpack": "^3.10.0"
+  },
+  "devDependencies": {
+    "babel-core": "^6.26.0",
+    "babel-loader": "^7.1.2",
+    "babel-preset-env": "^1.6.1",
+    "uglifyjs-webpack-plugin": "^1.1.2"
+  }
+}

src/app/static/webpack.config.js

@@ -0,0 +1,29 @@
+const path = require('path');
+const webpack = require('webpack');
+const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
+
+module.exports = {
+    entry: './js/index.js',
+    output: {
+        path: path.resolve(__dirname, 'dist'),
+        filename: 'bundle.js'
+    },
+    module: {
+        rules: [
+            {
+                test: /\.js$/,
+                exclude: /node_modules/,
+                loader: "babel-loader"
+            }
+        ]
+    },
+    plugins: [
+        new webpack.ProvidePlugin({
+            $: 'jquery',
+            jQuery: 'jquery',
+            'window.jQuery': 'jquery',
+            'window.$': 'jquery',
+        }),
+        new UglifyJsPlugin()
+    ]
+};

src/app/templates/index.html

@@ -38,12 +38,6 @@
         </div>
     </div>
 
-    <script src="{{ static_url('vendor/js/jquery-3.2.1.min.js') }}" defer></script>
+    <script src="{{ static_url('dist/bundle.js') }}" defer></script>
-    <script src="{{ static_url('vendor/js/popper.min.js') }}" defer></script>
-    <script src="{{ static_url('vendor/js/bootstrap.min.js') }}" defer></script>
-    <script src="{{ static_url('vendor/js/highlight.min.js') }} defer"></script>
-    <script src="{{ static_url('vendor/js/showdown.min.js') }} defer"></script>
-    <script src="{{ static_url('vendor/js/ace/ace.js') }} defer"></script>
-    <script src="{{ static_url('ws_listener.js') }}" defer></script>
 </body>
 </html>