edit readme and adjust config

.example-env

@@ -1,56 +1,2 @@
-# Node JS env
+API=http://localhost:3000
-export NODE_REALTIME_PORT='5000' # should match REALTIME_SERVER, below
+ACTIONCABLE=ws://localhost:3001/cable
-
-# Rails env
-export DB_USERNAME='postgres'
-export DB_PASSWORD='3112'
-export DB_HOST='localhost'
-export DB_PORT='5432'
-export DB_NAME='metamaps'
-
-export REALTIME_SERVER='http://localhost:5000'
-export MAILER_DEFAULT_URL='localhost:3000'
-export DEVISE_MAILER_SENDER='team@metamaps.cc'
-
-export DEVISE_SECRET_KEY='f71c467e526f23d614b3b08866cad4788c502bed869c282f06e73ee6c94675b62fe1f6d52fa7ba8196b33031f0d2f3b67e27ea07693c52ecebccb01700cad614'
-export SECRET_KEY_BASE='267c8a84f63963282f45bc3010eaddf027abfab58fc759d6e239c8005f85ee99d6d01b1ab6394cdee9ca7f8c9213a0cf91d3d8d3350f096123e2caccbcc0924f'
-
-# # you can safely leave these blank, unless you're deploying an instance, in
-# # which case you'll need to set them up
-#
-# export S3_REGION
-# export S3_BUCKET_NAME
-# export AWS_ACCESS_KEY_ID
-# export AWS_SECRET_ACCESS_KEY
-#
-# export SMTP_DOMAIN
-# export SMTP_PASSWORD
-# export SMTP_PORT
-# export SMTP_SERVER
-# export SMTP_USERNAME
-
-# # send exception notifications to a slack incoming webhook
-# export SLACK_EN_WEBHOOK_URL
- 
-# ruby garbage collection stuff
-
-export RUBY_GC_TUNE=0 #set to 1 to enable GC test
-export RUBY_GC_TOKEN=4f4380fc9a2857d1f008005a3eb86928
-export RUBY_GC_HEAP_INIT_SLOTS=186426
-export RUBY_GC_HEAP_FREE_SLOTS=559278
-export RUBY_GC_HEAP_GROWTH_FACTOR=1.03
-export RUBY_GC_HEAP_GROWTH_MAX_SLOTS=74570
-export RUBY_GC_HEAP_OLDOBJECT_LIMIT_FACTOR=1.4
-export RUBY_GC_MALLOC_LIMIT=32883406
-export RUBY_GC_MALLOC_LIMIT_MAX=69055153
-export RUBY_GC_MALLOC_LIMIT_GROWTH_FACTOR=1.68
-export RUBY_GC_OLDMALLOC_LIMIT=32509481
-export RUBY_GC_OLDMALLOC_LIMIT_MAX=68269910
-export RUBY_GC_OLDMALLOC_LIMIT_GROWTH_FACTOR=1.4
-
-## find the ENV currently in use in the app using : 
-##   grep -rIso -P "(?<=ENV)(\.fetch\(|\[).[A-Z_]+.(\)|\])" 
-
-# for a uniq ordered list of env vars:
-##   grep -rIsoh -P "(?<=ENV)(\.fetch\(|\[).[A-Z_]+.(\)|\])" | grep -oP "[A-Z_]+" | sort -u > temp 
-

.gitignore

@@ -6,13 +6,9 @@
 
 #assety stuff
 public/css
-public/assets
-public/metamaps_mobile
-public/api/index.html
 vendor/
 node_modules
 npm-debug.log
-app/assets/javascripts/webpacked
 
 #secrets and config
 .env
@@ -31,6 +27,3 @@ coverage
 .DS_Store
 */.DS_Store
 .DS_Store?
-.vagrant
-gentle/
-startserver.sh

README.md

@@ -1,24 +1,31 @@
 [![Build Status](https://travis-ci.org/metamaps/metamaps-ui.svg?branch=master)](https://travis-ci.org/metamaps/metamaps-ui)
 
-Make sure you're running a good up to date LTS version of `node`, like 8.9.4
+Make sure you're running a good up to date LTS version of `node`
+
+Install all the dependencies
+`$ npm install`
 
 Make sure you have `node-sass` installed
 `$ npm install -g node-sass`
 
-Run the following at the same time, in TWO SEPARATE terminals. We tell the server where the backend process is running with the API environment variable
+Make sure that you have a .env file setup. You can copy the .example-env
-JS files, and CSS will rebuild automatically, just refresh the page
-If coding the server itself, you will have to use nodemon, or kill and restart the server process manually
 ```
-$ API=http://localhost:3001 node server.js
+$ cp .example-env .env
-$ node-sass -w sass/application.scss public/css/application.css
+```
+Edit it however you need to.
+
+Start up the nodejs server which serves the UI files, the socketio realtime server, and proxies requests to the API.
+```
+$ npm start
 ```
 
-To make sure the css files get built, use the following in another terminal
+Build the css. If you're developing and writing css, make sure that it will rebuild the css when you make changes, by running the `node-sass` process with the `-w` flag.
 ```
-touch sass/application.scss
+$ node-sass sass/application.scss public/css/application.css # to run it once
+$ node-sass -w sass/application.scss public/css/application.css # to watch it for more changes
 ```
 
-Run the metamaps api in another terminal using (on port 3001, so the UI can talk to it)
+Run the metamaps api in another terminal, on whichever port you configured in your .env file.
 For now, make sure you are running on the `add-user-route` branch of Metamaps, and that it's up to date with the latest on that branch
 `$ rails s -p 3001`
 

apiProxyMiddleware.js

@@ -1,4 +1,15 @@
+/*
+This file takes appropriate requests from our UI client
+and pipes them through to the API, proxying the response
+back to the client. To do this, it needs to pass
+the _Metamaps_session cookie in particular,
+in order to make authorized requests
+*/
+
 const request = require('request')
+const { API_PROTOCOL, API_HOST } = process.env
+
+const API_URL = `${API_PROTOCOL}://${API_HOST}`
 
 function apiProxyMiddleware (req, res, next) {
     // TODO: tidy this up!
@@ -7,11 +18,11 @@ function apiProxyMiddleware (req, res, next) {
     }
     const method = req.method.toLowerCase()
     req.pipe(
-        request[method](process.env.API + req.originalUrl, {
+        request[method](API_URL + req.originalUrl, {
             headers: {
                 ...req.headers,
                 cookie: `_Metamaps_session=${req.cookies._Metamaps_session}`,
-                host: 'localhost:3001'
+                host: API_HOST
             },
             followRedirect: false
         })

package-lock.json

@@ -2549,6 +2549,11 @@
         "is-obj": "1.0.1"
       }
     },
+    "dotenv": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-5.0.1.tgz",
+      "integrity": "sha512-4As8uPrjfwb7VXC+WnLCbXK7y+Ueb2B3zgNCePYfhxS1PYeaO1YTeplffTEcbfLhvFNGLAz90VvJs9yomG7bow=="
+    },
     "duplexer": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.1.tgz",

package.json

@@ -3,10 +3,8 @@
   "version": "1.0.0",
   "description": "Metamaps webpacked javascript code",
   "scripts": {
-    "start": "webpack-dev-server --open",
+    "start": "node server.js",
-    "server": "node server.js",
     "build": "webpack",
-    "build:watch": "webpack --watch",
     "test": "mocha-webpack --webpack-config webpack.test.config.js --require test_support/dom.js --recursive test",
     "eslint": "eslint src",
     "eslint:fix": "eslint --fix src"
@@ -38,6 +36,7 @@
     "commonmark": "0.28.1",
     "cookie-parser": "^1.4.3",
     "csv-parse": "1.2.1",
+    "dotenv": "^5.0.1",
     "emoji-mart": "1.0.1",
     "getscreenmedia": "4.0.1",
     "hark": "1.1.5",

server.js

@@ -1,3 +1,4 @@
+require('dotenv').config()
 const path = require('path')
 const express = require('express')
 const cookieParser = require('cookie-parser')
@@ -19,13 +20,15 @@ app.use(cookieParser())
 // serve the whole public folder as static files
 app.use(express.static(path.join(__dirname, 'public')))
 
-const config = require('./webpack.config.js')
+if (process.env.NODE_ENV === 'development') {
-const compiler = webpack(config)
+  const config = require('./webpack.config.js')
-// Tell express to use the webpack-dev-middleware and use the webpack.config.js
+  const compiler = webpack(config)
-// configuration file as a base.
+  // Tell express to use the webpack-dev-middleware and use the webpack.config.js
-app.use(webpackDevMiddleware(compiler, {
+  // configuration file as a base.
-  publicPath: config.output.publicPath
+  app.use(webpackDevMiddleware(compiler, {
-}))
+    publicPath: config.output.publicPath
+  }))
+}
 
 // pass XMLHttpRequests
 // through to the API
@@ -40,7 +43,7 @@ app.get('*', function (req, res) {
   res.sendFile(path.join(__dirname, 'public/index.html'))
 })
 
-// Serve the files on set port or port 3000.
+// Start up the server
 server.listen(port, function () {
   console.log('Metamaps listening on port ' + port + '\n')
 });

src/Metamaps/Cable.js

@@ -5,7 +5,6 @@ import ActionCable from 'action-cable-node'
 
 import Active from './Active'
 import Control from './Control'
-import config from '../config'
 import DataModel from './DataModel'
 import Map from './Map'
 import Mapper from './Mapper'
@@ -17,7 +16,7 @@ import Visualize from './Visualize'
 const Cable = {
   init: () => {
     let self = Cable
-    self.cable = ActionCable.createConsumer(config.ACTIONCABLE)
+    self.cable = ActionCable.createConsumer(process.env.ACTIONCABLE)
   },
   subscribeToMap: id => {
     let self = Cable

src/config.js

@@ -1,3 +0,0 @@
-export default {
-  ACTIONCABLE: 'ws://localhost:3001/cable'
-}

webpack.config.js

@@ -1,10 +1,12 @@
 const webpack = require('webpack')
 
 const NODE_ENV = process.env.NODE_ENV || 'development'
+const ACTIONCABLE = process.env.ACTIONCABLE
 
 const plugins = [
   new webpack.DefinePlugin({
-    "process.env.NODE_ENV": `"${NODE_ENV}"`
+    "process.env.NODE_ENV": `"${NODE_ENV}"`,
+    "process.env.ACTIONCABLE": `"${ACTIONCABLE}"`
   }),
   new webpack.IgnorePlugin(/^mock-firmata$/), // work around bindings.js error
   new webpack.ContextReplacementPlugin(/bindings$/, /^$/) // work around bindings.js error