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.
Prerequisites:
- NodeJS & NPM
*nix environment
NodeJS version
UI Development server uses a special `harmony_destructuring` flag that works well with node versions > 5.x
For node version >= 6, you may want to use `–harmony_destructuring_bind` instead.
Disabling JS minification
From ONOS 1.10 onwards, JS & CSS files will be minified for better performance. However this minification would prevent the file changes getting picked up by development server.
So make sure you comment out 40th line in `tools/gui/gulp-tasks/bundles/bundle-js/index.js` before attempting to use this.
Installing NodeJS 5.x from tar.gz option:
Though there are several versions of NodeJS and several ways to install NodeJS, installing from pre-built tar.gz package is the most efficient way.
- Download Node 5.x version using wget
- Install NodeJS binary in /usr/local as follows
- NodeJS 5.x installation
cd /usr/local tar --strip-components 1 -xzf <path-to-downloaded>/node-v5<ver>-linux-x64.tar.gz
- Verify installation
- Verifying Installation
:~/onos/web/gui/src/main/webapp$ node -v v5.12.0
Installing & Starting Development Server:
Enter `tools/dev/gui/` folder
Run `npm install` to install required dependency
Run `npm run dev` to open start the development environment
In the console you should see something like:
In the console you should see something like: ``` [18:05:47] Requiring external module babel-register [18:05:50] Using gulpfile ~/SDN/onos/tools/gui/gulpfile.babel.js [18:05:50] Starting 'bundle-js'... [18:05:50] Starting 'proxy-server'... [18:05:50] Webserver started at http://localhost:8189 [18:05:50] Finished 'proxy-server' after 7.73 ms [18:05:50] Starting 'watch-js'... [18:05:50] Finished 'watch-js' after 85 ms [18:05:51] Finished 'bundle-js' after 374 ms [18:05:51] Starting 'serve'... [HPM] Proxy created: [ '**/*.js', '!/onos/ui/onos.js' ] -> http://localhost:8189 [HPM] Proxy created: **/*.js.map -> http://localhost:8189 [HPM] Subscribed to http-proxy events: [ 'error', 'close' ] [18:05:51] Finished 'serve' after 63 ms [18:05:51] Starting 'default'... [18:05:51] Finished 'default' after 3.76 μs [Browsersync] Proxying: http://localhost:8181 [Browsersync] Access URLs: ---------------------------------- Local: http://localhost:3000 External: http://10.1.8.50:3000 ---------------------------------- UI: http://localhost:3002 UI External: http://10.1.8.50:3002 ---------------------------------- [18:06:10] Starting 'bundle-js'... [Browsersync] Reloading Browsers... [18:06:11] Finished 'bundle-js' after 656 ms ```
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/"