refacto(scipts): reorganized & support dev server

scripts/server-backend.js

@@ -1,60 +1,62 @@
-var PORT = 8080; //Set port for the app
+const { getArgs } = require("./utils");
-var accessToken = ""; //Can be set here or as start parameter (node server.js --accesstoken=MYTOKEN)
+const path = require("path");
-var disableSmallestScreen = false; //Can be set to true if you dont want to show (node server.js --disablesmallestscreen=true)
-var webdav = false; //Can be set to true if you want to allow webdav save (node server.js --webdav=true)
 
-var fs = require("fs-extra");
+function startBackendServer(port) {
-var express = require('express');
+    var accessToken = ""; //Can be set here or as start parameter (node server.js --accesstoken=MYTOKEN)
-var formidable = require('formidable'); //form upload processing
+    var disableSmallestScreen = false; //Can be set to true if you dont want to show (node server.js --disablesmallestscreen=true)
+    var webdav = false; //Can be set to true if you want to allow webdav save (node server.js --webdav=true)
     
-const createDOMPurify = require('dompurify'); //Prevent xss
+    var fs = require("fs-extra");
-const { JSDOM } = require('jsdom');
+    var express = require('express');
-const window = (new JSDOM('')).window;
+    var formidable = require('formidable'); //form upload processing
-const DOMPurify = createDOMPurify(window);
     
-const { createClient } = require("webdav");
+    const createDOMPurify = require('dompurify'); //Prevent xss
+    const { JSDOM } = require('jsdom');
+    const window = (new JSDOM('')).window;
+    const DOMPurify = createDOMPurify(window);
     
-var s_whiteboard = require("./s_whiteboard.js");
+    const { createClient } = require("webdav");
     
-var app = express();
+    var s_whiteboard = require("./s_whiteboard.js");
-app.use(express.static(__dirname + '/public'));
-var server = require('http').Server(app);
-server.listen(PORT);
-var io = require('socket.io')(server);
-console.log("Webserver & socketserver running on port:" + PORT);
     
-if (process.env.accesstoken) {
+    var app = express();
+    app.use(express.static(path.join(__dirname, '..', 'public')));
+    var server = require('http').Server(app);
+    server.listen(port);
+    var io = require('socket.io')(server, {path: "/ws-api", });
+    console.log("Webserver & socketserver running on port:" + port);
+    if (process.env.accesstoken) {
         accessToken = process.env.accesstoken;
-}
+    }
-if (process.env.disablesmallestscreen) {
+    if (process.env.disablesmallestscreen) {
         disablesmallestscreen = true;
-}
+    }
-if (process.env.webdav) {
+    if (process.env.webdav) {
         webdav = true;
-}
+    }
     
-var startArgs = getArgs();
+    var startArgs = getArgs();
-if (startArgs["accesstoken"]) {
+    if (startArgs["accesstoken"]) {
         accessToken = startArgs["accesstoken"];
-}
+    }
-if (startArgs["disablesmallestscreen"]) {
+    if (startArgs["disablesmallestscreen"]) {
         disableSmallestScreen = true;
-}
+    }
-if (startArgs["webdav"]) {
+    if (startArgs["webdav"]) {
         webdav = true;
-}
+    }
     
-if (accessToken !== "") {
+    if (accessToken !== "") {
         console.log("AccessToken set to: " + accessToken);
-}
+    }
-if (disableSmallestScreen) {
+    if (disableSmallestScreen) {
         console.log("Disabled showing smallest screen resolution!");
-}
+    }
-if (webdav) {
+    if (webdav) {
         console.log("Webdav save is enabled!");
-}
+    }
     
-app.get('/loadwhiteboard', function (req, res) {
+    app.get('/api/loadwhiteboard', function (req, res) {
         var wid = req["query"]["wid"];
         var at = req["query"]["at"]; //accesstoken
         if (accessToken === "" || accessToken == at) {
@@ -65,9 +67,9 @@ app.get('/loadwhiteboard', function (req, res) {
             res.status(401);  //Unauthorized
             res.end();
         }
-});
+    });
     
-app.post('/upload', function (req, res) { //File upload
+    app.post('/api/upload', function (req, res) { //File upload
         var form = new formidable.IncomingForm(); //Receive form
         var formData = {
             files: {},
@@ -107,9 +109,9 @@ app.post('/upload', function (req, res) { //File upload
             //End file upload
         });
         form.parse(req);
-});
+    });
     
-function progressUploadFormData(formData, callback) {
+    function progressUploadFormData(formData, callback) {
         console.log("Progress new Form Data");
         var fields = escapeAllContentStrings(formData.fields);
         var files = formData.files;
@@ -161,9 +163,9 @@ function progressUploadFormData(formData, callback) {
                 console.log("No image Data found for this upload!", name);
             }
         });
-}
+    }
     
-function saveImageToWebdav(imagepath, filename, webdavaccess, callback) {
+    function saveImageToWebdav(imagepath, filename, webdavaccess, callback) {
         if (webdavaccess) {
             var webdavserver = webdavaccess["webdavserver"] || "";
             var webdavpath = webdavaccess["webdavpath"] || "/";
@@ -189,10 +191,10 @@ function saveImageToWebdav(imagepath, filename, webdavaccess, callback) {
         } else {
             callback("Error: no access data!")
         }
-}
+    }
     
-var smallestScreenResolutions = {};
+    var smallestScreenResolutions = {};
-io.on('connection', function (socket) {
+    io.on('connection', function (socket) {
         var whiteboardId = null;
     
         socket.on('disconnect', function () {
@@ -246,10 +248,10 @@ io.on('connection', function (socket) {
             }
             io.to(whiteboardId).emit('updateSmallestScreenResolution', { w: smallestWidth, h: smallestHeight });
         }
-});
+    });
     
-//Prevent cross site scripting (xss)
+    //Prevent cross site scripting (xss)
-function escapeAllContentStrings(content, cnt) {
+    function escapeAllContentStrings(content, cnt) {
         if (!cnt)
             cnt = 0;
     
@@ -264,30 +266,12 @@ function escapeAllContentStrings(content, cnt) {
             }
         }
         return content;
-}
-
-function getArgs() {
-    const args = {}
-    process.argv
-        .slice(2, process.argv.length)
-        .forEach(arg => {
-            // long arg
-            if (arg.slice(0, 2) === '--') {
-                const longArg = arg.split('=')
-                args[longArg[0].slice(2, longArg[0].length)] = longArg[1]
     }
-            // flags
-            else if (arg[0] === '-') {
-                const flags = arg.slice(1, arg.length).split('')
-                flags.forEach(flag => {
-                    args[flag] = true
-                })
-            }
-        })
-    return args
-}
     
-process.on('unhandledRejection', error => {
+    process.on('unhandledRejection', error => {
         // Will print "unhandledRejection err is not defined"
         console.log('unhandledRejection', error.message);
-})
+    })
+}
+
+module.exports = startBackendServer;

scripts/server-frontend-dev.js

@@ -0,0 +1,32 @@
+const webpack = require("webpack");
+const WebpackDevServer = require("webpack-dev-server");
+const config = require("../config/webpack.dev");
+
+const devServerConfig = {
+  hot: true,
+  inline: true,
+  stats: {
+    children: false,
+    maxModules: 0
+  },
+  proxy: {
+    '/api': 'http://localhost:3000',
+    '/ws-api': {
+      target: 'ws://localhost:3000',
+      ws: true,
+    }
+  }
+}
+
+function startFrontendDevServer(port) {
+  new WebpackDevServer(webpack(config), devServerConfig)
+    .listen(port, (err) => {
+      if (err) {
+        console.log(err);
+      }
+
+      console.log("Listening on port " + port);
+    });
+}
+
+module.exports = startFrontendDevServer;

scripts/server.js

@@ -0,0 +1,25 @@
+const { getArgs } = require("./utils");
+const startFrontendDevServer = require("./server-frontend-dev");
+const startBackendServer = require("./server-backend");
+
+const SERVER_MODES = {
+    PRODUCTION: 1,
+    DEVELOPMENT: 2
+}
+
+const args = getArgs();
+
+if ( typeof args.mode === "undefined" || (args.mode !== "production" && args.mode !== "development")) {
+    throw new Error("--mode=development or --mode=production is expected")
+}
+
+const server_mode = args.mode === "production" ? SERVER_MODES.PRODUCTION : SERVER_MODES.DEVELOPMENT;
+
+if (server_mode === SERVER_MODES.DEVELOPMENT){
+    console.info("Starting server in development mode.");
+    startFrontendDevServer(8080);
+    startBackendServer(3000);
+} else {
+    console.info("Starting server in production mode.");
+    startBackendServer(8080);
+}

scripts/utils.js

@@ -0,0 +1,22 @@
+function getArgs() {
+    const args = {}
+    process.argv
+        .slice(2, process.argv.length)
+        .forEach(arg => {
+            // long arg
+            if (arg.slice(0, 2) === '--') {
+                const longArg = arg.split('=')
+                args[longArg[0].slice(2, longArg[0].length)] = longArg[1]
+            }
+            // flags
+            else if (arg[0] === '-') {
+                const flags = arg.slice(1, arg.length).split('')
+                flags.forEach(flag => {
+                    args[flag] = true
+                })
+            }
+        })
+    return args
+}
+
+module.exports.getArgs = getArgs;