# Setup custom UI using ng-admin or react-admin

**URL:** <https://forums.suse.com/t/setup-custom-ui-using-ng-admin-or-react-admin/1587>\
**Category:** Rancher 1.x\
**Created:** [January 31, 2016, 11:09am UTC](https://forums.suse.com/t/setup-custom-ui-using-ng-admin-or-react-admin/1587 "2016-01-31T11:09:44Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![dalareo](https://sea2.discourse-cdn.com/flex022/user_avatar/forums.suse.com/dalareo/32/708_2.png) [@dalareo](https://forums.suse.com/u/dalareo)\
**Post date:** [January 31, 2016, 11:09am UTC](https://forums.suse.com/t/setup-custom-ui-using-ng-admin-or-react-admin/1587/1 "2016-01-31T11:09:45Z")

</div>

Hi!  
I am interested in customize Rancher UI, but also in building my own UI, as we are developing a CaaS platform dedicated to education institutions.

I would like to use AngularJS or even better ReactJS to build the UI and I have found a really nice project that connects to external API and helps you to build a custom admin dashboard.

> **[marmelab/ng-admin](https://github.com/marmelab/ng-admin)**
>
> Add an AngularJS admin GUI to any RESTful API. Contribute to marmelab/ng-admin development by creating an account on GitHub.

Has anybody try to connect this project with Rancher API?

I am stuck in the authentification issue!!

---

<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:** [February 1, 2016, 3:35am UTC](https://forums.suse.com/t/setup-custom-ui-using-ng-admin-or-react-admin/1587/2 "2016-02-01T03:35:02Z")

</div>

If you’re building your own UI you’ll want to use JWT auth; `POST /v1/token` `{code: "str"}`, where str is the code that Githib provides on redirect back to you for them, or “username:password” for the other methods.

You’ll get back an object with a long `token` string and can send that to future requests as a `Authorization: bearer token_str` header.

---

<div class="post-metadata">

**Author:** ![dalareo](https://sea2.discourse-cdn.com/flex022/user_avatar/forums.suse.com/dalareo/32/708_2.png) [@dalareo](https://forums.suse.com/u/dalareo)\
**Post date:** [February 1, 2016, 1:54pm UTC](https://forums.suse.com/t/setup-custom-ui-using-ng-admin-or-react-admin/1587/3 "2016-02-01T13:54:12Z")

</div>

Should I also edit some value at API in order to allow external access to API?

---

<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:** [February 1, 2016, 3:05pm UTC](https://forums.suse.com/t/setup-custom-ui-using-ng-admin-or-react-admin/1587/4 "2016-02-01T15:05:01Z")

</div>

The API is public assuming you bind a host port to it as all our examples of running it show. It does not return CORS headers so that may be a problem for you, but you should probably be doing [SSL](http://docs.rancher.com/rancher/installing-rancher/installing-server/basic-ssl-config/) anyway and can inject it there.

If you build a UI that is completely static files (index.html + CSS/JS/etc it includes) like ours then you can actually change the setting at [http://your-rancher:8080/v1/settings/api.ui.index](http://your-rancher:8080/v1/settings/api.ui.index) from the default “local” (which uses the copy of our UI packaged in the release) to point to your index.html. Then on startup Rancher will download the index.html and serve it up on requests to [http://your-rancher:8080/](http://your-rancher:8080/). Which also avoids the CORS issue.