finish integrating npm. move underscore/backbone into npm management (#577)

* finish integrating npm. move underscore/backbone into npm management

* update docs for npm integration

* allow jsx or js extension

* change underscore version

app/assets/javascripts/application.js

@@ -13,8 +13,7 @@
 //= require jquery
 //= require jquery-ui
 //= require jquery_ujs
-//= require ./orderedLibraries/underscore
+//= require ./webpacked/metamaps.bundle
-//= require ./orderedLibraries/backbone
 //= require_directory ./lib
 //= require ./src/Metamaps.GlobalUI
 //= require ./src/Metamaps.Router

doc/MacInstallation.md

@@ -15,9 +15,10 @@ Now install homebrew.
 
     ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
 
-Then install nodejs
+Then install nodejs and frontend code
 
     brew install nodejs
+    (cd frontend && npm install && npm run build)
 
 And postgresql:
 

doc/UbuntuInstallation.md

@@ -50,6 +50,12 @@ Install the specific version of ruby needed this will take some time
 
     rvm install $(cat metamaps/.ruby-version)
 
+While that is running, you can open another terminal and install the npm frontend code
+
+    cd frontend
+    npm install
+    npm run build
+
 Now we also need to copy .example-env to a new file named .env. Review the
 configuration in here to see if you need any changes.
 

doc/WindowsInstallation.md

@@ -20,6 +20,13 @@ Now you are ready to clone the Metamaps git repository:
 The third `bundle install` command downloads and installs the rubygem
 dependencies of Metamaps.
 
+You also need to install the Javascript frontend code from the nodejs repositories:
+
+    cd frontend
+    npm install
+    npm run build
+    cd ..
+
 At this point you should be in C:\git\metamaps, or whatever equivalent
 directory you've chosen. The next step is to set up your database
 configuration. From the metamaps directory, run

doc/production/first-deploy.md

@@ -55,12 +55,23 @@ Run this in the metamaps directory, still as metamaps:
     # Set up environment variables in your current session
     source .env
     export RAILS_ENV=production
+    export NODE_ENV=production
 
     # create, load schema, seed
     rake db:setup
 
-Now set up nginx - config stored on Linode, including relevant environment 
+#### Install js frontend code
-variables.
+
+    sudo aptitude install nodejs npm
+    sudo ln -s /usr/bin/nodejs /usr/bin/node
+    cd frontend
+    npm install
+    npm run build
+
+#### Nginx and SSL
+
+Now set up nginx - config stored on Linode, including relevant 
+environment variables.
 
 Get an SSL certificate and encrypt it for the realtime video.
 
@@ -75,8 +86,6 @@ server to see what problems show up:
 
 #### Realtime server:
 
-    sudo aptitude install nodejs npm
-    sudo ln -s /usr/bin/nodejs /usr/bin/node
     sudo npm install -g forever
     (crontab -u metamaps -l 2>/dev/null; echo "@reboot $(which forever) --append -l /home/metamaps/logs/forever.realtime.log start /home/metamaps/metamaps/realtime/realtime-server.js") | crontab -u metamaps -
 

doc/production/pull-changes.md

@@ -19,9 +19,11 @@ OR
 Now that you have the code, run these commands:
 
     export RAILS_ENV=production
+    export NODE_ENV=production
     source .env
 
     bundle install
+    (cd frontend && npm install && npm run build)
     rake db:migrate
     rake assets:precompile
     rake perms:fix

frontend/package.json

@@ -25,11 +25,13 @@
     "babel-preset-react": "^6.11.1",
     "chai": "^3.5.0",
     "mocha": "^2.4.5",
-    "path": "^0.12.7",
     "webpack": "^1.13.1"
   },
   "dependencies": {
+    "backbone": "^1.0.0",
     "react": "^15.3.0",
-    "react-dom": "^15.3.0"
+    "react-dom": "^15.3.0",
+    "requirejs": "^2.1.1",
+    "underscore": "^1.4.4"
   }
 }

frontend/src/index.js

@@ -1,11 +1,15 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
-import ExploreHeader from './components/ExploreHeader.js'
+import Backbone from 'backbone'
+import _ from 'underscore'
+import ExploreHeader from './components/ExploreHeader'
 
 // this is optional really, if we import components directly React will be 
 // in the bundle, so we won't need a global reference
 window.React = React
 window.ReactDOM = ReactDOM
+window.Backbone = Backbone
+window._ = _
 
 window.Metamaps = window.Metamaps || {}
 window.Metamaps.ReactComponents = {

frontend/webpack.config.js

@@ -6,7 +6,7 @@ const config = module.exports = {
   module: {
     loaders: [
       {
-        test: /\.js$/,
+        test: /\.(js|jsx)?$/,
         exclude: /node_modules/,
         loaders: [
           "babel-loader?cacheDirectory"