tree: dfa4664af3cfd46130daf3cdd329dc0e1e29104d [path history] [tgz]
  1. README.md
  2. WEB-INF/
  3. _dev/
  4. _doc/
  5. app/
  6. bower.json
  7. bs-config.js
  8. data/
  9. dev_server.js
  10. error.html
  11. index.html
  12. login.html
  13. nav.html
  14. not-ready.html
  15. onos.js
  16. package.json
  17. raw/
  18. tests/
web/gui/src/main/webapp/README.md

ONOS UI

Updated Development Tools (WIP)

  • cd $ONOS_ROOT/tools/gui
  • gulp
  • npm run dev

Development environment

To help with UI development we provide a dedicated environment that introduce an auto reload feature and allow you to change your javascript files without recompiling the application.

To get started:

  • Be sure to have Node Js installed
  • Enter web/gui/src/main/webapp/ folder
  • Run npm install to install required dependency
  • Run npm start to open start the development environment

In the console you should see something like:

Dev server is up and listening on http://localhost: 8182
[BS] Proxying: http://localhost:8181
[BS] Access URLs:
 ----------------------------------
       Local: http://localhost:3000
    External: http://10.1.8.46:3000
 ----------------------------------
          UI: http://localhost:3002
 UI External: http://10.1.8.46:3002
 ----------------------------------
[BS] Watching files...

To open ONOS visit the local URL (eg: http://localhost:3000) plus /onos/ui (eg: http://localhost:3000/onos/ui)

Loading files from external applications

The UI development environment provide the ability to serve UI files from an external forlder that can be specified with: ONOS_EXTERNAL_APP_DIRS="appName:path-to-the-first-folder" npm start

Eg: ONOS_EXTERNAL_APP_DIRS="sampleCustom:../../meow/sample/meowster-sample/" npm start

Note that ONOS_EXTERNAL_APP_DIRS is an environment variable,so it can be set with export ONOS_EXTERNAL_APP_DIRS="sampleCustom:../../meow/sample/meowster-sample/"