Lab: Customize Red Hat Developer Hub Appearance

Quick Logout Links

Prior to starting this module, click the following two links and make sure you log out of previous sessions to prevent errors related to performing actions as the wrong user.

You can change Red Hat Developer Hub appearance by configuring elements of the visual theme.

Red Hat Developer Hub provides two themes:

The Red Hat Developer Hub theme features elements and colors integrated with the Red Hat look and feel seen in the OpenShift Web Console, ACM, Cockpit, and other familiar interfaces. It is the default.
The Backstage theme is the simple base theme from Red Hat Developer Hub’s open source Backstage core.

While advanced or reseller requirements might replace the entire theme with a custom provider or providers, this module focuses on the more common deployment task of modifying the included theme with visual elements that suit a company, brand, or team style.

Per-User Appearance Settings

Any Red Hat Developer Hub user can select their preference from the provided Light, Dark, or Auto theme modes.

The default theme mode is Auto, which sets Red Hat Developer Hub’s Light or Dark mode from the user’s local system preferences.

Change the Theme Mode

In any Red Hat Developer Hub instance, including the one you’re about to create, you can select a theme mode by clicking your user name at the top right and selecting Settings from the displayed menu to open the Settings screen. Select the desired mode from the Appearance section.

Save Screen Space

Each user can also choose whether to "pin" the left-hand sidebar in its expanded state, showing icons and names, or to collapse the sidebar to display only icons.

Global Appearance Options

Red Hat Developer Hub configuration is set in a file conventionally named app-config.yaml. To customize global elements of RHDH appearance, you’ll modify settings in an app-config for your instance in the same way you would for any instance of RHDH or Backstage. Instead of a file in the container’s filesystem, however, an OpenShift ConfigMap will hold the app-config.yaml data for your RHDH instance. This externalizes the RHDH configuration and allows you to manage it more easily (for example, using GitOps to synchronize changes across multiple environments).

What You Can Change

In the Developer Hub app-config, you can customize theme components including:

Site/Page Title and Logo
Font color, size, and style of text in paragraphs, headings, headers, and buttons
Header color and gradient

This module shows how to change the display title and logo to illustrate the procedure for customizing Red Hat Developer Hub appearance. The Setup Red Hat Developer Hub module uses the same method to configure functional aspects of a Red Hat Developer Hub instance, like access control and plugin settings.

Customize Red Hat Developer Hub Title and Logo

At the overview level, specifying a title and logo for your Red Hat Developer Hub takes 3 primary steps: First, you’ll create a Project (a namespace) for your custom RHDH instance. In that Project you’ll create a ConfigMap to store instance configuration, including an embedded image. Then, you’ll create a short CustomResource to define the RHDH instance you’d like the cluster to create and manage.

Create an OpenShift Project

Go to the {openshift_console_url}[OpenShift Web Console^]. Log in with the credentials:
- Username: {openshift_admin_user}
- Password: {openshift_admin_password}
Switch to the Administrator perspective using the Perspective Switcher in the top-left of the UI.
Navigate to Home > Projects, then click the Create project button.
Enter the name brand-rhdh in the displayed dialog, then click Create.

The app-config ConfigMap

You’ll customize the title and logo of an instance of Red Hat Developer Hub by setting two keys in your app-config: app.title and app.branding.fullLogo.

`app.title`

The app.title key accepts a quoted string value to set the visible <title> element of pages in your Red Hat Developer Hub instance. It’s easiest to see this title in your browser window’s title bar or in the label on a browser tab.

`app.branding.fullLogo`

The fullLogo key accepts a base64-encoded SVG, PNG, or JPEG image to be shown at the top left corner of Red Hat Developer Hub pages.

Red Hat Developer Hub uses encoded images for visual elements so they can be embedded in app-config rather than referencing an external file or URL.

This module provides an encoded image in the sample code for app-config. It also explains how to encode your own image.

Create the ConfigMap

Copy the ConfigMap declaration from the code block below.
In the OpenShift Web Console, Administrator perspective, select Workloads to expand it, then select ConfigMaps.
Click the Create ConfigMap button at top right.
Change the Configure via: selection radio button to "YAML view".
In the presented text entry field, delete the provided YAML skeleton entirely.
Paste the copied ConfigMap YAML into the empty text field, then click Create to commit the rhdh-config ConfigMap.

apiVersion: v1
kind: ConfigMap
metadata:
  name: rhdh-config
  namespace: brand-rhdh
data:
  app-config.yaml: |
    app:
      baseUrl: https://backstage-rhdh-brand-rhdh.{openshift_cluster_ingress_domain}
      title: "Project Ideal X - Developer Hub"
      branding:
        fullLogo: data:image/png;base64,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
    # Enable guest sign-in WITHOUT AUTHENTICATION.
    # This configuration is UNSAFE and suitable for TESTING ONLY.
    auth:
      providers:
        guest:
          dangerouslyAllowOutsideDevelopment: true
    backend:
      baseUrl: https://backstage-rhdh-brand-rhdh.{openshift_cluster_ingress_domain}
      cors:
        origin: https://backstage-rhdh-brand-rhdh.{openshift_cluster_ingress_domain}

Alternatively, you can also create new ConfigMap resources (like the rhdh-config ConfigMap from above) using the oc command line utility.

Do not perform these steps if you’ve already created the rhdh-config ConfigMap in the OpenShift Web Console.

This requires:

the OpenShift oc(1) command line tool
the same credentials you used to log in to the OpenShift Web Console

The OpenShift Web Terminal provides these requirements. Click the >_ icon near the top right of the OpenShift Web Console to open the Web Terminal.

In the shell session below, cat(1) creates and opens a new file, app-config.yaml, then waits for input. You can paste in your ConfigMap YAML, then type CTRL-D to signal the end of the file. Cat writes the file, closes it, and exits. Then oc(1) uses app-config.yaml as the definition of a new ConfigMap.

% cat > app-config.yaml
# Paste ConfigMap YAML here
^D
% ls
app-config.yaml
% oc create configmap rhdh-config --from-file=app-config.yaml --namespace=brand-rhdh
configmap/rhdh-config created

Declare a Backstage Instance

You’ve stored a custom Red Hat Developer Hub configuration in your rhdh-config ConfigMap, where your instance will be able to find it. Now it’s time to inform the Red Hat Developer Hub Operator so it will deploy and maintain the set of RHDH components in your Project on the OpenShift cluster. To do that, you’ll create a Backstage Custom Resource — a particular kind of Resource defined in the cluster’s API to represent an instance of Red Hat Developer Hub. The key part of your Custom Resource is naming the ConfigMap that should be consulted for Red Hat Developer Hub configuration. You can see your rhdh-config ConfigMap named in the configMaps list beneath application.appConfig:

apiVersion: rhdh.redhat.com/v1alpha3
kind: Backstage
metadata:
  name: rhdh
  namespace: brand-rhdh
spec:
  application:
    appConfig:
      mountPath: /opt/app-root/src
      # This instructs the operator to mount the ConfigMap
      # that you created into the Backstage Pods
      configMaps:
        - name: rhdh-config (1)
    route:
      enabled: true
  database:
    enableLocalDb: true

The name of the ConfigMap that contains the Red Hat Developer Hub configuration

Copy this Custom Resource YAML to your computer’s clipboard.
In the OpenShift Web Console, Administrator perspective, click the plus icon ("+") near the top right to expand its menu, then click Import YAML.
Paste the Backstage Custom Resource YAML from your clipboard into the presented text field. Click Create to apply the Resource on the cluster.
The Red Hat Developer Hub Operator will respond by creating and managing the pods and components for an RHDH instance, according to the configuration it finds in your rhdh-config ConfigMap.
Navigate to Workloads > Pods in the OpenShift Web Console (making sure you’ve selected the brand-rhdh project in the project selector) and watch the database pod (a PostgreSQL pod) and the Backstage pod starting. Wait for both to be marked as "Running" and "Ready".

Visit your Red Hat Developer Hub Instance

Now that you’ve created the Backstage custom resource, and the pods are up and running, you can access your Red Hat Developer Hub deployment using the Route established by the RHDH Operator:

Select Networking > Routes from the OpenShift Web Console’s left navigation.
Confirm that your brand-rhdh project is selected in the project selector.
Click the URL in the Location column on the Routes view. You should be presented with the Red Hat Developer Hub sign-in dialog.

If Application is not available is displayed when you click the Location, wait another 1-2 minutes. It can take some time for the pod readiness check to pass after a pod restart.
Select Guest to log in with just enough privilege to see the results of your title and logo customizations. The custom logo appears in the top left corner of the page. The custom title appears in the label of your browser tab or window.

How to make the encoded image

This lab provides an encoded image in the ConfigMap YAML. These steps are informational and not required to complete the module.

You can produce an encoded image string in the format Red Hat Developer Hub expects by doing something like the following on your local *nix system:

% ls
logo.png # Your logo image
% PNGLOGOB64=$(base64 -i logo.png) # Var holds image in base64
% B64_FULL_LOGO="data:image/png;base64,$PNGLOGOB64" # Catenate type spec with encoded image
% echo $B64_FULL_LOGO # Echo result to terminal
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAI8AAAA7CAYAAABCONnwAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A[...]
% echo $B64_FULL_LOGO > logo.b64 # Write result to file

Once you’ve catenated the image specification with the encoded image data, copy the result from your terminal, or echo(1) it out to a file and open the file in a program that makes copying easier. Use the string to replace the provided image data in your rhdh-config ConfigMap.

Red Hat Developer Hub works best with source icon images in the scalable SVG format. It also supports PNG and JPEG icon images. This exercise uses a PNG source image for simplicity while retaining an alpha channel to look acceptable against the gray background.

If your source logo image is in the (more desirable) SVG format, specify data:image/svg+xml;base64 in your B64_FULL_LOGO variable. For a jpeg, specify data:image/jpeg;base64.