diff --git a/.example-env b/.example-env index 03f7f615..de1165be 100644 --- a/.example-env +++ b/.example-env @@ -1,56 +1,2 @@ -# Node JS env -export NODE_REALTIME_PORT='5000' # should match REALTIME_SERVER, below - -# 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 - +API=http://localhost:3000 +ACTIONCABLE=ws://localhost:3001/cable \ No newline at end of file diff --git a/.gitignore b/.gitignore index 7f8b9b0f..bf5ffabf 100644 --- a/.gitignore +++ b/.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 diff --git a/README.md b/README.md index ac708e50..83e0a7f5 100644 --- a/README.md +++ b/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 -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 +Make sure that you have a .env file setup. You can copy the .example-env ``` -$ API=http://localhost:3001 node server.js -$ node-sass -w sass/application.scss public/css/application.css +$ cp .example-env .env +``` +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` diff --git a/apiProxyMiddleware.js b/apiProxyMiddleware.js index bd380368..044e99b2 100644 --- a/apiProxyMiddleware.js +++ b/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 }) diff --git a/package-lock.json b/package-lock.json index dbf2d987..dbb8e350 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 5f87ace8..ed1ed4a5 100644 --- a/package.json +++ b/package.json @@ -3,10 +3,8 @@ "version": "1.0.0", "description": "Metamaps webpacked javascript code", "scripts": { - "start": "webpack-dev-server --open", - "server": "node server.js", + "start": "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", diff --git a/server.js b/server.js index 5f983c2d..a73f12e6 100644 --- a/server.js +++ b/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') -const compiler = webpack(config) -// Tell express to use the webpack-dev-middleware and use the webpack.config.js -// configuration file as a base. -app.use(webpackDevMiddleware(compiler, { - publicPath: config.output.publicPath -})) +if (process.env.NODE_ENV === 'development') { + const config = require('./webpack.config.js') + const compiler = webpack(config) + // Tell express to use the webpack-dev-middleware and use the webpack.config.js + // configuration file as a base. + 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') }); \ No newline at end of file diff --git a/src/Metamaps/Cable.js b/src/Metamaps/Cable.js index 06de0314..277d973c 100644 --- a/src/Metamaps/Cable.js +++ b/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 diff --git a/src/config.js b/src/config.js deleted file mode 100644 index 3ffd65ec..00000000 --- a/src/config.js +++ /dev/null @@ -1,3 +0,0 @@ -export default { - ACTIONCABLE: 'ws://localhost:3001/cable' -} \ No newline at end of file diff --git a/webpack.config.js b/webpack.config.js index 436097ea..40925630 100644 --- a/webpack.config.js +++ b/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