Video -How to: white labeling of your free open source IoT platform. - Blank Page after Local Deployment

Hi,

I followed the OR video here … as faithfully as possible (the ref. documentation has changed - updated).

OR seems to deploy ok with no (major) errors …

However, when I try localhost I get a blank page … no login input available.

Any tips or hints appreciated or point me to where this type of fault usually occurs .

cheers,

Can you reach:

localhost/auth ?

I think so …

Is this correct or expected?

Could you please show your docker-compose.yml ?

How do you Start the docker compose?

Yep … As follows …

# OpenRemote v3
#
# Profile that runs the stack by default on https://localhost using a self-signed SSL certificate,
# but optionally on https://$OR_HOSTNAME with an auto generated SSL certificate from Letsencrypt.
#
# It is configured to use the AWS logging driver.
#
version: '2.4'

volumes:
  proxy-data:
  temp-data:
  postgresql-data:
#  btmesh-data:

services:

  proxy:
    image: openremote/proxy:${PROXY_VERSION:-latest}
    restart: always
    depends_on:
      manager:
        condition: service_healthy
    ports:
      - "80:80"
      - "${OR_SSL_PORT:-443}:443"
      - "8883:8883"
    volumes:
      - proxy-data:/deployment
    environment:
      LE_EMAIL: ${OR_EMAIL_ADMIN:-}
      DOMAINNAME: ${OR_HOSTNAME:-localhost}
      DOMAINNAMES: ${OR_ADDITIONAL_HOSTNAMES:-}
      # USE A CUSTOM PROXY CONFIG - COPY FROM https://raw.githubusercontent.com/openremote/proxy/main/haproxy.cfg
      #HAPROXY_CONFIG: '/data/proxy/haproxy.cfg'

  postgresql:
    restart: always
    image: openremote/postgresql:${POSTGRESQL_VERSION:-latest}
    volumes:
      - postgresql-data:/var/lib/postgresql/data
      - temp-data:/tmp

  keycloak:
    restart: always
    image: openremote/keycloak:${KEYCLOAK_VERSION:-latest}
    depends_on:
      postgresql:
        condition: service_healthy
    volumes:
      - ./deployment:/deployment
    environment:
      KEYCLOAK_ADMIN_PASSWORD: ${OR_ADMIN_PASSWORD:-secret}
      KC_HOSTNAME: ${OR_HOSTNAME:-localhost}
      KC_HOSTNAME_PORT: ${OR_SSL_PORT:--1}


  manager:
#    privileged: true
    restart: always
    image: openremote/manager:${MANAGER_VERSION:-latest}
    depends_on:
      keycloak:
        condition: service_healthy
    environment:
      OR_SETUP_TYPE:
      OR_ADMIN_PASSWORD:
      OR_SETUP_RUN_ON_RESTART:
      OR_EMAIL_HOST:
      OR_EMAIL_USER:
      OR_EMAIL_PASSWORD:
      OR_EMAIL_X_HEADERS:
      OR_EMAIL_FROM:
      OR_EMAIL_ADMIN:
      OR_HOSTNAME: ${OR_HOSTNAME:-localhost}
      OR_ADDITIONAL_HOSTNAMES: ${OR_ADDITIONAL_HOSTNAMES:-}
      OR_SSL_PORT: ${OR_SSL_PORT:--1}
      OR_DEV_MODE: ${OR_DEV_MODE:-false}

      # The following variables will configure the demo
      OR_FORECAST_SOLAR_API_KEY:
      OR_OPEN_WEATHER_API_APP_ID:
      OR_SETUP_IMPORT_DEMO_AGENT_KNX:
      OR_SETUP_IMPORT_DEMO_AGENT_VELBUS:
    volumes:
      - ./deployment:/deployment
#      - temp-data:/tmp
#      - /var/run/dbus:/var/run/dbus
#      # Bluetooth mesh volume
#      - btmesh-data:/btmesh
#   devices:
#     - /dev/ttyACM0:/dev/ttyS0

as per video …

docker-compose -p openremote up

thanks

So, ok, you didn‘t made changes to the docker-compose.

When you press F12 while you are on the blank Page, what the Console says?

I guess you made some mistake in the customizing. If the manager_config.json is not configured properly, you get a blank Page.

You can try to rename the manager_config.json and restart the docker-compose. If you can see the Loginpage, then you failed something in the config.

Can you provide the config?

1 Like

Thanks for this reply and answers as follows …

As advised … renamed manager_config.json and the login page was available and working aok.

Config file as follows …


  "realms": {
    "default": {
      "appTitle": "ACME IoT",
      "headers": [
        "map", "assets", "rules", "insights", "language", "users", "roles", "account", "logs", "logout"
      ],
      "styles": ":host > * {--or-app-color2: #F9F9F9; --or-app-color3: #22211f; --or-app-color4: #1b5630; --or-app-color5: #CCCCCC;}",
      "logo": "/images/logo.png",
      "logoMobile": "/images/logo-mobile.png",
      "favicon": "/images/favicon.png",
      "language": "en"
    }
  }

I’ve checked it a number of times but i guess I’m doing something wrong that I cant see. :frowning:

Any thoughts appreciated.

cheers

Maybe you are missing the initial brackets? So around the whole thing:

{
   "realms": {
THE REST HERE
   }
}
1 Like

Don is correct:

you are missing the initial brackets:

{
  "realms": {
    "default": {
      "appTitle": "ACME IoT",
      "headers": [
        "map", "assets", "rules", "insights", "language", "users", "roles", "account", "logs", "logout"
      ],
      "styles": ":host > * {--or-app-color2: #F9F9F9; --or-app-color3: #22211f; --or-app-color4: #1b5630; --or-app-color5: #CCCCCC;}",
      "logo": "/images/logo.png",
      "logoMobile": "/images/logo-mobile.png",
      "favicon": "/images/favicon.png",
      "language": "en"
    }
  }
}

Doh! … should have spotted that … even for a lowly mech. engineer.

All good now … except for the sign-in page that still has the OR logo etc …?

Can this be white labeled as well? :smiley:

Many thanks and kudos to all involved in this excellent project.

laters

You‘re welcome.

Yes, you can customize the login page as well.

In the keycloak repo there are the templates.

I mentioned it in a earlier post.

cheers for this Denis …

at the risk of being an even bigger numpty … do I have to download all the files in all the 3 folders (account, email, login (and resources etc)) or just the “template.ftl” file?

thx

At least all, but if you want to customize only the login Page, then you should edit the template.ftl and styles.css of the login folder.

It‘s enough if you only copy the login folder, but it Must be the whole folder.

So I downloaded all the files etc and I only changed the favicon.png (in all the sub directories) just to see if that would come up … unfortunately not … no change … all as original OR.

I also noticed that I’d lost my original internal white labelling as previous. ie … manager_config.json was not being activated.

I then removed all the new folders to get back to my original white label setup … restarted etc but still no internal white labelling.

Any thoughts on how to get manager_config.json working again?

sigh

Hi Bobster,

In the Keycloak setup code, you need to refer to the new keycloak themes.
I’m not sure whether you are using the custom-project template repository, otherwise you can make the folder structure yourself for the setup files. See this file:

In the onStart() method you can refer to the styling for the master realm as such:

    Realm masterRealm = keycloakProvider.getRealm("master");
    masterRealm.setAccountTheme("master");
    masterRealm.setLoginTheme("master");
    masterRealm.setEmailTheme("master");
    keycloakProvider.updateRealm(masterRealm);

And if you were to create a realm in the setup code, it could look like this (Make sure the folder in which the keycloak theme is is called ‘customera’ in this case):

    Realm customerARealm = createRealm("customera", "Customer A", true);
    customerARealm.setAccountTheme("customera");
    customerARealm.setLoginTheme("customera");
    customerARealm.setEmailTheme("customera");
    keycloakProvider.updateRealm(customerARealm);

Regarding the manager_config, its hard to say what is going wrong. Maybe you referencing it when serving? npm run serve -- --env config=..\..\..\..\deployment\manager\app
And make sure to not only look at it as the admin account, since that one will only display the color changes you made and not other manager config changes such a map markers and asset viewer panels.

I hope this helps!

I understand its not very straightforward at the moment, we are working hard to make this workflow smoother.

Don

thanks for this Don (and Denis) and I’ll give it a try and let you know.

Any timescale for ‘make this workflow smoother’? :slight_smile:

laters

Hey @bobster888

you can do the way like Don mentioned, but easier it would be to follow my guideline.

The favicon.png, logo,png and logo-mobile.png has to be placed in:
./deployment/manager/app/images/

The Templates:

./deployment/keycloak/theme/openremote /account
/email
/login

in Login Folder you can edit the templae.ftl

Remember, the OpenRemote Logo from the Loginpage is an SVG (see in Code: Line 33)

Don’t forget to add in the docker-compose.yml:

at Line 85:

volumes:
  - temp-data:/tmp
  -./deployment:/deployment
1 Like

Thanks for this Denis,

I notice you have a full stop prior to the deployment …eg ./deployment is this a typo?

./deployment/keycloak/theme/openremote /account

Also …is it ‘/theme’ or ‘/themes’ …the documentation is confusing …

My local deployment is on my windows laptop.

Yip … favicon etc in correct directory.

in Login Folder you can edit the templae.ftl

Is there a worked example of the template.ftl file available?

This caused a yml error when trying to start …

I changed it to … Line 92 - /deployment:/deployment

to get it to run … still no white label effects.:frowning: