Replaced old webpack configuration with more modern version

.babelrc

@@ -0,0 +1,3 @@
+{
+    "presets": ["@babel/preset-env", "@babel/preset-react"]
+}

frontend/.eslintrc.json → .eslintrc.json

@@ -1,14 +1,14 @@
 {
+    "parser": "babel-eslint",
+
     "env": {
         "browser": true
     },
 
     "extends": [
-        "airbnb-base",
         "plugin:react/recommended"
     ],
 
-    "parser": "babel-eslint",
 
     "plugins": [
         "react"
@@ -40,6 +40,7 @@
         "prefer-destructuring": ["off"],
         "prefer-template": ["off"],
         "quote-props": ["error", "consistent"],
+        "quotes": ["warn"],
         "radix": ["off"],
         "react/no-unescaped-entities": [ "error", { "forbid": [">", "}"] }],
         "semi": ["error", "always"]
@@ -57,5 +58,4 @@
             "env": { "jest": true }
         }
     ]
-}
-
+}

.gitignore

@@ -127,7 +127,7 @@ dmypy.json
 .idea/runConfigurations
 
 # dependencies
-frontend/node_modules
+node_modules
 /.pnp
 .pnp.js
 

README.md

@@ -1,6 +1 @@
-# Machine Learning Applications for Remote Language Instruction
-
-_Machine Learning Applications for Remote Language Instruction_ is a project by the
-[MIT Programs in Digital Humanities](https://digitalhumanities.mit.edu) in
-collaboration with our Spring 2021 Faculty Fellow, [Takako Aikawa](https://https://aikawa.mit.edu/),
-Senior Lecturer in Japanese in the Global Languages Department at MIT.
+# Boilerplate project for DH Labs

assets/bundles/index.bundle.js

@@ -0,0 +1,32 @@
+/*
+ * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
+ * This devtool is neither made for production nor for readable output files.
+ * It uses "eval()" calls to create a separate source file in the browser devtools.
+ * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
+ * or disable the default devtool with "devtool: false".
+ * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
+ */
+/******/ (() => { // webpackBootstrap
+/******/ 	var __webpack_modules__ = ({
+
+/***/ "./frontend/index.js":
+/*!***************************!*\
+  !*** ./frontend/index.js ***!
+  \***************************/
+/***/ (() => {
+
+eval("function component() {\n  console.log('running with updates');\n  const element = document.createElement('div');\n  element.innerHTML = 'Hello webpack';\n  return element;\n}\ndocument.body.appendChild(component());\n\n//# sourceURL=webpack://boilerplate/./frontend/index.js?");
+
+/***/ })
+
+/******/ 	});
+/************************************************************************/
+/******/ 	
+/******/ 	// startup
+/******/ 	// Load entry module and return exports
+/******/ 	// This entry module can't be inlined because the eval devtool is used.
+/******/ 	var __webpack_exports__ = {};
+/******/ 	__webpack_modules__["./frontend/index.js"]();
+/******/ 	
+/******/ })()
+;

backend/app/common.py

@@ -14,11 +14,11 @@ def render_react_view(request, component_name=None, **url_props):
 
     :param request: Django request object to pass through
     :param component_name: name of the React component to render into the 'root' div
-                           of backend/templates/index.html
+                           of backend/templates/base.html
     :param url_props: props to pass into the React component, consumed from Django's url parser
     :return:
     """
-    template = 'index.html'
+    template = 'base.html'
     context = {
         'component_name': component_name,
         'props': url_props,

backend/app/views.py

@@ -1,19 +1,66 @@
 """
-These view functions and classes implement API endpoints
+These view functions and classes implement both standard GET routes and API endpoints
 """
+
 from rest_framework.decorators import api_view
 from rest_framework.response import Response
+from django.shortcuts import render
 
-# from .models import ()
-# from .serializers import ()
 
 @api_view(['GET'])
 def example(request, example_id):
     """
     API example endpoint.
     """
+
     data = {
         'name': 'Example',
         'id': example_id,
     }
     return Response(data)
+
+
+def index(request):
+    """
+    Home page
+    """
+
+    context = {
+        'page_metadata': {
+            'title': 'Home page'
+        },
+    }
+
+    return render(request, 'index.html', context)
+
+
+def example(request):
+    """
+    Example page
+    """
+
+    context = {
+        'page_metadata': {
+            'title': 'Example page'
+        },
+    }
+
+    return render(request, 'index.html', context)
+
+
+def example_id(request, example_id):
+    """
+    Example ID page
+    """
+
+    context = {
+        'page_metadata': {
+            'title': 'Example ID page'
+        },
+        'app_data': {
+            'id': example_id
+        },
+        'app_component': 'ExampleId'
+    }
+
+    return render(request, 'index.html', context)

backend/config/settings/base.py

@@ -153,7 +153,7 @@
 # Django webpack loader settings
 WEBPACK_LOADER = {
     'DEFAULT': {
-        'BUNDLE_DIR_NAME': 'bundles/',
+        'BUNDLE_DIR_NAME': './assets/bundles/',
         'STATS_FILE': os.path.join(PROJECT_ROOT, 'webpack-stats.json'),
     }
 }

backend/config/urls.py

@@ -17,31 +17,18 @@
 from django.contrib import admin
 from django.urls import path
 
-from app.common import render_react_view
-from app.views import (
-    example,
-)
-
-
-def react_view_path(route, component_name):
-    """ Convenience function for React views """
-    return path(
-        route,
-        render_react_view,
-        {
-            'component_name': component_name,
-        },
-    )
+from app import views
 
 
 urlpatterns = [
     # Django admin page
     path('admin/', admin.site.urls),
 
     # API endpoints
-    path('api/example/<int:example_id>', example),
+    path('api/example/<int:example_id>', views.example),
 
     # View paths
-    react_view_path('', 'IndexView'),
-    react_view_path('example/<int:exampleId>', 'ExampleView'),
+    path('', views.index, name='index'),
+    path('example', views.example, name='example'),
+    path('example/<int:example_id>', views.example_id, name='example_id'),
 ]

backend/templates/index.html

@@ -4,33 +4,20 @@
 <html lang="en">
     <head>
         <meta charset="utf-8" />
-        <title>Lang Learn</title>
+        <title>{page_metadata['title']}</title>
         <link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon">
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <meta name="theme-color" content="#000000" />
+        {% render_bundle 'index' 'css' %}
     </head>
     <body>
         <noscript>You need to enable JavaScript to run this app.</noscript>
-        <div id="root"></div>
-        {% render_bundle 'undefined' %}
-        {% render_bundle 'runtime~main' %}
-        {% render_bundle 'main' %}
-        <script>
-            // NOTE(ra): what follows is a use of the Django templating engine
-            //           to inject variable names into JavaScript. This confuses PyCharm,
-            //           which thinks this is a plain HTML/JS file.
-            const ReactDOM = window.app_modules.ReactDOM;
-            const React = window.app_modules.React;
-            const {{ component_name }} = window.app_modules.{{ component_name }};
-            const react_el = React.createElement(
-                {{ component_name }},
-                {{ props|safe }},
-            );
-            ReactDOM.render(
-                react_el,
-                document.getElementById('root')
-            );
-        </script>
-    </body>
-</html>
+        <div id="app_root">
+            <p>Loading...</p>
+        </div>
 
+        {{app_data|json_script:"app_data"}}
+        {{app_component|json_script:"app_component"}}
+        {% render_bundle 'index' 'js' %}
+    </body>
+</html>