Use web server for renderer content in development

Third party devtools can't be loaded on `file://` URLs due to an issue
in Electron. Using a web server locally works around that issue.

1 files changed, 40 insertions, 0 deletions

diff --git a/gui/tasks/dev-server.js b/gui/tasks/dev-server.js
new file mode 100644
index 0000000000..067174ab17
--- /dev/null
+++ b/gui/tasks/dev-server.js
@@ -0,0 +1,40 @@
+const serverFactory = require('spa-server');
+
+function startWebServer(done) {
+  serverFactory
+    .create({
+      path: './build',
+      port: 8080,
+      middleware: [correctWorkingDirectory],
+    })
+    .start(done);
+}
+
+function correctWorkingDirectory(request, response, next) {
+  if (request.url === '/src/renderer/index.js') {
+    const write = response.write.bind(response);
+    response.write = (data) => {
+      let s = data.toString();
+
+      // Add code that changes to the correct working directory after `"use strict";` which is
+      // located on the first line of the source file.
+      const index = s.indexOf('\n');
+
+      if (index !== -1) {
+        const insertionIndex = index + 1;
+        s =
+          s.slice(0, insertionIndex) +
+          'try{process.chdir("build/src/renderer")}catch(e){}\n' +
+          s.slice(insertionIndex);
+      }
+
+      write(s);
+    };
+  }
+
+  next();
+}
+
+startWebServer.displayName = 'start-dev-server';
+
+exports.start = startWebServer;