add webpack

gulpfile.js

@@ -9,9 +9,9 @@ var changed = require('gulp-changed');
 var notify = require('gulp-notify');
 var nodemon = require('gulp-nodemon');
 var sass = require('gulp-sass');
-var browserify = require('browserify');
 var browserSync = require('browser-sync');
 
+var webpack = require('webpack-stream');
 var ghPages = require('gulp-gh-pages');
 
 var DIST = 'www';
@@ -68,6 +68,11 @@ gulp.task('copyStaticFiles', function(){
 });
 
 
+gulp.task('webpack',function () {
+  return gulp.src('src/jsx/index.jsx')
+  .pipe(webpack( require('./webpack.config.js') ))
+  .pipe(gulp.dest(DIST+'/'));
+});
 
 gulp.task('deploy',['build'], function() {
  return gulp.src(DIST+'/**/*')
@@ -81,16 +86,6 @@ gulp.task('scss', function () {
     .pipe(notify('scss: <%= file.relative %>'));
 });
 
-var b = browserify();
-b.transform('reactify'); // use the reactify transform
-b.add('./src/jsx/index.jsx');
-gulp.task('browserify', function(){
-  b.bundle()
-    .on('error', gutil.log)
-    .pipe(source('index.js'))
-    .pipe(gulp.dest(DIST+'/js'))
-    .pipe(notify('browserify: <%= file.relative %>'));
-});
 
 var reload = browserSync.reload;
 gulp.task('browserSync', [], function(){
@@ -112,7 +107,7 @@ gulp.task('start', function () {
   })
 });
 
-gulp.task('build', ['copyStaticFiles', 'scss', 'browserify']);
+gulp.task('build', ['copyStaticFiles', 'scss','webpack']);
 
 gulp.task('clean', function(done){
   var called = false;
@@ -134,7 +129,7 @@ gulp.task('default', ['build', 'start', 'browserSync'], function(){
   gulp.watch('src/scss/**', ['scss']);
 
   // jsx
-  gulp.watch(['src/jsx/**'], [ 'browserify' ]);
+  gulp.watch(['src/jsx/**'], [ 'webpack']);
 
   // browser sync
   gulp.watch('www/css/**', function(event){

map/social-map.js

@@ -71,9 +71,7 @@ var HikingViz = React.createClass({
   }
   //
     function addRouteByUrl(url){
-      reqwest({
-        url: url
-      })
+      fetch(url)
       .then(function(res){
         var geojson = JSON.parse(res.response);
         addAnimatedRoute(geojson);

package.json

@@ -24,14 +24,19 @@
     "browserify": "^10.2.4",
     "gulp": "^3.9.0",
     "gulp-changed": "^1.2.1",
+    "gulp-gh-pages": "^0.5.2",
     "gulp-nodemon": "^2.0.3",
     "gulp-notify": "^2.2.0",
     "gulp-sass": "^2.0.1",
     "gulp-util": "^3.0.5",
-    "gulp-gh-pages": "^0.5.2",
     "mocha": "^2.2.5",
+    "node-libs-browser": "^0.5.2",
     "reactify": "^1.1.1",
-    "vinyl-source-stream": "^1.1.0"
+    "vinyl-source-stream": "^1.1.0",
+    "webpack": "^1.9.11",
+    "webpack-dev-server": "^1.9.0",
+    "jsx-loader": "~0.13.2",
+    "webpack-stream": "~2.0.0"
   },
   "scripts": {
     "test": "mocha"

src/jsx/index.jsx

@@ -1,6 +1,9 @@
 var React = require('react');
 var Frame = require('./partial/Frame.jsx');
 
+require('whatwg-fetch');
+require('promise.prototype.finally');
+
 window.log = console.log.bind(console);
 
 ///////////////////////////////////////////////////////////
@@ -71,8 +74,10 @@ function makeApi(api){
   }
 }
 
-fetch('/api.js').then(function(json){
-  window.api = makeApi(json);
+fetch('/api.js').then(function(res){
+  return res.json();
+}).then(function(){
+  window.api = makeApi();
 }).finally(function(){
-    React.render(<Frame />, document.body);
+  React.render(<Frame />, document.body);
 });

src/jsx/partial/Home.jsx

@@ -61,11 +61,11 @@ var HikingViz = React.createClass({
   }
   //
     function addRouteByUrl(url){
-      reqwest({
-        url: url
+      fetch(url)
+      .then(function (res) {
+        return res.json();
       })
-      .then(function(res){
-        var geojson = JSON.parse(res.response);
+      .then(function(geojson){
         addAnimatedRoute(geojson);
       })
     }

src/static/index.html

@@ -15,9 +15,7 @@
   <style>
     #map { position:relative; width:100%; height:500px }
   </style>
-
-  <script src="js/fetch.js"></script>
-    <script src="js/finally.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script>
   <script src='https://api.tiles.mapbox.com/mapbox.js/v2.2.0/mapbox.js'></script>
   <link href='https://api.tiles.mapbox.com/mapbox.js/v2.2.0/mapbox.css' rel='stylesheet' />
 
@@ -26,8 +24,6 @@
   <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.8.1/mapbox-gl.css' rel='stylesheet' />
 
       <script src='https://cdnjs.cloudflare.com/ajax/libs/json2/20150503/json2.js'></script>
-
-  <script src="/js/jquery.js"></script>
   <!--<script src="/socket.io/socket.io.js"></script>-->
 </head>
 <body>
@@ -36,6 +32,6 @@
       <h4>LOADING...</h4>
     </div>
   </div>
-  <script src="js/index.js"></script>
+    <script src='bundle.js'></script>
 </body>
 </html>