diff options
Diffstat (limited to 'examples/html5/README.md')
| -rw-r--r-- | examples/html5/README.md | 112 |
1 files changed, 112 insertions, 0 deletions
diff --git a/examples/html5/README.md b/examples/html5/README.md new file mode 100644 index 0000000..cab879e --- /dev/null +++ b/examples/html5/README.md @@ -0,0 +1,112 @@ +# Template HTML5 Application for Application Framework Binder + +## Setup + +Install HTML5 development toolchain on your host + +``` +$ curl -sL https://deb.nodesource.com/setup_6.x | sudo -E bash - +$ sudo apt-get install nodejs +$ sudo npm install --global gulp + +``` + +Then install NodeJS dependencies + +``` +$ cd html5 # or the project directory +$ npm install +``` + +## Overload ./app/etc/AppDefaults.js with '.noderc.js' + +``` + var config= { + APPNAME : 'xxxxxx-html5', // AppName is use as main Angular Module name + FRONTEND: "Frontend", // HTML5 frontend [no leading ./] + BACKEND : "Backend", // NodeJS Rest API [no leading ./] + URLBASE : '/opa/', // HTML basedir when running in production [should end with a /] + APIBASE : '/api/', // Api url base dir [should end with a /] + }; + module.exports = config; +``` + +WARNING: in current development version Frontend/services/AppConfig.js is not updated automatically +you should manually assert that backend config is in sync with frontend config. + +## Development build and deployment (development phase) + +``` +$ gulp help +$ gulp build-app-dev +$ BOARDIP=1.2.3.4 # change by your board IP address +$ rsync -Pav dist.dev/ root@$BOARDIP:xxxxxx-html5-dev/ +``` + +## Test Application + +Start AppFramework Binder: + +``` +$ ssh root@$BOARDIP +# afb-daemon --port=1234 --verbose --token=123456789 --rootdir=~/xxxxxx-html5-dev +``` + +Point your browser onto: http://$BOARDIP:1234/opa?token=123456789 + +Note: + - do not forget '/opa' that should match with your config.URLBASE + - if you change --token=xxxx do not forget to update ./Frontend/pages/HomeModules.js + - Force HTML/OPA reload with F5 after each HTML5/OPA update or new pages may not be loaded. + - 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 + + cleanup AJB_session cookie + + start an anonymous web page to get a fresh and clean environment. + +## Create application package and install on target + +Simply run: + +``` +$ gulp widget-prod +``` + +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: + +``` +$ scp *.wgt root@$BOARDIP:~/ +$ ssh root@$BOARDIP +# afm-util install xxxxxx-html5.wgt +# afm-util start xxxxxx-html5@0.1 +``` + +## Directory structure + /AppClient + | + |---- package.json + |---- bower.json + |---- gulpfile.js + | + |---- /Frontend + | | + | |---- index.html + | |---- app.js + | | + | |---- /styles + | | | + | | |---- _settings.scss + | | |---- app.scss + | | + | |---- /Widgets + | | | + | | |--- Widget-1 + | | |... + | | + | |-----/Pages + | |--- Home-Page + | |... + | + | + |---- (/dist.dev) + |---- (/dist.prod) + |