Chapter 4. Customizing the Home page in Red Hat Developer Hub

Procedure

1. In Red Hat OpenShift, select +Add and click Import from Git option.

2. Add the URL of your Git repository to the Git Repo URL field.

   To use the red-hat-developer-hub-customization-provider service, you can add the URL of red-hat-developer-hub-customization-provider repository.

3. In the General section, rename the value in the Name field to rhdh-customization-provider and click Create.

4. Go to the Advanced Options and copy the value from the Target Port.

   The Target Port is used to automatically generate a Kubernetes or OpenShift service to communicate with.

5. To view the service, navigate to the OpenShift Administrator view and go to the Networking Service section.

   You can also view the Service Resources in the Topology view.

   If you follow this procedure with examples, then rhdh-customization-provider service is called and contains the 8080 port. The provided API URL for the Home page must return the data in JSON format as shown in the following example:

   [
     {
       "title": "Dropdown 1",
       "isExpanded": false,
       "links": [
         {
           "iconUrl": "https://imagehost.com/image.png",
           "label": "Dropdown 1 Item 1",
           "url": "https://example.com/"
         },
         {
           "iconUrl": "https://imagehost2.org/icon.png",
           "label": "Dropdown 1 Item 2",
           "url": ""
         }
       ]
     },
     {
       "title": "Dropdown 2",
       "isExpanded": true,
       "links": [
         {
           "iconUrl": "http://imagehost3.edu/img.jpg",
           "label": "Dropdown 2 Item 1",
           "url": "http://example.com"
         }
       ]
     }
   ]

   If the request call fails or is not configured, the Developer Hub instance falls back to the default local data.

   To access the Home page in Red Hat Developer Hub, the base URL must include the /developer-hub proxy.

6. Add the following code to the app-config-rhdh.yaml file:

   proxy:
     endpoints:
       # Other Proxies
       # customize developer hub instance
       '/developer-hub':
         target: ${HOMEPAGE_DATA_URL}
         changeOrigin: true
         # Change to "false" in case of using self-hosted cluster with a self-signed certificate
         secure: true

   Ensure that the API request call returns the response in JSON format.

7. Define the HOMEPAGE_DATA_URL as http://<SERVICE_NAME>:8080. For example, `http://rhdh-customization-provider:8080.

   You can replace the HOMEPAGE_DATA_URL by adding the URL to rhdh-secrets or directly replacing it in your custom ConfigMap.

8. Delete the Developer Hub Pod to pull in the changes.

   If the images or icons do not load, then whitelist them by adding your image or icon host URLs to the content security policy’s (csp) img-src in your custom ConfigMap as follows:

   kind: ConfigMap
   apiVersion: v1
   metadata:
     name: app-config-rhdh
   data:
     app-config-rhdh.yaml: |
       app:
         title: Red Hat Developer Hub
       backend:
         csp:
           connect-src:
             - "'self'"
             - 'http:'
             - 'https:'
           img-src:
             - "'self'"
             - 'data:'
             - <image host url 1>
             - <image host url 2>
             - <image host url 3>
       # Other Configurations

   After that, delete the pod to ensure that the new configurations are loaded correctly.