Add a custom StatusFilePlugin for webpack.

The plugin creates a file that says whether webpack is running, has succeeded,
or has failed. front.py reads the file and waits for the build to finish if
it's currently in progress.

This is essentially a custom substitute for webpack-dev-server. We could use
that instead, but I couldn't find a way to configure it to do what I want.
webpack-dev-server has two modes: inline mode and iframe mode. In inline mode,
it injects its own client library into every bundle. This is a problem for Votr
since we load both prologue.?.js and votr.?.js on every page. In iframe mode,
they are separated into different frames, but the server on being on top and
putting Votr in the iframe, not vice versa. When Votr navigates to another URL
or changes the page title, the user won't see. There might be a third option to
load /webpack-dev-server.js as a separate script in front.py, but it is not
documented anywhere. The documentation is lacking in general.

It's also arguable if we even want automatic refresh after every rebuild, when
AIS requests can take so long. Hot module reloading could solve that, but it's
also more difficult to configure. We can take another look later.

Author: TomiBelan

votrfront/front.py

@@ -1,6 +1,7 @@
 
 import os
 import json
+import time
 import traceback
 from werkzeug.routing import Rule
 from werkzeug.wrappers import Response
@@ -67,6 +68,21 @@ def app_response(request, **my_data):
     if 'csrf_token' not in my_data:
         my_data['servers'] = request.app.settings.servers
 
+    for i in range(60):
+        try:
+            with open(static_path + 'status') as f:
+                status = f.read().strip()
+        except FileNotFoundError:
+            return Response('Missing static files.', status=500)
+        if status != 'busy':
+            break
+        time.sleep(0.1)
+    else:
+        return Response('Timed out waiting for webpack.', status=500)
+
+    if status == 'failed':
+        return Response('Webpack build failed.', status=500)
+
     if not os.path.exists(static_path + 'ok'):
         return Response('buildstatic failed!', status=500)
 

webpack.config.js

@@ -32,6 +32,33 @@ function importerWhichRewritesBootstrapNormalizeScss(url, prev, done) {
 
 const outputPath = __dirname + '/votrfront/static';
 
+// A plugin which writes the current status to votrfront/static/status.
+// - "busy" during compilation
+// - "failed" on errors
+// - "ok_dev" or "ok_prod" on success
+// votrfront/front.py reads the status to check if it can serve the page.
+function StatusFilePlugin(mode) {
+  this.apply = function(compiler) {
+    function writeStatus(content, callback) {
+      fs.mkdir(outputPath, function (err) {
+        if (err && err.code != 'EEXIST') return callback(err);
+        fs.writeFile(outputPath + '/status', content + '\n', 'utf8', callback);
+      });
+    }
+
+    function handleRunEvent(compilationParams, callback) {
+      writeStatus('busy', callback);
+    }
+
+    compiler.hooks.run.tapAsync('StatusFilePlugin', handleRunEvent);
+    compiler.hooks.watchRun.tapAsync('StatusFilePlugin', handleRunEvent);
+    compiler.hooks.done.tapAsync('StatusFilePlugin', (stats, callback) => {
+      const status = stats.compilation.errors.length ? 'failed' : 'ok_' + mode;
+      writeStatus(status, callback);
+    });
+  };
+}
+
 module.exports = function (env, args) {
   const mode = args.mode;
 
@@ -47,6 +74,7 @@ module.exports = function (env, args) {
     },
     plugins: [
       new MiniCssExtractPlugin({ filename: 'style.css' }),
+      new StatusFilePlugin(mode == 'development' ? 'dev' : 'prod'),
     ],
     module: {
       rules: [