Implemented Browserify; Now we run the server with gulp serve

.editorconfig

@@ -0,0 +1,11 @@
+# http://editorconfig.org
+
+root = true
+
+[*]
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+charset = utf-8
+indent_style = space
+indent_size = 2

.gitignore

@@ -1 +1,2 @@
-node_modules
+node_modules
+bundle.js

gulpfile.js

@@ -1,6 +1,69 @@
+var _ = require('lodash');
 var gulp = require('gulp');
+var browserify = require('browserify');
+var watchify = require('watchify');
+var transform = require('vinyl-transform');
+var buffer = require('vinyl-buffer');
+var shimify = require('browserify-shim');
+var source = require('vinyl-source-stream');
+var plumber = require('gulp-plumber');
+var uglify = require('gulp-uglify');
+var size = require('gulp-size');
+var sourcemaps = require('gulp-sourcemaps');
+var notifier = require('node-notifier');
+var util = require('gulp-util');
+var gulpif = require('gulp-if');
+var browserSync = require('browser-sync');
+var spawn = require('child_process').spawn;
 
-gulp.task('default',function(){
-	console.log('hello');
+
+var appBundle = browserify({
+  entries: './public/js/main.js',
+});
+
+function bundle() {
+  if (process.env.NODE_ENV === 'production') {
+    console.log('watchify: rebuilding bundle');
+  }
+  return appBundle
+    .bundle()
+    .on('error', function(err) {
+      console.log('Error: ' + err.message);
+    })
+    .pipe(source('bundle.js'))
+    .pipe(buffer())
+    .pipe(sourcemaps.init({ loadMaps: true }))
+      .pipe(gulpif(process.env.NODE_ENV === 'production', uglify()))
+      .pipe(size({
+        showFiles: true,
+        gzip: true,
+        title: 'js'
+      }))
+    .pipe(sourcemaps.write())
+    .pipe(gulp.dest('./public/'))
+    .pipe(browserSync.reload({ stream: true }));
+}
+
+appBundle.on('update', bundle);
+
+gulp.task('browserify', function() {
+  if (process.env.NODE_ENV !== 'production') {
+    appBundle = watchify(appBundle);
+  }
+  bundle();
 });
+gulp.task('serve', ['browserify'], function() {
+  var server = spawn('node', ['server.js']);
+
+  server.stdout.on('data', function(data) {
+    console.log('' + data);
+  });
 
+  server.stderr.on('data', function(data) {
+    console.log('ERR: ' + data);
+  });
+
+  server.on('close', function(code) {
+    console.log('child process exited with code ' + code);
+  });
+});

package.json

@@ -17,14 +17,26 @@
     "babel": "^5.6.23",
     "bluebird": "^2.10.1",
     "body-parser": "^1.14.0",
+    "browser-sync": "^2.9.6",
+    "browserify": "^11.2.0",
+    "browserify-shim": "^3.8.10",
     "colors": "^1.1.2",
     "compression": "^1.5.1",
     "express": "^4.13.1",
     "gulp": "^3.9.0",
+    "gulp-if": "^1.2.5",
+    "gulp-plumber": "^1.0.1",
+    "gulp-size": "^2.0.0",
+    "gulp-sourcemaps": "^1.5.2",
+    "gulp-uglify": "^1.4.1",
+    "gulp-util": "^3.0.6",
     "leaflet": "^0.7.5",
     "leaflet.locatecontrol": "^0.45.0",
+    "lodash": "^3.10.1",
+    "moment": "^2.10.6",
     "mongoose": "^4.0.7",
     "morgan": "^1.6.1",
+    "node-notifier": "^4.3.1",
     "react": "^0.13.3",
     "react-router": "^0.13.3",
     "request": "^2.58.0",
@@ -34,6 +46,11 @@
     "swig": "^1.4.2",
     "twit": "^2.1.0",
     "underscore": "^1.8.3",
+    "uniq": "^1.0.1",
+    "vinyl-buffer": "^1.0.0",
+    "vinyl-source-stream": "^1.1.0",
+    "vinyl-transform": "^1.0.0",
+    "watchify": "^3.4.0",
     "xml2js": "^0.4.9"
   },
   "devDependencies": {

public/index.html

@@ -11,4 +11,4 @@
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 </head>
 <div id="map"></div>
-<script src='../js/main.js'></script>
+<script src="bundle.js"></script>

public/js/main.js

@@ -1,27 +1,6 @@
+var MapApp = require('./map-application');
+
 function start() {
-  var map = L.map('map').setView([33.777220,-84.3962800], 13);
-  L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
-      attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
-      maxZoom: 18,
-      id: 'michaellin.cif0wpatz19s2sxlv8x48i66b',
-      accessToken: 'pk.eyJ1IjoibWljaGFlbGxpbiIsImEiOiJjaWYwd3BjMGkxOTFtc2FsdXA1aThhMmtvIn0.mdvxgPl2QX1hGygZgQjIlg'
-  }).addTo(map);
-  L.control.locate().addTo(map);
-  var data = $.ajax({
-    url: "/events",
-    data: {"lat" : 33.777220,
-          "lng": -84.3962800,
-          "distance": 2000},
-    success: function (data) {
-      console.log(data);
-      for (event in data.events) {
-        if (data.events[event].venueLocation) {
-          var marker = L.marker([data.events[event].venueLocation.latitude,data.events[event].venueLocation.longitude]).addTo(map);
-          marker.bindPopup(data.events[event].eventName);
-        }
-      }
-    },
-    dataType: "json"
-  });
+  var mapApp = new MapApp();
 }
 start();

public/js/map-application.js

@@ -0,0 +1,30 @@
+var moment = require('moment');
+module.exports = function MapApp() {
+  var map = L.map('map').setView([33.777220,-84.3962800], 13);
+  L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
+      attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
+      maxZoom: 18,
+      id: 'michaellin.cif0wpatz19s2sxlv8x48i66b',
+      accessToken: 'pk.eyJ1IjoibWljaGFlbGxpbiIsImEiOiJjaWYwd3BjMGkxOTFtc2FsdXA1aThhMmtvIn0.mdvxgPl2QX1hGygZgQjIlg'
+  }).addTo(map);
+  L.control.locate().addTo(map);
+  var data = $.ajax({
+    url: "/events",
+    data: {"lat" : 33.777220,
+          "lng": -84.3962800,
+          "distance": 2000},
+    success: function (data) {
+      console.log(data);
+      for (event in data.events) {
+        if (data.events[event].venueLocation) {
+          var marker = L.marker([data.events[event].venueLocation.latitude,data.events[event].venueLocation.longitude]).addTo(map);
+          var time = moment(data.events[event].eventStarttime);
+          var timeString = time.format("dddd, MMMM Do YYYY, h:mm:ss a");
+          marker.bindPopup("<div>" + data.events[event].eventName + "</div>" + timeString);
+
+        }
+      }
+    },
+    dataType: "json"
+  });
+}