added webserver config setting for `enableCatchAll` that allows for all non-static routes to be captured and sent to index.html for react route processing.

allowed backend tab to be accessible from `/embark`, `/backend`, and `/admin`

added contracts apis to support intended functionality in the backend tab

starting webserver service with plugins passed in to get api registrations

added filesystem methods for reading directories

removed duplicate method in plugin.js

updated avatar for backend tab (did not exist in SCM)

updated compiled contract properties for display (maybe they've changed)

updated console command to get web3 host

lib/core/config.js

@@ -309,7 +309,7 @@ Config.prototype.loadCommunicationConfigFile = function() {
 
 Config.prototype.loadWebServerConfigFile = function() {
   var configObject = {
-    "enabled": true, "host": "localhost", "port": 8000
+    "enabled": true, "host": "localhost", "port": 8000, "enableCatchAll": true
   };
 
   let configFilePath = this._getFileOrOject(this.configDir, 'webserver', 'webserver');

lib/core/fs.js

@@ -91,6 +91,14 @@ function tmpDir() {
   return utils.joinPath(os.tmpdir(), ...arguments);
 }
 
+function readdirSync() {
+  return fs.readdirSync.apply(fs.readdirSync, arguments);
+}
+
+function readdir() {
+  return fs.readdir.apply(fs.readdirSync, arguments);
+}
+
 module.exports = {
   mkdirpSync,
   mkdirp,
@@ -111,5 +119,7 @@ module.exports = {
   embarkPath,
   dappPath,
   createWriteStream,
-  tmpDir
+  tmpDir,
+  readdirSync,
+  readdir
 };

lib/core/plugin.js

@@ -208,7 +208,7 @@ Plugin.prototype.registerActionForEvent = function(eventName, cb) {
 Plugin.prototype.registerAPICall = function(method, endpoint, cb) {
   console.dir("registerAPICall " + method + " " + endpoint);
   this.apiCalls.push({method: method, endpoint: endpoint, cb: cb});
-  this.pluginTypes.push('apiCalls');
+  this.addPluginType('apiCalls');
 };
 
 Plugin.prototype.runFilePipeline = function() {

lib/modules/webserver/backend/contracts/view.html

@@ -112,7 +112,7 @@
                 </div>
                 <div class="dropdown">
                   <a href="#" class="nav-link pr-0" data-toggle="dropdown">
-                    <span class="avatar" style="background-image: url(./demo/faces/female/25.jpg)"></span>
+                    <span class="avatar" style="background-image: url(../assets/images/dade.jpg)"></span>
                     <span class="ml-2 d-none d-lg-block">
                       <span class="text-default">Dade Murphy</span>
                     </span>

lib/modules/webserver/backend/contracts/view.js

@@ -7,7 +7,7 @@ let host;
 fetch("/embark/console", {
     method: "POST",
     headers: { 'content-type' : 'application/x-www-form-urlencoded; charset=UTF-8' },
-    body: "cmd=web3.currentProvider.host"
+    body: "cmd=web3.currentProvider.web3Endpoint"
     })
 .then(response => response.text())
 .then(text => {
@@ -21,6 +21,7 @@ fetch("/embark/console", {
     })
 .then(response => response.text())
 .then(contractSource => {
+    console.log('host from console command = ' + host);
     const web3 = new Web3(host);
     window.web3 = web3;
 

lib/modules/webserver/backend/index.html

@@ -85,7 +85,7 @@
                 </div>
                 <div class="dropdown">
                   <a href="#" class="nav-link pr-0" data-toggle="dropdown">
-                    <span class="avatar" style="background-image: url(./demo/faces/female/25.jpg)"></span>
+                    <span class="avatar" style="background-image: url(./assets/images/dade.jpg)"></span>
                     <span class="ml-2 d-none d-lg-block">
                       <span class="text-default">Dade Murphy</span>
                     </span>
@@ -261,21 +261,21 @@
 
                   if (contract.deploy === false) {
                     $tr.append(
-                        $(`<td><a href="contracts/view.html?${contract.name}">${contract.name}</a>`),
+                        $(`<td><a href="contracts/view.html?${contract.className}">${contract.className}</a>`),
                         $('<td>').text('Interface or set to not deploy'),
                         $('<td>').text('n/a'),
                         );
                   } else if (contract.error) {
                     $tr.append(
-                        $(`<td><a href="contracts/view.html?${contract.name}">${contract.name}</a>`),
+                        $(`<td><a href="contracts/view.html?${contract.className}">${contract.className}</a>`),
                         $('<td>').text((contract.error).split("\n")[0].replace(/Error: /g, '').substring(0, 32)),
                         $('<td>').text('Error'),
                         );
                   } else {
                     $tr.append(
-                        $(`<td><a href="contracts/view.html?${contract.name}">${contract.name}</a>`),
+                        $(`<td><a href="contracts/view.html?${contract.className}">${contract.className}</a>`),
-                        $('<td>').text(contract.address || '...'),
+                        $('<td>').text(contract.deployedAddress || '...'),
-                        $('<td>').text(contract.address !== undefined ? 'Deployed' : 'Pending')
+                        $('<td>').text(contract.deployedAddress !== undefined ? 'Deployed' : 'Pending')
                         );
                   }
 

lib/modules/webserver/index.js

@@ -15,10 +15,11 @@ class WebServer {
 
     this.host = options.host || this.webServerConfig.host;
     this.port = options.port || this.webServerConfig.port;
+    this.enableCatchAll = this.webServerConfig.enableCatchAll === true;
 
     this.events.emit("status", __("Starting Server"));
     //this.server = new Server({logger: this.logger, host: this.host, port: this.port, events: this.events});
-    this.server = new Server({logger: this.logger, host: this.host, port: this.port, events: this.events, plugins: this.plugins});
+    this.server = new Server({logger: this.logger, host: this.host, port: this.port, events: this.events, plugins: this.plugins, enableCatchAll: this.enableCatchAll});
 
     this.setServiceCheck();
     this.listenToCommands();

lib/modules/webserver/server.js

@@ -1,11 +1,8 @@
-let finalhandler = require('finalhandler');
-let http = require('http');
-let serveStatic = require('serve-static');
 require('http-shutdown').extend();
-var express = require('express');
+const express = require('express');
-let path = require('path');
+const path = require('path');
-var expressWebSocket = require('express-ws');
+const expressWebSocket = require('express-ws');
-var bodyParser = require('body-parser');
+const bodyParser = require('body-parser');
 const fs = require('../../core/fs');
 
 class Server {
@@ -16,6 +13,7 @@ class Server {
     this.hostname = options.host || 'localhost';
     this.logger = options.logger;
     this.plugins = options.plugins;
+    this.enableCatchAll = options.enableCatchAll;
   }
 
   start(callback) {
@@ -27,51 +25,49 @@ class Server {
       }
       return;
     }
-    let serve = serveStatic(this.dist, {'index': ['index.html', 'index.htm']});
 
     var app = express();
 
     app.use(serve);
     //app.use('/embark', serveStatic(path.join(__dirname, 'backend'), {'backend': ['index.html', 'index.htm']}));
     //app.use('/backend', serveStatic(path.join(__dirname, 'backend'), {'backend': ['index.html', 'index.htm']}));
-    app.get('/embark', function (req, res) {
+    //app.get('/embark', function (req, res) {
-      res.sendFile(path.join(__dirname, 'backend', 'index.html'));
+    //  res.sendFile(path.join(__dirname, 'backend', 'index.html'));
-    });
+    //});
 
-    app.use(bodyParser.json()); // support json encoded bodies
+    // support static files
-    app.use(bodyParser.urlencoded({extended: true})); // support encoded bodies
+    app.use(express.static(path.join(fs.dappPath(this.dist)), {'index': ['index.html', 'index.htm']}));
+    app.use(['/embark', '/backend', '/admin'], express.static(path.join(__dirname, 'backend'), {'index': ['index.html', 'index.htm']})); // mount the sub app
 
+    // support json encoded bodies
+    app.use(bodyParser.json()); 
+
+    // support encoded bodies
+    app.use(bodyParser.urlencoded({extended: true}));
+
+    // support websockets
     expressWebSocket(app);
 
     if (self.plugins){
       let apiCalls = self.plugins.getPluginsProperty("apiCalls", "apiCalls");
       for (let apiCall of apiCalls) {
-        app[apiCall.method].apply(app, [apiCall.endpoint, apiCall.cb]);
+        app[apiCall.method](apiCall.endpoint, apiCall.cb);
+        this.logger.trace(`webserver> registered api call ${apiCall.method.toUpperCase()} ${apiCall.endpoint}`);
       }
     }
 
-    // app.get('/embark', function (req, res) {
+    // catchall to support react routing
-    //   res.send('Welcome to Embark');
+    if(this.enableCatchAll === true){
-    // });
+      app.get('/*', function (req, res) {
-
+        self.logger.trace('webserver> GET ' + req.path);
-    // support react routes
+        res.sendFile(path.join(fs.dappPath(self.dist, 'index.html')));
-    // suggested changes from https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#serving-apps-with-client-side-routing
+      });
-    app.use(express.static(path.join(fs.dappPath(this.dist))));
+    }
-    app.get('/*', function (req, res) {
-      res.sendFile(path.join(fs.dappPath(self.dist, 'index.html')));
-    });
 
     app.listen(this.port);
 
-    //this.logger.info(__("webserver available at") + " " + ("http://" + this.hostname + ":" + this.port).bold.underline.green);
+    this.logger.info("webserver available at " + ("http://" + this.hostname + ":" + this.port).bold.underline.green);
-    //this.server.listen(this.port, this.hostname);
 
-    //this.server = http.createServer(function onRequest(req, res) {
-    //  serve(req, res, finalhandler(req, res));
-    //}).withShutdown();
-
-    //this.logger.info("webserver available at " + ("http://" + this.hostname + ":" + this.port).bold.underline.green);
-    //this.server.listen(this.port, this.hostname);
     if (callback) {
       callback();
     }