Enabling live development of URCapX contributions

When developing URCapX contributions, it is often valuable to have a mechanism to quickly see the changes made to the frontend or backend code. This can be achieved by using the devUrl property in the manifest.yaml file. For frontend applications, it will enable hot-reloading of the frontend code based on changes to the html and typescript. For containers, it can be used to run code from an IDE in debug mode.

There are two locations in the manifest where the devUrl can be used to enable a faster development cycle. The first is under the ‘webArchive’ section, and the other is under the ‘containers’ section. These two will be described in the following sections.

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 an address that exists in the simulator. It points to the IP address of Dockers Virtual Machines network layer, on the host. Communication on this address from inside the simulator, is redirected out of the simulator to the host on 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.

How to enable live debugging of container contributions

Normally any requests to a urcaps’s backend will go to that container, but with the devUrl property, it is possible to redirect the requests to a local development server. This works both when the urcap is installed in the simulator, and when it is running on a real robot.

On the robot

When running the uracp on a robot, the devUrl could be set to the IP address of the developer machine. Then requests triggered on the robot / teachpendant, will be redirected to the development machine.

In the simulator

The devUrl is evaluated inside the in the simulator which has its own network, so it is important to set the devUrl to the IP address of the development host machine. Addresses like ‘localhost’ or ‘127.0.0.1’ will not work, since the debugging process is not running on the same ‘localhost’ as the simulator. So to reach out of the simulator, to the host machine, the special address ‘http://host.gateway.ip:port/’ can be used.

An example of how to set the devUrl for use in the simulator is shown below.

containers:
  - id: "simple-rest-backend"
    image: "simple-rest-backend:latest"
    ingress:
      - id: rest-api
        containerPort: 52762
        protocol: http
        proxyUrl: /
        devUrl: http://host.gateway.ip:7000/

Let’s look at an example where we start a python FastApi server bound to 0.0.0.0, directly from the IDE.

import uvicorn
from fastapi import FastAPI
app = FastAPI()
@app.get("/get-example")
def read_root():
    return {"Hello": "World"}

if __name__ == "__main__":
    uvicorn.run(app, host="0.0.0.0", port=7000)

When running this, the output should be something like this:

INFO:     Uvicorn running on http://0.0.0.0:7000 (Press CTRL+C to quit)

The devUrl set to ‘http://host.gateway.ip:7000/’ would then redirect all requests, to the running FastApi server on the host.

Running the host code in a docker container

If the development code, is running inside a local docker container, the container should be run with port mappings to the host. In the example above, it would be run with docker run -p 7000:7000 simple-rest-backend:latest This will route any traffic on port 7000 on the host, into the container, and also the other way around. This work both in the Robot and the simulator scenario.