Pre-reqs:
- Node.js - Download Here
- Bower( version >= 0.9.1 ) - Download Here
Once the pre-reqs have been taken care of, run:
npm install -g grunt-cli bower
npm install
bower install
During development it is useful to run the UI in a local server that will watch the file system and automatically reload whenever any files are changed. In order to do this you'll need to set up some environment variables to tell the UI where to find the various PNC services:
PNC_UI_PNC_REST_URL #The location of the PNC REST API
PNC_UI_PNC_NOTIFICATIONS_URL #The location of the PNC REST websocket notifications endpoint
PNC_UI_DA_URL #The location of the Dependency Analyzer REST API
PNC_UI_DA_IMPORT_URL #The location of the Dependency Analyzer Build Configuration Generator endpoint
PNC_UI_DA_IMPORT_RPC_URL #The location of the Dependency Analyzer WebSocket JSON-RPC endpoint
PNC_UI_KEYCLOAK_URL #The location of the keycloak server
PNC_UI_KEYCLOAK_REALM #The keycloak realm to authenticate with
PNC_UI_KEYCLOAK_CLIENT_ID #The keycloak client id
PNC_UI_INTERNAL_SCM_AUTHORITY # internal scm authorityExample configuration:
export PNC_UI_PNC_REST_URL=http://127.0.0.1:8080/pnc-rest/v2
export PNC_UI_PNC_NOTIFICATIONS_URL=ws://127.0.0.1:8080/pnc-rest/notifications
export PNC_UI_DA_URL=http://127.0.0.1/da/rest/v-0.4
export PNC_UI_DA_IMPORT_URL=http://127.0.0.1/da-bcg/rest/v-0.3
export PNC_UI_DA_IMPORT_RPC_URL=ws://127.0.0.1/da-bcg/ws
export PNC_UI_KEYCLOAK_URL=https://127.0.0.1/auth
export PNC_UI_KEYCLOAK_REALM=pnc
export PNC_UI_KEYCLOAK_CLIENT_ID=pncweb
export PNC_UI_INTERNAL_SCM_AUTHORITY=gitlab.comWith these configurations set you can run a development server by simply running:
grunt serve
To build the UI:
grunt dist
This will produce a set of minified resources in the /dist folder.
To create a .jar package of the ui:
mvn clean package
This will build the UI as listed above and then package it in a jar file.
For sake of quick development turnaround, the $ mvn clean will clean just dist/ and .tmp/ build directories, but some frontend build related directories will be still cached (node/, node_modules/, app/bower_components/, .build-tmp). In order to clean all build related caches, execute:
mvn clean install -Dfrontend.clean.force
The versions of packages listed in package.json and their transitive dependencies has to be locked down leveraging NPM Shrinkwrap tool (standard part of NPM distribution).
Use of semantic versioning in NPM makes Node module versions resolution in package.json undeterministic. npm-shrinkwrap.json is an equivalent of package.json that locks down all the transitive dependencies.
For final user, nothing changes:
npm install
You just need to be aware that npm-shrinkwrap.json configuration takes precedence.
The biggest change comes with changing dependency versions, since simple change of package.json won't have any effect. In order to upgrade a package, you can use approach like following one:
$ npm install <package>@<version> --save--dev
Test the build to verify that the new versions work as expected
To lock down version again:
$ npm shrinkwrap --dev
$ git add package.json npm-shrinkwrap.json
$ git commit -m "upgrading <package> to <version>"
Alternatively, you can remove npm-shrinkwrap.json and generate a new one.
In case of build errors with the UI, the first troubleshooting step should always be to run to flush the UI build caches, see here.
The system has a limit to how many files can be watched by a user. You can run out of watches pretty quickly if you have Grunt running with other programs like Dropbox. This command increases the maximum amount of watches a user can have (refer to http://stackoverflow.com/questions/16748737/grunt-watch-error-waiting-fatal-error-watch-enospc):
echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p
note: For Arch Linux add fs.inotify.max_user_watches=524288 to /etc/sysctl.d/99-sysctl.conf and then execute sysctl --system. This will also persist across reboots