Merge pull request #324 from domino14/update-build-stack

Update build stack
domino14 · Jun 4, 2019 · 539576a · 539576a
2 parents 150d432 + cf5f7ed
commit 539576a
Show file tree

Hide file tree

Showing 19 changed files with 4,153 additions and 1,671 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -73,7 +73,7 @@ jobs:
       REPO: /opt/webolith
       SECRET_KEY: csw*nc9gznwuz)(w9&u#h_b2dp1%hzf_w#)%yrzwas%+v8ck_q
       # For collecting static files to later copy into Nginx. This
-      # dir must be in the context of the build, so inside the kubernetes dir.
+      # dir must be in the context of the build.
       STATIC_ROOT: /opt/webolith/static/webolith_static/
     docker:
       - image: domino14/webolith-base-pkg:py3-latest
@@ -152,7 +152,9 @@ workflows:
             - build_js
           filters:
             branches:
-              only: master
+              only:
+                - master
+                - staging
       - deploy:
           requires:
             - build_docker

diff --git a/babel.config.js b/babel.config.js
@@ -0,0 +1,17 @@
+module.exports = function (api) {
+  api.cache(true);
+
+  const presets = [
+    "@babel/preset-env",
+    "@babel/preset-react",
+  ];
+  const plugins = [
+    "@babel/plugin-proposal-object-rest-spread",
+    "@babel/plugin-proposal-class-properties",
+  ];
+
+  return {
+    presets,
+    plugins
+  };
+};
diff --git a/djAerolith/current_version.py b/djAerolith/current_version.py
diff --git a/djAerolith/djaerolith/settings.py b/djAerolith/djaerolith/settings.py
@@ -46,6 +46,8 @@ def tobool(val):
     ('Cesar Del Solar', '[email protected]'),
 )
 
+# If you want to disable the following, make sure to also take down
+# the webpack server entirely.
 USE_WEBPACK_DEV_SERVER = True
 WEBPACK_DEV_SERVER_URL = 'http://vm.aerolith.org'
 MANAGERS = ADMINS
@@ -138,7 +140,12 @@ def tobool(val):
     {
         'BACKEND': 'django.template.backends.django.DjangoTemplates',
         'APP_DIRS': True,
-        'DIRS': [os.path.join(PROJECT_ROOT, 'templates')],
+        'DIRS': [
+            os.path.join(PROJECT_ROOT, 'templates'),
+            # The following path is for dynamically generated templates
+            # (See webpack config).
+            os.path.join(PROJECT_ROOT, 'static', 'dist', 'templates'),
+        ],
         'OPTIONS': {
             'context_processors': [
                 'django.contrib.auth.context_processors.auth',

diff --git a/djAerolith/flashcards/templates/flashcards/index.html b/djAerolith/flashcards/templates/flashcards/index.html
@@ -8,10 +8,10 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
     <meta name="description" content="Aerolith Flashcards.">
     <meta name="author" content="Cesar Del Solar">
-    <link href="/static/css/flashcards/cards.css?v={{CURRENT_VERSION}}" rel="stylesheet">
+    <link href="/static/css/flashcards/cards.css" rel="stylesheet">
 
-    <link href="/static/lib/bootstrap/css/bootstrap-slate.min.css?v={{CURRENT_VERSION}}" rel="stylesheet">
-    <link href="/static/lib/tablesorter-theme.blackice.min.css?v={{CURRENT_VERSION}}" rel="stylesheet">
+    <link href="/static/lib/bootstrap/css/bootstrap-slate.min.css" rel="stylesheet">
+    <link href="/static/lib/tablesorter-theme.blackice.min.css" rel="stylesheet">
   </head>
 
   <body>
@@ -150,8 +150,9 @@ <h4 class="modal-title">Look up Word</h4>
         'quizzes': "{{savedLists|escapejs}}"
     };
     </script>
-    <script src="{{STATIC_SRV}}/static/dist/vendor.js?v={{CURRENT_VERSION}}"></script>
-    <script src="{{STATIC_SRV}}/static/dist/flashcardsapp.js?v={{CURRENT_VERSION}}"></script>
+
+    {% include "flashcards_dynamic/flashcards_include.html" %}
+
 
   </body>
 </html>
diff --git a/djAerolith/flashcards/views.py b/djAerolith/flashcards/views.py
@@ -5,7 +5,6 @@
 from django.shortcuts import render
 from django.conf import settings
 
-from current_version import CURRENT_VERSION
 from base.models import Lexicon, WordList
 from base.utils import generate_question_map, quizzes_response
 from lib.response import response
@@ -24,7 +23,6 @@ def main(request):
                   'numCards': 0,
                   'savedLists': json.dumps(quizzes_response(
                                            quizzes)),
-                  'CURRENT_VERSION': CURRENT_VERSION,
                   'STATIC_SRV': (
                       settings.WEBPACK_DEV_SERVER_URL if (
                           settings.USE_WEBPACK_DEV_SERVER and settings.DEBUG)

diff --git a/djAerolith/wordwalls/static/js/wordwalls/app.jsx b/djAerolith/wordwalls/static/js/wordwalls/app.jsx
@@ -38,7 +38,6 @@ class App {
         challengeInfo={options.challengeInfo}
         availableLexica={options.availableLexica}
         socketServer={options.socketServer}
-        appVersion={options.appVersion}
       />,
       document.getElementById('main-app-content'),
     );

diff --git a/djAerolith/wordwalls/static/js/wordwalls/index.js b/djAerolith/wordwalls/static/js/wordwalls/index.js
@@ -1,4 +1,6 @@
 /* global window */
+import 'bootstrap'; // Needed by the app, so load it here.
+
 import App from './app';
 import Utils from './utils';
 
@@ -16,7 +18,6 @@ App.initialize({
   defaultLexicon: window.TableGlobals.defaultLexicon,
   challengeInfo: JSON.parse(window.TableGlobals.challengeInfo),
   socketServer: window.TableGlobals.socketServer,
-  appVersion: window.TableGlobals.appVersion,
 });
 
 // Finally, initialize Intercom.

diff --git a/djAerolith/wordwalls/static/js/wordwalls/test/shim.js b/djAerolith/wordwalls/static/js/wordwalls/test/shim.js
@@ -1,4 +1,7 @@
 // Shim requestAnimationFrame to get rid of a warning.
+import '@babel/polyfill'; // Need polyfill for tests to pass.
+
 global.requestAnimationFrame = (callback) => {
   setTimeout(callback, 0);
 };
+
diff --git a/djAerolith/wordwalls/static/js/wordwalls/wordwalls_app_container.jsx b/djAerolith/wordwalls/static/js/wordwalls/wordwalls_app_container.jsx
@@ -134,16 +134,21 @@ class WordwallsAppContainer extends React.Component {
     if (!game.answerExists(modifiedGuess)) {
       // If the guess wasn't valid, don't bother submitting it to
       // the server.
+      // console.log('not valid');
       if (game.originalAnswerExists(modifiedGuess)) {
+        // console.log('original answer exists')
         this.setState({
           lastGuessCorrectness: GuessEnum.ALREADYGUESSED,
         });
       } else {
+        // console.log('does not exist')
         if (game.markPotentialIncorrectGuess(modifiedGuess)) {
+          // console.log('game.markpotentialincorrectguess')
           this.setState(state => ({
             wrongAnswers: state.wrongAnswers + 1,
           }));
         }
+        // console.log('setting to incorrect')
         this.setState({
           lastGuessCorrectness: GuessEnum.INCORRECT,
         });

diff --git a/djAerolith/wordwalls/static/js/wordwalls/wordwalls_game.js b/djAerolith/wordwalls/static/js/wordwalls/wordwalls_game.js
@@ -193,7 +193,8 @@ class Game {
     if (!question) {
       return false;
     }
-
+    // console.log('found question!!', question);
+    // console.log('updating in', this.origQuestions);
     this.origQuestions = this.origQuestions.update(question, (aObj) => {
       const newObj = aObj.set('wrongGuess', true);
       return newObj;

diff --git a/djAerolith/wordwalls/templates/wordwalls/table.html b/djAerolith/wordwalls/templates/wordwalls/table.html
@@ -29,8 +29,8 @@
   <title>{% if tablenum %}WordWalls - table {{tablenum}}{% else %}Wordwalls - Create Table{% endif %}</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0,  maximum-scale=1, user-scalable=no">
 
-  <link href="/static/lib/bootstrap.min.css?v={{CURRENT_VERSION}}" rel="stylesheet">
-  <link href="/static/lib/bootstrap-datepicker-1.6.4.min.css?v={{CURRENT_VERSION}}" rel="stylesheet">
+  <link href="/static/lib/bootstrap.min.css" rel="stylesheet">
+  <link href="/static/lib/bootstrap-datepicker-1.6.4.min.css" rel="stylesheet">
   <style>
   @media (min-width: 768px) {
     .modal .modal-xl {
@@ -84,8 +84,7 @@
     defaultLexicon: {{default_lexicon}},
     challengeInfo: '{{challenge_info|escapejs}}',
     user: '{{ user | escapejs }}',
-    intercomAppID: '{{intercom_app_id}}',
-    appVersion: '{{CURRENT_VERSION}}'
+    intercomAppID: '{{intercom_app_id}}'
   };
 </script>
 
@@ -101,8 +100,7 @@
 <div id="fade"></div>
 <div id="infoDialog" title=""></div>
 
-<script src="{{STATIC_SRV}}/static/dist/vendor.js?v={{CURRENT_VERSION}}"></script>
-<script src="{{STATIC_SRV}}/static/dist/wordwallsapp.js?v={{CURRENT_VERSION}}"></script>
+{% include "wordwalls_dynamic/wordwalls_include.html" %}
 
 </body>
 </html>
diff --git a/djAerolith/wordwalls/views.py b/djAerolith/wordwalls/views.py
@@ -45,7 +45,6 @@
 import wordwalls.settings
 from lib.response import response, StatusCode
 from base.utils import get_alphas_from_words, UserListParseException
-from current_version import CURRENT_VERSION
 from wordwalls.challenges import toughies_challenge_date
 
 logger = logging.getLogger(__name__)
@@ -92,7 +91,6 @@ def table(request, tableid=None):
          'user': json.dumps(usermeta),
          'addParams': json.dumps(params),
          'avatarUrl': profile.avatarUrl,
-         'CURRENT_VERSION': CURRENT_VERSION,
          'lexicon': wgm.lexicon.lexiconName if wgm else None,
          'default_lexicon': profile.defaultLexicon.pk,
          'challenge_info': json.dumps(meta_info['challenge_info']),

diff --git a/flashcards_include_template.html b/flashcards_include_template.html
@@ -0,0 +1,5 @@
+<% for (var jsfile in htmlWebpackPlugin.files.js) { %>
+    <% if (htmlWebpackPlugin.files.js[jsfile].indexOf('flashcardsapp') !== -1) { %>
+    <script src="{{STATIC_SRV}}<%= htmlWebpackPlugin.files.js[jsfile] %>"></script>
+    <% } %>
+<% } %>
diff --git a/package.json b/package.json
@@ -20,15 +20,15 @@
     "prod:build": "rimraf djAerolith/static/dist && webpack --progress --config webpack.config-prod.babel.js"
   },
   "devDependencies": {
-    "babel-cli": "^6.26.0",
-    "babel-core": "^6.26.0",
-    "babel-jest": "^21.2.0",
-    "babel-loader": "^7.1.2",
-    "babel-plugin-transform-class-properties": "^6.24.1",
-    "babel-plugin-transform-object-rest-spread": "^6.26.0",
-    "babel-preset-env": "^1.6.0",
-    "babel-preset-react": "^6.24.1",
-    "compression-webpack-plugin": "^1.0.1",
+    "@babel/cli": "^7.4.4",
+    "@babel/core": "^7.4.5",
+    "@babel/plugin-proposal-class-properties": "^7.4.4",
+    "@babel/plugin-proposal-object-rest-spread": "^7.4.4",
+    "@babel/preset-env": "^7.4.5",
+    "@babel/preset-react": "^7.0.0",
+    "@babel/register": "^7.4.4",
+    "babel-loader": "^8.0.6",
+    "compression-webpack-plugin": "^2.0.0",
     "css-loader": "^0.25.0",
     "enzyme": "^3.3.0",
     "enzyme-adapter-react-16": "^1.1.1",
@@ -39,10 +39,10 @@
     "eslint-plugin-jsx-a11y": "^6.0.2",
     "eslint-plugin-react": "^7.4.0",
     "exports-loader": "^0.6.4",
-    "extract-text-webpack-plugin": "^3.0.1",
     "file-loader": "^0.9.0",
+    "html-webpack-plugin": "^3.2.0",
     "imports-loader": "^0.7.1",
-    "jest": "^21.2.1",
+    "jest": "^24.8.0",
     "jshint": "^2.9.5",
     "less": "^2.7.1",
     "less-loader": "^2.2.3",
@@ -51,23 +51,15 @@
     "sinon": "^6.1.3",
     "style-loader": "^0.13.1",
     "text-loader": "^0.0.1",
+    "uglifyjs-webpack-plugin": "^2.1.3",
     "url-loader": "^0.5.7",
-    "webpack": "^3.6.0",
-    "webpack-dev-server": "^2.9.1",
+    "webpack": "^4.32.2",
+    "webpack-cli": "^3.3.2",
+    "webpack-dev-server": "^3.4.1",
     "webpack-stream": "^4.0.0"
   },
-  "babel": {
-    "presets": [
-      "env",
-      "react"
-    ],
-    "plugins": [
-      "transform-object-rest-spread",
-      "transform-class-properties"
-    ]
-  },
   "dependencies": {
-    "babel-polyfill": "^6.16.0",
+    "@babel/polyfill": "^7.4.4",
     "backbone": "^1.3.3",
     "bootbox": "^4.4.0",
     "bootstrap": "^3.3.7",

diff --git a/webpack.config-prod.babel.js b/webpack.config-prod.babel.js
@@ -7,10 +7,13 @@ import webpackDev from './webpack.config.babel';
 const webpack = require('webpack');
 const _ = require('underscore');
 const CompressionPlugin = require('compression-webpack-plugin');
+const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
 
 const prodConfig = _.defaults({
+  mode: 'production',
   output: {
-    filename: '[name].js',
+    filename: '[name].[contenthash].js',
     path: path.resolve(__dirname, 'djAerolith/static/dist/'),
     publicPath: '/static/dist/',
   },
@@ -19,20 +22,40 @@ const prodConfig = _.defaults({
       $: 'jQuery',
       jQuery: 'jquery',
     }),
-    new webpack.optimize.CommonsChunkPlugin({
-      name: 'vendor',
-      filename: 'vendor.js',
-    }),
     new webpack.DefinePlugin({
       'process.env': {
         // For minifying React correctly.
         NODE_ENV: JSON.stringify('production'),
       },
     }),
-    new webpack.optimize.UglifyJsPlugin(),
     new webpack.optimize.AggressiveMergingPlugin(),
     new CompressionPlugin(),
+    new webpack.HashedModuleIdsPlugin(),
+    // For wordwalls app:
+    new HtmlWebpackPlugin({
+      filename: path.resolve(__dirname, 'djAerolith/static/dist/templates/wordwalls_dynamic/wordwalls_include.html'),
+      inject: false,
+      template: path.resolve(__dirname, 'wordwalls_include_template.html'),
+    }),
+    // For flashcards app:
+    new HtmlWebpackPlugin({
+      filename: path.resolve(__dirname, 'djAerolith/static/dist/templates/flashcards_dynamic/flashcards_include.html'),
+      inject: false,
+      template: path.resolve(__dirname, 'flashcards_include_template.html'),
+    }),
   ],
+  optimization: {
+    minimizer: [new UglifyJsPlugin()],
+    splitChunks: {
+      cacheGroups: {
+        node_vendors: {
+          test: /[\\/]node_modules[\\/]/, // is backslash for windows?
+          chunks: 'all',
+          priority: 1,
+        },
+      },
+    },
+  },
 }, webpackDev);
 
 export default prodConfig;