Merge pull request #187 from WorldBank-Transport/develop

Release new version

.build_scripts/serve.sh

@@ -0,0 +1,27 @@
+#!/usr/bin/env bash
+set -e # halt script on error
+
+# This scripts builds the site and moves it to the Nginx folder.
+# To be run as a command in docker-compose
+
+# Build the site
+if [[ $DS_ENV == 'offline' ]]; then
+  echo 'Building version for offline use'
+  yarn build-offline
+else
+  echo 'Building production version'
+  yarn build
+fi
+
+# Clean default nginx content
+rm -r /usr/share/nginx/html/*
+mv ./dist/* /usr/share/nginx/html
+
+# Make sure nginx stays up once the container is done
+echo "daemon off;" >> /etc/nginx/nginx.conf || true
+
+echo 'Starting nginx, access the RAM frontend through your browser.'
+
+# Start nginx
+nginx
+

.circleci/config.yml

@@ -0,0 +1,83 @@
+version: 2
+jobs:
+  build:
+    docker:
+      - image: circleci/node:8
+
+    working_directory: ~/repo
+
+    environment:
+      - STAGING_BRANCH: develop
+      - PRODUCTION_BRANCH: master
+      - DOCKER_IMAGE: ram-frontend
+      - DOCKER_ORG: wbtransport
+      - GH_REF: [email protected]:WorldBank-Transport/ram-backend.git
+      - GH_NAME: "Development Seed"
+      - GH_EMAIL: "[email protected]"
+
+    steps:
+      - checkout
+      - setup_remote_docker
+
+      - add_ssh_keys:
+          fingerprints:
+            - "ed:c1:81:ac:c3:74:2f:61:0c:8e:40:fd:7a:f2:7e:07"
+
+      # # Download and cache dependencies
+      # - restore_cache:
+      #     keys:
+      #     - v1-dependencies-{{ checksum "package.json" }}
+      #     # fallback to using the latest cache if no exact match is found
+      #     - v1-dependencies-
+
+      - run: yarn install
+
+      # - save_cache:
+      #     paths:
+      #       - node_modules
+      #     key: v1-dependencies-{{ checksum "package.json" }}
+
+      - run: yarn lint
+
+      - run:
+          name: Build Docker image for dev version
+          command: |
+            if [ ${CIRCLE_BRANCH} == ${STAGING_BRANCH} ]; then
+              echo "Building Docker image"
+              docker build -t ${DOCKER_IMAGE} .
+              docker login -u $DOCKER_USERNAME -p $DOCKER_PASSWD
+
+              echo "Pushing image to Docker Hub as :latest-dev"
+              docker tag ${DOCKER_IMAGE} ${DOCKER_ORG}/${DOCKER_IMAGE}:latest-dev
+              docker push ${DOCKER_ORG}/${DOCKER_IMAGE}:latest-dev
+            else
+              echo "This is not the "${STAGING_BRANCH}" branch. No need to build and push latest-dev."
+            fi
+      - deploy:
+          name: Build Docker image for stable version
+          command: |
+            if [ "${CIRCLE_BRANCH}" == "${PRODUCTION_BRANCH}" ]; then
+              # Grab version from package.json and prepend with v (v0.5.0)
+              VERSION=v$(grep -m1 version package.json | awk -F: '{ print $2 }' | sed 's/[", ]//g')
+              
+              # Attempt to add a git tag based on version in package.json. If
+              # the tag already exists, git will fail and stop the build.
+              if ! git tag ${VERSION} master
+              then
+                echo >&2 "Failed to tag a new release, skipping build. Did you update the version in package.json?"
+                exit 1
+              else
+                # Push tag to Github
+                git push origin ${VERSION}
+
+                echo Building Docker image
+                docker build -t ${DOCKER_IMAGE} .
+                docker login -u $DOCKER_USERNAME -p $DOCKER_PASSWD
+
+                echo Pushing image to Docker Hub with ${VERSION} tag
+                docker tag ${DOCKER_IMAGE} ${DOCKER_ORG}/${DOCKER_IMAGE}:${VERSION}
+                docker push ${DOCKER_ORG}/${DOCKER_IMAGE}:${VERSION}
+              fi
+            else
+              echo "This is not the "${PRODUCTION_BRANCH}" branch. No need to build and push new version."
+            fi

.dockerignore

@@ -0,0 +1,8 @@
+.git
+.tmp
+.eslintrc
+.travis.yml
+.gitignore
+.gitattributes
+node_modules
+dist

.nvmrc

@@ -1 +1 @@
-6
+8

Dockerfile

@@ -1,2 +1,15 @@
-FROM nginx:alpine
-COPY dist /usr/share/nginx/html
+# https://github.com/ExiaSR/alpine-yarn-nginx
+FROM exiasr/alpine-yarn-nginx
+
+# Add build dependencies
+RUN apk add --no-cache make gcc g++ python
+
+COPY . /source
+WORKDIR /source
+RUN yarn install
+
+# Remove them to keep image size small
+RUN apk del make gcc g++ python
+
+# Build and serve the site
+CMD ["sh", "/source/.build_scripts/serve.sh"]

README.md

@@ -8,7 +8,7 @@ The steps below will walk you through setting up a development environment for t
 ### Install Project Dependencies
 To set up the development environment for this website, you'll need to install the following on your system:
 
-- [Node](http://nodejs.org/) v6 (To manage multiple node versions we recommend [nvm](https://github.com/creationix/nvm))
+- [Node](http://nodejs.org/) v8 (To manage multiple node versions we recommend [nvm](https://github.com/creationix/nvm))
 - [Yarn](https://yarnpkg.com/) Package manager
 
 ### Install Application Dependencies
@@ -28,27 +28,29 @@ yarn install
 ### Usage
 
 #### Config files
-All the config files can be found in `app/assets/scripts/config`.
-After installing the projects there will be 3 main files:
-  - `local.js` - Used only for local development. On production this file should not exist or be empty.
-  - `staging.js`
-  - `production.js`
+The config files can be found in `app/assets/scripts/config`. After installing the project, there will be an empty `local.js` that you can use to set the config. This file should not be committed.
 
-The `production.js` file serves as base and the other 2 will override it as needed:
-  - `staging.js` will be loaded whenever the env variable `DS_ENV` is set to staging.
-  - `local.js` will be loaded if it exists.
+The configuration is overridable by environment variables, expressed between []:
 
-The following options must be set: (The used file will depend on the context):
-  - `api` - The address for the rra api
+- `api` - The address for the API. [API]
+- `iDEditor` - The address of the iDEditor. Defaults to the `master` branch of the [RAM fork of iD](https://github.com/WorldBank-Transport/ram-id), hosted on GH Pages. (Default: https://id.ruralaccess.info). [IDEDITOR]
+- `mbtoken` - The Mapbox Token to load map tiles from. [MBTOKEN]
+- `auth` - The configuration for optional authentication with Auth0. By default, no authentication is set (Default: {})
+- `auth.domain` - See instructions below [AUTH_DOMAIN]
+- `auth.clientID` - See instructions below [AUTH_CLIENTID]
+- `auth.redirectUri` - See instructions below [AUTH_REDIRECTURI]
+- `auth.audience` - See instructions below [AUTH_AUDIENCE]
 
 Example:
 ```
 module.exports = {
-  api: 'http://localhost:4000'
+  api: 'http://localhost:4000',
+  idEditor: 'https://id.ruralaccess.info',
+  mbtoken: 'asfd23rlmksjdf023rnnsafd',
+  auth: {}
 };
 ```
 
-#### Authentication with Auth0
 For authentication using Auth0, you must setup a client on Auth0 and get your client key. The API must also be setup as in the API section on Auth0.
 
 The config should have the `auth` key with the following settings:
@@ -64,7 +66,7 @@ auth: {
 #### Starting the app
 
 ```
-yarn run serve
+yarn serve
 ```
 Compiles the sass files, javascript, and launches the server making the site available at `http://localhost:3000/`
 The system will watch files and execute tasks whenever one of them changes.
@@ -74,7 +76,23 @@ The site will automatically refresh since it is bundled with livereload.
 To prepare the app for deployment run:
 
 ```
-yarn run build
+yarn build
 ```
 This will package the app and place all the contents in the `dist` directory.
 The app can then be run by any web server.
+
+## Docker
+The RAM frontend is also available in a [Docker container](https://hub.docker.com/r/wbtransport/ram-frontend/). This container builds the site and serves the interface through nginx. [Environment variables](#config-files) will be picked up when the container is run:
+
+``` yml
+version: '3'
+services:
+  ram-frontend:
+    image: wbtransport/ram-frontend
+    environment:
+      API: 'https://new.api.io'
+    ports:
+      - 8080:80
+```
+
+To run the full RAM stack in Docker, you can use the `docker-compose.yml` file that's available in the [RAM backend repo](https://github.com/WorldBank-Transport/ram-backend/blob/develop/docker-compose.yml).

app/assets/scripts/actions/index.js

@@ -1,5 +1,6 @@
 import fetch from 'isomorphic-fetch';
 import { stringify as buildAPIQS } from 'qs';
+import { isEmpty } from 'lodash';
 
 import config from '../config';
 
@@ -449,7 +450,7 @@ function fetchDispatchFactory (url, options, requestFn, receiveFn) {
 }
 
 export function fetchJSON (url, options) {
-  if (config.auth) {
+  if (!isEmpty(config.auth)) {
     // Get the access token from storage
     const accessToken = localStorage.getItem('access_token');
     if (!accessToken) {

app/assets/scripts/config.js

@@ -1,34 +1,29 @@
 'use strict';
-var defaultsDeep = require('lodash').defaultsDeep;
-/*
- * App configuration.
- *
- * Uses settings in config/production.js, with any properties set by
- * config/staging.js or config/local.js overriding them depending upon the
- * environment.
- *
- * This file should not be modified.  Instead, modify one of:
- *
- *  - config/production.js
- *      Production settings (base).
- *  - config/staging.js
- *      Overrides to production if ENV is staging.
- *  - config/local.js
- *      Overrides if local.js exists.
- *      This last file is gitignored, so you can safely change it without
- *      polluting the repo.
- */
+const _ = require('lodash');
 
-var configurations = require('./config/*.js', {mode: 'hash'});
-var config = configurations.local || {};
+// Empty template as base.
+var config = require('./config/base');
 
+// local config overrides when present.
+try {
+  _.merge(config, require('./config/local'));
+} catch (e) {
+  // Local file is not mandatory.
+}
+
+// In an offline setup, the other config files are ignored
 if (process.env.DS_ENV === 'offline') {
-  config = configurations.offline;
-} else {
-  if (process.env.DS_ENV === 'staging') {
-    defaultsDeep(config, configurations.staging);
-  }
-  defaultsDeep(config, configurations.production);
+  config = require('./config/offline');
 }
 
+config.api = process.env.API || config.api;
+config.iDEditor = process.env.IDEDITOR || config.iDEditor;
+config.mbtoken = process.env.MBTOKEN || config.mbtoken;
+
+// auth is an empty object, unless one of the environment vars is set
+if (process.env.AUTH_DOMAIN) config.auth.domain = process.env.AUTH_DOMAIN;
+if (process.env.AUTH_CLIENTID) config.auth.clientID = process.env.AUTH_CLIENTID;
+if (process.env.AUTH_REDIRECTURI) config.auth.redirectUri = process.env.AUTH_REDIRECTURI;
+if (process.env.AUTH_AUDIENCE) config.auth.audience = process.env.AUTH_AUDIENCE;
+
 module.exports = config;