Refactor to make sharing JS easier

Author: Pinpickle

gulpfile.js

@@ -28,7 +28,7 @@ gulp.task('clean', function () {
 
 // css
 gulp.task('styles', function () {
-  gulp.src('assets/styles/main.styl')
+  gulp.src('src/styles/main.styl')
     .pipe($.if(!prod, $.sourcemaps.init()))
     .pipe($.stylus({
       'include css': true,
@@ -47,7 +47,7 @@ gulp.task('scripts', function () {
     return browserify({
       entries: fileIn,
       debug: !prod,
-      paths: [path.dirname(fileIn), './']
+      paths: [path.dirname(fileIn), './src']
     })
     .transform('babelify', { presets: ['es2015'] })
     .bundle()
@@ -56,15 +56,15 @@ gulp.task('scripts', function () {
     .pipe(buffer());
   };
 
-  return gulpBrowserify('./assets/scripts/main.js', 'main.js')
+  return gulpBrowserify('./src/js/client/main.js', 'main.js')
     .pipe($.if(!prod, $.sourcemaps.init({ loadMaps: true })))
     .pipe($.if(prod, $.uglify()))
     .pipe($.if(!prod, $.sourcemaps.write()))
     .pipe(gulp.dest('assets/dist/scripts'))
     .pipe(bs.stream());;
 });
 
-var assetPath = ['assets/**', '!assets/scripts/**', '!assets/styles/**', '!assets/dist/**'];
+var assetPath = ['assets/**', '!assets/dist/**'];
 
 // other assets
 gulp.task('assets', function () {
@@ -88,19 +88,21 @@ gulp.task('wait', function (cb) {
 });
 
 gulp.task('watch', ['build'], function () {
-  gulp.watch(['assets/scripts/**', 'lib/**'], ['scripts']);
-  gulp.watch('assets/styles/**', ['styles']);
-  gulp.watch(['views/**', 'resources/**'], bs.reload)
+  gulp.watch(['src/js/**'], ['scripts']);
+  gulp.watch('src/styles/**', ['styles']);
+  gulp.watch(['src/views/**', 'src/resources/**'], bs.reload)
   gulp.watch(assetPath, ['assets']);
 });
 
 gulp.task('serve', ['watch'], function () {
-  var runnode = function (env) {
+  var runnode = function (env = {}) {
     nodemon({
       script: 'index.js',
       ext: 'js',
-      ignore: ['assets/**', 'gulpfile.js'],
-      env: env || { }
+      ignore: ['src/js/client/**', 'gulpfile.js'],
+      env: Object.assign({
+        NODE_PATH: './src',
+      }, env),
     });
   }
 
@@ -114,7 +116,9 @@ gulp.task('serve', ['watch'], function () {
       });
     });
   } else {
-    runnode();
+    runnode({
+      NODE_PATH: `${process.env.NODE_PATH}:./src`,
+    });
   }
 });
 

index.js

@@ -1,111 +1,5 @@
-'use strict';
-
 try {
   require('dotenv').load();
 } catch (e) { }
 
-var express = require('express');
-var nunjucks = require('nunjucks');
-var bodyParser = require('body-parser');
-var path = require('path');
-var fs = require('fs');
-var _ = require('lodash');
-var url = require('url');
-var querystring = require('querystring');
-var yaml = require('js-yaml');
-var crypto = require('crypto');
-var Countdown = require('./lib/countdown');
-var utils = require('./utils');
-var app = express();
-var server = require('http').Server(app);
-
-require('./sockets.js')(server);
-
-utils.init(app);
-
-// Static file serving
-var staticOptions = { };
-if (app.settings.env != 'development') {
-  staticOptions.maxAge = 60 * 60 * 365 * 1000;
-}
-app.use(require('compression')());
-app.use('/assets', express.static('assets/dist', staticOptions));
-
-// View rendering
-var nunjucksEnv = nunjucks.configure('views', {
-  autoescape: true,
-  noCache: app.settings.env == 'development',
-  express: app
-});
-
-app.locals.asset = utils.asset;
-app.locals.loadAsset = utils.loadAsset;
-app.locals.markdownResource = utils.loadMarkdown;
-
-if (process.env.BS_SNIPPET) {
-  app.locals.browserSync = process.env.BS_SNIPPET;
-}
-
-// Routes
-
-app.use(function(req, res, next) {
-  // Force https
-  if ((req.headers['x-forwarded-proto'] != 'https') && (process.env.FORCE_HTTPS == "1")) {
-    res.redirect('https://' + req.hostname + req.originalUrl);
-  } else {
-    next();
-  }
-});
-
-app.use('/api', require('./api'));
-
-app.use(function (req, res, next) {
-  res.locals.title = 'Hack Cambridge';
-  var port = (app.settings.env == "development") ? ':' + req.app.settings.port : '';
-  res.locals.requestedUrl = url.parse(
-    req.protocol + '://' + req.hostname + port + req.originalUrl
-  );
-  next();
-});
-
-function renderHome(req, res) {
-  res.render('index.html', {
-    faqs: utils.loadResource('faqs'),
-    sponsors: utils.loadResource('sponsors'),
-    countdown: Countdown.createStartCountdown()
-  });
-}
-
-app.get('/', renderHome);
-
-app.get('/terms', function (req, res) {
-  res.render('terms.html');
-});
-
-app.get('/privacy', function (req, res) {
-  res.render('privacy.html');
-});
-
-app.get('/pay', function (req, res) {
-  res.render('pay.html', {
-    title: 'Make a payment to Hack Cambridge',
-    stripeKey: process.env.STRIPE_PUBLISH_KEY
-  });
-});
-
-app.get('/favicon.ico', function (req, res) {
-  res.sendFile(path.join(__dirname, '/assets/images/favicon.ico'));
-});
-
-app.use((req, res) => {
-  res.status(404).render('404.html');
-});
-
-// Start server
-app.set('port', (process.env.PORT || 3000));
-
-module.exports = app;
-
-server.listen(app.get('port'), function() {
-  console.log('Node app is running on port', app.get('port'));
-});
+require('js/server/index');

package.json

@@ -5,7 +5,7 @@
   "main": "index.js",
   "scripts": {
     "test": "./node_modules/mocha/bin/mocha",
-    "start": "node index.js",
+    "start": "export NODE_PATH=$NODE_PATH:./src; node ./index",
     "postinstall": "gulp build"
   },
   "repository": {
@@ -18,7 +18,7 @@
     "url": "https://github.com/hackcambridge/hack-cambridge-website/issues"
   },
   "engines": {
-    "node": "4.2.4"
+    "node": "6.9.1"
   },
   "homepage": "https://github.com/hackcambridge/hack-cambridge-website#readme",
   "dependencies": {

assets/scripts/main.js renamed to src/js/client/main.js

@@ -1,5 +1,5 @@
 var $ = require('jquery');
-var Countdown = require('lib/countdown.js');
+var Countdown = require('js/shared/countdown.js');
 
 require('./polyfills')
 

assets/scripts/payment.js renamed to src/js/client/payment.js

@@ -0,0 +1,107 @@
+'use strict';
+
+var express = require('express');
+var nunjucks = require('nunjucks');
+var bodyParser = require('body-parser');
+var path = require('path');
+var fs = require('fs');
+var _ = require('lodash');
+var url = require('url');
+var querystring = require('querystring');
+var yaml = require('js-yaml');
+var crypto = require('crypto');
+var Countdown = require('js/shared/countdown');
+var utils = require('./utils');
+var app = express();
+var server = require('http').Server(app);
+
+require('./sockets.js')(server);
+
+utils.init(app);
+
+// Static file serving
+var staticOptions = { };
+if (app.settings.env != 'development') {
+  staticOptions.maxAge = 60 * 60 * 365 * 1000;
+}
+app.use(require('compression')());
+app.use('/assets', express.static(utils.resolvePath('assets/dist'), staticOptions));
+
+// View rendering
+var nunjucksEnv = nunjucks.configure(utils.resolvePath('src/views'), {
+  autoescape: true,
+  noCache: app.settings.env == 'development',
+  express: app
+});
+
+app.locals.asset = utils.asset;
+app.locals.loadAsset = utils.loadAsset;
+app.locals.markdownResource = utils.loadMarkdown;
+
+if (process.env.BS_SNIPPET) {
+  app.locals.browserSync = process.env.BS_SNIPPET;
+}
+
+// Routes
+
+app.use(function(req, res, next) {
+  // Force https
+  if ((req.headers['x-forwarded-proto'] != 'https') && (process.env.FORCE_HTTPS == "1")) {
+    res.redirect('https://' + req.hostname + req.originalUrl);
+  } else {
+    next();
+  }
+});
+
+app.use('/api', require('./api'));
+
+app.use(function (req, res, next) {
+  res.locals.title = 'Hack Cambridge';
+  var port = (app.settings.env == "development") ? ':' + req.app.settings.port : '';
+  res.locals.requestedUrl = url.parse(
+    req.protocol + '://' + req.hostname + port + req.originalUrl
+  );
+  next();
+});
+
+function renderHome(req, res) {
+  res.render('index.html', {
+    faqs: utils.loadResource('faqs'),
+    sponsors: utils.loadResource('sponsors'),
+    countdown: Countdown.createStartCountdown()
+  });
+}
+
+app.get('/', renderHome);
+
+app.get('/terms', function (req, res) {
+  res.render('terms.html');
+});
+
+app.get('/privacy', function (req, res) {
+  res.render('privacy.html');
+});
+
+app.get('/pay', function (req, res) {
+  res.render('pay.html', {
+    title: 'Make a payment to Hack Cambridge',
+    stripeKey: process.env.STRIPE_PUBLISH_KEY
+  });
+});
+
+app.get('/favicon.ico', function (req, res) {
+  res.sendFile(path.join(__dirname, '/assets/images/favicon.ico'));
+});
+
+app.use((req, res) => {
+  res.status(404).render('404.html');
+});
+
+// Start server
+app.set('port', (process.env.PORT || 3000));
+
+module.exports = app;
+
+server.listen(app.get('port'), function() {
+  console.log('Node app is running on port', app.get('port'));
+});

assets/scripts/polyfills.js renamed to src/js/client/polyfills.js

@@ -9,11 +9,14 @@ var markdown = require('markdown-it')({
   typographer: true
 }).use(require('markdown-it-attrs'));
 var nunjucks = require('nunjucks');
+const path = require('path');
 
 var loadedResources = {};
 var loadedMarkdowns = {};
 var app;
 
+const PROJECT_ROOT = path.resolve(path.join(__dirname, '../../../'));
+
 function timeProperties(items, properties) {
   items.forEach((item) => properties.forEach((prop) => item[prop] = moment.tz(item[prop], 'Europe/London')));
 }
@@ -27,10 +30,14 @@ exports.init = function init(a) {
   app = a;
 };
 
+exports.resolvePath = function resolvePath(fromProjectRoot) {
+  return path.join(PROJECT_ROOT, fromProjectRoot);
+}
+
 var assetsFile;
 
 try {
-  assetsFile = require('./assets/dist/rev-manifest.json');
+  assetsFile = require(exports.resolvePath('./assets/dist/rev-manifest.json'));
 } catch (e) {
   assetsFile = { };
 }
@@ -59,7 +66,9 @@ exports.loadAsset = function loadAsset(assetName) {
 
 exports.loadResource = function loadResource(resourceName) {
   if ((!loadedResources[resourceName]) || (app.settings.env == 'development')) {
-    var loadedResource = yaml.safeLoad(fs.readFileSync('./resources/' + resourceName + '.yml'))[resourceName];
+    var loadedResource = yaml.safeLoad(
+      fs.readFileSync(exports.resolvePath(`src/resources/${resourceName}.yml`))
+    )[resourceName];
 
     switch (resourceName) {
       case 'faqs':
@@ -107,7 +116,11 @@ exports.loadResource = function loadResource(resourceName) {
 
 exports.loadMarkdown = function loadMarkdown(markdownName) {
   if ((!loadedMarkdowns[markdownName]) || (app.settings.env == 'development')) {
-    var loadedMarkdown = nunjucks.runtime.markSafe(markdown.render(fs.readFileSync('./resources/' + markdownName + '.md', 'utf8')));
+    var loadedMarkdown = nunjucks.runtime.markSafe(
+      markdown.render(fs.readFileSync(exports.resolvePath(
+        `src/resources/${markdownName}.md`, 'utf8'
+      )))
+    );
     loadedMarkdowns[markdownName] = loadedMarkdown;
   }