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¶
- 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.
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.