Hi,
I wanted to customize the rancher UI, so I forked its Github repo.
I got some way to test the changes - build-static then deploying and changing ‘ui-index’ of running docker process but this is very slow.
But, I would like to do live development. I am referring localhost or IP address as URL in the following discussion. Opening URL:8000 directly as mentioned in GitHub repo after yarn start does not work(server URL can’t be set probably because no API server gets run?).
So I used docker to run rancher:rancher on URL:443, and tried RANCHER=“https://URL” yarn start. I also tried changing ‘apiServer’ to URL:443 in code and ui-index to URL:8000 but URL:443 in the browser shows the JSON data {type:collections,links:{},resourceType:“apiRoot”…}.
What’s the proper method to setup a live development environment?
The UI is an API client; it doesn’t include Rancher/the API to talk to.
So you start and configure a normal rancher install somewhere, point the locally running UI at it by running RANCHER=https://your-rancher-install yarn start and then go to https://localhost:8000 to see your code running.
Hi @vincent,
Thanks for the help. I was trying wrong URL. Now receving CORS errors where my rancher API (rancher:rancher docker) is running on port 443 and I am using RANCHER=https://URL yarn start. How to enable CORS on same domain (localhost)?
You shouldn’t need CORS; the UI talks to its own origin and then node proxies the request to the target server. The server returns absolute URLs in the responses that the UI then later follows; these are supposed to be set to the correct origin matching the browser’s request, so that nothing crosses origins.
Try running rancher/rancher:master-head instead of (I assume) :latest. There was an issue around that late in the 2.4 release cycle and I think it shipped without rewriting the origin correctly (which only matters for UI development…) and hasn’t been backported into a 2.4.x release yet.
Hi @vincent,
We are using rancher 2.4.8, but when we run the UI on localhost(following above instructions), websocket fails to connect.
But UI hosted on server doesn’t have any issue with websocket.
Could you give some comment on this please?
