Error loading Registry UI on https

[zaheershaik]

Hello,

I tried deploying the image "apicurio/apicurio-registry-mem:1.3.1.Final" (in memory version) on AWS ECS Fargate for demo purpose. I fronted the UI using ALB on HTTP and HTTPS. The UI loads fine on http, but I notice the following error when I try to browse on https. I haven't tried the PostgreSQL image yet, which is what I actually plan to use in prod.

{
   "message": "Network Error",
   "name": "Error",
   "stack": "https://schema-registry-dev.autodesk.com/ui/vendors.bundle.6b1a271b69192f98d9e5.js:289:56079\nhttps://schema-registry-dev.autodesk.com/ui/vendors.bundle.6b1a271b69192f98d9e5.js:80:46040",
   "config": {
      "url": "http://schema-registry-dev.autodesk.com/api/search/artifacts?limit=10&order=asc&over=everything",
      "method": "get",
      "headers": {
         "Accept": "application/json"
      },
      "transformRequest": [
         null
      ],
      "transformResponse": [
         null
      ],
      "timeout": 0,
      "xsrfCookieName": "XSRF-TOKEN",
      "xsrfHeaderName": "X-XSRF-TOKEN",
      "maxContentLength": -1
   }
}

[EricWittmann]

My best guess based on the information you've provided is that the UI is trying to talk to the API via a non-SSL connection. Likely your browser is denying that. The way this works is that when the UI loads it is configured with the URL of the API it should use. The server tries to generate an appropriate URL for the API based on the HTTP request from the client, but that doesn't always work (it depends on your deployment configuration). So in this case my guess is that the server is failing to properly figure out the API URL. You can fix this by overriding the value using the REGISTRY_UI_CONFIG_APIURL environment variable. I think if you set the value of that environment variable to https://schema-registry-dev.autodesk.com/api/ it should resolve your issue. That ENV var would need to be set on the application process that you have running in AWS (obviously).

You can confirm this diagnosis by going here:

http://schema-registry-dev.autodesk.com/ui/config.js

That is the UI configuration I mentioned above. When I run the app locally mine looks like this:

var ApicurioRegistryConfig = {
  "mode" : "prod",
  "artifacts" : {
    "type" : "rest",
    "url" : "http://localhost:8080/api"
  },
  "ui" : {
    "url" : "http://localhost:8080/ui",
    "contextPath" : "/ui"
  },
  "features" : {
    "readOnly" : false
  }
};

Note the $artifacts.url property. That has the URL of the Registry API. Yours is likely set to "http" instead of "https".

[zaheershaik]

@EricWittmann That worked, thank you !

Is there more documentation to customize the app? Like the logo, heading, styling etc? I see how to override the quarkus params and how to set the UI read only. Is there anything more that I might have overlooked?

[EricWittmann]

Unfortunately Studio is not currently designed to be skinnable. You could probably make some minor changes like the masthead logo and background image by providing your own images (perhaps by intercepting the HTTP requests for those resources and providing customized ones). But I think that's the best you could do. :(