Vagrant VM setup for development environment

.gitignore

@@ -7,3 +7,4 @@ src/css/include/icons.styl
 src/font
 watchify.log
 .tmp
+.vagrant

README.md

@@ -1,25 +1,74 @@
-slackomatic frontend
-====
+# slackomatic frontend
 
-######!!! Assumes that the production app root is in /home/pi/nodejs!!!
-######the git clone instructions below will fail if this directory does not exist
-
-#What does this app do?
+## What does this app do?
 This nodejs application serves the frontend for the slackomatic api.
+
+
+# New Setup
+
+
+## Prerequisites
+
+Install these on your dev machine:
+
+1. [VirtualBox](https://www.virtualbox.org/wiki/Downloads)
+2. [Vagrant](http://sourabhbajaj.com/mac-setup/Vagrant/README.html)
+
+### On Windows
+
+Install the `vagrant-vbguest` plugin to be able
+to mount the project folder to `/vagrant`: `vagrant plugin install vagrant-vbguest`
+
+Also set `git config --global core.autocrlf false`
+
+
+## Setting up the development VM
+
+Run the app in a virtual machine with Vagrant: `vagrant up`. The
+current project directory is mapped into the VM as `/vagrant`.
+
+You can log into the VM wih `vagrant ssh`.
+
+    $ vagrant ssh
+    vagrant$ cd /vagrant
+
+    # Install the dependencies
+    vagrant$ ./cli.sh build
+
+    # Build the final HTML
+    vagrant$ ./cli.sh build
+
+    # Run the webserver
+    vagrant$ node dist/server.js 1337  
+    # or ./cli.sh build
+
+Then visit http://10.0.0.10:1337
+
+
+## On the server
+
+Code is installed in `/server/slackomatic-frontend`. Update the code with `./cli.sh upload`.
+
+
+# Old Setup
+
+!!! Assumes that the production app root is in /home/pi/nodejs!!!
+the git clone instructions below will fail if this directory does not exist
+
 one index.html, a slackomatic.appcache file, the favicon.ico and two images for
 the shutdown warning and the cleanup warning.
 
 The AppCache allows this site to work even if the server goes down.
 
 ```bash
 #clone git repository
-git clone https://github.com/jaeh/slackomatic-frontend /home/pi/nodejs
+git clone https://github.com/metalab/slackomatic-frontend /home/pi/nodejs
 cd /home/pi/nodejs
 ```
 
 ```bash
 #INSTALL: used once before building for the very first time:
-npm run setup 
+npm run setup
 or
 ./cli.sh install
 ```
@@ -40,7 +89,7 @@ npm run upload
 ```
 
 ```bash
-#To start on boot in /etc/inittab on raspbian 
+#To start on boot in /etc/inittab on raspbian
 #with the source in /home/pi/nodejs:
 /home/pi/nodejs/run.sh
 ```

Vagrant-setup.sh

@@ -0,0 +1,19 @@
+#!/bin/bash
+
+# system setup
+apt-get update
+apt-get install -y git curl htop build-essential
+
+# Install NodeJS 6 via repository
+curl -sL https://deb.nodesource.com/setup_6.x | sudo -E bash -
+apt-get install -y nodejs
+
+# app setup as user vagrant
+# cd /vagrant
+# sudo -u vagrant bash -c ""
+# su - vagrant -c "cd /vagrant && ./cli.sh build"
+#
+# cd /vagrant
+# ./cli.sh install
+# # ./cli.sh build
+# # npm start

Vagrantfile

@@ -0,0 +1,44 @@
+Vagrant.configure("2") do |config|
+  # Base Image: CentOS 7.0 x86_64
+  config.vm.box = "debian/wheezy64"
+
+  # Setup the ip-addresses and port bindings
+  config.vm.network :private_network, ip: "10.0.0.10"
+
+  # VirtualBox Settings: Increase to 512MB Memory
+  config.vm.provider :virtualbox do |vm|
+
+    # via https://stefanwrobel.com/how-to-make-vagrant-performance-not-suck
+    host = RbConfig::CONFIG['host_os']
+
+    # Give VM 1/4 system memory & access to all cpu cores on the host
+    if host =~ /darwin/
+      cpus = `sysctl -n hw.ncpu`.to_i
+      # sysctl returns Bytes and we need to convert to MB
+      mem = `sysctl -n hw.memsize`.to_i / 1024 / 1024 / 4
+    elsif host =~ /linux/
+      cpus = `nproc`.to_i
+      # meminfo shows KB and we need to convert to MB
+      mem = `grep 'MemTotal' /proc/meminfo | sed -e 's/MemTotal://' -e 's/ kB//'`.to_i / 1024 / 4
+    else # sorry Windows folks, I can't help you
+      cpus = 2
+      mem = 1024
+    end
+
+    vm.customize ["modifyvm", :id, "--memory", mem]
+    vm.customize ["modifyvm", :id, "--cpus", cpus]
+    vm.customize ["setextradata", :id, "VBoxInternal2/SharedFoldersEnableSymlinksCreate/v-root", "1"]
+  end
+
+  # Use Vagrant's default insecure key (~/.vagrant.d/insecure_private_key)
+  config.ssh.insert_key = false
+
+  # Map project directory using NFS (http://docs-v1.vagrantup.com/v1/docs/nfs.html)
+  # Speedup nfs watching: https://www.jverdeyen.be/vagrant/speedup-vagrant-nfs/ (however we don't use fsc as it required an extra dependency)
+  # https://blog.inovex.de/doh-my-vagrant-nfs-is-slow/
+  # Does not support Windows!
+  config.vm.synced_folder ".", "/vagrant", type: "nfs", nfs_udp: false, nfs_version: 3
+
+  # Provision with Ansible
+  config.vm.provision "shell", path: "Vagrant-setup.sh"
+end

cli.sh

@@ -9,21 +9,23 @@ SRC_DIR=src/
 APPCACHE_FILE=slackomatic.appcache
 CONFIG_FILE=config.js
 TMP_DIR=.tmp/
+SERVER_DIR=/server/slackomatic-frontend
 
 function clean() {
   echo 'clean dist/'
   rm -rf dist/
   mkdir -p dist/js
 }
 
+# install installs dev npm modules, fonts, icons, and sets up the dist/ directory
 function install() {
   mkdir -p dist/
 
   echo 'installing npm dependencies'
   npm install
 
   echo 'install a google webfont for local use and serving'
-  webfont-dl \
+  node_modules/.bin/webfont-dl \
     https://fonts.googleapis.com/css?family=Ubuntu+Mono:400 \
     --font-out=src/font \
     --out src/css/include/font.styl \
@@ -35,7 +37,7 @@ function install() {
 
   echo 'installing fontello icons'
   mkdir -p ${TMP_DIR}
-  fontello-cli install \
+  node_modules/.bin/fontello-cli install \
   --css ${TMP_DIR} \
   --font ${TMP_DIR} \
   --config ${SRC_DIR}fontello.json \
@@ -66,23 +68,15 @@ function build() {
   echo "copy static files to dist"
   cp -rf \
     ${SRC_DIR}img/ \
-    ${SRC_DIR}${APPCACHE_FILE} \
     ${CONFIG_FILE} \
     ${SRC_DIR}favicon.ico \
-    ${SRC_DIR}install-node-raspbian.sh \
     ${SRC_DIR}run.sh \
     ${DIST_DIR} \
   ;
-  chmod +x ${SRC_DIR}install-node-raspbian.sh
   chmod +x ${SRC_DIR}run.sh
 
-  echo "sed ${APPCACHE_FILE} with current timestamp for cache reload"
-  CUR_DATE=$(date --utc --rfc-3339=seconds)
-  echo $CUR_DATE
-  sed -i -e "s/|date|/$CUR_DATE/g" ${DIST_DIR}${APPCACHE_FILE}
-
   echo "compile client side js"
-  browserify \
+  node_modules/.bin/browserify \
     ${SRC_DIR}js/index.js \
     --outfile ${DIST_DIR}js/slackomatic.js \
     -t babelify \
@@ -96,57 +90,63 @@ function build() {
   #~ ;
 
   echo "compile css files"
-  stylus \
+  node_modules/.bin/stylus \
     ${SRC_DIR}css/slackomatic.styl \
     --out ${DIST_DIR}css/slackomatic.css \
     --import node_modules/nib \
   ;
 
   echo "compile html files"
-  jade \
+  node_modules/.bin/jade \
     ${SRC_DIR}html/home.jade \
     --out ${DIST_DIR} \
   ;
 
-  echo "html-inline the source"
-  html-inline \
-    -i ${DIST_DIR}home.html \
-    -o ${DIST_DIR}index.html \
-    -b ${DIST_DIR} \
-  ;
-
-  echo 'babelify the server.js'
-  babel \
-    server.js \
-    --out-file dist/server.js \
-  ;
+  # echo "html-inline the source (NOT WORKING - CSS IS MISSING)"
+  # node_modules/.bin/html-inline \
+  #   -i ${DIST_DIR}home.html \
+  #   -o ${DIST_DIR}index.html \
+  #   -b ${DIST_DIR} \
+  # ;
+
+  mv ${DIST_DIR}/home.html ${DIST_DIR}/index.html
+  cp server.js ${DIST_DIR}/
+
+  mkdir ${DIST_DIR}/node_modules
+  cp -r node_modules/mime ${DIST_DIR}/node_modules
+
+  # echo 'babelify the server.js'
+  # node_modules/.bin/babel \
+  #   server.js \
+  #   --out-file dist/server.js \
+  # ;
 }
 
 function upload() {
   echo 'create dist directory and prebuild app there'
   build;
 
-  echo 'remove all files from the source directory'
-  ssh [email protected] 'rm -rf /home/pi/nodejs/* -r'
+  # echo 'remove all files from the source directory'
+  # ssh [email protected] 'rm -rf /home/pi/nodejs/* -r'
+  # ssh [email protected] 'rm -rf /server/screeninvader/*'
 
   echo 'copy the prebuilt dist directory to the production root'
-  scp -r ./dist/* [email protected]:/home/pi/nodejs/
+  # scp -r ./dist/* [email protected]:/home/pi/nodejs/
+  rsync -rzvh dist/* [email protected]:${SERVER_DIR}/
 
-  echo 'call killkillkill to kill the app and force respawn by inittab'
-  curl http://10.20.30.90/killkillkill
-  echo ''
-}
+  # echo 'call killkillkill to kill the app and force respawn by inittab'
+  # curl http://10.20.30.90/killkillkill
+  echo 'all done'
+ }
 
 function run() {
-  echo 'start watchify and push it to background'
-  watchify \
-    src/js/main.js -t babelify -o dist/js/bundle.js \
-    -- 1> ./watchify.log 2> ./watchify.log &
-
-  echo 'starting nodemon'
-  nodemon \
-    dist/server.js 1337 \
-  ;
+  # echo 'start watchify and push it to background'
+  # node_modules/.bin/watchify \
+  #   src/js/main.js -t babelify -o dist/js/bundle.js \
+  #   -- 1> ./watchify.log 2> ./watchify.log &
+
+  # echo 'starting app with nodemon on port 1337'
+  node_modules/.bin/nodemon dist/server.js 1337
 }
 
 if [ $1 ]

config.js

@@ -1,44 +1,7 @@
 'use strict';
 module.exports = {
-  port: 1337
-, socket: {
+socket: {
     host: '10.20.30.90'
   , port: 8082
   }
-, pages: [
-    '/', 
-    '/index.html', 
-    '/advanced', 
-    '/troubleshooting', 
-    '/timetable'
-  ]
-, files:{
-      '/': {
-        mime: 'text/html'
-      , name: 'index.html'
-    }
-    , '/slackomatic.appcache': {
-        mime: 'text/plain'
-      , name: 'slackomatic.appcache'
-    }
-    , '/favicon.ico': {
-        mime: 'image/x-icon'
-      , name: 'favicon.ico'
-    }
-    , '/img/cleanup_reminder.jpg': {
-        mime: 'image/jpg'
-      , name: 'img/cleanup_reminder.jpg'
-    }
-    , '/img/power_down_warning.png': {
-        mime: 'image/png'
-      , name: 'img/power_down_warning.png'
-    }
-  }
-  , supportedLines: {
-      '2':  {type: 'tram', color: '#e35885'}
-    , 'D':  {type: 'tram',  color: '#e35885'}
-    ,  '13A':{type: 'bus',  color: '#5caed7'}
-    , 'U2': {type: 'sub',  color: '#8a5a83'}
-    , 'U3': {type: 'sub',  color: '#f76205'}
-  }
 };