Allow env vars to be set when deploying the site. Fix 183

Instead of baking the pre-built site in the Docker image, the site has to be built when spinning up a Docker container

.build_scripts/deploy.sh

@@ -8,10 +8,6 @@ elif [[ $TRAVIS_BRANCH == ${DEPLOY_BRANCH} ]]; then
   LATEST_TAG=latest-stable
 fi
 
-echo "Rebuilding app"
-rm -rf dist
-yarn run build-offline
-
 echo "Building source image"
 docker build -t $DOCKER_SRC_IMAGE .
 

.build_scripts/serve.sh

@@ -0,0 +1,25 @@
+#!/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
+
+# Start nginx
+nginx
+

.dockerignore

@@ -0,0 +1,6 @@
+.git
+.tmp
+.eslintrc
+.travis.yml
+.gitignore
+.gitattributes

.nvmrc

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

.travis.yml

@@ -20,18 +20,12 @@ addons:
     packages:
     - g++-4.8
 
-cache:
-  apt: true
-  yarn: true
-  directories:
-  - node_modules
+# Skip the installation step
+install: true
 
 services:
   - docker
 
-before_script:
-- yarn test
-
 deploy:
 - provider: script
   skip_cleanup: true

Dockerfile

@@ -1,2 +1,12 @@
-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
+
+ADD . /source
+WORKDIR /source
+RUN yarn install
+
+# Remove them to keep image size small
+RUN apk del make gcc g++ python

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
@@ -35,8 +35,7 @@ The configuration is overridable by environment variables, expressed between []:
 - `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` - 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]
@@ -67,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.
@@ -77,7 +76,7 @@ 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.

gulpfile.js

@@ -246,7 +246,8 @@ gulp.task('images', function () {
     .pipe($.cache($.imagemin([
       $.imagemin.gifsicle({interlaced: true}),
       $.imagemin.jpegtran({progressive: true}),
-      $.imagemin.optipng({optimizationLevel: 5}),
+      // Temporarily disabled to avoid issues running this in Docker
+      // $.imagemin.optipng({optimizationLevel: 5}),
       // don't remove IDs from SVGs, they are often used
       // as hooks for embedding and styling
       $.imagemin.svgo({plugins: [{cleanupIDs: false}]})

package.json

@@ -58,7 +58,7 @@
     "gulp-csso": "^2.0.0",
     "gulp-exit": "0.0.2",
     "gulp-if": "^2.0.2",
-    "gulp-imagemin": "^3.1.1",
+    "gulp-imagemin": "^4.0.0",
     "gulp-load-plugins": "^1.5.0",
     "gulp-plumber": "^1.1.0",
     "gulp-rev": "^7.1.2",