Packaging / development improvements (#4710)

* * Package reporting plugins separately into another bundle to reduce main bundle size
* Use moment timezone webpack plugin to load less time zone data
* When server is run in development mode, hot reload code changes without restart

* Run code through a linter when in dev mode

* Remove a couple unnecessary logging lines

* Fix tests

.nvmrc

@@ -1 +1 @@
-8.x
+10.15.2

CONTRIBUTING.md

@@ -54,6 +54,10 @@ We develop on the `dev` branch. All new pull requests should be targeted to `dev
 
 You can get the dev branch checked out using `git checkout dev`.
 
+Once checked out, install the dependencies using `npm install`, then copy the included `my.env.template`file to `my.env` and edit the file to include your settings (like the Mongo URL). Leave the `NODE_ENV=development` line intact. Once set, run the site using `npm run dev`. This will start Nigthscout in the development mode, with different code packaging rules and automatic restarting of the server using nodemon, when you save changed files on disk. The client also hot-reloads new code in, but it's recommended to reload the the website after changes due to the way the plugin sandbox works.
+
+If you want to additionaly test the site in production mode, create a file called `my.prod.env` that's a copy of the dev file but with `NODE_ENV=production` and start the site using `npm run prod`.
+
 ## Style Guide
 
 Some simple rules that will make it easier to maintain our codebase:

README.md

@@ -164,6 +164,10 @@ SCM_COMMAND_IDLE_TIMEOUT=300
 - See [install MongoDB, Node.js, and Nightscouton a single Windows system](https://github.com/jaylagorio/Nightscout-on-Windows-Server). if you want to host your Nightscout outside of the cloud. Although the instructions are intended for Windows Server the procedure is compatible with client versions of Windows such as Windows 7 and Windows 10.
 - If you deploy to Windows and want to develop or test you need to install [Cygwin](https://www.cygwin.com/) (use [setup-x86_64.exe](https://www.cygwin.com/setup-x86_64.exe) and make sure to install `build-essential` package. Test your configuration by executing `make` and check if all tests are ok. 
 
+# Development
+
+Wanna help with development, or just see how Nigthscout works? Great! See [CONTRIBUTING.md](CONTRIBUTING.md) for development related documentation.
+
 # Usage
 
 The data being uploaded from the server to the client is from a

app.js

@@ -84,7 +84,11 @@ function create(env, ctx) {
     app.engine('appcache', require('ejs').renderFile);
     app.set("views", path.join(__dirname, "views/"));
 
-    app.locals.cachebuster = fs.readFileSync(process.cwd() + '/tmp/cacheBusterToken').toString().trim();
+    let cacheBuster = 'developmentMode';
+    if (process.env.NODE_ENV !== 'development') {
+        cacheBuster = fs.readFileSync(process.cwd() + '/tmp/cacheBusterToken').toString().trim();
+    }
+    app.locals.cachebuster = cacheBuster;
 
     if (ctx.bootErrors && ctx.bootErrors.length > 0) {
         app.get('*', require('./lib/server/booterror')(ctx));
@@ -132,23 +136,23 @@ function create(env, ctx) {
     });
 
     var appPages = {
-        "/clock-color.html":"clock-color.html",
-        "/admin":"adminindex.html",
-        "/profile":"profileindex.html",
-        "/food":"foodindex.html",
-        "/bgclock.html":"bgclock.html",
-        "/report":"reportindex.html",
-        "/translations":"translationsindex.html",
-        "/clock.html":"clock.html"
+        "/clock-color.html": "clock-color.html",
+        "/admin": "adminindex.html",
+        "/profile": "profileindex.html",
+        "/food": "foodindex.html",
+        "/bgclock.html": "bgclock.html",
+        "/report": "reportindex.html",
+        "/translations": "translationsindex.html",
+        "/clock.html": "clock.html"
     };
 
-	Object.keys(appPages).forEach(function(page) {
-	        app.get(page, (req, res) => {
+    Object.keys(appPages).forEach(function (page) {
+        app.get(page, (req, res) => {
             res.render(appPages[page], {
                 locals: app.locals
             });
         });
-	});
+    });
 
     app.get("/appcache/*", (req, res) => {
         res.render("nightscout.appcache", {
@@ -168,28 +172,28 @@ function create(env, ctx) {
     app.get('/pebble', ctx.pebble);
 
     // expose swagger.json
-    app.get('/swagger.json', function(req, res) {
+    app.get('/swagger.json', function (req, res) {
         res.sendFile(__dirname + '/swagger.json');
     });
 
     // expose swagger.yaml
-    app.get('/swagger.yaml', function(req, res) {
+    app.get('/swagger.yaml', function (req, res) {
         res.sendFile(__dirname + '/swagger.yaml');
     });
 
 
-/*
-    if (env.settings.isEnabled('dumps')) {
-        var heapdump = require('heapdump');
-        app.get('/api/v2/dumps/start', function(req, res) {
-            var path = new Date().toISOString() + '.heapsnapshot';
-            path = path.replace(/:/g, '-');
-            console.info('writing dump to', path);
-            heapdump.writeSnapshot(path);
-            res.send('wrote dump to ' + path);
-        });
-    }
-*/
+    /*
+        if (env.settings.isEnabled('dumps')) {
+            var heapdump = require('heapdump');
+            app.get('/api/v2/dumps/start', function(req, res) {
+                var path = new Date().toISOString() + '.heapsnapshot';
+                path = path.replace(/:/g, '-');
+                console.info('writing dump to', path);
+                heapdump.writeSnapshot(path);
+                res.send('wrote dump to ' + path);
+            });
+        }
+    */
 
     //app.get('/package.json', software);
 
@@ -200,7 +204,7 @@ function create(env, ctx) {
         maxAge = 10;
         console.log('Development environment detected, setting static file cache age to 10 seconds');
 
-        app.get('/nightscout.appcache', function(req, res) {
+        app.get('/nightscout.appcache', function (req, res) {
             res.sendStatus(404);
         });
     }
@@ -221,12 +225,42 @@ function create(env, ctx) {
     // serve the static content
     app.use('/swagger-ui-dist', swaggerFiles);
 
+    // if this is dev environment, package scripts on the fly
+    // if production, rely on postinstall script to run packaging for us
+
+    app.locals.bundle = '/bundle';
+
+    if (process.env.NODE_ENV === 'development') {
+
+        console.log('Development mode');
+
+        app.locals.bundle = '/devbundle';
+
+        const webpack = require('webpack');
+        var webpack_conf = require('./webpack.config');
+        const middleware = require('webpack-dev-middleware');
+        const compiler = webpack(webpack_conf);
+
+        app.use(
+            middleware(compiler, {
+                // webpack-dev-middleware options
+                publicPath: webpack_conf.output.publicPath,
+                lazy: false
+            })
+        );
+
+        app.use(require("webpack-hot-middleware")(compiler, {
+            heartbeat: 1000
+        }));
+    }
+
+    // Production bundling
     var tmpFiles = express.static('tmp', {
         maxAge: maxAge
     });
 
     // serve the static content
-    app.use(tmpFiles);
+    app.use('/bundle', tmpFiles);
 
     if (process.env.NODE_ENV !== 'development') {
 
@@ -250,33 +284,11 @@ function create(env, ctx) {
 
     }
 
-    // if this is dev environment, package scripts on the fly
-    // if production, rely on postinstall script to run packaging for us
-
-    if (process.env.NODE_ENV === 'development') {
-
-        var webpack = require("webpack");
-        var webpack_conf = require('./webpack.config');
-
-        webpack(webpack_conf, function(err, stats) {
-
-            var json = stats.toJson() // => webpack --json
-
-            var options = {
-                noColor: true
-            };
-
-            console.log(prettyjson.render(json.errors, options));
-            console.log(prettyjson.render(json.assets, options));
-
-        });
-    }
-
     // Handle errors with express's errorhandler, to display more readable error messages.
     var errorhandler = require('errorhandler');
     //if (process.env.NODE_ENV === 'development') {
     app.use(errorhandler());
     //}
     return app;
 }
-module.exports = create;
+module.exports = create;

bundle/bundle.reports.source.js

@@ -0,0 +1,10 @@
+import './bundle.source';
+
+window.Nightscout.report_plugins = require('../lib/report_plugins/')();
+
+console.info('Nightscout report bundle ready');
+
+// Needed for Hot Module Replacement
+if(typeof(module.hot) !== 'undefined') {
+    module.hot.accept() // eslint-disable-line no-undef  
+  }

bundle/bundle.source.js

@@ -2,7 +2,6 @@ import '../static/css/drawer.css';
 import '../static/css/dropdown.css';
 import '../static/css/sgv.css';
 
-
 $ = require("jquery");
 
 require('jquery-ui-bundle');
@@ -26,8 +25,12 @@ window.Nightscout = window.Nightscout || {};
 window.Nightscout = {
     client: require('../lib/client'),
     units: require('../lib/units')(),
-    report_plugins: require('../lib/report_plugins/')(),
     admin_plugins: require('../lib/admin_plugins/')()
 };
 
-console.info('Nightscout bundle ready');
+console.info('Nightscout bundle ready');
+
+// Needed for Hot Module Replacement
+if(typeof(module.hot) !== 'undefined') {
+    module.hot.accept() // eslint-disable-line no-undef  
+  }

lib/data/calcdelta.js

@@ -108,7 +108,7 @@ module.exports = function calcDelta (oldData, newData) {
           // Calculate delta and assign delta over if changes were found
           var deltaData = (a === 'treatments' ? nsArrayTreatments(oldData[a], newData[a]) : nsArrayDiff(oldData[a], newData[a]));
           if (deltaData.length > 0) {
-            console.log('delta changes found on', a);
+            //console.log('delta changes found on', a);
             changesFound = true;
             sort(deltaData);
             delta[a] = deltaData;
@@ -129,7 +129,7 @@ module.exports = function calcDelta (oldData, newData) {
         var o = skippableObjects[object];
         if (newData.hasOwnProperty(o)) {
           if (JSON.stringify(newData[o]) !== JSON.stringify(oldData[o])) {
-            console.log('delta changes found on', o);
+            //console.log('delta changes found on', o);
             changesFound = true;
             delta[o] = newData[o];
           }

lib/data/dataloader.js

@@ -239,7 +239,6 @@ function loadTreatments(ddata, ctx, callback) {
         }
     };
 
-    console.log('searching treatments q', tq);
     ctx.treatments.list(tq, function(err, results) {
         if (!err && results) {
             mergeToTreatments(ddata, results);

lib/plugins/timeago.js

@@ -17,8 +17,6 @@ function init(ctx) {
 
   timeago.checkNotifications = function checkNotifications(sbx) {
 
-    console.log('timeago.checkNotifications');
-
     if (!sbx.extendedSettings.enableAlerts) {
       return;
     }