aboutsummaryrefslogtreecommitdiffstats
path: root/examples/html5/README.md
diff options
context:
space:
mode:
authorRomain Forlot <romain.forlot@iot.bzh>2017-05-02 19:47:36 +0200
committerRomain Forlot <romain.forlot@iot.bzh>2017-05-02 19:47:36 +0200
commit64ffd7a9f9604805c01f8bb2fd32616c3adf3ec0 (patch)
tree264e2743e509b8d7993bc5550ce6140dfc4b151f /examples/html5/README.md
parent6d75b83627114cecd7992bb460f6908268a57967 (diff)
Initial commit
Change-Id: I536251add63ef100b42a67e39a02fef117f2b414 Signed-off-by: Romain Forlot <romain.forlot@iot.bzh>
Diffstat (limited to 'examples/html5/README.md')
-rw-r--r--examples/html5/README.md112
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)
+