Skip to content

Portal Customization

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

Deployment


1. Cloning the template repository

Clone the starter template repository from GitHub:

git clone https://github.com/traefik/hub-apiportal-ui.git

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
├── README.md
├── 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:

---
apiVersion: hub.traefik.io/v1alpha1
kind: APIPortal
metadata:
  name: my-api-portal
spec:
  title: "The Portal"
  description: "The Ultimate Portal NG Digital Deluxe Edition"
  apiGateway: my-gateway
  customDomains:
    - "dev.example.com"
  ui:
    service:
      name: hub-apiportal-ui
      namespace: default
      port:
        number: 80

Use kubectl to redeploy the CRD again:

kubectl apply -f api-portal.yaml

Summary

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