I’m having some trouble customizing the Rancher UI. I’ve been following the steps explained here by vincent: How can I customize UI?
I can see any changes I’ve made using “npm start” to test the app successfully (all I did was change the hexadecimal color values in the header to green to test that the changes are working).
When I run “./scripts/build-static -l”, it says I get a successful build, then I upload the dist/static/latest folder to a vm on digital ocean. I’m using nginx to serve the files.
I don’t think this step is the problem though, I set up a dummy index.html file in the / directory of the vm to display “hello”. changing the api.ui.index to “http://ipaddress/” successfully shows “hello” when i open up rancher on localhost:8080.
I think the problem is when i run the build script, but I don’t know why it wouldn’t build the changes into the /latest file.
Hmm, that all sounds right, and that script is how we actually build everything so it sort of has to work . CI also runs it with -l -u (upload) on every commit to master to keep a copy that works with api.ui.index=https://releases.rancher.com/ui/latest up to date.
it’s a bit hard to read because it’s minimized but you can check dist/static/latest/assets/ui-light.css (or dark, whichever you changed) and search for HEADER .top-row, right after that should be the background-color code, see if it’s yours or the normal one (#0075a8 light, rgba(0,117,168,.75) dark).
Open up the browser dev tools with like right-click -> Inspect element and check the <head> and make sure the JS and CSS files are all being loaded from your URL. Especially the <link> for ui-light.css, as it’s added by JS after the page loads depending on the theme chosen and not in the original index.html.
Download the css file that is being loaded and check the HEADER .top-row in it again… maybe you’re accidentally uploading new copies an extra folder deep into /var/www/html/latest/latest or something similar.
I’m assuming that when the page is loaded, rancher is using the ui stored on releases.rancher.com, and not the ui that was built by the script?
When you say make sure the js and css files are being loaded from my URL, all I would have to do is change the links /assets/vendor.css, /assets/vendor.js, and ui.js to “//myURL/latest/___”?
I can’t find where the link to ui-dark.css is, is that something I have to change before I run the build script?
I’m looking at my network connections that happen when I reload the page right now, it does look like vendor.css, vendor.js, and ui.js are successfully being loaded from my web host, but “ui-dark.css?0.90.0” is still being loaded from releases.rancher.com.
Is there a way to set the default path for the ui to my web host instead of releases.rancher.com? or am I thinking about this incorrectly?