Skip to content
Kong Docs are moving soon! Our docs are migrating to a new home. You'll be automatically redirected to the new site in the future. In the meantime, view this page on the new site!
Kong Logo | Kong Docs Logo
  • Docs
    • Explore the API Specs
      View all API Specs View all API Specs View all API Specs arrow image
    • Documentation
      API Specs
      Kong Gateway
      Lightweight, fast, and flexible cloud-native API gateway
      Kong Konnect
      Single platform for SaaS end-to-end connectivity
      Kong AI Gateway
      Multi-LLM AI Gateway for GenAI infrastructure
      Kong Mesh
      Enterprise service mesh based on Kuma and Envoy
      decK
      Helps manage Kong’s configuration in a declarative fashion
      Kong Ingress Controller
      Works inside a Kubernetes cluster and configures Kong to proxy traffic
      Kong Gateway Operator
      Manage your Kong deployments on Kubernetes using YAML Manifests
      Insomnia
      Collaborative API development platform
  • Plugin Hub
    • Explore the Plugin Hub
      View all plugins View all plugins View all plugins arrow image
    • Functionality View all View all arrow image
      View all plugins
      AI's icon
      AI
      Govern, secure, and control AI traffic with multi-LLM AI Gateway plugins
      Authentication's icon
      Authentication
      Protect your services with an authentication layer
      Security's icon
      Security
      Protect your services with additional security layer
      Traffic Control's icon
      Traffic Control
      Manage, throttle and restrict inbound and outbound API traffic
      Serverless's icon
      Serverless
      Invoke serverless functions in combination with other plugins
      Analytics & Monitoring's icon
      Analytics & Monitoring
      Visualize, inspect and monitor APIs and microservices traffic
      Transformations's icon
      Transformations
      Transform request and responses on the fly on Kong
      Logging's icon
      Logging
      Log request and response data using the best transport for your infrastructure
  • Support
  • Community
  • Kong Academy
Get a Demo Start Free Trial
Kong Konnect
  • Home icon
  • Kong Konnect
  • Dev Portal
  • Customization
  • Host your Dev Portal with Netlify
github-edit-pageEdit this page
report-issueReport an issue
  • Kong Gateway
  • Kong Konnect
  • Kong Mesh
  • Kong AI Gateway
  • Plugin Hub
  • decK
  • Kong Ingress Controller
  • Kong Gateway Operator
  • Insomnia
  • Kuma

  • Docs contribution guidelines
  • Introduction
    • Overview of Konnect
    • Architecture
    • Network Resiliency and Availability
    • Port and Network Requirements
    • Private Connections to Other Cloud Providers
      • Create a private connection with AWS PrivateLink
    • Geographic Regions
    • Centralized consumer management
    • Compatibility
    • Stages of Software Availability
    • Release Notes
    • Support
      • Control Plane Upgrades FAQ
      • Supported Installation Options
  • Get Started
    • Overview
    • Add your API
    • Migrating a Self-Managed Kong Gateway into Konnect
  • Gateway Manager
    • Overview
    • Dedicated Cloud Gateways
      • Overview
      • Provision a Dedicated Cloud Gateway
      • Securing Backend Traffic
      • Transit Gateways
      • Azure VNET Peering
      • Custom Domains
      • Custom Plugins
      • Data plane logs
    • Serverless Gateways
      • Overview
      • Provision a serverless Gateway
      • Securing Backend Traffic
      • Custom Domains
    • Data Plane Nodes
      • Installation Options
      • Upgrade a Data Plane Node
      • Verify a Data Plane Node
      • Secure Control Plane/Data Plane Communications
      • Renew Data Plane Certificates
      • Parameter Reference
      • Using Custom DP Labels
    • Control Plane Groups
      • Overview
      • Working with Control Plane Groups
      • Migrate Configuration into Control Plane Groups
      • Conflicts in Control Planes
    • Kong Gateway Configuration in Konnect
      • Overview
      • Manage Plugins
        • Overview
        • Adding Custom Plugins
        • Updating Custom Plugins
        • How to Create Custom Plugins
      • Create Consumer Groups
      • Secrets Management
        • Overview
        • Konnect Config Store
        • Set Up and Use a Vault in Konnect
      • Manage Control Plane Configuration with decK
    • Active Tracing
      • Overview
    • KIC Association
    • Backup and Restore
    • Version Compatibility
    • Troubleshooting
  • Mesh Manager
    • Overview
    • Create a mesh with the Kubernetes demo app
    • Federate a zone control plane to Konnect
    • Migrate a self-managed zone control plane to Konnect
  • Service Catalog
    • Overview
    • Integrations
      • Overview
      • Datadog
      • GitHub
      • GitLab
      • PagerDuty
      • SwaggerHub
      • Traceable
      • Slack
    • Scorecards
  • API Products
    • Overview
    • Product Documentation
    • Productize a Service
  • Dev Portal
    • Overview
    • Dev Portal Configuration Preparation
    • Create a Dev Portal
    • Sign Up for a Dev Portal Account
    • Publish an API to Dev Portal
    • Access and Approval
      • Manage Developer Access
      • Manage Developer Team Access
      • Add Developer Teams from IdPs
      • Manage Application Registrations
      • Configure generic SSO for Dev Portal
      • Configure Okta SSO for Dev Portal
    • Application Lifecycle
    • Register and create an application as a developer
    • Enable and Disable App Registration for API Product Versions
    • Dynamic Client Registration
      • Overview
      • Okta
      • Curity
      • Auth0
      • Azure
      • Custom IdP
    • Portal Management API Automation Guide
    • Audit Logging
      • Overview
      • Set up an Audit Log Webhook
      • Set up an Audit Log Replay Job
    • Portal Customization
      • Overview
      • About Self-Hosted Dev Portal
      • Host your Dev Portal with Netlify
      • Custom Domains
    • Dev Portal SDK
    • Troubleshoot
  • Advanced Analytics
    • Overview
    • Dashboard
    • Explorer
    • Analyze API Usage and Performance with Reports
    • Requests
  • Org Management
    • Plans and Billing
    • Authentication and Authorization
      • Overview
      • Teams
        • Overview
        • Manage Teams
        • Teams Reference
        • Roles Reference
      • Manage Users
      • Manage System Accounts
      • Personal Access Tokens
      • Social Identity Login
      • Org Switcher
      • Configure Generic SSO
      • Configure Okta SSO
      • Login Sessions Reference
      • Troubleshoot
    • Audit Logging
      • Overview
      • Set up an Audit Log Webhook
      • Set up an Audit Log Replay Job
    • Account and Org Deactivation
  • API
    • Overview
    • API Request API (Beta)
      • API Spec
    • API Products API
      • API Spec
    • Audit Logs API
      • API Spec
      • Audit Log Webhooks
    • Control Plane API
      • API Spec
    • Control Plane Configuration API
      • API Spec
    • Cloud Gateways API
      • API Spec
    • Identity API
      • API Spec
      • Identity Integration Guide
      • SSO Customization
    • Konnect Search API (Beta)
      • API Spec
    • Mesh Manager API
      • API Spec
      • Kong Mesh API Reference
    • Portal Client API
      • API Spec
    • Portal Management API
      • API Spec
    • Reference
      • Filtering
      • API Errors
  • Reference
    • Labels
    • Plugin Ordering Reference
    • Konnect Search
    • Terraform Provider
    • Audit Logs
    • Verify audit log signatures
    • IdP SAML attribute mapping
enterprise-switcher-icon Switch to OSS
On this pageOn this page
  • Prerequisites
  • Configure your self-hosted domains in Konnect
  • Deploy your self-hosted Dev Portal with Netlify
    • Fork and configure the GitHub repository
    • Configure deployment settings in Netlify
    • Add your domain to Netlify
  • Customize the example open source Dev Portal
  • More information
Looking for the new Developer Portal beta docs? Try the beta now.

Host your Dev Portal with Netlify

You can use the self-hosted, open source Dev Portal to offer a fully-customizable user experience for your developers.

This guide shows you how to configure an example open-source Dev Portal with Netlify. Using this example as a starting point, you can adjust the code of the sample app and self-host it on a frontend application of your choice.

The example application is pre-configured with the following:

  • All features in the Konnect-hosted Dev Portal
  • Localization is set to English by default. You can configure it using src/locales.
  • UI test automation through Cypress

Prerequisites

  • A Kong Konnect account
  • Yarn 1.22.x installed
  • A Netlify account

Configure your self-hosted domains in Konnect

  1. In Konnect, click dev-portal icon Dev Portal > Settings in the sidebar.
  2. Click the Portal Domain tab.
  3. Enter a name for your custom portal domain API in the Custom Hosted Domain field. For example, api.mycompany.com.
  4. Enter a name for your custom portal client domain in the Custom Self-Hosted UI Domain field. For example, client.mycompany.com.
  5. Add a CNAME record to your domain’s DNS records that points the custom API domain to the default portal domain. For example:
     api.mycompany.com   CNAME   3600    portal29asdfj278.us.portal.konghq.com
    

Now the self-hosted Dev Portal is enabled and the Konnect-hosted Dev Portal is disabled. The custom portal domain API you specified will be used as the API domain of your portal and the custom portal client domain will be used to access the UI of your self-hosted portal.

Deploy your self-hosted Dev Portal with Netlify

You will deploy the self-hosted example Dev Portal using Netlify in this example, but you can use any hosting provider to host the Dev Portal.

Fork and configure the GitHub repository

  1. In GitHub, fork the open source Dev Portal application example.
  2. In the forked repository, create a new branch that you will use to deploy your Dev Portal. For example, prod. Upstream changes from kong/konnect-portal are merged into main and then finally merged into prod to trigger a deploy.
  3. On the prod branch, create a new netlify.toml file:
     [[redirects]]
       from = "/*"
       to = "/index.html"
       status = 200
       force = false
    

    This is necessary for a single page application.

  4. Push changes to the prod branch.
  5. In Netlify, on the Team Overview dashboard, click Add new site, then select Import an existing project.
  6. Click GitHub for your Git provider.
  7. Grant Netlify access to GitHub, then click Configure Netlify on Github. When prompted, install Netlify on your GitHub account with the example Dev Portal repository.

Configure deployment settings in Netlify

  1. In Netlify, select the Dev Portal repository you just forked.
  2. Select prod from the Branch to deploy drop-down menu.
  3. Click Show advanced.
  4. In the Environment variables section, click New variable.
  5. Enter VITE_PORTAL_API_URL in the Key field and your custom portal domain API (https://api.mycompany.com) in the Value field.
  6. Click Deploy site.

Add your domain to Netlify

  1. In Netlify, click Domain settings, then Add a domain.
  2. Enter your custom portal client domain in the Custom domain or subdomain field, then click Verify.
  3. Click Domains in the sidebar, then select your domain.
  4. Configure the name servers in your domain registrar.

Once your name servers are propagated (this may take a few minutes), your Dev Portal will be deployed by Netlify.

Customize the example open source Dev Portal

If you want to further customize the example self-hosted Dev Portal, you can edit the settings in your forked copy of the open source Konnect Dev Portal repository. For more information, see the Konnect Portal repository.

You can also customize your Dev Portal using the Portal API and Portal SDK.

More information

About Self-Hosted Dev Portal - Learn more about how the self-hosted Dev Portal works and why you should use it.

Thank you for your feedback.
Was this page useful?
Too much on your plate? close cta icon
More features, less infrastructure with Kong Konnect. 1M requests per month for free.
Try it for Free
  • Kong
    Powering the API world

    Increase developer productivity, security, and performance at scale with the unified platform for API management, service mesh, and ingress controller.

    • Products
      • Kong Konnect
      • Kong Gateway Enterprise
      • Kong Gateway
      • Kong Mesh
      • Kong Ingress Controller
      • Kong Insomnia
      • Product Updates
      • Get Started
    • Documentation
      • Kong Konnect Docs
      • Kong Gateway Docs
      • Kong Mesh Docs
      • Kong Insomnia Docs
      • Kong Konnect Plugin Hub
    • Open Source
      • Kong Gateway
      • Kuma
      • Insomnia
      • Kong Community
    • Company
      • About Kong
      • Customers
      • Careers
      • Press
      • Events
      • Contact
  • Terms• Privacy• Trust and Compliance
© Kong Inc. 2025