Chapter 4. Customizing the Home page in Red Hat Developer Hub To access the Home page in Red Hat Developer Hub, the base URL must include the /developer-hub proxy. You can configure the Home page by passing the data into the app-config.yaml file as a proxy. You can provide data to the Home page from the following sources: JSON files hosted on GitHub or GitLab. A dedicated service that provides the Home page data in JSON format using an API. 4.1. Using hosted JSON files to provide data to the Learning Paths Prerequisites You have installed Red Hat Developer Hub by using either the Operator or Helm chart. For more information, see Installing Red Hat Developer Hub on OpenShift Container Platform . Procedure To access the data from the JSON files, complete the following step: Add the following code to the app-config.yaml file: proxy: endpoints: # Other Proxies # customize developer hub instance '/developer-hub': target: <DOMAIN_URL> # i.e https://raw.githubusercontent.com/ pathRewrite: '^/api/proxy/developer-hub': <path to json file> # i.e /janus-idp/backstage-showcase/main/packages/app/public/homepage/data.json changeOrigin: true secure: true # Change to "false" in case of using self hosted cluster with a self-signed certificate headers: <HEADER_KEY>: <HEADER_VALUE> # optional and can be passed as needed i.e Authorization can be passed for private GitHub repo and PRIVATE-TOKEN can be passed for private GitLab repo 4.2. Using a dedicated service to provide data to the Learning Paths When using a dedicated service, you can do the following: Use the same service to provide the data to all configurable Developer Hub pages or use a different service for each page. Use the red-hat-developer-hub-customization-provider as an example service, which provides data for both the Home and Tech Radar pages. The red-hat-developer-hub-customization-provider service provides the same data as default Developer Hub data. You can fork the red-hat-developer-hub-customization-provider service repository from GitHub and modify it with your own data, if required. Deploy the red-hat-developer-hub-customization-provider service and the Developer Hub Helm chart on the same cluster. Prerequisites You have installed the Red Hat Developer Hub using Helm Chart. For more information, see Installing Red Hat Developer Hub on OpenShift Container Platform with the Helm chart . Procedure To use a separate service to provide the Home page data, complete the following steps: From the Developer perspective in the Red Hat OpenShift Container Platform web console, click +Add > Import from Git . Enter the URL of your Git repository into the Git Repo URL field. To use the red-hat-developer-hub-customization-provider service, add the URL for the red-hat-developer-hub-customization-provider repository or your fork of the repository containing your customizations. On the General tab, enter red-hat-developer-hub-customization-provider in the Name field and click Create . On the Advanced Options tab, copy the value from the Target Port . Note The Target Port automatically generates a Kubernetes or OpenShift Container Platform service to communicate with. Add the following code to the app-config-rhdh.yaml file: proxy: endpoints: # Other Proxies # customize developer hub instance '/developer-hub': target: USD{HOMEPAGE_DATA_URL} changeOrigin: true # Change to "false" in case of using self-hosted cluster with a self-signed certificate secure: true where HOMEPAGE_DATA_URL is defined as http://<SERVICE_NAME>:8080 , for example, http://rhdh-customization-provider:8080 . Note The red-hat-developer-hub-customization-provider service contains the 8080 port by default. If you are using a custom port, you can specify it with the 'PORT' environmental variable in the app-config-rhdh.yaml file. Replace the HOMEPAGE_DATA_URL by adding the URL to rhdh-secrets or by directly replacing it in your custom ConfigMap. Delete the Developer Hub pod to ensure that the new configurations are loaded correctly. Verification To view the service, navigate to the Administrator perspective in the OpenShift Container Platform web console and click Networking > Service . Note You can also view the Service Resources in the Topology view. Ensure that the provided API URL for the Home page returns 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" } ] } ] Note If the request call fails or is not configured, the Developer Hub instance falls back to the default local data. If the images or icons do not load, then allowlist 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

Commands:
proxy: endpoints: # Other Proxies # customize developer hub instance '/developer-hub': target: <DOMAIN_URL> # i.e https://raw.githubusercontent.com/ pathRewrite: '^/api/proxy/developer-hub': <path to json file> # i.e /janus-idp/backstage-showcase/main/packages/app/public/homepage/data.json changeOrigin: true secure: true # Change to "false" in case of using self hosted cluster with a self-signed certificate headers: <HEADER_KEY>: <HEADER_VALUE> # optional and can be passed as needed i.e Authorization can be passed for private GitHub repo and PRIVATE-TOKEN can be passed for private GitLab repo
proxy: endpoints: # Other Proxies # customize developer hub instance '/developer-hub': target: USD{HOMEPAGE_DATA_URL} changeOrigin: true # Change to "false" in case of using self-hosted cluster with a self-signed certificate secure: true
[ { "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" } ] } ]
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