# Rancher UI Development

**URL:** <https://forums.suse.com/t/rancher-ui-development/17132>\
**Category:** SUSE Rancher Prime\
**Created:** [April 12, 2020, 4:30am UTC](https://forums.suse.com/t/rancher-ui-development/17132 "2020-04-12T04:30:01Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![amit1](https://sea2.discourse-cdn.com/flex022/user_avatar/forums.suse.com/amit1/32/5581_2.png) [@amit1](https://forums.suse.com/u/amit1)\
**Post date:** [April 12, 2020, 4:30am UTC](https://forums.suse.com/t/rancher-ui-development/17132/1 "2020-04-12T04:30:01Z")

</div>

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](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?

---

<div class="post-metadata">

**Author:** ![vincent](https://sea2.discourse-cdn.com/flex022/user_avatar/forums.suse.com/vincent/32/7156_2.png) [@vincent](https://forums.suse.com/u/vincent)\
**Post date:** [April 12, 2020, 5:55am UTC](https://forums.suse.com/t/rancher-ui-development/17132/2 "2020-04-12T05:55:22Z")

</div>

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](https://localhost:8000) to see your code running.

---

<div class="post-metadata">

**Author:** ![amit1](https://sea2.discourse-cdn.com/flex022/user_avatar/forums.suse.com/amit1/32/5581_2.png) [@amit1](https://forums.suse.com/u/amit1)\
**Post date:** [April 12, 2020, 8:46am UTC](https://forums.suse.com/t/rancher-ui-development/17132/4 "2020-04-12T08:46:02Z")

</div>

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)?

---

<div class="post-metadata">

**Author:** ![vincent](https://sea2.discourse-cdn.com/flex022/user_avatar/forums.suse.com/vincent/32/7156_2.png) [@vincent](https://forums.suse.com/u/vincent)\
**Post date:** [April 14, 2020, 7:30pm UTC](https://forums.suse.com/t/rancher-ui-development/17132/5 "2020-04-14T19:30:15Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Startech\_Dev](https://sea2.discourse-cdn.com/flex022/user_avatar/forums.suse.com/startech_dev/32/6978_2.png) [@Startech\_Dev](https://forums.suse.com/u/Startech_Dev)\
**Post date:** [December 15, 2020, 10:33am UTC](https://forums.suse.com/t/rancher-ui-development/17132/6 "2020-12-15T10:33:08Z")

</div>

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?

 ![image](https://us1.discourse-cdn.com/flex022/uploads/suse/original/2X/2/2e00c18d33530b13a1457391e3f8331abf219061.jpeg)

---

<div class="post-metadata">

**Author:** ![vincent](https://sea2.discourse-cdn.com/flex022/user_avatar/forums.suse.com/vincent/32/7156_2.png) [@vincent](https://forums.suse.com/u/vincent)\
**Post date:** [December 15, 2020, 6:29pm UTC](https://forums.suse.com/t/rancher-ui-development/17132/7 "2020-12-15T18:29:08Z")

</div>

Take a look at the actual response to the request in the Network tab, and/or the server container log.

---

<div class="post-metadata">

**Author:** ![Startech\_Dev](https://sea2.discourse-cdn.com/flex022/user_avatar/forums.suse.com/startech_dev/32/6978_2.png) [@Startech\_Dev](https://forums.suse.com/u/Startech_Dev)\
**Post date:** [December 16, 2020, 9:04am UTC](https://forums.suse.com/t/rancher-ui-development/17132/8 "2020-12-16T09:04:31Z")

</div>

I could not see any response at all. SSL cert and any other things are setup correctly

 ![image](https://us1.discourse-cdn.com/flex022/uploads/suse/original/2X/0/0d74fc6b11d021eab9882503015b7cf51eae32c2.jpeg)
