Skip to content

Portal customization

This tutorial explains how to create and deploy a custom API Portal.


Follow this tutorial and, you’ll learn how to develop and deploy a custom API Portal.

It is assumed that you have a basic understanding of JavaScript, TypeScript and React.

In this tutorial, you'll use Docker Hub as Container Image Library.

Before you begin

Read the Portal customization overview documentation.

Before getting started, make sure you have the following requirements:

Theme development


1. Cloning the template repository

Clone the starter template repository from GitHub:

git clone

Change into the cloned repository:

cd hub-apiportal-ui

It includes a set of HTML, CSS, and JavaScript files that you can customize to match your branding and requirements.

├── Dockerfile
├── Makefile
├── manifest.yaml
├── package.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── mockServiceWorker.js
│   └── robots.txt
├── src
│   ├── App.tsx
│   ├── components
│   ├── context
│   ├── hooks
│   ├── index.tsx
│   ├── mocks
│   ├── pages
│   └── utils
├── tsconfig.json
├── types
│   └── settings.d.ts
└── yarn.lock

2. Development

Install all dependencies:

yarn install

Run the development server:

yarn start

Open the app in your browser running at http://localhost:3000.

The local setup uses a Service Worker to intercept HTTP calls and inject a mocked reply. This allows you to test the application with mocked data and simulate different scenarios without relying on external APIs or services.

The Service Worker is only active in development mode.

3. Testing

Run unit tests:

yarn test

4. Building the Docker image

Once you're satisfied, and you're ready, it is time to build the Docker container:

make image

This will build a Docker container with the name hub-portal-ui.

After the container is created, upload it to Docker Hub.

5. Deploying

In this step, you will expose the deployment of the hub-portal-ui container.

Use kubectl to deploy the container:

kubectl apply -f manifest.yaml

Now update your APIPortal CRD and configure the spec.ui.service to use the custom API Portal:

kind: APIPortal
  name: my-api-portal
  title: "The Portal"
  description: "The Ultimate Portal NG Digital Deluxe Edition"
  apiGateway: my-gateway
    - ""
      name: hub-apiportal-ui
      namespace: default
        number: 80

Use kubectl to redeploy the CRD again:

kubectl apply -f api-portal.yaml


In this tutorial, you learned how to customize and deploy an API Portal.