templates/html5/README.md

   1 # Template HTML5 Application for Application Framework Binder
   2
   3 ## Setup
   4
   5 Install HTML5 development toolchain on your host
   6
   7 ```
   8 $ curl -sL https://deb.nodesource.com/setup_6.x | sudo -E bash -
   9 $ sudo apt-get install nodejs
  10 $ sudo npm install --global gulp
  11
  12 ```
  13
  14 Then install NodeJS dependencies
  15
  16 ```
  17 $ cd html5     # or the project directory
  18 $ npm install
  19 ```
  20
  21 ## Overload ./app/etc/AppDefaults.js with '.noderc.js'
  22
  23 ```
  24     var config= {
  25         APPNAME : 'xxxxxx-html5',   // AppName is use as main Angular Module name
  26         FRONTEND: "Frontend",    // HTML5 frontend  [no leading ./]
  27         BACKEND : "Backend",     // NodeJS Rest API [no leading ./]
  28         URLBASE : '/opa/',       // HTML basedir when running in production [should end with a /]
  29         APIBASE : '/api/',       // Api url base dir [should end with a /]
  30     };
  31     module.exports = config;
  32 ```
  33
  34 WARNING: in current development version Frontend/services/AppConfig.js is not updated automatically
  35 you should manually assert that backend config is in sync with frontend config.
  36
  37 ## Development build and deployment (development phase)
  38
  39 ```
  40 $ gulp help
  41 $ gulp build-app-dev
  42 $ BOARDIP=1.2.3.4    # change by your board IP address
  43 $ rsync -Pav dist.dev/ root@$BOARDIP:xxxxxx-html5-dev/
  44 ```
  45
  46 ## Test Application
  47
  48 Start AppFramework Binder:
  49
  50 ```
  51 $ ssh root@$BOARDIP
  52 # afb-daemon --port=1234 --verbose --token=123456789 --rootdir=~/xxxxxx-html5-dev
  53 ```
  54
  55 Point your browser onto: http://$BOARDIP:1234/opa?token=123456789
  56
  57 Note:
  58         - do not forget '/opa' that should match with your config.URLBASE
  59         - if you change --token=xxxx do not forget to update ./Frontend/pages/HomeModules.js
  60         - Force HTML/OPA reload with F5 after each HTML5/OPA update or new pages may not be loaded.
  61         - When reloading HTML/OPA with F5 do not forget that your initial token wont be accepted anymore. You should either:
  62                 + restart to clean existing session
  63                 + cleanup AJB_session cookie
  64                 + start an anonymous web page to get a fresh and clean environment.
  65
  66 ## Create application package and install on target
  67
  68 Simply run:
  69
  70 ```
  71 $ gulp widget-prod
  72 ```
  73
  74 This should produce a .wgt file in the current directory. You can then install the widget file onto the target and run the application using application framework utilities:
  75
  76 ```
  77 $ scp *.wgt root@$BOARDIP:~/
  78 $ ssh root@$BOARDIP
  79 # afm-util install xxxxxx-html5.wgt
  80 # afm-util start xxxxxx-html5@0.1
  81 ```
  82
  83 ## Directory structure
  84     /AppClient
  85     |
  86     |---- package.json
  87     |---- bower.json
  88     |---- gulpfile.js
  89     |
  90     |---- /Frontend
  91     |     |
  92     |     |---- index.html
  93     |     |---- app.js
  94     |     |
  95     |     |---- /styles
  96     |     |     |
  97     |     |     |---- _settings.scss
  98     |     |     |---- app.scss
  99     |     |
 100     |     |---- /Widgets
 101     |     |     |
 102     |     |     |--- Widget-1
 103     |     |     |...
 104     |     |
 105     |     |-----/Pages
 106     |           |--- Home-Page
 107     |           |...
 108     |
 109     |
 110     |---- (/dist.dev)
 111     |---- (/dist.prod)
 112