Portal customization

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

Introduction¶

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¶

• Docker installed
• A Docker Hub account
• Node.js (at least Node 18) installed
• Yarn Classic installed
• Git installed

Deployment¶

• An account registered on the Traefik Hub platform
• The Traefik Hub agent installed and running
• A Kubernetes cluster
• kubectl installed and configured

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.

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.