move frontend code into a folder, and setup react build tooling with es6 transforms (#576)

.gitignore

@@ -9,6 +9,8 @@ public/assets
 public/metamaps_mobile
 vendor/
 node_modules
+npm-debug.log
+app/assets/javascripts/webpacked
 
 #secrets and config
 .env

.travis.yml

@@ -16,6 +16,6 @@ before_script:
   - . $HOME/.nvm/nvm.sh
   - nvm install stable
   - nvm use stable
-  - (cd app/assets/javascripts && npm install)
+  - (cd frontend && npm install)
 script:
-  - bundle exec rspec && (cd app/assets/javascripts && npm test) && bundle exec brakeman -q -z
+  - bundle exec rspec && (cd frontend && npm test) && bundle exec brakeman -q -z

app/assets/javascripts/README-testing-js.md

@@ -1,9 +0,0 @@
-Change directories to where this file is, and then run 
-
-    npm install
-
-to set up your testing environment. Then use
-
-    npm test
-
-to see the results of testing the current javascript files.

frontend/.babelrc

@@ -0,0 +1,9 @@
+{
+  "presets": [
+    "react",
+    "es2015"
+  ],
+  "plugins": [
+    "transform-class-properties"
+  ]
+}

frontend/README-frontend.md

@@ -0,0 +1,19 @@
+To setup javascript dev, `cd frontend` and then run
+
+    npm install
+
+to set up your testing environment. Then use
+
+    npm test
+
+to see the results of testing the current javascript files.
+
+To build the javascript files, run
+
+    npm run build
+
+If you are actively developing and would like any changes to trigger a rebuild, you can use 
+
+    npm run build:watch
+
+instead.

frontend/package.json

@@ -3,6 +3,8 @@
   "version": "1.0.0",
   "description": "Metamaps frontend - currently just tests",
   "scripts": {
+    "build": "webpack",
+    "build:watch": "webpack --watch",
     "test": "mocha test || echo 'Run `npm install` to setup testing'"
   },
   "repository": {
@@ -16,7 +18,18 @@
   },
   "homepage": "https://github.com/metamaps/metamaps#readme",
   "devDependencies": {
+    "babel-cli": "^6.11.4",
+    "babel-loader": "^6.2.4",
+    "babel-plugin-transform-class-properties": "^6.11.5",
+    "babel-preset-es2015": "^6.9.0",
+    "babel-preset-react": "^6.11.1",
     "chai": "^3.5.0",
-    "mocha": "^2.4.5"
+    "mocha": "^2.4.5",
+    "path": "^0.12.7",
+    "webpack": "^1.13.1"
+  },
+  "dependencies": {
+    "react": "^15.3.0",
+    "react-dom": "^15.3.0"
   }
 }

frontend/src/components/ExploreHeader.js

@@ -0,0 +1,11 @@
+import React, { Component, PropTypes } from 'react'
+
+class ExploreHeader extends Component {
+  render = () => {
+    return (
+      <p>ExploreHeader component could go here</p>
+    )
+  }
+}
+
+export default ExploreHeader

frontend/src/index.js

@@ -0,0 +1,13 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import ExploreHeader from './components/ExploreHeader.js'
+
+// 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.Metamaps = window.Metamaps || {}
+window.Metamaps.ReactComponents = {
+  ExploreHeader
+}

frontend/test/Metamaps.Import.spec.js

@@ -3,7 +3,7 @@ const chai = require('chai')
 const expect = chai.expect
 
 const Metamaps = {}
-require('../src/Metamaps.Import')
+require('../../app/assets/javascripts/src/Metamaps.Import')
 
 describe('Metamaps.Import.js', function () {
   it('has a topic whitelist', function () {

frontend/webpack.config.js

@@ -0,0 +1,24 @@
+const path = 'path'
+const webpack = 'webpack'
+
+const config = module.exports = {
+  context: __dirname,
+  module: {
+    loaders: [
+      {
+        test: /\.js$/,
+        exclude: /node_modules/,
+        loaders: [
+          "babel-loader?cacheDirectory"
+        ]
+      }
+    ]
+  },
+  entry: {
+    'metamaps.bundle': './src/index.js'
+  },
+  output: {
+    path: '../app/assets/javascripts/webpacked',
+    filename: '[name].js'
+  }
+}