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