Setup custom UI using ng-admin or react-admin

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.

Has anybody try to connect this project with Rancher API?

I am stuck in the authentification issue!!

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.

1 Like

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

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 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 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/. Which also avoids the CORS issue.

1 Like