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:
Configure your self-hosted domains in Konnect
- In Konnect, click Dev Portal > Settings in the sidebar.
- Click the Portal Domain tab.
- Enter a name for your custom portal domain API in the Custom Hosted Domain field. For example,
- Enter a name for your custom portal client domain in the Custom Self-Hosted UI Domain field. For example,
- 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
- In GitHub, fork the open source Dev Portal application example.
- In the forked repository, create a new branch that you will use to deploy your Dev Portal. For example,
Upstream changes from
kong/konnect-portal are merged into
main and then finally merged into
prod to trigger a deploy.
- On the
prod branch, create a new
from = "/*"
to = "/index.html"
status = 200
force = false
This is necessary for a single page application.
- Push changes to the
- In Netlify, on the Team Overview dashboard, click Add new site, then select Import an existing project.
- Click GitHub for your Git provider.
- 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
- In Netlify, select the Dev Portal repository you just forked.
- Select prod from the Branch to deploy drop-down menu.
- Click Show advanced.
- In the Environment variables section, click New variable.
VITE_PORTAL_API_URL in the Key field and your custom portal domain API (
api.mycompany.com) in the Value field.
- Click Deploy site.
Add your domain to Netlify
- In Netlify, click Domain settings, then Add a domain.
- Enter your custom portal client domain in the Custom domain or subdomain field, then click Verify.
- Click Domains in the sidebar, then select your domain.
Configure the name servers in your domain registrar.
Once your name servers are propogated (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.
About Self-Hosted Dev Portal - Learn more about how the self-hosted Dev Portal works and why you should use it.