afb-client/README.md

   1 ### Sample client application for Application Framework Binder
   2
   3 ![AFB-Client screenshot](http://iot.bzh/images/afb-client.jpg)
   4
   5 _(Application Framework Binder can be found on https://github.com/iotbzh/afb-daemon)_
   6
   7 ## Installation
   8
   9 Install HTML5 development toolchain on your host
  10
  11     1. Check out this repository
  12        git clone https://github.com/iotbzh/afb-client.git
  13
  14     2) Install NodeJs [not used on target]
  15        zypper install nodejs
  16        yum install nodejs
  17
  18     3) Install building tools [bower, gulp, ....]
  19        npm install # this install all development tool chain dependencies
  20        sudo npm install --global gulp  # this is not mandatory but it will make your live simpler
  21
  22     4. For livereload functionality [automatic refresh of HTML/CSS]
  23        install [livereload Chrome extension](https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei)
  24
  25
  26 ### Overload ./app/etc/AppDefaults.js with '.noderc.js'
  27     var config= {
  28         APPNAME : 'AFBclient',   // AppName is use as main Angular Module name
  29         FRONTEND: "Frontend",    // HTML5 frontend  [no leading ./]
  30         BACKEND : "Backend",     // NodeJS Rest API [no leading ./]
  31         URLBASE : '/opa/',       // HTML basedir when running in production [should end with a /]
  32         APIBASE : '/api/',       // Api url base dir [should end with a /]
  33         DEBUG   : 4001,          // Node Debug Port [for mock API debug only]
  34         DBG_LVL : 5,             // Debug Trace Level 0=no trace.
  35     };
  36     module.exports = config;
  37
  38     WARNING: in current version Frontend/services/AppConfig.js is not updated automatically
  39     you should make sure than your backend config fit with your frontend config.
  40     Note: FCS version should have AppConfig.js configurated automatically from GULP, but this is for "tomorrow"
  41
  42 ### Build project
  43     gulp help
  44     gulp build-app-dev
  45     gulp watch-dev
  46     http://localhost:3001/opa  /* debug mock api base on Backend/RestApi */
  47
  48 ### Test with Application server binder
  49
  50     # Start AppFramework Binder
  51         export MYWORKSPACE=$HOME/Workspace
  52         $MYWORKSPACE/afb-daemon/build/afb-daemon --port=1234 --verbose --token=123456789 --rootdir=$MYWORKSPACE/afb-client/dist.dev
  53
  54     Point your browser onto: http://localhost:1234/opa
  55
  56     Note:
  57       - do not forget '/opa' that should match with your config.URLBASE
  58       - if you change --token=xxxx do not forget to update ./Frontend/pages/HomeModules.js
  59       - Force HTML/OPA reload with F5 after each HTML5/OPA update or new pages may not be loaded.
  60       - When reloading HTML/OPA with F5 do not forget that your initial token wont be accepted anymore. You should either restart to clean existing session or cleanup AJB_session cookie.
  61
  62 ### Move to Target
  63     cd $MYWORKSPACE/afb-client
  64     gulp build-app-prod
  65     scp -r ./dist.prod/* user@mytarget:/rootdir/afb-client
  66     ssh user@mytarget "afb-daemon --port=3001 --token='' --rootdir=/rootdir/afb-client"
  67     http://mytarget:3001/opa
  68
  69 ### Directory structure
  70     /AppClient
  71     |
  72     |---- package.json
  73     |---- bower.json
  74     |---- gulpfile.js
  75     |---- .noderc.js  [Warning: contains private keys should not uploaded in Github]
  76     |
  77     |---- /Frontend
  78     |     |
  79     |     |---- index.html
  80     |     |---- app.js
  81     |     |
  82     |     |---- /styles
  83     |     |     |
  84     |     |     |---- _settings.scss
  85     |     |     |---- app.scss
  86     |     |
  87     |     |---- /Widgets
  88     |     |     |
  89     |     |     |--- Widget-1
  90     |     |     |...
  91     |     |
  92     |     |-----/Pages
  93     |           |--- Home-Page
  94     |           |...
  95     |
  96     |
  97     |---- /Backend
  98     |     |-- server.js     // launcher
  99     |     |----/ models     // mogoose database schemas
 100     |     |----/ providers  // authentication services
 101     |     |----/ restapis   // application APIs
 102     |
 103     |---- (/dist.dev)
 104     |---- (/dist.prod)
 105