How to enable live development of frontend contributions

The following steps allow running a frontend contribution as a regular Angular app which will enables the developer to hot-reload when changing the UI for a URCap contribution.

Insert devUrl in manifest.yaml

In manifest.yaml, in the webArchive artifact section, add a devUrl property, with the IP address from the above as value. Example below is what it would look like for the gripdistance sample

webArchives:
  - id: gripdistance
    folder: gripdistance
    devUrl: http://host.gateway.ip:4200/

host.gateway.ip

This is a DNS that only exists in the nginx-container in the simulator. It points to the IP address of Dockers Virtual Machines network layer. Communication on this DNS from inside NGINX, is into the simulator through port 4200.

Run the Angular application

After building and installing the URCapX in the simulator, you should be able to run npm run start. Then any time changes have been made to the Angular app, reload the browser with PolyScope X and the changes should be present.